Money moves.
You grow.
The second half of the NOVA case study: information architecture, wireframes, moodboard, design system, the 35-screen index, a prototype you can use right here, and the final showcase. The first half (research, personas, journey) and all high-fidelity screens live in the Figma file.
Five sections, one job each
The bottom bar holds five destinations. Transfer sits in the middle as the primary action. Every screen is reachable in three taps or fewer from Home.
Structure before colour
Low-fidelity layouts for the five anchor screens. They fixed the hierarchy first: one hero element, one primary action, and a short list below.
Calm, colourful, confident
A bright palette used sparingly over a quiet mist background. Rounded geometry and floating cards keep the product friendly. Large numbers keep it serious.
One kit, eighteen parts
Colour, type, spacing and radius live as variables in Figma (Primitives → Color → Spacing → Radius). Components are variant sets with real properties. Frame: 393 × 852. Grid: 4 columns, 24px margins, 16px gutters. Spacing: 8pt scale.
#7357FF
#26C6A0
#FFB547
#FF6B78
#F5F5FA
#17152B
Buttons · 4 styles × 2 sizes × 3 states
Text field · default, focus, error
Amount exceeds your available balanceStatus badges
Filter chips
Progress · goal
Toast
Component behaviour
| Component | Variants / states | Size and spacing | Behaviour |
|---|---|---|---|
| Primary button | Default, Pressed, Disabled | 56 / 44 high, radius 16 / 12, 28px side padding | Disabled until the form is valid. Label states the result. |
| Text field | Default, Focused, Filled, Error, Disabled | 345 × 78, input 56, radius 16 | Validates on blur and on submit. Error text sits under the field. |
| Navigation bar | 5 tabs, one active | 393 × 92, Transfer disc 48 | Active tab = colour + tint pill + label. |
| Balance card | Visible, Hidden | 345 wide, radius 28, padding 20 | Eye toggle masks the amount. Preference can persist (Privacy settings). |
| Transaction row | Income, Expense, Pending | Icon 44, row 64 | Tap opens details. Income in mint-600 text. |
| Bottom sheet | Confirm, Filter | Radius 32 top, handle 44 × 5 | Scrim 60%. Dismiss by Cancel or scrim. |
| Toast | Success, Error, Info | 345 × 60, 16px above nav | Auto-dismiss at 4 s. Icon + text. |
| Charts | Bar, line, donut, ring | Bars radius 12, ring stroke 16 | Range chips switch data. Tap a bar for its value. |
Accessibility checks
35 screens, 6 states, 15 flows
Every screen is built from the shared components and variables. The full set, the state screens and the flow diagrams are on the canvas in Figma.
Try it
A working simulation of the core app. Navigate with the bottom bar, hide the balance, filter transactions, switch chart ranges, send money, fund a goal and change settings. Nothing leaves this page.
Things to try
- Home: tap the eye on the balance card. Use the Income / Expenses / Pending chips. Tap a transaction for details.
- Transfer: pick a recipient, then enter an amount. Try $0, then $99,999, then $250. Confirm to see the result.
- Insights: switch 1M / 3M / 6M / 1Y. Tap a bar to read its value.
- Goals: add $100 to a goal. Fund the MacBook goal to 100% for the completion state.
- Profile: open Notifications, Security and Privacy and flip the switches.
What was delivered
NOVA, end to end.
A complete concept: strategy, identity, a reusable system, every screen a user meets from first launch to goal completion, and a prototype that behaves like the product.
Why it feels different
One hero number per screen. Colour marks meaning, not decoration. Failures and empty states are designed, not left blank. Transfer review always comes before money moves.
What this concept does not claim
No user research was run. No Dark mode ships in this file. Success measures are targets, not results. The Figma prototype wiring is not yet applied; this page's prototype covers it.
Validate it
Run 5 usability tests on transfer, goals and insights. Interview 6–8 target users. Add Dark mode, localisation (including right-to-left) and a loading-motion pass.