works.
Let's work together. Schedule a consultation hour with me or drop me an email at aliza@ideateinnovation.com.
Customer-First, Compliance-Ready: Reimagining MMBL’s UI/UX for Inclusion & Impact
client
Mobilink
Scope of Work
User Research, UI/UX, prototyping
Role
Design Lead
Duration
3 Months
Year
2024
The content, design, and insights presented in this case study are the proprietary intellectual property of Ideate Innovation. This work is showcased for portfolio purposes only and may not be copied, recreated, or distributed in any form without the express written permission of Ideate Innovation.
Mobilink Microfinance Bank, one of Pakistan’s largest digital banks, partnered with Ideate Innovation to reimagine its digital platforms through a human-centered redesign focused on inclusion, trust, and accessibility.
Summary
A major microfinance institution in Pakistan sought to improve its mobile banking platform: a critical digital channel for underserved users, many of whom had limited digital literacy or access.
The Challenges
The redesign was driven by a surge in negative user feedback that highlighted significant business risks. The core challenge was to transform a frustrating app into a trustworthy digital banking experience encouraging users to use the app as a one-stop solution for their Mobilink account needs.
My Role
As the Design Lead, I hanlded the end-to-end design strategy and execution. My role was to bridge the gap between user frustrations and business objectives, steering the project from discovery and research through to final handoff. I directed the UX process, managed stakeholder communication, and was ultimately responsible for delivering a redesign that met the high standards of both users and the bank.
Tools & Techniques
Stakeholder Communication
Figma
User Research
Prototyping
Wireframes
Experience Managment
Design System
Problem Statement
1
How might we redesign the MMBL Dost App to serve its core lower-to-middle-class audience, transforming it from a frustrating barrier into a digital experience that builds financial confidence and overcomes challenges like low digital literacy, barriers to access, and low numeracy?
Research: Diagnosing the Root Cause
2
To move beyond assumptions and ground our strategy in real user behaviors, we led a comprehensive research phase. Through a heuristic audit, stakeholder interviews, and 20 hours of in-field usability testing with 15 customers, we identified three critical themes of failure.
Trust was the most critical issue. Unclear feedback and technical glitches were actively eroding the user-bank relationship.
Accessibility was an immediate barrier. The app was unusable for a key segment of the user base due to basic design flaws. This included challenges for older users, people with low vision, and those facing language barriers or having a limited understanding of digital interfaces.
Clarity over clutter was a clear mandate. Users wanted simplicity and a direct path to complete core banking tasks without promotional distractions.
Understanding Scope
3
Broken First Impression
The onboarding flow was a major barrier, with users struggling to differentiate "Sign Up" from "Register" and getting blocked by biometric failures.
Technical & Navigational Flaws
Frequent app crashes, slow transfers, and promotional clutter made the app feel heavy and difficult to use.
Accessibility Gaps
The app failed to meet WCAG accessibility standards, with low text contrast and small fonts hindering readability, especially for users with low vision.
Erosion of Trust
Unclear error messages, payment glitches like double deductions, and security concerns were actively damaging user trust.
Phase 1: Wireframing & Information Architecture
4
Our first step in the design phase was to translate our research into a structural plan. Through in-depth field interviews and close collaboration with MMBL stakeholders, we identified and prioritized the most critical user journeys, such as account creation, funds transfer, and loan discovery. These validated journeys formed the essential blueprint for our Information Architecture (IA). With a clear IA defined, we began creating low- and mid-fidelity wireframes that were strategically focused on solving the most significant user problems and streamlining the core functionality of the app.
Phase 2: Visual Design Exploration
5
Guided by three distinct user personalities we developed with the client, we began with low and mid-fidelity wireframes to de-risk the design process. This early step allowed us to validate the core information architecture and user flows with stakeholders, ensuring a solid structural foundation before committing to high-fidelity visuals.
Identity 1
This direction utilizes gradients within icons for a modern look. The strategic consideration was balancing visual appeal with potential clarity issues on the smaller, lower-resolution screens common to the app's user base.
Identity 2
This identity prioritizes clarity and accessibility. It uses a flat, minimalist approach with a color palette that meets global accessibility standards, ensuring a smooth and easy-to-navigate experience for all users.
Identity 3
This option explores soft gradients and noise textures to create an approachable and friendly aesthetic.
Phase 3: Usability Testing & Iteration
6
We conducted moderated usability tests on our high-fidelity prototypes using Maze to validate the redesigned user journeys.
The feedback was overwhelmingly positive and confirmed our core design decisions.
Critically, the testing also revealed opportunities for refinement; for example, we observed users with low numeracy struggling with the loan calculator, which allowed us to iterate on the design for improved clarity before the final handoff.
Maze Testing Heatmaps
High Fidelity: Bringing the Vision to Life
6
The final designs implemented our new, accessible UI kit across all ten user journeys. The result is a polished, modern, and consistent experience that feels both professional and trustworthy, reflecting MMBL's status as a leading digital bank.
Final recommendations & Handoff
7
The project concluded with a comprehensive handoff to MMBL's development team and leadership. We delivered a complete, well-documented Figma file including the full design system with all components and styles to ensure a smooth and accurate implementation. To capstone the project, I led a final handover session, presenting our recommendation report and strategic findings to the CEO and other key stakeholders.
Figma File
Final Recommendation
Components
Icon Pack