clock in
clock in
clock in
table plan
table plan
create table
log in

Redesigning point of sale experience for 1.2m DAU waiters

clock in
clock in
clock in
table plan
table plan
create table

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