Over the past year, I initiated and lead the development of a scalable design system featuring tokens, themes, and sub-brand support.
Problem
The legacy design system was developed exclusively for the bank’s main website, lacking support for other projects, sub-brands, or a shared component library.
This led to inefficiencies:
Designers rebuilt components for each product.
Mobile teams manually adapted iOS/Android layouts for dark mode.
Developers duplicated code instead of reusing assets, increasing maintenance.
Solution
We replaced the legacy system with a modular architecture designed for growth, introducing design tokens with semantic naming, a Figma plugin for exporting to CSS, a theme and sub-brand engine that dynamically adapts components, eliminating manual redesigns, and synchronized libraries between Figma (design) and React (code) with strict version control. For instance, switching themes, adapting to sub-brands, or adjusting for platforms now takes 2 seconds instead of 2 days.
My Role
Initiator: Advocated for the system’s ROI, securing executive support.
Architect: Structured tokens, component libraries, and documentation.
Bridge: Facilitated design-dev collaboration and resolved integration blockers.
Work processes
To ensure seamless team collaboration, we implemented regular meetings:
Weekly Planning: At the start of each week, we set goals and assigned tasks.
Workshops: We trained designers on working with tokens and components.
Joint Reviews: We held review sessions to check new components before integration.
End-of-Week Reports: We shared progress updates and discussed challenges.
We launched the redesigns of Alif Shop and Alif Business in parallel to identify essential components and test the system’s scalability.
Outcome
Faster design workflows
Components
Theme, sub-brand switching
The new system accelerated designers’ workflows by 30% through automation of routine tasks, allowing focus on user-centric features. The developed components cover 80% of product needs, while switching between themes, sub-brands, and platforms now takes 2 seconds instead of days or weeks.