A leading Gulf-state telecom provider serving 15M+ monthly users.
Problem
After updating an outdated and inconsistent UI for their multifunctional mobile app, the client faced challenges in maintaining design coherence across platforms. They needed a scalable and developer-friendly design system to streamline future updates.
Challenge
Implementing Dark Mode while maintaining WCAG-compliant accessibility and visual harmony.
Designing a Right-to-Left (RTL) interface for Arabic users, ensuring intuitive usability across 2,000+ screens and components.
Standardizing components for cross-platform consistency, reducing redundancy in the 200+ unique UI elements previously used.
Process
Component Optimization: Audited and cut component count by 40%, consolidating redundant UI elements and improving efficiency.
Design Tokens & Theming: Implemented Figma Variables for colors, typography, and spacing, enabling one-click theme switching for Light/Dark Mode.
RTL Adaptation: Designed RTL versions of all components, including mirrored layouts and 50+ custom icon redesigns for improved usability.
Developer Collaboration: Partnered with engineers to ensure a seamless handoff via Figma Dev Mode, reducing design-to-code inconsistencies by 30%.
Result
A lightweight yet scalable design system that cut UI design time by 50% and accelerated product updates.
One-click toggles for Dark Mode and English/Arabic language switching.
Faster development cycles, reducing front-end development time by 30% due to a structured, reusable component library.
Improved UI consistency and accessibility, reducing user-reported UI issues by 25% post-launch.
