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
10
Customize time
Close
Apply
Order Modes
2/2
Here
To go
Side
Sub
For
Included
Double
89
Cancel
Select
Select the printer
Default Printer
Other Info
Other Info
Printer #2
Other Info
Printer manager
Other Info
Printer waiters
Close
Print check
New layout meets visual language
New layout meets visual language
Key experience screens using tokens & components on the new default layouts
Show more
Starters
Entrees
Sides
Drinks
Pizzas
Wings
Extras
H1
H1
H1
H1
1
$12.50
1
$12.50
1
$12.50
1
$12.50
1
$12.50
Search for an item
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
Content
The purpose of the field
Content
The purpose of the field
Assistive text
Check 1
Clear
Split
Check 1
Check 1
Check 2
Check 3
Check 4
Clear
Split
Add hold minutes
1/2
2
1
2
5
10
Customize time
Close
Apply
Order Modes
2/2
Here
To go
Side
Sub
For
Included
Double
89
Cancel
Select
Show more
Starters
Entrees
Sides
Drinks
Pizzas
Wings
Extras
H1
H1
H1
H1
1
$12.50
1
$12.50
1
$12.50
1
$12.50
1
$12.50
Search for an item
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
Content
The purpose of the field
Content
The purpose of the field
Assistive text
Check 1
Clear
Split
Check 1
Check 1
Check 2
Check 3
Check 4
Clear
Split
Add hold minutes
1/2
2
1
2
5
10
Customize time
Close
Apply
Order Modes
2/2
Here
To go
Side
Sub
For
Included
Double
89
Cancel
Select
Chapter #3
The flows redesign
Chapter #3
The flows redesign
Chapter #3
The flows redesign
The final prototype built during the project
The final prototype built during the project
Chapter #4
Advocating for design process in a deeply tech-led environment
Chapter #4
Advocating for design process in a deeply tech-led environment
Chapter #4
Advocating for design process in a deeply tech-led environment
When your find yourself in the team of 3 designers and 100+ contract developers in just 3 months, it becomes essential to build a common ground for effective collaboration.
We threw a series of workshops with stakeholders and hung a process proposal on the wall where developers sat to collect feedback. Old, good pre-covid times.
Tim King, Design director at NCR
Anfisa always met and often exceeded my expectations, not just as a team member but as a team mentor and leader. She successfully drove several efforts that improved our UX team's processes, communication and quality.
Her positive outlook and collaborative approach gets others excited about getting involved and being part of the solution.
Tim King, Design director at NCR
Anfisa always met and often exceeded my expectations, not just as a team member but as a team mentor and leader. She successfully drove several efforts that improved our UX team's processes, communication and quality.
Her positive outlook and collaborative approach gets others excited about getting involved and being part of the solution.
Learnings after a year at NCR
Learnings after a year at NCR
Effective communication & alignment in the huge teams is the only way to succeed.
Effective communication & alignment in the huge teams is the only way to succeed.
Effective communication & alignment in the huge teams is the only way to succeed.
Waterfall is actually not that bad when you’re redeveloping a product for 1,2M DAU and the risks are high.
Waterfall is actually not that bad when you’re redeveloping a product for 1,2M DAU and the risks are high.
Waterfall is actually not that bad when you’re redeveloping a product for 1,2M DAU and the risks are high.
The balance between dev effort & the user impact. Sometimes exceptions are badly needed. Sometimes it’s too much effort for a low impact.
The balance between dev effort & the user impact. Sometimes exceptions are badly needed. Sometimes it’s too much effort for a low impact.
The balance between dev effort & the user impact. Sometimes exceptions are badly needed. Sometimes it’s too much effort for a low impact.
