Scaling UX at RAKBANK: A Unified Design System for Digital Banking
RAKBANK (National Bank of Ras Al Khaimah)
Role
Lead Product Designer @ Design System
Project Timeline
2023-2024
Industry
FinTech, Banking
Team
35 Designers, 13 Domains, Engineers, PMs
Tools
Figma, Design Token Studio, Variables, Component Libraries
online
RAKBANK, one of the UAE’s largest financial institutions, was undergoing a major digital transformation across its Personal Banking, Business Banking, and Mobile & Web Platforms. To ensure a consistent, efficient, and scalable design approach, we developed a centralized Design System that streamlined collaboration for 35 designers across 10 business domains.
With 2,287 reusable components and 122 design variables, this system not only accelerated product development but also ensured seamless bilingual support (English & Arabic). The result? A faster, more unified banking experience for millions of customers while significantly reducing design and development time.
The Challenge: A Fragmented Banking Experience
RAKBANK, one of the largest banks in the UAE, was undergoing a major digital transformation across Personal Banking, Business Banking, Mobile Apps, and Web Platforms.
However, design inconsistencies, lack of reusable components, and difficulties in English-Arabic localization were slowing down development and compromising user experience.
Key Pain Points:
Disjointed UI across different banking platforms
Time-consuming manual design updates for multilingual layouts
Users failed to complete onboarding, leading to lower activation and conversion rates.
Key Research Insight
User testing and funnel analysis revealed that many users abandoned onboarding due to unclear steps and a lack of guided assistance. This indicated a strong need for a more structured and user-friendly onboarding flow.
I cannot show screenshots from new DLS
The Solution: A Centralized Design System
To streamline the bank’s digital ecosystem, we built a scalable, tokenized Design System covering all UI components, styles, and interaction patterns.
Research & Strategy
Conducted audit of existing UI inconsistencies across 10 banking domains
Benchmarked global banking UX leaders (e.g., Revolut, N26, Monzo)
Defined design tokens and Figma variables for seamless English-Arabic switching
UX & System Architecture
Developed 2,287 reusable components to unify branding & functionality
Introduced 122 design variables (spacing, colors, typography) for cross-platform adaptability
Implemented auto-layout & constraints to reduce design effort in mobile vs. desktop
Execution & Implementation
Systematically rolled out the Design System across 13 business units
Provided hands-on workshops for 35 designers
Created Figma libraries for quick access and real-time updates
I cannot show screenshots from new DLS
The Impact: Faster Design, Better Consistency
The redesigned onboarding process delivered significant improvements:
Time to build UI screens
Before:
5-6 hours
After:
1-2 hours
Improvement:
60% faster
Design inconsistencies
Before:
High
After:
Minimal
Improvement:
Unified branding
Manual updates for bilingual layouts
Before:
2x effort
After:
Automated
Improvement:
50% efficiency gain
Biggest win?
The system enabled 35,000 component inserts weekly, ensuring RAKBANK could roll out updates faster & more consistently across platforms.
Lessons Learned & Takeaways
What did I learn?
Scalability is key: Design Systems should evolve as the business grows.
Tokenization streamlines multi-language support: This drastically improved Arabic UI consistency.
Early developer collaboration saves time: Involving engineers from the start reduced rework.
Summary
The RAKBANK Design System transformed the bank’s digital product development by creating a scalable, unified, and efficient framework for designers and developers. With 2,287 reusable components and 122 design variables, it streamlined workflows across 13 business domains, ensuring consistency, accessibility, and seamless bilingual support (English & Arabic). By reducing design time by 60%, automating multilingual layouts, and enabling 35,000 component inserts weekly, the system significantly improved speed to market and cross-team collaboration. This transformation not only enhanced the user experience across mobile and web platforms but also set a strong foundation for future digital innovation at RAKBANK.
See more case studies
Revolutionizing Social Shopping: Klarna’s Shoppable Video Case Study
A leading global Buy Now, Pay Later (BNPL) provider, continuously evolves its platform to improve the shopping experience.
Transforming Guesty’s Mobile Onboarding Experience
Guesty, a leading property management SaaS platform, aimed to enhance its mobile app experience by redefining the onboarding journey.
