Redesigning point of sale experience for 1.2m DAU waiters
About:
Aloha by NCR is a family of PoS products built on premise for 1k+ restaurants for over 20 years.
Challenge
On premise approach caused an inconsistent UX across multiple devices and architectures, making the business not sustainable.
Impact
I designed the first universal design system preserving a familiar UX logic to avoid rapidly breaking habits in a highly stressful context.
Team:
My role
Design patterns analysis
First adaptive design system
Key flows analysis
Key flows redesign
Timeline
May 2019 - April 2020
About:
Aloha by NCR is a family of PoS products built on premise for 1k+ restaurants for over 20 years.
Challenge
On premise approach caused an inconsistent UX across multiple devices and architectures, making the business not sustainable.
Impact
I designed the first universal design system preserving a familiar UX logic to avoid rapidly breaking habits in a highly stressful context.
Team:
My role
Design patterns analysis
First adaptive design system
Key flows analysis
Key flows redesign
Timeline
May 2019 - April 2020
TL;DR
TL;DR
Before redesign
Before redesign
After redesign
After redesign
Supported
100+ devs with a design system V.1
UX
PM
EN
Established a first collaboration model
Redesigned order & payment flows
Story time
Story time
It’s my first day at the company. The design lead seats me at the office corner and starts sharing something I've never seen before…
A five-volume product book with 20y of legacy documentation for 1000+ customers I'm thinking: “What did I get myself into?”
"Vintage” design discovered on the first work day
"Vintage” design discovered on the first day
The last piece to get buy-in
The last piece to get buy-in
The design lead continues to share with me a UI direction for a leadership presentation that is coming up the next day, while I’m realizing the project still needs to get a buy-in.
After 6y+ working with startups, I know that "A prototype is worth 1000 words". Therefore I swiftly support her by building an interactive prototype for an upcoming presentation.
Early redesign explorations
…And we've got a green light!
…And we've got a green light!
But the question is: Now as we can get started, how do we even approach redesigning a product with so much history and context? To simplify complexity, as a team, we broke it down into 4 stages and defining principles.
But the question is: Now as we can get started, how do we even approach redesigning a product with so much history and context? To simplify complexity, as a team, we broke it down into 4 stages and defining principles.
Chapter #1
Complexity into patterns
Chapter #1
Complexity into patterns
Chapter #1
Complexity into patterns
Exploring universal ordering layout
2 weeks later, I’m sitting at the office analyzing custom layouts from a 5-volume history book. The risks are high. The question is: HMW find a universal new layout that looks familiar to current customers and logical to the new ones?
Seeing 100+ customer layouts is like seeing the big picture from analytics. What helps is breaking down each screen into semantical elements and playing with composition. This way I'm arriving at the 6 most popular customer layout patterns.
Product context
Product with 20y of history implies strong user habits and muscle memory.
->
Design principle
Preserve existing navigation & interactions to avoid rapid UX disruptions.
Exploring universal layout
2 weeks later, I’m sitting at the office analyzing custom layouts from a 5-volume history book. The risks are high. The question is: HMW find a universal new layout that looks familiar to current customers and logical to the new ones?
Seeing 100+ customer layouts is like seeing the big picture from analytics. What helps is breaking down each screen into semantical elements and playing with composition. This way I'm arriving at the 6 most popular customer layout patterns.
Product with 20y of history implies strong user habits and muscle memory.
->
Preserve existing navigation & interactions to avoid rapid UX disruptions.
Exploring universal ordering layout
2 weeks later, I’m sitting at the office analyzing custom layouts from a 5-volume history book. The risks are high. The question is: HMW find a universal new layout that looks familiar to current customers and logical to the new ones?
Seeing 100+ customer layouts is like seeing the big picture from analytics. What helps is breaking down each screen into semantical elements and playing with composition. This way I'm arriving at the 6 most popular customer layout patterns.
Product context
Product with 20y of history implies strong user habits and muscle memory.
->
Design principle
Preserve existing navigation & interactions to avoid rapid UX disruptions.
Hardware context
I soon learn that NCR made it’s name as the biggest ATM and PoS hardware operator. turns out I've been using NCR ATM or Self-checkouts every day without realizing it.
Which lead me to realizing that designing for the biggest PoS hardware company also means designing for 10+ of different devices, breakpoints and view modes.
The most popular NCR restaurant POS device (Ingenico) testing.
The most popular NCR restaurant POS device
Product context
The hospitality industry means working during rush hours under a cognitive load, while ensuring hospitable experiences.
->
Design principle
Design for predictability and findability.
The UX has to be static and effective. E.g. Pagination over scrolling, adaptable breakpoints, portrait/landscape modes.
The hospitality industry often means working during rush hours under a cognitive load, while ensuring hospitable experiences.
->
Design for predictability and findability. The UX has to be static and effective. E.g. Pagination over scrolling, adaptable breakpoints, portrait/landscape modes.
The chosen universal layout
*Use arrows to compare before/after
Preserving familiar scanning logic
Preserving familiar scanning logic
Preserving familiar scanning logic
F-scanning: Check -> Menu -> Submenu
F-scanning: Check -> Menu -> Submenu
F-scanning: Check -> Menu -> Submenu
Top bar for navigation & search
Top bar for navigation & search
Top bar for navigation & search
Bottom bar for main CTA actions
Bottom bar for main CTA actions
Bottom bar for main CTA actions
Predicable buttons locations for efficiency
Predicable buttons locations for efficiency
Predicable buttons locations for efficiency
Chapter #2
The visual language
Using an atomic design system approach we decided to not reinvent the wheel. For the visual style, we aligned on the blend of Material Design 2.0 elements with new NCR-style tokens.
Chapter #2
The visual language
Using an atomic design system approach we decided to not reinvent the wheel. For the visual style, we aligned on the blend of Material Design 2.0 elements with new NCR-style tokens.
Chapter #2
The visual language
Using an atomic design system approach we decided to not reinvent the wheel. For the visual style, we aligned on the blend of Material Design 2.0 elements with new NCR-style tokens.
Two color modes & tokens
Dark mode
Light mode
Dark mode
Light mode
Dark mode
Light mode
Restaurant work requires adapting to varying indoor and outdoor lighting.
Design both Light & Dark modes, where the color mode can be switched automatically.
->
->
Product context
Restaurant work requires adapting to varying indoor and outdoor lighting.
->
Design principle
Design both Light & Dark modes, where the color mode can be switched automatically.
Color accessibility mode
Default mode
Accessibility mode
95% of people
Will see the palette
Contrast 7.36:1
AA
AAA
Pressed - Selected
Contrast 7.33:1
AA
AAA
Attention - Awaiting
Contrast 4.56:1
AA
AAA
Error - Problem
Contrast 4.62:1
AA
AAA
Success - Confirm
6% of men
Deuteranomaly
Pressed - Selected
Attention - Awaiting
Error - Problem
Success - Confirm
1% of men
Protanopia
Pressed - Selected
Attention - Awaiting
Error - Problem
Success - Confirm
1% of people
Tritanopia
Pressed - Selected
Attention - Awaiting
Error - Problem
Success - Confirm
Default mode
Accessibility mode
95% of people
Most people see
Contrast 7.36:1
AA
AAA
Selected
Contrast 7.33:1
AA
AAA
Attention
Contrast 4.56:1
AA
AAA
Error
Contrast 4.62:1
AA
AAA
Success
6% of men
Deuteranomaly
Selected
Attention
Error
Success
1% of men
Protanopia
Selected
Attention
Error
Success
1% of people
Tritanopia
Selected
Attention
Error
Success
Default mode
Accessibility mode
95% of people
Will see the palette
Contrast 7.36:1
AA
AAA
Pressed - Selected
Contrast 7.33:1
AA
AAA
Attention - Awaiting
Contrast 4.56:1
AA
AAA
Error - Problem
Contrast 4.62:1
AA
AAA
Success - Confirm
6% of men
Deuteranomaly
Pressed - Selected
Attention - Awaiting
Error - Problem
Success - Confirm
1% of men
Protanopia
Pressed - Selected
Attention - Awaiting
Error - Problem
Success - Confirm
1% of people
Tritanopia
Pressed - Selected
Attention - Awaiting
Error - Problem
Success - Confirm
Designing for 1.2M DAU involves a strong emphasis on accessibility, with extra attention to payment statuses.
Design for sight impairments, making sure green & red colors in payment contexts are accessible to everyone.
->
->
Product context
Designing for 1.2M DAU involves a strong emphasis on accessibility, with extra attention to payment status color modes.
->
Design principle
Design for sight impairments, making sure that green & red colors in payment contexts are accessible to everyone.
Merging tokens with new components
Merging tokens with new components
H1
H1
H1
H1
H1
1
$12.50
1
$12.50
1
$12.50
1
$12.50
1
$12.50
1
$12.50
Search for an item
Start typing
Search for an item
salad
Please use only letters and numbers
salad!@#
Item
Starters
$9.50
Item
Starters
$9.50
Balance Due
$60.00
Change Due
$4.14
$0.00
Balance Due
Start typing
The purpose of the field
Start typing
The purpose of the field
Content
The purpose of the field
Content
The purpose of the field
Content
The purpose of the field
Assistive text
Content
The purpose of the field
Assistive text
Check 1
Clear
Split
Check 1
Check 1
Check 2
Check 3
Check 4
Clear
Split
Starters
Entrees
Sides
Drinks
Pizzas
Wings
Extras
Add hold minutes
1/2
2
1
2
5