Revamp mobile banking with new capabilities & design system

Corporate banking customer segmentation

Open source design platform

Context

MSB launched a strategic initiative in Spring 2022 to modernize its retail mobile banking apps, with the goals of simplifying major finance modules, unifying the user experience across mobile banking services and establishing a scalable design system to support rapid feature roll-out over the next 24 months.

My responsibilities as ux designer

Conducted extensive user research—including interviews, surveys, and ethnographic research—to uncover core pain points and inform design principles and information architecture.
Conducted a 360° diagnostic of the existing mobile banking apps (MSB's, local banks and world best practices), benchmarking product features and user experience.
Iterated on UI concepts and variations, then crafted final high‑fidelity UI designs across approximately 200 hero‑scenario screens
Defined and documented the digital-foundation guidelines, including design principles, component patterns, and navigation schema.
Validated designs through iterative usability testing at each phase (wireframes, prototypes, high‑fidelity mocks), synthesizing usability metrics and qualitative feedback to refine flows

Outcome & key deliverables

Bridge product gaps against competitors with added capabilities
Establish new unified design with scalable design system: Define principles, navigation schema, templates, and components for consistency and quality control process
Streamline major banking modules (onboarding, transfers, personal finance management, bank product application) with positive results from customer and internal stakeholders

Key activities during iterations

To align the new modules with user and business needs, I conducted primary research with users, stakeholders, and competitors, along with secondary research from internal reports. Insights were synthesized into design principles, information architecture, and a clear prioritization strategy.

User research process diagram showing secondary and primary research methods

Benchmarking chart comparing product capabilities across 11 banking dimensions

Design process diagram showing banking app information architecture and user experience

Design process flowchart showing experimentation loop for UI wireframing

FINAL UI VERSION & major IMPROVEMENTS

I designed and developed 6 core modules: Onboarding, Account, Finance, Card, Transfer, and Lending, then combining them in a realistic, interactive prototype for final user validation. Additionally, I crafted micro-interactions and custom illustrations aligned with the app's updated personality and design principles, enhancing both usability and brand cohesion.

accessibility check-wcag compliance

Based on the finalized UI concept, I cross-check design tokens and common design elements to ensure WCAG compliance and make adjustments.

DESIGN SYSTEM DEVELOPMENT

I collaborated with designers and developers to define a workflow for extracting UI elements, creating a plan to build a design tokens library, including way of working, cadence and quality control process.

user feedback

I created a fully interactive prototype and conducted usability tests with both real customers and internal stakeholders.

Key learnings

Establish clear IA principles: Define consistent rules for allocating screen real estate and assigning features to specific locations—ensuring that future additions fit seamlessly into the existing structure.
Develop a design‐system quality control cadence: Create a repeatable process and regular synchronization meetings for designers to review, discuss, and align on new UX patterns before they’re introduced.