-
RoleLead Product Designer
-
Year2024
-
Timeline4 months
-
Platform
The Starting Point...
When I first encountered the existing MTN payment widgets, I immediately recognised a tension. The design, though functional, was heavily tailored to MTN's internal brand identity, bold colours, dense flows, and a tone of voice rooted in legacy familiarity.
It worked, but only for those who already knew what to expect.
For first-time users or external partners engaging with the product outside MTN's ecosystem, the experience felt unintuitive, overwhelming, and at times, even untrustworthy. It lacked the neutrality, calmness and clarity users increasingly expect from modern payment interfaces.
Design is not just about how it looks, it's how it makes people feel in the moment they need it most.
The business needed a platform-agnostic solution. The users needed emotional assurance and interactional simplicity. And as the lead designer on the project, I needed to bridge those needs, without alienating what already worked.
Framing the Real Problem
Rather than simply polishing UI components, I reframed the challenge as this:
How might we reimagine the MTN payment experience so that it feels universally usable, emotionally calm, and functionally effortless - across devices, platforms, and user familiarity levels?
It wasn't about debranding for the sake of trend. It was about creating a design system that breathes, one that could flex across product touchpoints while restoring user trust and enabling faster, cleaner transactions.
Research Insights
Before drawing a single wireframe, I began with discovery.
I conducted stakeholder interviews with internal product owners, analysed user support tickets, and reviewed conversion analytics across devices. What emerged was telling:
- Mobile users faced the most friction, citing cluttered layouts and unclear feedback.
- First-time users abandoned the flow mid-journey due to lack of guidance or failure messaging.
- Returning users were frustrated by repetitive data entry, particularly around card details.
- The overuse of MTN branding unintentionally confused partners and clients outside the telco space, making the experience feel proprietary rather than open.
These weren't just UX issues, they were symptoms of a product that hadn't scaled with its audience
Design Goals
... Clear, Calm and Cross-Compatible
From this foundation, we established five key design goals:
- Neutral visual identity: Move away from MTN-specific branding in favour of a more adaptable, cross-market interface.
- Emotional calmness: Use a softer colour palette and minimal design to promote user confidence and focus.
- Flow consistency: Create one experience across all payment methods (Card, MoMo PSB, USSD, etc.).
- Frictionless guidance: Reduce uncertainty with microcopy, tooltips, and real-time feedback.
- Responsiveness and speed: Ensure the widget works beautifully across mobile, tablet, and desktop, with load times under 3 seconds.
The Design Process
... Building with the Unknowns in Mind
Rather than forcing a “double diamond” or prescriptive process, I worked in emergent sprints, responding iteratively to unknowns uncovered through testing.
Widget Landing Page (Core UI Revamp)
This was the heartbeat of the project. I redesigned the payment widget homepage with:
- A modular card layout supporting different payment methods without hierarchy bias.
- Customisation options, including light/dark themes, to accommodate brand-neutral deployments.
- Visual feedback for every step, including real-time error handling and progress indicators.
Fig: Modular Card Layout (Light and Dark Mode)
Card Payment Flow
I restructured the form into progressive stages:
- Live validation on input (card number, expiry, CVV)
- Optional card saving with strict security measures
- Lightweight animations for processing states
- 3D Secure authentication as a seamless modal, not a redirect
Fig: Card Payments (Light and Dark Mode)
Saved Cards
Returning users were shown a masked list of saved cards, with instant re-authentication via CVV and optional OTP. We prioritised speed and familiarity, no need to retype what the system should remember, but always with user consent.
Fig: Saved Card Payments (Light and Dark Mode)
MoMo PSB & USSD Payments
These were designed for accessibility and inclusion. Not all users had banking apps or consistent internet. So:
- MoMo had OTP fallback and manual retry triggers, optimised for users in low-connectivity regions.
- USSD used dynamic session codes with clear visual instructions, ensuring even the least tech-savvy users could complete a payment.
Fig: USSD Payments (Light and Dark Mode)
Results
A Simpler Flow with Greater Confidence
Quantitative Wins:
- Load time reduced to 2.3 seconds average across devices.
- Task success rate rose from 61% to 91% on mobile within 4 weeks of launch.
- Help centre tickets dropped by 39%, with fewer “how do I?” queries.
Qualitative Feedback:
“I didn’t need to ask anyone how to pay. It just made sense.” - User during UAT
“This looks and feels like a product we can take global.” - Internal product ownerT
Reflections
Designing for Trust, Not Just Aesthetics
What I learned from this revamp wasn’t just about layout or load time. It was about designing for emotional assurance — particularly when the user is about to hand over sensitive information like payment credentials.
- Design calmness is a feature, not a visual style.
- Micro-interactions matter, they reduce cognitive friction.
- Brand neutrality can amplify trust, not diminish it.
Final Thought
In the end, this wasn't just a UI revamp, it was a redesign of the relationship between user and product. By stripping away noise, respecting user attention, and designing with empathy, we didn't just make something better. We made something feel right.
