GAMAL KHALIFA

Mabadea Website

Enhancing Mabadea Website User Experience & User Interface

I led the design of payment and credit streams, introduced innovative money transfer flow and shaped our design system.

FULL REDESIGNSCALABLE SYSTEMWEB & APP
Client
Mabdea
Year
2026
Role
Lead Product Designer
Scope
Product Strategy, UI/UX/IxD, Prototyping, Design system
Links
https://mabadea.sa/
Mabadea Website

Mabadea Website

Enhancing Mabadea Website User Experience & User Interface

I led the design of payment and credit streams, introduced innovative money transfer flow and shaped our design system.

Mabadea Website

The Challenge

Reimagining a financial platform used by thousands every day

Mabadea needed a modern, scalable experience that could unify a fragmented product surface. Users struggled with inconsistent flows across payments, credits, and transfers — slowing adoption and increasing support load. We set out to design a system that felt fast, calm, and unmistakably ours.

My Role & Process

I led the work end-to-end — from early research to launch — partnering closely with product, engineering, and support at every step.

  1. 01

    Discovery

    Stakeholder interviews, competitive audits, and journey mapping across three core products.

  2. 02

    Design

    High-fidelity flows for payments, credits and money transfer, prototyped for usability testing.

  3. 03

    System

    Built a scalable design system with tokens, components and usage guidelines adopted across teams.

  4. 04

    Handoff

    Partnered daily with engineering to ship pixel-accurate, accessible interfaces.

  5. 05

    Testing

    Ran moderated usability sessions and iterated designs based on qualitative and quantitative signals.

  6. 06

    Launch

    Rolled out phased releases with clear success metrics and post-launch monitoring.

  7. 07

    Measurement

    Defined KPIs, built dashboards, and tracked adoption of the new flows week over week.

  8. 08

    Iteration

    Continued shipping refinements based on real-world usage data and support feedback.

Research & Discovery

We interviewed 24 customers and observed 12 sessions across web and mobile. Three friction points came up in every conversation: unclear balances, hidden fees, and confusing transfer confirmations.

Redesigned dashboard — payments, credits, and transfers in one glance.

A calmer payment flow

We collapsed a 6-step checkout into 3, with progressive disclosure of fees and receipts. Confirmation states use motion sparingly to build trust without slowing the user down.

Money transfer, reinvented

The new transfer flow shows exchange rates, arrival time, and total cost up front — no surprises. Recipients are auto-recognized from previous transfers to remove friction on repeat sends.

Selected screens

Mobile screens

"Gamal turned a decade of legacy patterns into a coherent, delightful system. Our NPS moved in weeks, not quarters."
Sara A. — Head of Product, Mabadea

Impact

+42%
Checkout completion
−58%
Support tickets on transfers
4.8★
App store rating
120+
Reusable components shipped

The Design System

Colors

Ink
#141414
Cream
#FCFBF0
Coral
#EC6E58
Muted
#8A8A80

Typography

Aa
Display
Sans, bold
Aa
Body
Sans, regular

Outcome

The redesign shipped in phased releases across a year. Adoption of new flows exceeded targets, and the design system is now the default foundation for every new Mabadea product.

PROBLEM TO SOLVE

Users abandoned key flows because the product felt fragmented and slow.

Payments, credits and transfers each spoke a different design language, and small inconsistencies compounded into real frustration. We needed a foundation that made every flow feel like one product, cut confusion, and made the fast path the obvious one.

Solution

A unified, calm system that makes the fast path the obvious one — payments, credits, and transfers now share one language, one rhythm, and one set of trusted patterns.

Key Highlights

The core principles and outcomes that shaped the final experience — each one shows up across the product, not just in a single screen.

  1. 01

    One visual language

    Consistent tokens, spacing and motion across every surface.

  2. 02

    Fast path first

    Primary actions are always one tap away, with fewer decisions.

  3. 03

    Trust by default

    Clear states, honest empty views, and predictable confirmations.

  4. 04

    Built to scale

    Patterns, not one-offs — new flows plug into the system cleanly.

Timeline

  1. Jan 2025

    Discovery

    Interviews, audits, and stakeholder alignment.

  2. Mar 2025

    Foundations

    Tokens, primitives and the first shared components.

  3. Jun 2025

    Payments rebuild

    Rolled out the new flow to 100% of users.

  4. Oct 2025

    System GA

    Design system released across web and mobile.

Before / After

Legacy
Legacy
Redesigned
Redesigned

What's included

The design system covers every surface teams ship — from marketing pages to the transactional core.

  • 60+ components

    Documented with usage, props, and do/don't examples.

  • Design tokens

    One source of truth for color, spacing, radius and motion.

  • Accessibility baseline

    WCAG AA verified across every primitive.

  • Figma library

    Auto-synced with code via a shared token pipeline.

How the flow works

  1. STEP 01

    Request

    User initiates a transfer from any surface.

  2. STEP 02

    Verify

    Risk & KYC checks run in the background.

  3. STEP 03

    Confirm

    One-tap confirmation with a clear summary.

  4. STEP 04

    Settle

    Funds move and receipts fan out instantly.

One product, one language

The rebrand carried into every pixel of the app.

Principles

Calm

Nothing shouts. Hierarchy comes from rhythm, not decoration.

Honest

States are truthful — loading, empty and error included.

Fast

Every screen respects the user's time above all else.

A note on scope

This case study covers the design system and the two flagship flows. Full rollout details are available on request.

Project facts

Client
Mabdea
Duration
12 months
Team
4 designers, 9 engineers
My role
Lead Product Designer
Tools
Figma, Storybook, Linear
Platforms
Web, iOS, Android

Built with

FigmaReactStorybookLinearVercel

FAQ

How long did the project take?

About a year end-to-end, shipped in phased releases.

Was this a full redesign?

Yes — visual language, IA, and the underlying system were rebuilt.

Who owned the design system?

A dedicated squad I led, working closely with platform engineering.

← All projectsNext project