Mobile banking · AI · Design challenge
Outcome
From one sentence to an approved savings plan, with the customer in control at every step
People open a banking app with a goal, not a product name. Menus and jargon make them guess, or give up. Marés lets customers type what they want in plain words. The AI explains the numbers, suggests a plan, and nothing happens until the customer approves it.
Tools: Figma variables and components, a clickable prototype, Plus Jakarta Sans, and a React handoff spec. This is a design challenge, not a real bank.
BSprint 0 & problem discovery
Sprint 0 turned the brief into a problem statement, four testable hypotheses and two proto-personas. The personas are assumptions to test, not research findings.
Proto-persona · assumption
Proto-persona · assumption
CUsability review
I reviewed the six screens against the 10 usability rules of Nielsen Norman Group and the WCAG 2.2 AA accessibility standard. Each row shows how the design answers each rule, and what still needs checking with users.
| Usability rule | How the design answers it | To check in testing |
|---|---|---|
| Visibility of system status | The AI says what it is doing while it reads the data. Status tags show if a plan is comfortable, slow or tight. | Do people notice the status tag before they move on? |
| Match with the real world | Customers start with their own words (“save for a holiday”), not product names. | Does the AI understand the way people really phrase goals? |
| User control and freedom | Nothing happens until the customer approves. The chat stays one tap away while editing the plan. | Can people go back and change the amount without starting over? |
| Recognition rather than recall | Suggestion chips on Home and a review screen that lists every effect before approval. | Are the chips the goals people actually have? |
| Error prevention | A safe range on the slider and a consent checkbox before the approve button enables. | Do people understand why the approve button is disabled? |
| Accessibility and contrast | Colour is never the only signal: tags use icon and text, the money bar has a text legend. 44 px targets and a visible focus ring. | Contrast of every colour pair, keyboard, VoiceOver and TalkBack. |
DUser testing
Status: planned, not run yet. Round 1 uses the clickable prototype with 5 participants in moderated, think-aloud sessions on a phone. Results will replace this plan after the round.
| Hypothesis | Task | Success means |
|---|---|---|
| 1 · Starting in plain words is easier than a menu | “You want to save for a holiday. Start from the home screen.” | 4 of 5 start the goal without looking for a menu. |
| 2 · A safe range builds more trust than one figure | “How much can you save each month? Explain why.” | 4 of 5 explain the safe range in their own words. |
| 3 · Controls beside the chat keep context | “Make the plan finish two months earlier.” | 4 of 5 change the plan without leaving the screen. |
| 4 · A full review makes approval feel safe | “Before you approve, tell me what will happen.” | 5 of 5 name the amount, the date and the account. |
Rate each problem by how often it happens and how serious it is, fix the top issues in the prototype, and run round 2 with 5 new participants. I don’t show results that I haven’t measured.
EScreens & design system
From a sentence to an approved savings plan. The background “tide” rises with the account balance as a calm, decorative signal. The balance is always written as text too.
Typography, colour, patterns and screens in light and dark mode.
Reusable components with variants and states, built from Figma variables.
One typeface, Plus Jakarta Sans, in weights 400–800 for titles, body text and large money figures. Light and dark modes are Figma variables.
Spacing 4–32 px, corner radius 10, 16, 28 and pill, 1.5 px outlines, a flat offset shadow, a 3 px focus ring and 44 px minimum touch targets.
| Figma | React prop | Notes |
|---|---|---|
| Variant status: comfortable · slow · tight | status | Comes from the amount compared with the safe range. The tag has an icon and text. |
| Slider value, min, max, step | value min max step | Wraps the native range input, read aloud as “€250 per month”. |
| Safe range | safeMin safeMax | Comes from the insight service and is checked on the server. |
| Light / dark theme | tokens | No prop. Tokens switch with the mode. |
If the viewer is empty, use the “Open in Figma” button at the top of the page.
FOutcome & next steps
| Exploration | Decision | Why |
|---|---|---|
| Soft contour lines | Rejected | Not the feeling I wanted. |
| 3D sea with sun | Rejected | The yellow and lines competed with the content. |
| Tide = money in the account | Kept the idea | Calm and meaningful, and always repeated in text. |
| Neumorphic sea and UI | Rejected | Soft shadows make edges hard to see for low-vision users. |
| One calm wave | Chosen | Low distraction, and motion stops with reduced-motion settings. |