MCB Money Map
UX/UI Case Study
MCB Money Map: Financial Literacy Made Visual for Pakistani Youth
A research-led UX/UI project turning budgeting, saving, and investing into a guided journey for beginners aged 16–25.
Role
End-to-end UX/UI + Brand + Research
Timeline
October 2025
Tools
Figma, Illustrator, Photoshop, Google Forms
Audience
Pakistani youth (16–25), bilingual, digital-first
How might we transform complex financial concepts into a visual, beginner-friendly system that builds confidence among young first-time earners?
Skip to research insightsThe gap was not information. It was interpretation.
Goals & Success Metrics
The goals defined the direction. The metrics defined whether the direction worked.
The goals were:
Reduce overwhelm
Make financial concepts feel structured and beginner-friendly instead of technical and intimidating.
Increase trust
Balance institutional credibility with a visual system that feels modern and youth-oriented.
Drive action
Move users from passive learning into confident next steps such as saving or investing.
Success metrics:
Clarity feedback improved
Users reported greater understanding of budgeting and saving flows.
Prototype engagement positive
Testers navigated through multiple sections without friction.
30 sign-ups collected
Early interest validated behavioral intent beyond curiosity.
Research
Next section goes here.
Research
Understanding existing financial education gaps required both landscape analysis and direct user insight.
What existed and why it was not working
- Financial literacy initiatives were heavily school-based and disconnected from real-world behavior.
- Digital tools were built for financially experienced adults rather than beginners.
- Most platforms prioritized information density over comprehension.
Financial literacy campaigns were speaking — but not connecting.
175 responses: motivation was high, confidence was not
Low confidence
Respondents understood budgeting basics but felt unsure about investing or long-term planning.
Barriers
Complicated terminology, lack of trusted guidance, and fear of making mistakes prevented action.
Desire
Users expressed strong interest in learning if the system felt simple, visual, and relevant to their daily life.
They were not avoiding finance. Finance was avoiding them.
Persona
A single persona emerged repeatedly: motivated, digital-first, but blocked by jargon and uncertainty.
Name
Ali
19–23, student/early earner, learning primarily through mobile.
Behaviors
- Uses Instagram/YouTube for learning
- Prefers Roman Urdu + simple English
- Skims first, reads only if it feels easy
Needs
- Beginner-first guidance
- Clear steps with visual progress
- Trust signals without feeling “corporate”
Pain points
- Finance content feels jargon-heavy
- Does not know what to do first
- Fear of making the “wrong” choice
Motivation
- Wants to start early
- Wants control and independence
- Wants a system that feels doable
Ali does not need more information. He needs a map.
Strategy
The solution was not more content. It was a clearer structure, friendlier language, and a journey users could follow.
01
Map metaphor
Reframe finance as a journey with “stops” so users always know where they are and what comes next.
02
Bilingual tone
Use Roman Urdu + simple English to reduce intimidation while keeping credibility intact.
03
Bite-sized learning
Break complex concepts into short modules with strong hierarchy, visual cues, and progress feedback.
Positioning
Tagline: “See your money differently.”
A youth-first system that turns finance into a guided journey. Clear steps, relatable language, and visual progress.
User Flow
The experience was structured as a four-phase journey — from awareness to action, with a built-in feedback loop.
Attention
Campaign
Posters, social hooks, QR codes drive awareness and spark curiosity.
Orientation
Landing + Choose Path
Users understand what the app is and select Savings or Investing.
Education
Tiered Learning
Bite-sized modules build knowledge progressively with visual feedback.
Activation
Sign Up + Share Loop
Users commit, sign up, and share — feeding new users back into awareness.
From sketches to a tested prototype
I moved quickly from exploration to structure, then validated decisions through usability testing.
Step 1
Sketches
Fast exploration of layout, hierarchy, and what the “journey” metaphor could look like on mobile.
Step 2
Wireframes
Defined navigation, module flow, and key screens so each step answers: what is this, why it matters, what next.
Step 3
High-fidelity prototype
Applied the visual system, refined typography and hierarchy, then iterated based on usability feedback.
Opens in a new tab.
Final UI Screens
Screens are grouped by user intent so the flow stays understandable for first-time learners.
Onboarding / Hook
Hook users with familiarity, not fear.
Savings Stop
Teach saving as habit, not theory.
Investment Chowk
Introduce investing without intimidation.
Resources / Tools
Give practical tools that feel immediately usable.
Progress / Completion
Make progress visible so confidence builds naturally.
Multi-touchpoint campaign system
The goal was continuity: the same idea should work on a poster, a brochure, a standee, and a scroll.
Posters
A relatable hook with QR-to-action for fast conversion from attention to entry.
Brochure
Metaphor-led storytelling that keeps the system understandable even offline.
Standee
A high-visibility “entry point” for events and public panels.
Social
Bite-sized lessons designed for scroll behavior and easy sharing.
Tested with users, refined for clarity
Design decisions were validated through real feedback, then iterated until the flow felt obvious to beginners.
Early validation and real interest
The goal was not just “nice screens”. It was a system that made finance feel learnable, and worth continuing.
Want a designer who can research, simplify, and ship?
I enjoy building systems that make complex topics feel human, clear, and actionable.