Making UI creation scalable through a design system

Context

Rakbank is a retail and SME bank in the UAE. Two designers serving 15+ independent product teams. No shared tokens, no component library, no handoff standard. Every engineer received screenshots or PDFs. Every team was solving the same button states, spacing decisions, and RTL behaviour from scratch — in parallel, inconsistently. The brief started as 'improve the design system.' After an audit across all 15 teams, it became a full digital transformation.

Challenge

Inconsistency was the visible symptom. The real problem was infrastructure. Adding more designers wouldn't fix it. Every new screen built without a shared system added more inconsistency. Design-to-engineering handoff took three weeks per feature — not because the work was complex, but because there was no shared source of truth. Engineers were translating visual specs manually, and every implementation was a guess.

My role

I led the design system from concept to adoption. I owned the token architecture, component library, documentation strategy, and the rollout across all 15 teams. I also made the case to build the token layer before touching any screens — which is what turned a design system cleanup into a platform that could serve a full product transformation.

What I changed

• Built the token layer first, not a component library. A shared Figma library fixes visual inconsistency for designers — it doesn't change how engineers work. Tokens give engineers the same source of truth as designers: colour, typography, spacing, and motion in a format they can consume directly. Arabic/English RTL switching built into the token layer itself, not handled as a per-component override.
• 200+ unique components built on that token layer. 2,287 product instances across the product surface. The scale wasn't the goal — the goal was coverage. Every component had to account for both Arabic and English, light and dark mode, and the full range of interactive states.
• Documentation written for engineers, not designers. Implementation guidance, acceptance criteria, and edge cases — not design specs. If an engineer can build a correct implementation without asking a designer to clarify, they will. That's the failure mode I was designing against.
• Defined the adoption path so teams could ship without constant design involvement. The system spread to teams I was never directly part of. That's the sign a design system is working.

Outcome

Adopted across all 15+ product teams. Handoff time: three weeks to four days. The governance gap I would fix in hindsight: no defined process for when a new pattern becomes a component versus a one-off. Without that rule, the system risks fragmentation as it grows. Three independent appearances in production should be the threshold — until then, solve locally.