Enter the password to continue. If you've been given access, this should take a moment.
Seventeen months at Mashreq, scaling design across two business divisions, four brand themes, and four platforms — from the consumer app rewrite to the Apple Watch companion, the onboarding flow, and Titan, the corporate banking portal. The throughline: a tokenized component library, a governance portal, and a +45% lift in brand standardization across RBG and CIBG.
Mashreq's mobile app had shipped MVP and stalled. User testing surfaced a dashboard that was doing too much at once — accounts, cards, loans, investments, rewards, all competing for the same fold. Two hamburger menus argued with each other. The "More" overflow had become a dumping ground for everything new product wanted to launch.
Beneath the app problem sat a bigger one. Mashreq served four customer segments — Conventional, Islamic, Gold, Private — and two business divisions — Retail (RBG) and Corporate & Investment (CIBG/Marketplace). Each had drifted into its own visual language. Designers and engineers were reinventing buttons, cards, and forms from scratch every quarter. A shared system didn't exist. Brand standardization, when measured, sat well below where leadership wanted it.
The legacy footer sent users into "More" for almost everything that wasn't a balance check. We rebuilt around a single search-first dashboard — predictive, conversational, learning from usage — and a footer of five clear destinations. Pay and Transfer collapsed into one (they're the same outcome to a customer); Wealth, Chat, and Marketplace got proper homes instead of fighting for overflow.
// One search bar replaced manual drill-down. Tab structure cut first-paint API calls by deferring everything that wasn't visible.
Each sprint cycled through the same five lenses — but the constant at the centre was the design system. Components, tokens, and themes evolved with every sprint, then fed back into the next round of screens, both for the consumer app and for the broader Mashreq portfolio across CIBG.
The visible part is components. The system is design tokens, theme files, code, the governance portal, and the working agreements between design and engineering — all sitting behind one source of truth that ships across four brands and four platforms.
With the IA settled and the system in place, four principles guided every screen we drew across the Mashreq portfolio. The screens themselves are how we evidence them.
A dashboard that recognises the customer. Popular beneficiaries surface where the next transaction begins. Salaam Rewards earns a slot on first paint, not three taps deep. Suggested products appear in the customer's flow, not as a banner that interrupts it.
→ Dashboard · beneficiaries, rewards, and suggested offers in the customer's flow
Balance first. Action second. Movement third. The Current Account screen leads with a number you came to see, surfaces four primary actions in a single calm row, and lets transactions read like a list — not a wall. Categorised iconography makes a Salik recharge identifiable in under a second.
→ Current Account · balance, action, movement — in that order
Same component library, same IA, same content. Conventional in orange, Islamic in green, Gold in gold, Private in dark grey. The theme is a file, not a project — and a brand swap that used to take months ships in a sprint.
→ Same dashboard · four brand themes · one library
Designed for the smallest surface first. The Apple Watch faces — Accounts, Cards, Salaam Rewards, Find Us — show only what the wrist can read in a glance: balance, last transaction, branch distance. Type ramps tested at small sizes. Contrast verified to AA. If it works on a 41mm display, it works everywhere.
→ Apple Watch · glance-readable at 41mm
The same tokens. The same component library. The same four visual principles — themed and shipped across iOS, Android, Apple Watch, the onboarding flow, and the Titan corporate portal. Below, the four hero epics that prove the system worked everywhere it needed to.
The same dashboard, themed at runtime for Conventional, Islamic, Gold, and Private. Customers move between segments — say, opening a Private account — and the app theme follows them. No redesign. No refactor. A theme file.
↳ proves Themability
A wearable scoped to the four things customers actually wanted on their wrist — balance, last transaction, rewards, nearest branch. The same tokens that ship the iPhone app drive the watch faces; type and contrast tuned for the smallest target.
↳ proves Accessibility
Biometric login as the default, password as the calm fallback. Four promotional splash variants for help & support, instant transfers, instant credit cards, and three-step account opening — all sharing the same chrome, type ramp, and motion language.
↳ proves Hierarchy
A web portal for corporate clients in CIBG-Marketplace. Transactions, Decision Hub, Behavioral & Predictive Analytics, Industry Insights, Marketplace — all built from the same token set. Different colour temperature for the enterprise context, same vocabulary for the rest.
↳ proves Personalization
The seventeen months at Mashreq weren't about one app. They were about scaling design across four brand segments, four platforms, and two business divisions — and giving the org a system they could ship from without reinventing the work each time. Tokens in JSON, themes as files, components in code, the governance portal stitching it together.
The headline number — 45% improvement in brand standardization — captured what the work bought back: consistency at the brand layer, speed at the design layer, and a shared vocabulary between design and engineering across RBG and CIBG-Marketplace. A theme swap stopped being a project. A new product launch stopped starting from zero.