Beyond Screens:
Beyond Screens:
Beyond Screens:
Building the
Building the
Building the
Building the
Design System
Design System
Design System
Design System
👩🏻💻: Product Designer
👩🏻💻: Product Designer
👩🏻💻: Product Designer
📲: Andriod, iOS
📲: Andriod, iOS
📲: Andriod, iOS
💻: Mobile, Web
💻: Mobile, Web
💻: Mobile, Web
🏢: QNB
🏢: QNB
🏢: QNB
👥: 3 Designers
👥: 3 Designers
👥: 3 Designers
What happens when a bank decides to redesign everything?
What happens when a bank decides to redesign everything?
What happens when a bank decides to redesign everything?
QNB — one of the largest banks in the Middle East — was ready to rethink how people experience its mobile banking and netbanking platforms.
QNB — one of the largest banks in the Middle East — was ready to rethink how people experience its mobile banking and netbanking platforms.
QNB — one of the largest banks in the Middle East — was ready to rethink how people experience its mobile banking and netbanking platforms.
The toughest design challenge
The toughest design challenge
The toughest design challenge
Light Mode
Light Mode
Light
Mode
Dark Mode
Dark Mode
Dark
Mode
User segments
User segments
Regular
Regular
(Default)
(Default)
First
First
(Premium)
(Premium)
Youth
Youth
(Under 18 y/o)
(Under 18 y/o)
The solution seems simple, right?
The solution seems simple, right?
Six versions of every component
Six versions of every component
Six versions of every component
The Real Solution
The Real Solution
The Real Solution
Consistent token structure
Consistent token structure
Consistent token structure
PRIMARY color variation
PRIMARY color variation
PRIMARY color variation
The Foundation
The Foundation
The Foundation
Abstract
Abstract
Concrete
Concrete
Atoms
Molecules
Organisms
Templates
Pages
Atoms
Molecules
Organisms
Templates
Pages
Brad Frost’s Atomic Design Framework
Brad Frost’s Atomic Design Framework
Atoms
Atoms
Atoms
COLORS
COLORS
COLORS
A simplified palette centered around QNB’s signature blue
A simplified palette centered around QNB’s signature blue paired with balanced neutrals and accent tones for accessibility.
A simplified palette centered around QNB’s signature blue
paired with balanced neutrals and accent tones for accessibility.
paired with balanced neutrals and accent tones for accessibility.
TYPOGRAPHY
TYPOGRAPHY
TYPOGRAPHY
Defined a clear type scale and hierarchy that balanced authority and legibility in both English and Arabic.
Defined a clear type scale and hierarchy that balanced authority and legibility in both English and Arabic.
Defined a clear type scale and hierarchy that balanced authority and legibility in both English and Arabic.
Built on an 8px grid to ensure rhythm, alignment, and scalability.
Built on an 8px grid to ensure rhythm, alignment, and scalability.
Built on an 8px grid to ensure rhythm, alignment, and scalability.
SPACING ¶ GRID
SPACING ¶ GRID
SPACING ¶ GRID
ICONOGRAPHY
ICONOGRAPHY
ICONOGRAPHY
Unified stroke thickness, corner radii, and proportions for consistency across all icons.
Unified stroke thickness, corner radii, and proportions for consistency across all icons.
Unified stroke thickness, corner radii, and proportions for consistency across all icons.
Molecules
Molecules
Molecules
Buttons
Buttons
Buttons
Input fields
Input fields
Input fields
Organisms
Organisms
Organisms
Outstanding Balance
Outstanding Balance
EGP 5,361.56
EGP 5,361.56
Available Balance
Available Balance
EGP 1,25,700.00
EGP 1,25,700.00
Next Instalment Date
Next Instalment Date
12 Mar 2025
12 Mar 2025
Overdue
Overdue
No of Instalments
No of Instalments
24
24
22% Paid
22% Paid
12/24 Instalments
12/24 Instalments
Outstanding Balance
Outstanding Balance
EGP 5,361.56
EGP 5,361.56
Available Balance
Available Balance
EGP 1,25,700.00
EGP 1,25,700.00
Next Instalment Date
Next Instalment Date
12 Mar 2025
12 Mar 2025
Overdue
Overdue
No of Instalments
No of Instalments
24
24
22% Paid
22% Paid
12/24 Instalments
12/24 Instalments
Available Balance
Available Balance
EGP 1,25,700.00
EGP 1,25,700.00
Updated: Today, 1:40 PM
Updated: Today, 1:40 PM
Daily Limits
Daily Limits
POS Purchases
POS Purchases
EGP 5,361.56
EGP 5,361.56
ATM Withdrawals
ATM Withdrawals
EGP 750.00
EGP 750.00
Online Transfers
Online Transfers
EGP 20,000.00
EGP 20,000.00
Available Balance
Available Balance
EGP 1,25,700.00
EGP 1,25,700.00
Updated: Today, 1:40 PM
Updated: Today, 1:40 PM
Daily Limits
Daily Limits
POS Purchases
POS Purchases
EGP 5,361.56
EGP 5,361.56
ATM Withdrawals
ATM Withdrawals
EGP 750.00
EGP 750.00
Online Transfers
Online Transfers
EGP 20,000.00
EGP 20,000.00
Outstanding Balance
Outstanding Balance
EGP 5,361.56
EGP 5,361.56
Available Balance
Available Balance
EGP 1,25,700.00
EGP 1,25,700.00
Next Instalment Date
Next Instalment Date
12 Mar 2025
12 Mar 2025
Overdue
Overdue
No of Instalments
No of Instalments
24
24
22% Paid
22% Paid
12/24 Instalments
12/24 Instalments
Outstanding Balance
Outstanding Balance
EGP 5,361.56
EGP 5,361.56
Available Balance
Available Balance
EGP 1,25,700.00
EGP 1,25,700.00
Next Instalment Date
Next Instalment Date
12 Mar 2025
12 Mar 2025
Overdue
Overdue
No of Instalments
No of Instalments
24
24
22% Paid
22% Paid
12/24 Instalments
12/24 Instalments
Available Balance
Available Balance
EGP 1,25,700.00
EGP 1,25,700.00
Updated: Today, 1:40 PM
Updated: Today, 1:40 PM
Daily Limits
Daily Limits
POS Purchases
POS Purchases
EGP 5,361.56
EGP 5,361.56
ATM Withdrawals
ATM Withdrawals
EGP 750.00
EGP 750.00
Online Transfers
Online Transfers
EGP 20,000.00
EGP 20,000.00
Disabled Card
Disabled Card
Disabled Card
Available Balance
Available Balance
EGP 1,25,700.00
EGP 1,25,700.00
Updated: Today, 1:40 PM
Updated: Today, 1:40 PM
Daily Limits
Daily Limits
POS Purchases
POS Purchases
EGP 5,361.56
EGP 5,361.56
ATM Withdrawals
ATM Withdrawals
EGP 750.00
EGP 750.00
Online Transfers
Online Transfers
EGP 20,000.00
EGP 20,000.00
Home
Home
Payments
Payments
Transfer
Transfer
Cards
Cards
Home
Home
Payments
Payments
Transfer
Transfer
Cards
Cards
Home
Home
Payments
Payments
Transfer
Transfer
Cards
Cards
Home
Home
Payments
Payments
Transfer
Transfer
Cards
Cards
Search
Search
Search
Search
Search
Search
Assets & Liabilities
Assets & Liabilities
View Breakdown
View Breakdown
Assets
Assets
EGP 1,34,987
EGP 1,34,987
Liabilities
Liabilities
EGP 24,342
EGP 24,342
75%
75%
Due Today
Due Today
310930981825
310930981825
Vodafone
Vodafone
Mobile Recharge
Mobile Recharge
Due On 26 Apr
Due On 26 Apr
EGP 500.00
EGP 500.00
Pay
Pay
Due in 4 Days
Due in 4 Days
6009284637
6009284637
Egyptian Electric Utility & Consumer Protection
Egyptian Electric Utility & Consumer Protection
Electricity Bill
Electricity Bill
Due On 30 Apr
Due On 30 Apr
EGP 1296.00
EGP 1296.00
Pay
Pay
Due Today
Due Today
6830272528
6830272528
American International School - Egypt
American International School - Egypt
School Fees
School Fees
Due On 20 May
Due On 20 May
EGP 87,000
EGP 87,000
Pay
Pay
Due Today
Due Today
310930981825
310930981825
Holding Company for Water and Wastewater (HCWW)
Holding Company for Water and Wastewater (HCWW)
Water Bill
Water Bill
Due On 26 Apr
Due On 26 Apr
EGP 5000
EGP 5000
Pay
Pay
Quick Actions
Quick Actions
Send
Money
Send
Money
Pay Utilities
Pay Utilities
New
New
Apple
Pay
Apple
Pay
Scan To
Pay
Scan To
Pay
Track Requests
Track Requests
Pay
Cards
Pay
Cards
Mobile Top Up
Mobile Top Up
Activity Tracker
Activity Tracker
All
All
Loans
Loans
Deposits
Deposits
Investments
Investments
Cards
Cards
Today • 22 April 2025
Today • 22 April 2025
Address Change request
Address Change request
5 mins ago
5 mins ago
In Progress
In Progress
#8903678936
#8903678936
Track
Track
Loan Request for EGP 8,000
Loan Request for EGP 8,000
45 mins ago
45 mins ago
Approved
Approved
#8903678936
#8903678936
Track
Track
Fund Transfer of EGP 12,895
Fund Transfer of EGP 12,895
2hrs ago
2hrs ago
Pending
Pending
#8903678936
#8903678936
Track
Track
Show more
Show more
Activity Tracker
Activity Tracker
Today • 22 April 2025
Today • 22 April 2025
Car Loan EMI of EGP 1,250.00
Car Loan EMI of EGP 1,250.00
5 mins ago
5 mins ago
In Progress
In Progress
#8903678936
#8903678936
Track
Track
Staff Personal Loan of EGP 1,250.00
Staff Personal Loan of EGP 1,250.00
45 mins ago
45 mins ago
Approved
Approved
#8903678936
#8903678936
Track
Track
Cash Loan Against Car License of EGP 3,94,743
Cash Loan Against Car License of EGP 3,94,743
2hrs ago
2hrs ago
Pending
Pending
#8903678936
#8903678936
Track
Track
Show more
Show more
Activity Tracker
Activity Tracker
Today • 22 April 2025
Today • 22 April 2025
New - Fixed CD Exclusive
New - Fixed CD Exclusive
5 mins ago
5 mins ago
In Progress
In Progress
#8903678936
#8903678936
Track
Track
Break - Fixed CD First Plus
Break - Fixed CD First Plus
45 mins ago
45 mins ago
Approved
Approved
#8903678936
#8903678936
Track
Track
Open Deposit
Open Deposit
2hrs ago
2hrs ago
Pending
Pending
#8903678936
#8903678936
Track
Track
Show more
Show more
Templates
Templates
Templates
Atoms + Molecules + Organisms = Page-level templates
Atoms + Molecules + Organisms = Page-level templates
Atoms + Molecules + Organisms = Page-level templates
The result: instead of creating designs from scratch, we were assembling experiences
The result: instead of creating designs from scratch, we were assembling experiences
Atom
Molecule
Organism
Atom
Molecule
Organism
Atom
Molecule
Organism
Organism
Molecule
Atom
Organism
Molecule
Atom
Organism
Molecule
Atom
Atom
Molecule
Organism
Atom
Molecule
Organism
Atom
Molecule
Organism
The Living Library
The Living Library
The Living Library
To make the system accessible, I structured it into a centralized Figma library, organized by hierarchy
To make the system accessible, I structured it into a centralized Figma library, organized by hierarchy
Variables
Variables
Variables
The Visual Outcome
The Visual Outcome
The Visual Outcome
As the design system matured, the product experience transformed.
Every screen felt connected — not by coincidence, but by design.
As the design system matured, the product experience transformed.
Every screen felt connected — not by coincidence, but by design.
As the design system matured, the product experience transformed.
Every screen felt connected — not by coincidence, but by design.
Mobile screens
Mobile screens
Mobile screens
Dashboard
Regular - Light mode
Dashboard
Regular - Dark mode
Accounts
Regular - Light mode
Accounts
First - Dark mode
Cards
Regular - Light mode
Cards
Youth - Dark mode
Deposits
Regular - Light mode
Deposits
Regular - Dark mode
Dashboard
Regular - Light mode
Dashboard
Regular - Dark mode
Accounts
Regular - Light mode
Accounts
First - Dark mode
Cards
Regular - Light mode
Cards
Youth - Dark mode
Deposits
Regular - Light mode
Deposits
Regular - Dark mode
Dashboard
Regular - Light mode
Dashboard
Regular - Dark mode
Accounts
Regular - Light mode
Accounts
First - Dark mode
Cards
Regular - Light mode
Cards
Youth - Dark mode
Deposits
Regular - Light mode
Deposits
Regular - Dark mode
The new QNB app now communicated what the brand always stood for —
The new QNB app now communicated what the brand always stood for —
trust, stability, and modern sophistication
trust, stability, and modern sophistication
Lessons Learned
Lessons Learned
Lessons Learned
Building a design system while redesigning a product taught me a few key lessons:
Building a design system while redesigning a product taught me a few key lessons:
Building a design system while redesigning a product taught me a few key lessons:
Systems emerge from repetition. You find patterns before you define them.
Systems emerge from repetition. You find patterns before you define them.
Systems emerge from repetition. You find patterns before you define them.
Atomic design scales clarity. The smaller your building blocks, the stronger your structure.
Atomic design scales clarity. The smaller your building blocks, the stronger your structure.
Atomic design scales clarity. The smaller your building blocks, the stronger your structure.
Consistency builds confidence. For a financial product, that confidence translates to trust.
Consistency builds confidence. For a financial product, that confidence translates to trust.
Consistency builds confidence. For a financial product, that confidence translates to trust.
“A design system isn’t built once — it’s grown over time, one decision at a time.”
“A design system isn’t built once — it’s grown over time, one decision at a time.”
“A design system isn’t built once — it’s grown over time, one decision at a time.”
HAVE A COOL IDEA? LET’S WORK TOGETHER
Bengaluru, India ❤
HAVE A COOL IDEA? LET’S WORK TOGETHER
Bengaluru, India ❤
HAVE A COOL IDEA? LET’S WORK TOGETHER
Bengaluru, India ❤
HAVE A COOL IDEA? LET’S WORK TOGETHER
Bengaluru, India ❤