Clarity
A readable, well-organised interface with an obvious purpose, free of any visual confusion. The legacy login screen tried to do eight things at once. The new one does one — and does it calmly.
→ Login · from eight entry points to one
Enter the password to continue. If you've been given access, this should take a moment.
Emirates NBD's flagship banking app had grown over years of feature-stacking into something users couldn't navigate. Two hamburger menus, no consistency with online banking, and twelve levels of depth on common tasks. We led a fourteen-sprint rebuild from the IA up — a new content model, four design principles, a multi-brand design system, and 700+ redrawn screens that ship across Emirates NBD and Emirates Islamic.
Emirates NBD's mobile app was the bank's busiest digital touchpoint — and its most-complained-about. New customers churned at the registration step. Returning customers tapped twice just to find their balance. Years of feature additions had landed on a structure that was never refactored to match.
Before drawing a single screen, we audited the live app, online banking, and the support tickets behind both. Eight problems kept surfacing, every time.
We started where the cracks started: the navigation. The legacy IA was a single tangled web — every screen could reach almost every other, and the most-used tasks were buried four to six levels deep. We rebuilt it as a small set of orthogonal maps, anchored on a content model that said exactly what an Account, a Card, and a Transaction were.
// Two principles drove the rebuild: structural consistency and findability.
Each sprint cycled through empathy, definition, ideation, prototype, and test — but the constant at the centre was the design system. Components, tokens, and patterns evolved with every sprint, then fed back into the next round of screens.
Components are the visible part. The system is design tokens, code, documentation, naming conventions, and the shared practice between design and engineering that lets the same source of truth ship across multiple brands and platforms.
With the IA settled and the system in place, the next layer was visual craft. Four principles guided every screen we drew — and the screens themselves are how we evidence them.
A readable, well-organised interface with an obvious purpose, free of any visual confusion. The legacy login screen tried to do eight things at once. The new one does one — and does it calmly.
→ Login · from eight entry points to one
An organised interface that follows the natural way the human eye processes visual information. The legacy card screen led with a long list. The new one leads with the card itself, and lets management actions take a quieter back seat.
→ Credit Card · from menu-first to card-first
A predictable interface that gives the user a sense of unity and stability across platforms. A registration step on web should feel like the same step on mobile — same wording, same validation, same logic.
→ Register · password rules in lockstep across web and mobile
An interface that's easy to understand because it leans on common practices and previously learned behaviours. Inbox patterns, swipe-to-archive, system-style alerts — borrow from what users already know, don't invent.
→ Messages · platform-native inbox conventions
The same component library, the same IA, the same four visual principles — themed and shipped across Emirates NBD's flagship blue and Emirates Islamic's purple. Below, the four hero epics that anchored MVP1.
A single primary action, a single background. Biometrics are the default; password is a calm fallback. The same flow ships in NBD blue and Emirates Islamic purple.
↳ proves Clarity
Balance first. Movement second. Action third. Stories surface contextual education at the moment of relevance — not before, not after.
↳ proves Hierarchy
Debit and credit, mobile and desktop, all sharing the same card-centric layout. The artwork on the card changes; the chrome around it never does.
↳ proves Consistency
A picker that behaves like every other picker on the device. Amounts that scrub like a slider when you want them to. Confirmation that doesn't ask twice unless it has to.
↳ proves Familiarity
MVP1 didn't end at launch — it set the foundation. The component library, design tokens, and documentation now power every new feature shipped to the Emirates NBD and Emirates Islamic apps, plus subsequent rewrites of the online banking experience. Two brands, three platforms, one source of truth.
For the design org, the bigger win was the working model: design tokens in JSON, components in code, documentation alongside both. Designers and engineers now ship from the same vocabulary — and a brand swap that used to be a project is now a theme file.