Standardizing Digital Banking for Everyone — Hackcache
Design one simple savings account app that anyone, from a first-time account holder to a grandparent, can use to check, send and track their money safely.
- Track: Banking & Finance
Problem Statement 3: Standardizing Digital Banking for Everyone
The Challenge
Digital banking apps often differ significantly in their layouts, navigation, terminology, and workflows. A feature as basic as checking an account balance, viewing transactions, transferring money, or downloading a statement can work differently across banks, making digital banking difficult for people who are unfamiliar with technology.
Children and young adults opening their first savings accounts, working professionals, parents managing household finances, and elderly users may all struggle with confusing interfaces, complex banking terminology, and unclear transaction flows.
Your challenge is to design a standardized, intuitive, and accessible digital savings account experience that allows people of different ages, backgrounds, and levels of digital literacy to use essential banking services confidently through a bank’s mobile application.
The goal is to make everyday banking easier to understand and safer to use, without compromising essential security measures or access to important banking features.
Possible Areas to Explore
Standardized User Interface: Create a consistent layout and navigation system for essential savings account services, regardless of the bank.
Account Overview: Make account balance, available balance, recent transactions, and account details easy to find and understand.
Money Transfers & Payments: Simplify transfers, beneficiary management, UPI payments, and other common transactions with clear instructions and confirmations.
Statements & Account Services: Make downloading statements, viewing transaction history, managing account details, and accessing service requests straightforward.
Inclusive Design: Support children and first-time users, parents, working adults, and elderly customers through age-appropriate guidance, readable interfaces, and simplified workflows.
Native Language Support: Provide regional language options, simple terminology, voice guidance, and text-to-speech for users who find English difficult.
Accessibility Features: Consider screen readers, adjustable text sizes, high contrast, clear touch targets, and alternatives to complex navigation.
Security & Fraud Prevention: Use clear transaction confirmations, scam warnings, secure authentication, and understandable explanations of sensitive actions.
Financial Awareness: Help users understand transaction descriptions, fees, balances, and basic savings account concepts without overwhelming them.
Expected Outcome
Build a working prototype of a standardized digital savings account interface that demonstrates how users can perform essential banking tasks easily, regardless of their age, technical knowledge, or preferred language.
Your solution should show how a consistent design can reduce confusion, improve accessibility, and help users complete everyday banking activities confidently.
Important
You are not required to build a real banking application or integrate with a bank’s systems. You may use simulated account balances and transaction data. Do not collect real banking credentials, PINs, OTPs, card details, or sensitive financial information. Any child-focused experience should respect appropriate privacy and guardian-consent requirements.
Evaluation Focus
Ease of use, consistency of navigation, accessibility, language support, security awareness, completeness of essential banking features, technical execution, and real-world usefulness.
Build it with AI
- Build 1 · The whole prototype: Build a working web app prototype for a hackathon. Build the whole thing, not a plan: every screen below should work when I open it. OUR CHOICES (change these, or leave them as they are) - App name: Saral Banking - Main user we design for first: Shankar, 68 (see the sample customers below) - Part of banking we go deepest on: sending money safely THE PROBLEM Every bank's app puts the balance, payments, history and statements in different places, uses different words, and confirms things in different ways. People who aren't confident with technology get lost or make mistakes, and scammers take advantage of that. This app is a standard savings account experience that any bank could adopt: the same layout, the same words and the same confirmation steps everywhere, easy for a teenager opening a first account, a busy working adult and an elderly customer alike. It does not connect to any real bank. Every account, balance and transaction is made up. NEVER COLLECT REAL DETAILS (this is not optional) - The sign-in screen shows the demo details to use (PIN 1234, OTP 123456) and says it's a prototype. Never ask for a real account number, card number, PIN, OTP o…
- Build 2 · Finish what's missing: Go through the app you built and check it against this list. For each item, say whether it is done, partly done or missing. Then build everything that is partly done or missing, one item at a time, and keep everything that already works exactly as it is. - No real details anywhere: demo PIN and OTP shown on sign-in, PIN stored hashed, account numbers masked, no tracking scripts - The Standard: five bottom tabs on every screen, the same places for the same things, plain words with a tap-to-explain glossary, fill in, review, PIN, then a receipt for everything that moves money or changes a setting - Bank switcher with three made-up banks that changes only colours and logo, and "The Standard" screen in Help - Three sample customers, and Standard, Simple and Young saver modes with the same layout - Young saver: guardian consent at setup, savings goals, a daily limit, over-limit payments sent to the guardian, Guardian view - Home: hidden balance with Show, available and total balance explained, last 5 transactions in plain words, account details with Copy and Share - Pay: UPI ID, mobile, account and IFSC, saved payee, QR scan where supported, name check…
- Add-on · Voice control: Add voice control for people who find typing or reading hard. - Add a microphone button on Home and Pay, where the browser supports speech recognition in English and Hindi. It understands "check my balance", "show my last payments", "send 500 rupees to Ramesh", "download last month's statement", "block my card", and the same in Hindi. - Voice can fill in a form but never finish one: every payment still shows the review screen and needs the PIN typed or the fingerprint. Never accept a PIN or OTP spoken aloud, and say so if someone tries. - Read back what was understood before acting ("Send ₹500 to Ramesh Kumar?"). If it didn't understand, offer two or three suggestions. - Hide the microphone where the browser doesn't support it. - Then give me 10 phrases to test it with: 5 in English and 5 in Hindi.
- Add-on · Real AI answers in Help: Replace the keyword-matching help chat with real AI answers, using [your AI provider, e.g. Gemini, OpenAI or Claude]. - Never put the API key in the frontend. Add a small server endpoint (a serverless function at /api/chat if we deploy to Vercel or Netlify, otherwise a tiny Express server) that reads the key from an environment variable. Put the variable name in a .env.example file and tell me where to put my key. - Give the AI a system prompt: - It explains banking in plain words to a savings account customer in India. - It replies in the language the user writes in, in short sentences. - It uses glossary.js, faq.js, scams.js and config.js (send them with the prompt). - It can explain any transaction the user taps "Ask about this" on. Send only the plain and raw descriptions, never the account number. - It cannot move money or change settings, and it says where in the app to do those things. - It never asks for or accepts a PIN, OTP, password, card number or account number. If a user types one, it tells them not to share it and doesn't repeat it back. - It says when it isn't sure, and suggests calling the bank. - Before a message is sent to the s…
- Add-on · Another language: Add [Tamil] to the app as a third language. - Translate every string in src/i18n, the glossary, the transaction explanations, the lessons, the scam guide and the help answers. Use simple everyday words rather than formal banking terms, and keep terms people see on bank messages (UPI, IFSC, OTP) as they are, in brackets. - Read amounts out the Indian way in the new language too (lakh, crore). - Show each language's name in its own script in the language picker. - Make sure no screen still shows English when the new language is picked, and that longer words don't break any layout at 360px wide or in Simple mode. - Make Read aloud use a voice for that language if the browser has one, and hide it for that language if it doesn't.
- Submit · README, link and demo: Get this ready to submit to the hackathon. 1. Write a README.md covering: - the problem in two lines, and who the app is for - "The Standard" rules and why each one exists - what the app does, one line per screen - how it keeps people safe (the safety checks, payment requests, no real details collected) - how the three modes work, and how guardian consent works - how it improves on banking apps today - how to run it, what is simulated, and what we'd build next 2. Tell me step by step how to put it online on Vercel or Netlify from a GitHub repo, so the judges can open a link. Include the setting that stops a page refresh from showing a 404. 3. Write a 3-minute demo script for judges who score ease of use, consistency of navigation, accessibility, language support, security awareness, completeness of essential banking features, technical execution and real-world usefulness. Show: - switching between the three banks while nothing moves - Shankar in Simple mode in Hindi sending money through the safety check - a payment-request scam being stopped - Aarav's over-limit payment approved by Meena - a statement download Include one sentence for each part on…
- Debug · An error message: I'm getting this error: [paste the full error message from the terminal or the browser console] It happens when: [what you did, e.g. pressed Confirm on a payment, ran npm run dev] The file it points to: [paste the file, or the part the error names] Explain in two lines what is causing it. Then fix only that: give me the corrected code for each file that changes, with its file name, and don't change anything unrelated. Tell me how to check it's fixed.
- Debug · Blank white screen: The app shows a blank white screen. The browser console (right-click the page, Inspect, Console) shows: [paste any red text, or write "nothing"] The terminal shows: [paste it] What I changed last: [describe it] Find the cause step by step: the console error first, then the entry files (main.jsx and App.jsx), the routes, any import that might be wrong, and saved data in localStorage that no longer matches what the code expects (and make Reset demo clear it). Fix the cause, not the symptom. Also add a simple error screen, so a crash in one screen shows a message instead of a blank page.
- Debug · A feature isn't working right: [The screen or feature, e.g. the new-payee limit] isn't working properly. What I expected: [e.g. a second ₹8,000 payment to a payee added today is stopped] What happens instead: [e.g. it goes through] Steps to make it happen: [1, 2, 3] Read the code for this feature and work out why it behaves this way before changing anything. Explain the cause in plain words, then fix it with the smallest change that works. Check the fix against the values in src/data/config.js and tell me exactly how to test it.
- Debug · The money doesn't add up: The amounts are wrong: [e.g. the balance shows ₹4,999.99 instead of ₹5,000 / the balance doesn't change after a payment / it shows ₹100000 instead of ₹1,00,000]. Check these one by one: - Every amount is stored as whole paise (integers), never decimals, including the sample data, and typed rupees are converted to paise exactly once, when they are entered. - The balance is worked out by one function (opening balance plus every transaction) that every screen uses, not stored separately in several places. - A payment is saved only once, even if Confirm is pressed twice. - Every amount on screen is formatted with Intl.NumberFormat('en-IN'). Fix the cause, then add a small check that recomputes every customer's balance from their transactions, and show me the result for all three customers.
- Debug · The statement is wrong or won't download: The statement [doesn't download / is empty / has the wrong dates / opens badly in Excel / prints badly]. Check these one by one: - The date filter includes the whole of the first and the last day. - The CSV has a header row, quotes any value containing a comma, and starts with a UTF-8 BOM so Excel shows ₹ and Hindi correctly. - The download uses a Blob and an object URL with a .csv file name. - The print page hides the app's tabs and buttons with print CSS and fits on A4. - The opening and closing balances match the History screen for the same period. Fix the cause, and tell me how Save as PDF works from Chrome on a phone and on a laptop.
- Debug · It broke after my last change: Everything worked until my last change. Now [what's broken]. The change I made, or asked you to make: [describe it or paste it] Compare the code before and after that change and find what broke. Fix it so the new change and everything that worked before both work. If the change can't work without breaking something, tell me and suggest another way to do it.
- Debug · The AI keeps going in circles: Stop. We've tried to fix this several times and it still isn't fixed. Don't write any more code yet. The problem: [describe it] 1. List what we've already tried, and why each attempt didn't work. 2. List three possible root causes, most likely first, and what would confirm each one. 3. Tell me exactly what to check or log (one console.log, or one thing to look at) to find out which it is. Once I tell you the result, make one focused fix.
- Debug · Broken on a phone: The app looks broken on a phone: [describe it, e.g. the bottom tabs cover the Confirm button]. Fix the layout so every screen works at 360px wide and at the largest text size in Settings, in every mode: - nothing scrolls sideways and no text or amount is cut off - buttons are at least 48px tall (56px in Simple mode) and don't overlap - the bottom tabs never cover the main button - long Hindi words wrap Check every screen, not only the one I named, and tell me which ones you changed.
- Debug · Broken after deploying: The app works on my laptop but not after deploying to [Vercel / Netlify / GitHub Pages]. What happens: [e.g. a blank page, a 404 when I refresh /history, the help chat doesn't answer] The build log or browser console shows: [paste it] Check the usual causes one by one: - the build command and output folder - the base path - a rewrite so every route serves index.html - file names whose capital letters differ from their imports (my laptop may ignore case, but the server doesn't) - environment variables that exist on my laptop but were never added to the host Tell me exactly which settings to change and where.