AlJazira SMART & SAIB
Banking UX & Design System
Role
UI & UX Product Designer
Platforms
iOS/Android Mobile, Web
Duration
2 year
Challenge & Goal
BACKGROUND & CHALLENGE
Both platforms suffered from inconsistent UI patterns, no shared design language, and limited support for the Arabic-speaking user base. AlJazira SMART and SAIB operated as independent products with fragmented component libraries, creating high maintenance costs and an uneven user experience across retail and business segments. The brief required a single scalable design system deployable across both apps, paired with a full RTL/LTR architecture to serve Saudi Arabian and broader MENA markets compliantly.
GOAL
✓ Build a unified design system: to eliminate the maintenance overhead of two fragmented libraries and give engineering a single source of truth across retail and corporate products.
✓ Full RTL/LTR layout support: to remove the navigation errors Arabic-speaking users experienced due to broken component mirroring, and to enable MENA market compliance without per-market redesigns.
✓ Redesign core transactional flows: to reduce friction points in the highest-risk user journeys (fund transfers, multi-currency) where errors carried real financial and reputational consequences.
✓ Accelerate future development velocity: by providing engineering teams with annotated, token-based specs they could implement without daily design oversight.
Products in scope
AlJazira SMART
Personal banking app for individual customers: account management, transfers, payments, and financial services. Link: bankaljazira.com
SAIB Mobile
Business banking app for corporate clients: multi-currency operations, bulk transfers, and treasury management. Link: saib.com.sa
Design System Objectives
The Design System must be scalable, consistent, and adaptable, supporting both consumer and corporate banking contexts while maintaining a unified brand experience. It should define a clear structure that allows both applications to share core foundations while diverging where necessary based on user needs and complexity.
Design Process
Cross-App UX Redesign (Use Case)
This project focused on redesigning two banking apps into a unified, scalable system while ensuring full support for both LTR and RTL experiences. The main goal was to reduce fragmentation, improve consistency, and strengthen critical financial flows
such as transfers, onboarding, and account management.
I started with a detailed audit of both applications, identifying inconsistencies in components, broken RTL implementations, and high-friction user journeys. This analysis informed a shared system strategy, where I worked closely with product and engineering to define a unified component architecture and flexible design tokens supporting both brands within a single library.
Before moving into UI, I established the RTL architecture at system level, defining layout logic, spacing rules, and directional behaviors to ensure bidirectional support was built into the foundation. I then redesigned the most critical flows, fund transfers, multi-currency, and onboarding, validating them through prototype reviews with product and compliance teams.
Impact Metrics
System Unification: Co-built a tokenized, cross-app component library that wiped out per-product design debt and significantly accelerated engineering velocity.
Flawless RTL Architecture: Engineered a native bidirectional layout framework that preserved visual hierarchy and cognitive ease for Arabic users without fracturing the codebase.
Operational and Design Experience
MY ROLE
To ensure consistency across the platform, I designed dedicated component variants, including live rate badges and countdown timers for expiring rates, embedding conversion transparency directly into the design system. This ensured that trust-critical information remained visible and accessible throughout all interactions with currency exchange features across the application.
I also streamlined complex corporate banking flows for SAIB by redesigning the currency exchange experience with a strong focus on transparency, trust, and
decision-making. By surfacing real-time exchange rates, rate expiration indicators,
and conversion details, I helped users make more informed financial decisions
with greater confidence.
Mobile Ergonomics & Multi-Platform Tokens
I optimized transactional flows for mobile and tablet use by defining clear spacing and touch-target tokens within the design system, aligned with thumb-zone ergonomics. By designing adaptive component behaviors instead of fixed layouts, I ensured a consistent and highly usable experience across both iOS and Android platforms.
Results
