Supervisor: Taha Khan
Fintech Mobile App UI/UX Design System
A user-centered digital banking experience addressing transaction clutter, payment failures, and expense management.
Project
This UI/UX design case study focuses on streamlining personal finance management through MOVO (“Money On The Move”). By resolving common pain points like cluttered account statements and unexpected recurring payment failures, MOVO combines categorized transaction tracking, custom pocket allocations, and intelligent pre-due reminders into a single, intuitive mobile interface.
The Brief:
Design and deploy a comprehensive mobile fintech UI/UX framework that simplifies transaction statements, helps users reserve funds for specific needs, and prevents recurring subscription failures.
What We Did
User Research & Empathy Mapping, Persona Development, System Architecture & User Journey Flows, UI Design System (Color Palette, Typography, Iconography), Interactive Prototyping.
Technology
- Design & Systems: Figma (UI Design System, Component Libraries, Design Tokens)
- Typography: Poppins (Modular Type Scale: 12px – 52px)
- Visual Language: Custom Vector Iconography & Semantic Color Token System Goal
Empower users to regain control over their finances by providing automated spending categorization, clear expense breakdowns, and balance-aware subscription management.
Process
- User Research & Insight Gathering: Analyzed quantitative user pain points—identifying that 63% struggle with unlabelled expenses, 65% experience low-balance payment failures, and 71% fight to prioritize critical payments.
- Target Persona & Behavioral Mapping: Developed detailed user personas across demographics (ranging from young freelancers with fluctuating income to corporate employees and homemakers managing household budgets) to map key goals, behaviors, and financial anxieties.
- Core Feature Architecture: Structured three central design solutions: automated transaction categorization (Food, Transport, Bills, Groceries), a dedicated Pocket System for reserved funds, and a Smart Pre-Due Reminder engine.
- Design System & Visual Foundations: Built a accessible UI framework featuring a Muted Teal (#294952) and Pale Lime (#EBF65B) palette, a Poppins typographic hierarchy, and a dual-state vector icon library.
- User Flow & Navigation Mapping: Designed seamless end-to-end user journeys covering dynamic splash states, quick-action dashboards, deep-dive category breakdowns, and manual/automated transaction edit flows.
Benefits
- Reduced Cognitive Load: Transforms confusing bank statements into organized, visual expense categories.
- Proactive Overdraft Prevention: Pre-due notifications allow users to approve, pause, or prioritize subscriptions before payments fail.
- Unified Financial Hub: Eliminates the hassle of switching between separate banking apps and third-party expense trackers.
- Accessible Visual Design: High-contrast semantic colors and clear typographic scales ensure accessibility across diverse age demographics.
Features
- Automated Expense Categorization: Automatically groups real-time spending into clear visual buckets (Food, Bills, Transport, Electronics).
- Dedicated Pocket Reserve System: Enables users to lock away and dedicate funds for specific upcoming priorities or savings goals.
- Smart Pre-Due Reminders: Interactive payment alerts that sync with real-time account balances to manage recurring subscriptions.
- Scalable UI Component System: Standardized button states, vector icons, and input screens optimized for fast production prototyping.
