How I revamped a banking app used by 1M+ people on an atomic design system built to scale

Scale and trust

With 17 million+ transactions a year, the app handles people's money every day. The redesign had to modernize the experience without ever compromising the clarity and trust users need when moving their funds.

Breadth of features

myABL spans transfers (IBAN, bank transfer, Raast), bill payments, card management, Tap & Pay, personal finance, budgeting, investments, loans, donations, tickets, and branch location, dozens of flows that all needed to feel like one coherent product.

Consistency without a foundation

The app had grown feature by feature over the years. Without a unified design language, screens diverged in styling and interaction patterns, making the experience inconsistent and every new feature slower to design and build.

An atomic design system as the backbone

The team chose an atomic design system for its scalability, modularity, and efficiency. I defined the system's foundations and components, so every screen in the revamp, and every future feature, could be assembled from consistent, reusable parts.

Foundations: color, type, spacing, grid, iconography

A palette built around ABL's brand, a deep primary blue and vibrant orange, with a structured neutral scale and full semantic sets (success, fail, warning, info). A 12-32px type scale for dense financial data, a 4px spacing scale on a 16px grid, and a unified icon set covering dozens of services.

A full component library

Headers, navigation, primary/secondary/text buttons with active and inactive states, inputs, toggles, checkboxes, radios, modals, toasts for every semantic state, and payee cards, each designed once, with all its states, and reused across the app.

High-fidelity design across core journeys

With the system in place, we designed the key flows end to end: dashboard, onboarding and biometric login, send money (IBAN, Raast, CNIC, own account) with OTP and shareable receipts, bill payments, card management and Tap & Pay, personal finance and budgeting, limit management, and branch locator.

Interactive prototyping

We connected screens and flows into an interactive prototype, giving stakeholders a tangible understanding of how users navigate the app, before development began.

A complete UX/UI revamp spanning payments, transfers, cards, budgeting, and more.

A scalable atomic design system

color, typography, spacing, grids, iconography, and a full component library, giving ABL a foundation for faster, more consistent design and development.

Coherence at scale

dozens of distinct flows now share one visual language, one set of interaction patterns, and one clear hierarchy.

Clarity where it matters most

semantic colors, structured confirmations, OTP steps, and readable receipts keep users confident at every step of a transaction.

Stakeholder alignment through prototyping

interactive flows made the experience reviewable before a line of code was written.