Mbiller

Jun 1, 2022

Bill Payment App | Product Design

Mbiller Mobile App
Mbiller Mobile App
Mbiller Mobile App

1. Context

Mbiller is a mobile app that lets users pay bills easily from their smartphones. It connects to the Paystack payment platform, allowing users to fund their wallets via bank transfer or credit card, schedule payments, track their bill history, and receive timely reminders when bills are due.

2. The Challenge

We needed to create an intuitive, user-friendly interface that makes bill payment quick, efficient, and frustration-free. This meant reducing cognitive load, streamlining the payment flow, and ensuring that every feature — from onboarding to notifications — felt effortless for the user.

3. My Role

  • Led end-to-end product design (UX & UI)

  • Defined the information architecture and user flows

  • Created and maintained design system components

  • Partnered with engineering for smooth handoff and implementation

4. Process

Research

  • Conducted user interviews to understand how people currently pay bills and where they get stuck

  • Analyzed competitor apps to identify opportunities for differentiation

Ideation with AI Support

  • Used generative AI to rapidly explore early UI variations, producing 12 distinct layouts in under 24 hours

  • This accelerated decision-making by allowing the team to compare options visually before committing to detailed designs

Design

  • Developed wireframes for wallet funding, bill scheduling, and history tracking

  • Refined layouts based on usability testing feedback

  • Applied accessible color contrasts and clear typography for readability

Testing & Iteration

  • Ran usability tests with 10 target users

  • Iterated to reduce wallet funding steps from 5 to 3 clicks

  • Improved bill history navigation by adding quick filters

5. Outcome

  • Reduced time-to-complete for a bill payment by 40%

  • Increased successful wallet funding by 25% in the first month after launch

  • Positive feedback from users praising the app’s simplicity and reminders

6. Key Takeaways

  • AI can dramatically shorten the exploration phase, giving teams more time to refine high-impact designs

  • Small usability improvements, like reducing steps or adding filters, can lead to big gains in user satisfaction

  • Accessibility considerations should be integrated early, not as an afterthought

Computer hardware parts render
Computer hardware parts render
Computer hardware parts render
abstract 3d render
abstract 3d render
abstract 3d render
Abstract wires connected
Abstract wires connected
Abstract wires connected
Graphs analytics on a laptopscreen
Graphs analytics on a laptopscreen
Graphs analytics on a laptopscreen

Feel free to get in touch at +2348065514210.

@atoluwalogo

Feel free to get in touch at +2348065514210.

@atoluwalogo

Feel free to get in touch at +2348065514210.

@atoluwalogo

Create a free website with Framer, the website builder loved by startups, designers and agencies.