Mirror Modes
Building a scalable bilingual design system that cuts design time in half.
project overview
Project
Mobile App Design System
Client
Bank Byblos
Role
Lead Designer (Solo)
Services
Design Systems
UX/UI Design
Research
Platform
iOS & Android
Duration
Aug 2024 -> Sep 2025
The Challenge
Byblos Bank needed to modernize their mobile banking application to better represent their brand and compete with contemporary digital banking standards. They had hired an agency to create initial designs, but the results fell short, the interface felt dated, inconsistent, and lacked the polish expected from a modern financial institution.
Looking deeper, the core issue became clear: there was virtually no design system. With only a few components in their Figma file, the app suffered from inconsistent typography, random button styles, and poor visual hierarchy. But the challenge went beyond just creating components; Byblos Bank needed a system that could scale across multiple regional apps and eventually extend to their website and ATM interfaces, all while supporting both English and Arabic languages.
Traditional bilingual design approaches would require designing every screen twice, effectively doubling design time and multiplying the risk of inconsistencies between versions. The bank needed a smarter solution that could deliver quality, consistency, and efficiency simultaneously.
Research & Foundation
I began with two weeks of competitive research, analyzing top banking apps worldwide through Mobbin and direct testing of apps like Chase, Revolut, N26, and HSBC. This research revealed that modern banking apps prioritize clarity over complexity, use card-based interfaces for better scannability, and implement progressive disclosure to reduce cognitive load.
The real innovation came in how I structured the system itself. Rather than jumping straight into components, I built a three-tier token architecture: primitive tokens (raw values like `color-purple-100`), semantic tokens (purposeful names like `color-brand-primary`), and component tokens (context-specific like `button-primary-background`). This hierarchy meant that changing one primitive token would cascade throughout the entire system automatically.
The Bilingual Breakthrough
The breakthrough came through Figma's Variables and Modes. Instead of designing 940 screens (470 in English + 470 in Arabic), I engineered a system where designers build once in English, then switch to "Arabic" mode to see the entire interface transform instantly: text translates, layout direction reverses (LTR to RTL), icons flip to appropriate sides, spacing adjusts automatically, and the entire typeface switches from Helvetica Neue to Noto Kufi Arabic.
Every component was built with language awareness baked in. A button component doesn't just change text from "Continue" to "استمرار", it intelligently handles text direction, adjusts padding for Arabic's different character widths, switches to the appropriate typeface, and ensures proper alignment. This wasn't just translation; it was cultural and typographic adaptation built into the design system's DNA.
Building at Scale
Following atomic design principles, I built 45 core components with 270+ intelligent variants. Each component was designed for maximum flexibility. An Action Card, for example, can appear as a simple navigation element, an informational card with descriptions, a status card with chips, or a settings toggle, all from the same base component.
The system included comprehensive documentation directly in Figma: usage guidelines, do's and don'ts, accessibility requirements, and real-world examples. This wasn't just a component library; it was a complete framework for how Byblos Bank designs digital products.
I delivered a production-ready design system that successfully scaled to support 470+ screens designed by the implementation team. The bilingual variable system reduced design time by 50%. What traditionally required creating separate English and Arabic files became a single-click transformation.
After the implementation team completed their work, I returned to conduct a comprehensive UX/UI audit. I created a four-tier flagging system (Critical, Moderate, Minor, Suggestions) to categorize issues and worked with stakeholders to achieve 90% design fidelity between the designs and developed product. The remaining 10% represented acceptable compromises for technical constraints—a realistic outcome for complex enterprise projects.
The system was built for scalability from day one. With its token-based architecture, adding dark mode becomes a matter of creating a new color mode in Variables. Expanding to web or ATM interfaces means applying the same components and patterns to new contexts. The foundation is solid, flexible, and future-proof.
The app successfully launched with the design system as its foundation, transforming Byblos Bank's digital presence from dated to competitive with modern banking standards. The client's satisfaction was evident—they immediately contracted me to design their website using the same system foundation.
Beyond the immediate launch, the true impact lies in efficiency and scalability. The 50% reduction in design time for bilingual screens translates to significant cost savings for every future project. The 90% design fidelity demonstrates that the system is robust enough to survive the journey from design to development. And the token-based architecture means that as Byblos Bank's brand evolves, updates can cascade throughout the entire digital ecosystem with surgical precision.
Perhaps most importantly, the system established a new standard for how Byblos Bank approaches digital product design—moving from ad-hoc execution to systematic, scalable thinking.
Quality control at scale: Auditing 470+ screens using a systematic four-tier flagging approach to ensure design system consistency.
VIEW NEXT PROJECT
Found Space
Transforming scattered services into a clear, scalable information architecture serving all of Dubai
Living Memory
Designing a knowledge governance platform that treats information as a living, evolving network
