Audience 1
Guardians
Parents who want a safe, educational way to manage their child's money.
A family wallet, rebuilt from its own audit.
The junior app, lifted off a kid's desk.
01 Project brief
Zod is a money app for families. Parents oversee. Kids and teens learn to save, budget and set goals.
The first version already existed. The brief was to find what got in the way: identify the UX issues, propose fixes people could act on, and make the flows consistent and accessible.
Audience 1
Audience 2
Juniors
Children and teens learning responsibility and keeping track of their spending.
What the product does
- 01Parental controls
Parents set spending limits, approve transactions and automate allowances.
- 02Savings goals
Kids create goals and track their progress toward them.
- 03Custom debit cards
Personalised prepaid cards with spending insights.
- 04Learning and rewards
Challenges and rewards for good money habits.
- 05Real-time notifications
Parents and kids hear about every transaction as it happens.
- 06Family transfers
Money moves between family members and friends.
- Scope
- Onboarding, navigation, task completion
- Test device
- iPhone 13 mini
- Audit length
- 2 weeks
- Apps
- Guardian and junior
02 Process
Design thinking, one block at a time.
Empathise, define, ideate, prototype, test. Below, the same work laid out on the double diamond: where the team looked wide, and where it narrowed down.
- 01Empathise
- 02Define
- 03Ideate
- 04Prototype
- 05Test
Double diamond
Four phases, one audit trail.
03 Research methods
Two weeks inside the first version.
Before designing anything, the team went through MVP 1 screen by screen on an iPhone 13 mini, wrote down every problem with a fix beside it, and measured the app against the market.
UX audit
A heuristic review of usability: content, information architecture and missing features, screen by screen.
28findings, each with a fix
UI audit
Visual, interaction and accessibility review, plus a check of the app against the brand's colours, type and logo.
45findings across five categories
Severity scale
Every issue is rated so the team fixes the blockers first. Pick a level:
Competitive benchmark
Youth-money apps reviewed and scored against a 30-feature checklist, one point per feature.
13apps reviewed, 10 scored
Information architecture
One map per app, built from the audit: four tabs each, with every section's contents listed.
2IAs: guardian and junior
User flows
The chore loop end to end: a guardian creates a task, a junior completes it. The audit found the first flow missing.
2flows, one per side
Benchmark scores, out of 30
04 The audit trail
73 findings. Every one followed into the redesign.
The finding slides were copied into the design file and labelled as the redesign moved: Done, or deleted along with the feature they described. Each dot below is one finding. Select a dot to read it.
73findings logged across 14 screen groups
63tracked into the redesign
49fixed as the audit recommended
14settled by removing the feature in question
DoneRemoved with the featureNot on the tracker
Statuses come from the labels placed over each finding slide in the Zod design file. The 10 findings without a label are later UI-audit items: the request-money popup, the transaction and spending screens, and the three branding checks.
05 Before and after
The change, screen by screen.
The original MVP screen sits on the left, the redesign on the right. Drag across the phone to compare, and scroll inside it to see the full length. The findings each screen answers are listed beside it.
06 Design system
208 variables, English and Arabic from day one.
The UI audit found off-brand colours, the wrong typeface and inconsistent links. The answer was a token system in Figma variables: brand values feed aliases, aliases feed the components.
Brand106
Raw colour ramps
Alias35
Theme roles: primary, secondary, success, error…
Mapped62
Mappings from roles to use, such as text
Chart5
Data-viz colours
Colour
Hover to read, click to copyTypography
Spacing & radius
4 px base unitGrid
Columns · gutter · marginComponents, live
From the UI elements pageNotification components
✓
Saved SuccessfullyYour changes have been saved successfully
!
Action RequiredIncomplete fields. Please fill in all required information now
×
Error OccurredConnection error. Unable to connect to the server at present
Chips
Switch · checkbox · radio
Radio
07 Wireframes, IA and flows
Structure before style.
The guardian home was rebuilt in greyscale first, section by section, so the order of things could be argued about before any colour went on. Hover a section to find it on the wireframe.
Information architecture
One map per app. Open any section.
Nav
Original maps: ·
Original diagrams: ·
08 Screens
The redesign, in hand.
Drag sideways. Hover a long screen to scroll it.
App Store set · Arabic
09 Immerse
A day with Zod.
It starts on a kid's desk. Scroll on to follow one chore, from the task list to the savings goal.
One chore
From task to goal.
Scroll to move through the junior app, one step at a time.
What changed
From friction log to a product that answers it.
- 49findings fixed the way the audit recommended
- 14settled by cutting the feature instead of patching it
- −33%shorter junior home: 1,986 pt of scrolling down to 1,340
- 208design-system variables, with English and Arabic type
Zod · UX/UI audit and redesign · 2025
Back to the top ↑