Background

I joined the team at Design Studios to help one of the Middle East’s largest banks modernise their digital experiences by translating their new brand identity into a consistent, scalable design system across all platforms.

As Lead UI/UX Designer, I worked from research through to delivery, creating a design system and redesigning core banking features for web, mobile, internet banking, and ATMs.

Challenge

The bank’s digital ecosystem had grown fragmented over time, resulting in:

• Outdated UI/UX that no longer reflected their updated brand identity.

• Cross-platform inconsistencies across mobile app, global websites, internet banking and ATMs.

• No single design framework, leading to inefficiencies and design debt.

• Need for scalable support in both English and Arabic (RTL & LTR).

The task was not only to modernise the interface, but also to future-proof the design system so it could scale across markets and platforms.

Process

• Audit: Reviewed existing digital products (global websites, mobile & internet banking, ATMs) to identify UI/UX inconsistencies and pain points.

• Research: Analysed user flows and benchmarked global banking experiences for best practices.

• Design Direction: Proposed refreshed design directions for core banking journeys, blending brand identity with modern usability.

• Workshops: Collaborated with QNB’s marketing and digital teams to align on vision, localisation needs, and component priorities.

• System Build: Created a Figma-based design system with scalable components, tokens, and variables for English and Arabic.

• Documentation: Produced an extensive guideline document for internal teams, ensuring consistent adoption across the organisation.

Solution

Developed a unified cross-platform design system for web, mobile, and ATM interfaces.

• Created scalable, bilingual components with RTL support for Arabic and LTR for English.

• Designed modernised UI for key banking screens such as dashboards, transaction flows, and login journeys.

• Delivered a comprehensive guidelines document covering accessibility, typography, colour, grids, and interaction patterns.

Impact & Results

• Although the project has only recently been delivered, it has already had a clear impact:

  • Improved cross-platform coherence — one visual language now connects websites, apps, and ATMs.

  • Faster delivery for future features — with reusable components, new flows can be built in weeks, not months.

  • Stronger brand alignment — the refreshed UI/UX now reflects the bank’s premium, trusted identity.

  • Scalability across languages — the system ensures seamless support for English and Arabic users.

  • Adoption readiness — detailed documentation empowers internal teams to maintain and expand the system independently.