AlJazira SMART & SAIB
Role
UI/UX Design - UI Developer
Platforms
iOS/Android Mobile, Web
Duration
2 year
AlJazira SMART & SAIB Metrics: 1 scalable Design System powered 2 banking apps, delivering measurable improvements across both products: +50% development speed through the shared library and +37% transfer flow completion.
CHALLENGE & ROLE
UI/UX Design - UI Developer working across AlJazira SMART and SAIB
Work on the Design System library shared across both products
Created a common set of components, tokens, patterns, and interaction states, while maintaining separate brand identities
Developed two visual themes from the same component library, using different colour palettes for AlJazira SMART and SAIB
Designed the system to support RTL/LTR, mobile, and web, improving consistency and development velocity across products
AlJazira SMART and SAIB were two different banking products with different audiences, requirements, and brand identities. Instead of maintaining separate UI libraries, we built a shared Design System foundation that could support both products from the same source.
The core components and behaviours remained consistent, while colour, branding, and product-specific patterns could change through the system’s design tokens. This allowed the teams to build two distinct banking experiences without duplicating the design and development work — creating a more scalable foundation and making it faster to introduce and maintain new features.
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
I first established the RTL/LTR architecture at system level, defining layout rules, spacing, alignment, and directional behaviour so bidirectional support was built into the foundation rather than added later.
Before building the Design System, I prototyped the highest-impact banking flows, including fund transfers, multi-currency exchange, and onboarding. I worked closely with Product and Compliance teams to review and validate the flows, ensuring they met both usability and regulatory requirements.
These validated patterns then became the foundation for the shared Design System, allowing the same components, states, and interaction logic to be reused across AlJazira SMART and SAIB while adapting to each product’s brand and RTL/LTR requirements.
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
1. One Design System, Two Banking Products
I built a shared component library for AlJazira SMART and SAIB, covering core UI components, interaction states, patterns, and design tokens. The idea was to build each component once and make it reusable across both products, instead of creating and maintaining two separate UI libraries.
I then created two visual themes on top of the same component architecture. Components kept the same structure, behaviour, and states, while colour and brand tokens changed between AlJazira SMART and SAIB. This allowed us to switch between the two product identities without redesigning or rebuilding the underlying components.
2. RTL/LTR & Multi-Platform Scalability
The library was built to work across Arabic RTL and English LTR, with components designed to handle directional changes in layout, spacing, alignment, icon positioning, and navigation. The same principles were applied across mobile and web, so components could adapt to different screen sizes without creating separate versions for each platform.
3. Designing for Development Velocity
The components were designed as reusable, development-ready building blocks, with defined properties, variants, states, and usage rules. This gave developers a shared source of truth and reduced repetitive implementation work, making it faster to build new banking journeys while keeping both products consistent and maintainable.
Results
