Consistency isn’t about making screens look the same - it’s about helping users feel confident wherever they are.
Consistency isn’t about making screens look the same - it’s about helping users feel confident wherever they are.
Consistency isn’t about making screens look the same - it’s about helping users feel confident wherever they are.
Project
Project
Project
Design System Architecture
Design System Architecture
Design System Architecture
Role
Role
Role
Product Designer
Product Designer
Product Designer
Duration
Duration
Duration
10 Weeks
10 Weeks
10 Weeks
Tools
Tools
Tools
Figma
Figma
Figma
Platform
Platform
Platform
Web + IOS
Web + IOS
Web + IOS
The Overview
The Overview
The Overview
Users move between touch points, and teams need reusable foundations rather than designing every screen separately. The expensive problem is not drawing screens - it is keeping meaning consistent as density, device and urgency change.
Users move between touch points, and teams need reusable foundations rather than designing every screen separately. The expensive problem is not drawing screens - it is keeping meaning consistent as density, device and urgency change.
Users move between touch points, and teams need reusable foundations rather than designing every screen separately. The expensive problem is not drawing screens - it is keeping meaning consistent as density, device and urgency change.
So I researched how complex transportation services organise their digital experience, built Pulse, and applied it to TransitGO - a complete government transport platform.
So I researched how complex transportation services organise their digital experience, built Pulse, and applied it to TransitGO - a complete government transport platform.
So I researched how complex transportation services organise their digital experience, built Pulse, and applied it to TransitGO - a complete government transport platform.
Problem Statement
Problem Statement
Problem Statement
The problem was never a missing screen. It was the absence of a shared foundation that could keep six kinds of information legible under time pressure, on any device.
The problem was never a missing screen. It was the absence of a shared foundation that could keep six kinds of information legible under time pressure, on any device.
The problem was never a missing screen. It was the absence of a shared foundation that could keep six kinds of information legible under time pressure, on any device.
Before drawing anything I looked at how complex, high-traffic services behave across devices. The recurring failure is the absence of a shared foundation.
Before drawing anything I looked at how complex, high-traffic services behave across devices. The recurring failure is the absence of a shared foundation.
Before drawing anything I looked at how complex, high-traffic services behave across devices. The recurring failure is the absence of a shared foundation.
01
01
01
Users arrive with urgency
Users arrive with urgency
Users arrive with urgency
People reach transport products with one goal and little patience - often one-handed, often already moving. Decisions happen in seconds.
People reach transport products with one goal and little patience - often one-handed, often already moving. Decisions happen in seconds.
People reach transport products with one goal and little patience - often one-handed, often already moving. Decisions happen in seconds.
02
02
02
Six content types, one screen
Six content types, one screen
Six content types, one screen
Routes, timetables, locations, service updates, tickets and account management all compete for the same space, on every device.
Routes, timetables, locations, service updates, tickets and account management all compete for the same space, on every device.
Routes, timetables, locations, service updates, tickets and account management all compete for the same space, on every device.
03
03
03
Consistency is a trust signal
Consistency is a trust signal
Consistency is a trust signal
When the same information behaves differently in two places, users stop trusting the data, not just the interface.
When the same information behaves differently in two places, users stop trusting the data, not just the interface.
When the same information behaves differently in two places, users stop trusting the data, not just the interface.
04
04
04
Multi-touchpoint by default
Multi-touchpoint by default
Multi-touchpoint by default
A journey is planned on a laptop and finished at a barrier. Each touchpoint needs different density and identical meaning.
A journey is planned on a laptop and finished at a barrier. Each touchpoint needs different density and identical meaning.
A journey is planned on a laptop and finished at a barrier. Each touchpoint needs different density and identical meaning.
WHAT I DID?
WHAT I DID?
WHAT I DID?
12
12
12
Depth interviews
Depth interviews
Depth interviews
Commuters, occasional travellers and step-free users
Commuters, occasional travellers and step-free users
Commuters, occasional travellers and step-free users
4
4
4
Platform audits
Platform audits
Platform audits
TfL, Underground live tools and two journey planners
TfL, Underground live tools and two journey planners
TfL, Underground live tools and two journey planners
30
30
30
Observation sessions
Observation sessions
Observation sessions
Station concourse and platform, morning and evening peak
Station concourse and platform, morning and evening peak
Station concourse and platform, morning and evening peak
6
6
6
Task analyses
Task analyses
Task analyses
The recurring jobs mapped end to end across devices
The recurring jobs mapped end to end across devices
The recurring jobs mapped end to end across devices
WHO I DESIGNED FOR?
WHO I DESIGNED FOR?
WHO I DESIGNED FOR?
Amara Okonkwo
Amara Okonkwo
Amara Okonkwo
34 · Daily commuter · Zones 1–2
34 · Daily commuter · Zones 1–2
34 · Daily commuter · Zones 1–2
Travels Paddington to Canary Wharf twice a day. Opens the app to answer one question: leave now, or in four minutes?
Travels Paddington to Canary Wharf twice a day. Opens the app to answer one question: leave now, or in four minutes?
Travels Paddington to Canary Wharf twice a day. Opens the app to answer one question: leave now, or in four minutes?
Goals
Goals
Goals
Leave at exactly the right moment
Leave at exactly the right moment
Leave at exactly the right moment
Know about disruption before reaching the platform
Know about disruption before reaching the platform
Know about disruption before reaching the platform
Keep the same saved journeys on both devices
Keep the same saved journeys on both devices
Keep the same saved journeys on both devices
Frustrations
Frustrations
Frustrations
Finds out about delays only once she is already on the platform
Finds out about delays only once she is already on the platform
Finds out about delays only once she is already on the platform
Has to re-enter the same journey on desktop and phone
Has to re-enter the same journey on desktop and phone
Has to re-enter the same journey on desktop and phone
Daniel Reyes
Daniel Reyes
Daniel Reyes
58 · Step-free traveller · Occasional
58 · Step-free traveller · Occasional
58 · Step-free traveller · Occasional
Plans every trip in advance, because one flight of stairs can end a journey. Checks each leg the night before.
Plans every trip in advance, because one flight of stairs can end a journey. Checks each leg the night before.
Plans every trip in advance, because one flight of stairs can end a journey. Checks each leg the night before.
Goals
Goals
Goals
Confirm every leg of a route is step-free
Confirm every leg of a route is step-free
Confirm every leg of a route is step-free
Trust the accessibility data is current
Trust the accessibility data is current
Trust the accessibility data is current
Plan on a laptop, travel with a phone
Plan on a laptop, travel with a phone
Plan on a laptop, travel with a phone
Frustrations
Frustrations
Frustrations
Accessibility information sits apart from the journey planner
Accessibility information sits apart from the journey planner
Accessibility information sits apart from the journey planner
Step-free status is not shown alongside live disruption
Step-free status is not shown alongside live disruption
Step-free status is not shown alongside live disruption
Competitive Analysis
Competitive Analysis
Competitive Analysis
I studied how established London services organize their digital experience - TfL, Underground live-service tools and journey planners - to map what a transport interface has to carry.
I studied how established London services organize their digital experience - TfL, Underground live-service tools and journey planners - to map what a transport interface has to carry.
I studied how established London services organize their digital experience - TfL, Underground live-service tools and journey planners - to map what a transport interface has to carry.
Because people use these platforms with urgency and a specific goal, four qualities matter more than visual novelty:
Because people use these platforms with urgency and a specific goal, four qualities matter more than visual novelty:
Because people use these platforms with urgency and a specific goal, four qualities matter more than visual novelty:
Clear hierarchy
Clear hierarchy
Clear hierarchy
Fast decision-making
Fast decision-making
Fast decision-making
Predictable interactions
Predictable interactions
Predictable interactions
Reduced cognitive load
Reduced cognitive load
Reduced cognitive load
Design Oppurtunity
Design Oppurtunity
Design Oppurtunity
The hard problem is not any single screen - it is keeping meaning stable while density, device and urgency change. A systems problem before an interface problem.
The hard problem is not any single screen - it is keeping meaning stable while density, device and urgency change. A systems problem before an interface problem.
The hard problem is not any single screen - it is keeping meaning stable while density, device and urgency change. A systems problem before an interface problem.
Make the foundation the deliverable
Make the foundation the deliverable
Make the foundation the deliverable
Decide colour, type, spacing, radius and state once, so every screen inherits them instead of re-deciding.
Decide colour, type, spacing, radius and state once, so every screen inherits them instead of re-deciding.
Decide colour, type, spacing, radius and state once, so every screen inherits them instead of re-deciding.
Encode urgency into components
Encode urgency into components
Encode urgency into components
Hit area, contrast and status legibility become component properties rather than per-screen judgment calls.
Hit area, contrast and status legibility become component properties rather than per-screen judgment calls.
Hit area, contrast and status legibility become component properties rather than per-screen judgment calls.
Design for the second product
Design for the second product
Design for the second product
Build so a website and an app can be assembled from the same parts, not drawn twice.
Build so a website and an app can be assembled from the same parts, not drawn twice.
Build so a website and an app can be assembled from the same parts, not drawn twice.
Why transportation?
Why transportation?
Why transportation?
A product complex enough to prove the system
A product complex enough to prove the system
A product complex enough to prove the system
A design system only proves scalability if the product is genuinely demanding. Transportation forces every part of a system to work at once.
A design system only proves scalability if the product is genuinely demanding. Transportation forces every part of a system to work at once.
A design system only proves scalability if the product is genuinely demanding. Transportation forces every part of a system to work at once.
Multiple user journeys
Multiple user journeys
Multiple user journeys
High information density
High information density
High information density
Location-based interactions
Location-based interactions
Location-based interactions
Time-sensitive decisions
Time-sensitive decisions
Time-sensitive decisions
Competing user goals
Competing user goals
Competing user goals
Cross-platform use
Cross-platform use
Cross-platform use
A simpler product would not have tested it
A simpler product would not have tested it
A simpler product would not have tested it
An e-commerce site concentrates on discovery and transaction - largely one journey repeated. A marketing site exercises the type ramp and little else.
An e-commerce site concentrates on discovery and transaction - largely one journey repeated. A marketing site exercises the type ramp and little else.
An e-commerce site concentrates on discovery and transaction - largely one journey repeated. A marketing site exercises the type ramp and little else.
Transportation demands all of it in parallel
Transportation demands all of it in parallel
Transportation demands all of it in parallel
Navigation, planning, information processing and real-time decisions happen together, for users with different goals, on two very different devices.
Navigation, planning, information processing and real-time decisions happen together, for users with different goals, on two very different devices.
Navigation, planning, information processing and real-time decisions happen together, for users with different goals, on two very different devices.
Design System Strategy
Design System Strategy
Design System Strategy
Low - Fidelity
Low - Fidelity
Low - Fidelity
DEFINING EXPERIENCE BEFORE INTERFACE
DEFINING EXPERIENCE BEFORE INTERFACE
DEFINING EXPERIENCE BEFORE INTERFACE
Before any visual decision I worked in low fidelity to solve structure. Navigation, content priority and journey sequence were settled here — with real copy, so each layout was tested against the density it would carry.
Before any visual decision I worked in low fidelity to solve structure. Navigation, content priority and journey sequence were settled here — with real copy, so each layout was tested against the density it would carry.
Before any visual decision I worked in low fidelity to solve structure. Navigation, content priority and journey sequence were settled here — with real copy, so each layout was tested against the density it would carry.
01
01
01
Information hierarchy
Information hierarchy
Information hierarchy
Transport screens carry routes, times, fares, disruption and tickets at once. Working in grey forced the question of what a user needs first, what can wait, and what belongs elsewhere.
Transport screens carry routes, times, fares, disruption and tickets at once. Working in grey forced the question of what a user needs first, what can wait, and what belongs elsewhere.
Transport screens carry routes, times, fares, disruption and tickets at once. Working in grey forced the question of what a user needs first, what can wait, and what belongs elsewhere.
02
02
02
User flow validation
User flow validation
User flow validation
This is where I walked the real tasks - plan a journey, check a line, buy a ticket - looking for friction in the sequence before any of it looked finished.
This is where I walked the real tasks - plan a journey, check a line, buy a ticket - looking for friction in the sequence before any of it looked finished.
This is where I walked the real tasks - plan a journey, check a line, buy a ticket - looking for friction in the sequence before any of it looked finished.
03
03
03
System thinking
System thinking
System thinking
Patterns that kept reappearing across layouts, the status row, the result card, the filter bar - are the ones that became components. The system was discovered here, not invented afterwards.
Patterns that kept reappearing across layouts, the status row, the result card, the filter bar - are the ones that became components. The system was discovered here, not invented afterwards.
Patterns that kept reappearing across layouts, the status row, the result card, the filter bar - are the ones that became components. The system was discovered here, not invented afterwards.
Once the structure and interaction patterns felt intuitive, I translated these foundations into a scalable design system and high-fidelity experience.
Once the structure and interaction patterns felt intuitive, I translated these foundations into a scalable design system and high-fidelity experience.
Once the structure and interaction patterns felt intuitive, I translated these foundations into a scalable design system and high-fidelity experience.
The Design System
The Design System
The Design System
As a product grows across screens, platforms and features nobody has scoped yet, consistency stops being a matter of care and becomes a matter of arithmetic. No one designer can hold every decision in their head.
As a product grows across screens, platforms and features nobody has scoped yet, consistency stops being a matter of care and becomes a matter of arithmetic. No one designer can hold every decision in their head.
As a product grows across screens, platforms and features nobody has scoped yet, consistency stops being a matter of care and becomes a matter of arithmetic. No one designer can hold every decision in their head.
DESIGN PRINCIPLES
DESIGN PRINCIPLES
DESIGN PRINCIPLES
Consistency
Consistency
Consistency
Familiar behaviour across every touchpoint.
Familiar behaviour across every touchpoint.
Familiar behaviour across every touchpoint.
Clarity
Clarity
Clarity
Less to decode, so less cognitive effort.
Less to decode, so less cognitive effort.
Less to decode, so less cognitive effort.
Scalability
Scalability
Scalability
Room for what has not been designed yet.
Room for what has not been designed yet.
Room for what has not been designed yet.
Efficiency
Efficiency
Efficiency
Decide once, then reuse everywhere.
Decide once, then reuse everywhere.
Decide once, then reuse everywhere.
Accessibility
Accessibility
Accessibility
Inclusive by default, not by exception.
Inclusive by default, not by exception.
Inclusive by default, not by exception.
FOUNDATIONS
FOUNDATIONS
FOUNDATIONS
Product Detail. Every structural dimension in the hi-fi screen was fixed in the greybox — the visual pass changed surface, never skeleton.
Product Detail. Every structural dimension in the hi-fi screen was fixed in the greybox — the visual pass changed surface, never skeleton.
Product Detail. Every structural dimension in the hi-fi screen was fixed in the greybox — the visual pass changed surface, never skeleton.
COMPONENT ARCHITECTURE
COMPONENT ARCHITECTURE
COMPONENT ARCHITECTURE
The mobile wireframes are a separate argument, not a reflow. Every sidebar became a bottom sheet, every primary action moved into the thumb arc, and the product card lost two of its six signals before a single pixel was styled.
The mobile wireframes are a separate argument, not a reflow. Every sidebar became a bottom sheet, every primary action moved into the thumb arc, and the product card lost two of its six signals before a single pixel was styled.
The mobile wireframes are a separate argument, not a reflow. Every sidebar became a bottom sheet, every primary action moved into the thumb arc, and the product card lost two of its six signals before a single pixel was styled.
High - Fidelity
High - Fidelity
High - Fidelity
Bringing the design system to life with a consistent and intuitive transportation experience.
Bringing the design system to life with a consistent and intuitive transportation experience.
Bringing the design system to life with a consistent and intuitive transportation experience.
Why transport
Why transport
Why transport
I chose transport because confusing information costs people something real, a missed connection, a wasted fare, standing on a platform with no idea what’s coming. Everyday journeys are full of small frictions that better structure can remove, and I wanted the next decision to be the obvious one.
I chose transport because confusing information costs people something real, a missed connection, a wasted fare, standing on a platform with no idea what’s coming. Everyday journeys are full of small frictions that better structure can remove, and I wanted the next decision to be the obvious one.
I chose transport because confusing information costs people something real, a missed connection, a wasted fare, standing on a platform with no idea what’s coming. Everyday journeys are full of small frictions that better structure can remove, and I wanted the next decision to be the obvious one.
What the system changes
What the system changes
What the system changes
Because every screen is assembled from the same components and patterns, the website and the app behave like one product rather than two. A status colour means the same thing in both places, and the information people need most sits where they already expect it. Nothing has to be relearned moving from planning at a desk to travelling with a phone, even when someone is rushing or reading in poor light.
Because every screen is assembled from the same components and patterns, the website and the app behave like one product rather than two. A status colour means the same thing in both places, and the information people need most sits where they already expect it. Nothing has to be relearned moving from planning at a desk to travelling with a phone, even when someone is rushing or reading in poor light.
Because every screen is assembled from the same components and patterns, the website and the app behave like one product rather than two. A status colour means the same thing in both places, and the information people need most sits where they already expect it. Nothing has to be relearned moving from planning at a desk to travelling with a phone, even when someone is rushing or reading in poor light.
WEBSITE EXPERIENCE
WEBSITE EXPERIENCE
WEBSITE EXPERIENCE
The high-fidelity experience focuses on key transportation features including journey planning, live tracking, tickets and passes, and the homepage. Each component was designed to reduce user friction by making travel information easier to access, providing real-time visibility, and creating a consistent experience across web and mobile platforms. The goal was to help users feel more confident, informed, and in control throughout their everyday journeys.
The high-fidelity experience focuses on key transportation features including journey planning, live tracking, tickets and passes, and the homepage. Each component was designed to reduce user friction by making travel information easier to access, providing real-time visibility, and creating a consistent experience across web and mobile platforms. The goal was to help users feel more confident, informed, and in control throughout their everyday journeys.
The high-fidelity experience focuses on key transportation features including journey planning, live tracking, tickets and passes, and the homepage. Each component was designed to reduce user friction by making travel information easier to access, providing real-time visibility, and creating a consistent experience across web and mobile platforms. The goal was to help users feel more confident, informed, and in control throughout their everyday journeys.
Journey Planner
Journey Planner
Journey Planner
Designed to simplify trip planning by helping users quickly find the best routes and make confident travel decisions. It reduces friction by presenting essential information in a clear and easy-to-follow way.
Designed to simplify trip planning by helping users quickly find the best routes and make confident travel decisions. It reduces friction by presenting essential information in a clear and easy-to-follow way.
Designed to simplify trip planning by helping users quickly find the best routes and make confident travel decisions. It reduces friction by presenting essential information in a clear and easy-to-follow way.
Live Tracking
Live Tracking
Live Tracking
Created to give users real-time visibility and reduce uncertainty during their commute. Live updates help users feel more informed, prepared, and in control of their journey.
Created to give users real-time visibility and reduce uncertainty during their commute. Live updates help users feel more informed, prepared, and in control of their journey.
Created to give users real-time visibility and reduce uncertainty during their commute. Live updates help users feel more informed, prepared, and in control of their journey.
Tickets & Fares
Tickets & Fares
Tickets & Fares
Designed to make ticket management faster and more convenient by keeping purchasing, storing, and accessing passes in one place. This creates a smoother experience for everyday travelers.
Designed to make ticket management faster and more convenient by keeping purchasing, storing, and accessing passes in one place. This creates a smoother experience for everyday travelers.
Designed to make ticket management faster and more convenient by keeping purchasing, storing, and accessing passes in one place. This creates a smoother experience for everyday travelers.
Homepage
Homepage
Homepage
Designed as the starting point for a seamless transportation experience, providing quick access to important features and information. A clear structure helps users find what they need without unnecessary effort.
Designed as the starting point for a seamless transportation experience, providing quick access to important features and information. A clear structure helps users find what they need without unnecessary effort.
Designed as the starting point for a seamless transportation experience, providing quick access to important features and information. A clear structure helps users find what they need without unnecessary effort.
MOBILE EXPERIENCE
MOBILE EXPERIENCE
MOBILE EXPERIENCE
The app is not a smaller website. It is the same system re-prioritised around the eight seconds before a ticket barrier.
The app is not a smaller website. It is the same system re-prioritised around the eight seconds before a ticket barrier.
The app is not a smaller website. It is the same system re-prioritised around the eight seconds before a ticket barrier.
Quick actions
Quick actions
Quick actions
Problem
Problem
Problem
Any navigation step costs more than the answer is worth.
Any navigation step costs more than the answer is worth.
Any navigation step costs more than the answer is worth.
Solution
Solution
Solution
Greeting, search, saved chips, then live departures — answered on open.
Greeting, search, saved chips, then live departures — answered on open.
Greeting, search, saved chips, then live departures — answered on open.
Touch
Touch
Touch
Problem
Problem
Problem
The library specified 35 and 39px buttons, under the 44pt minimum.
The library specified 35 and 39px buttons, under the 44pt minimum.
The library specified 35 and 39px buttons, under the 44pt minimum.
Solution
Solution
Solution
Targets raised to 44–52px in the library, not patched per screen.
Targets raised to 44–52px in the library, not patched per screen.
Targets raised to 44–52px in the library, not patched per screen.
Overlays
Overlays
Overlays
Problem
Problem
Problem
Centred modals put actions out of thumb reach.
Centred modals put actions out of thumb reach.
Centred modals put actions out of thumb reach.
Solution
Solution
Solution
Bottom sheets on the radius-xl token, already defined for this.
Bottom sheets on the radius-xl token, already defined for this.
Bottom sheets on the radius-xl token, already defined for this.
Impact
Impact
Impact
Before
Before
Before
Inconsistent components
Inconsistent components
Inconsistent components
Difficult navigation
Difficult navigation
Difficult navigation
Higher user effort
Higher user effort
Higher user effort
After
After
After
Unified design system
Unified design system
Unified design system
Faster access to information
Faster access to information
Faster access to information
One experience across web and mobile
One experience across web and mobile
One experience across web and mobile
Key Learnings
Key Learnings
Key Learnings
01
01
01
Designing constraints for a designer I haven’t met
Designing constraints for a designer I haven’t met
Designing constraints for a designer I haven’t met
Every token is a decision made for someone with less context than I had. The boring name was almost always the right one.
Every token is a decision made for someone with less context than I had. The boring name was almost always the right one.
Every token is a decision made for someone with less context than I had. The boring name was almost always the right one.
02
02
02
An unapplied system is a hypothesis
An unapplied system is a hypothesis
An unapplied system is a hypothesis
All three defects were invisible on a tidy library board and obvious an hour into building real screens.
All three defects were invisible on a tidy library board and obvious an hour into building real screens.
All three defects were invisible on a tidy library board and obvious an hour into building real screens.
03
03
03
Consistency is not sameness
Consistency is not sameness
Consistency is not sameness
The best decision here broke visual consistency, a table instead of cards because it matched what the user was doing.
The best decision here broke visual consistency, a table instead of cards because it matched what the user was doing.
The best decision here broke visual consistency, a table instead of cards because it matched what the user was doing.
04
04
04
Decide what is allowed to differ
Decide what is allowed to differ
Decide what is allowed to differ
Layout, density and navigation differ between web and mobile. Vocabulary does not.
Layout, density and navigation differ between web and mobile. Vocabulary does not.
Layout, density and navigation differ between web and mobile. Vocabulary does not.
05
05
05
I stopped thinking in screens
I stopped thinking in screens
I stopped thinking in screens
The question changed from “does this look right?” to “what does this teach the system?”
The question changed from “does this look right?” to “what does this teach the system?”
The question changed from “does this look right?” to “what does this teach the system?”