Protected Case Study

This work is under NDA.

Enter the password to continue. If you've been given access, this should take a moment.

Incorrect password — please try again
Case 02 · Emirates NBD · 2019 — 2021
← All work

From cognitive load
to clarity.

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.

My Role
UX/UI Design Lead
Duration
14 sprints (~7 months)
Deliverables
IA · Design system · UI screens · Component library · Documentation
Surfaces
iOS · Android · Web · Multi-brand (NBD + Emirates Islamic)
700+
Screens designed
864+
Components in the system
14.
Sprints, end-to-end
02.
Brands shipped on one system
01  ·  The Opportunity

A flagship app with too much on every screen.

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.

01
Unclear purpose — the app tried to be everything to everyone.
02
Steep learning curve — new and returning users alike got lost.
03
Two hamburger menus — competing nav on top, left, and right.
04
Mobile diverged from web — different patterns for the same tasks.
05
Visual hierarchy collapsed — every element shouted for attention.
06
Accessibility failed — low-vision and motor-impaired users blocked.
07
Cognitive load — too much per screen, too little priority.
08
Invasive popups — banners and modals with low conversion.
02  ·  Information Architecture

Untangling the nav.

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.

Before
Legacy
One sprawling web. Every node connects to every other. Deep, undirected.
Legacy navigation structure — a chaotic web of interconnected screens
After
Target
Modular maps per task. Three levels max. Clear entry and exit.
Target navigation structure — modular task-based maps
Foundation
Content model
An Account is. A Card is. A Transaction is. Everything else inherits.
Content model showing relationships between Account, Card, Transaction, Customer, and Profile entities

// Two principles drove the rebuild: structural consistency and findability.

03  ·  Process & Principles

Fourteen sprints, one design system at the core.

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.

The design process: Empathy, Definition, Ideation, Prototype, Test — orbiting a Design System core
// Seven product principles guiding every screen
01
Experience & Accessibility — designed for the widest possible reach.
02
Product Management — every screen tied to a product, not a feature.
03
End-to-end Sales — from awareness to activation, in-app.
04
Financial Education — context-aware tips at moments of friction.
05
Smart Payments — fewer taps, more confidence.
06
Agile Security — risk and compliance built in, not bolted on.
07
Monetisation — commercial value without commercial intrusion.
04  ·  Design System

Not just components.

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.

The design system framework: component-level libraries (color, icon, text styles, spacing, grids, design tokens, UI components, illustration, cards) feeding into layout-level apps (Emirates NBD, Emirates Islamic) via dev handoff
01
Design — assets and UI components in Sketch. Visual properties (design tokens) per component, exported to JSON.
02
Code — UI components reference design tokens, not hard-coded values. Theme swap = brand swap.
03
Documentation — written guidance on use, function, and examples for every component shipped.
04
Multi-brand — a single component library, themed at runtime. Emirates NBD and Emirates Islamic from one source.
05  ·  Visual Design

Four principles, shown not stated.

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.

Principle 01

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.

Clarity — new login screen with single primary action vs. legacy login screen with eight competing entry points

Login · from eight entry points to one

Principle 02

Hierarchy

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.

Hierarchy — new credit card screen with the card itself foregrounded vs. legacy screen leading with a list of management actions

Credit Card · from menu-first to card-first

Principle 03

Consistency

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.

Consistency — register password step rendered identically on desktop and mobile

Register · password rules in lockstep across web and mobile

Principle 04

Familiarity

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.

Familiarity — Messages screen with platform-native inbox conventions and swipe affordances

Messages · platform-native inbox conventions

06  ·  The Effect

Shipped — across two brands, three platforms.

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.

Hero composition — desktop and three mobile devices showing Accounts and Cards across both brands
Epic 01

Login

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.

Login — Emirates NBD branded mobile and desktop Login — Emirates Islamic branded mobile and desktop

↳ proves Clarity

Epic 02

Accounts

Balance first. Movement second. Action third. Stories surface contextual education at the moment of relevance — not before, not after.

Accounts — Emirates NBD overview with balance, recent transactions, and contextual stories Accounts — Emirates Islamic overview with balance, recent transactions, and contextual stories

↳ proves Hierarchy

Epic 03

Cards

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.

Cards — debit and credit overview on mobile and desktop

↳ proves Consistency

Epic 04

Pay & Transfer

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.

Pay and Transfer — transfer money flow on mobile and desktop with action tips on the right

↳ proves Familiarity

Take away

From 700+ screens to one living system.

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.

Previous Network International