This page will be updated soon! Come back soon to check out its new look. ✨

NCR KIOSK is a design for people with visual impairments 

UX/UI Design, UX Research, Accessibility Issues, Universal Design

MY ROLE 

DURATION

August 2019 - December 2019

TOOLS

Figma, Photoshop, Illustrator

TEAM

Anjali Devakumar, Morgan Chin and Yujin Xue

iPhone 12 Pro.png

The Problem

People with visual impairments have a hard time doing grocery shopping without any assistance from another person.

The Solution

We designed a universal system for SS90 NCR kiosk that enables users to locate products in grocery stores, scan products to obtain more information, create shopping lists and check out by using the self-checkout kiosk in a few simple steps!  

 
Green.png
ss90-800x566.webp
pexels-eren-li-7188730.jpeg

Photo of a man holding a walking stick by Eren Li

Background

01. Background

Literature Review and Review of Existing Products helped us to explore the problem space.

 

Literature Review

Researchers suggest that in the year 2050, people with visual impairments in the United States are expected to be more than 8 million.
 
The World Health Organization states that even today, approximately 1.3 billion people live with a form of visual impairment in the world and 10 million people in the United States are blind or visually impaired. 
 
Current NCR self-checkout kiosks don't offer many accessibility features for individuals with visual impairments. For example; texts on the screen, the color contrast do not meet with accessibility standards and can't be customized by the user.

Library-Self-Checkout-and-Payment-Double
zoomtext-product-image.jpg
xk32-side-by-side.png

Review of Existing Products

We did  an extensive research about the products that people with visual impairments use. Furthermore, we searched for various accessibility standards (ADA, WCAG 2.1) and analyzed the kiosks, including the SS90 NCR kiosk, according to these guidelines. Three examples of accessibility issues with these products are as follows:

1

Customizability 

The customizability of various factors like colors and brightness is not available in many of the kiosks.

2

Brightness

Some people with visual impairments may have a sensitivity to light, while others may read better on a screen with high brightness. However, different brightness options are not offered.

3

Contrast

Accessibility guidelines that suggest a contrast ratio of at least 4.5:1 should exist between a text and its background, don't meet.

02. User Research

 

User Research

In order to understand our user group better, we have conducted various user research methods such as observations, surveys and semi-structured interviews.

Kiosk Observation

ant-design_user-outlined.png
Frame 3.png

10 normal/corrected visioned participants

~ 10 mins

The general purpose of this method was to get a general feel for the NCR kiosk experience. We
conducted observations at NCR’s Atlanta office where we we had a chance to observe two types of kiosks' interactions. 


 

Key Takeways

Wrong timings of feedbacks caused confusion.
Too many clicks are required to operate. 
Some of the elements went unnoticed. 
The wordings were not clear.


 

ezgif.com-gif-maker.gif

User Observation

ant-design_user-outlined.png

1 visually impaired participant

Frame 3.png

~ 1 hour

Group.png

2 defined tasks

One fully blind participant let us observe how he used his phone to complete do grocery shopping. He thought aloud as he used his phone.

Key Takeways

Text to speech method used to operate the phone
It took a lot of time for our participants to find an option that they looking for.
Participant relies heavily on gestures and swiping to access information and also a voice interaction/assistance to tell commands.
Consistency is the key to provide an effective interaction solution.

Consistency is the key to 
 

Screen Shot 2021-07-11 at 15.10.06.png

Surveys

ant-design_user-outlined.png

37 responses

Frame 3.png

~ 15 mins

Group.png

22 questions

In order to reach as many people as possible, we created an online survey for people with visual impairments (68.57 % participants), their loved ones (14.29 % participants), and professionals (17.14 % participants) who work in this field then distributed it to online forums and platforms. 

Key Takeaways

Assistive Technology Usages 

The large screen is important 
80 % of our participants tried to use kiosks before.

Small text size, absence of a screen-reader, and the confusion caused because of "errors" people found kiosks hard to use.

Adjusting text size, colors, and height is important.

People find themselves comfortable using their own phones (iOS).

Users find the idea of scanning items useful.

IMG_4204.JPG

Semi-Structured Interviews

ant-design_user-outlined.png

3 visually impaired participant

Frame 3.png

~ 1 hour

Group.png

40 defined questions

We asked questions about 5 main topics: Demographic Information including the history of impairment, Assistive Technology Usage, Grocery Shopping Experience, and Self-Checkout Kiosk Experience. Outcomes used to create an affinity map.

 

03. Understanding Data

Understanding Data

To understand our data, we created an Affinity Map with the data that be obtained from user research activities.

R2 affinity map.jpg

Pain Points

Pain Points

According to the research activities and the help of the affinity map, we defined 6 pain points.

01

It is hard for our users to navigate in an unfamiliar grocery store.

02

Users have a hard time reading labels of the products.

03

Organizing and finding receipts of the purchases can be challenging.

04

Adapting to an unfamiliar technological product takes time.

05

Every visual impairment requires different assistive adjustments

06

Multimodality is required to give effective feedback to users.

04. Understanding Users

 

Understanding Users

By creating user personasjourney maps, and storyboards we aimed to understand our users better and get more information about assistive technologies.

Personas

The International Classification of Functioning, Disability, and Health (ICF) provides guidelines to understand the functioning and disabilities of individuals. It also emphasizes the environmental and social factors that may affect the condition. We have realized that building our personas using these guidelines as a basis can help us to analyze the pain points that our users face and also see the effect that the environment and social attachments clearly have.

MacBook Pro - 2
MacBook Pro - 2

press to zoom
MacBook Pro - 1 (1)
MacBook Pro - 1 (1)

press to zoom
MacBook Pro - 2
MacBook Pro - 2

press to zoom
1/2

Journey Maps

Surface Book - 1.png

Storyboards

storyboard-02 (1).png

1

storyboard-01 (1).png

2

 

05. Ideation

Ideation

To come up with a wide range of ideas we engaged in an informed brainstorming session and creativity/feasibility chart keeping our pain points in mind. 

IMG_4696
IMG_4696

press to zoom
IMG_4694
IMG_4694

press to zoom
IMG_4696
IMG_4696

press to zoom
1/2

Potential Solutions

After our sessions, we selected three possible ideas then created the low-fi paper prototypes and tested them with our users.

1

Accessibility Customization

The app allows our users to adjust accessibility settings by using their phones. Furthermore, a shopping list can be created and receipts from previous purchases can be accessed.

Feedback

+

Editable accessibility features.
Familiarity through the ability of users to use their phones.
Receipt organization

-

New “tap to pair” interaction.
The menu button was hard to find.
hard time using the receipt feature

iPhone X - 5.png
iPhone X - 11.png

2

AR Navigation and Product Identification

Users can create shopping lists and according to the items, it navigates the individuals in the grocery store. By scanning the items, it gives more information about the product that can't be read due to its small text size.

Feedback

+

An easier way to see product information.
Items can be added easily to the shopping list.
Faster checkout with an integrated shopping list
In-store AR navigation

-

Unclear navigation.
Inconsistent with existing accessibility features.
Potentially dangerous for the users to walk around the grocery store with phones in their hand

R3_QueenBees-9-10-page-001.jpg
R3_QueenBees-9-10-page-002.jpg

3

Smart Cart

 A system that connects the shopping cart with the kiosk. As users put items into their cart, it reads the item information aloud. When the item is placed, it adds that into their list.  Once the cart gets to the self-checkout kiosk, items are automatically transferred from the cart to the kiosk.

Feedback

+

An easier way to identify products.
Voice interaction.
Automatized.

R3_QueenBees-12-14-page-002.jpg
R3_QueenBees-12-14-page-001.jpg

-

Potential privacy & security concerns.
Items needed to be put into the cart to be read aloud.

IMG_4771 (1).JPG
 

,,

FINAL SOLUTION

An app that allows users to create their shopping lists prior to their grocery shopping and these items can be seen on the 3D Map of the grocery store.

In the grocery store, the app navigates them to the items.

After the shopping, users can pair their phone to the kiosk which will send their customized accessibility settings to the kiosk also, their shopping list. 

The kiosk can recognize items by using computer vision to minimize the need for scanning the barcodes.

,,

06. Iteration 1

 

Iteration

For iteration-1, we created digital low-fi wireframes of our final idea and tested them with normal/corrected visioned NCR employees by using the think-a-loud method.

IMG_20191101_125954
IMG_20191101_125954

press to zoom
IMG_20191101_124205 (1)
IMG_20191101_124205 (1)

press to zoom
IMG_4895
IMG_4895

press to zoom
IMG_20191101_125954
IMG_20191101_125954

press to zoom
1/8

Mobile Wireframes

Testing starts with mobile wireframes

iPhone 8 - 1.png
iPhone 8 - 3.png
iPhone 8 - 5.png
iPhone 8 - 6.png
iPhone 8 - 9.png
iPhone 8 - 10.png
iPhone 8 - 11.png

Kiosk Wireframes

Flow 1: Transferring items from phone to kiosk

Home.png

Holding the phone

close to the kiosk

If pair and have a list-2.png
If pair and have a list-1.png

4 Seconds Delay

If pair and don't have a list-2.png
If pair and don't have a list-3.png
If pair and have a list.png

Flow 2: Transferring items from phone to kiosk

Home.png
If pair and don't have a list-6.png
If pair and don't have a list-1.png

Oranges

Successfully

Recognized

Items Couldn't

Recognized

If pair and don't have a list-4.png
If pair and don't have a list.png
If pair and don't have a list-6.png

Item Search

Item Add

If pair and don't have a list-3.png
If pair and don't have a list-2.png

Feedbacks

+

The system was intuitive and innovative.
Product recognition of the kiosk and eliminating the barcode scanning.

-

Phone-kiosk pairing interaction needed assistance from our teammates.

07. Iteration 2

Iteration

For iteration-2, we revised our design according to the feedback received and created digital high-fi wireframes.

3D Grocery Map

Prior to their visit, users can go to the grocery store's profile page to see the map of it to familiarize themselves.

During our interviews participants mentioned how helpful would it be to know the map beforehand.

phone7.png
phone1.png

Highlighting the Items' Location

Users can create shopping lists by using the app. According to this list, they can see the items on a 3D grocery shopping map.

phone7.png
Frame 5.png

AR Scanner

Our users really like the idea of scanning the products and obtaining more information about items.

We designed more readable information texts with white background, increased font size, and black text.

phone6.png
ezgif.com-crop.gif

Accessibility

The accessibility settings on the app that we created can be transferred to the kiosk interface. To define these settings we analyzed Android and iOS and picked the accessibility settings that can be relevant to kiosk screens. 

iOS style preserved because most of the  participants are familiar with these layouts and can be confused when they encounter different styles. 



 

AccessibilitySettings1-1.png
AccessibilitySettings1-2.png

Pairing Phone with Kiosk

Transfering the accessibility settings and items from phone to kiosk was a new interaction. Hence, users needed more information about how to pair. Instead of icons, we used actual kiosk and phone to make the steps more clear. We clarified the steps by changing the wording. The technology that been used to make this interaction mentioned (NFC).

phone5.png
phone2.png
phone4.png
phone3.png

Receipt Organization

Our users receive receipts of their purchases and these receipts are organized digitally on their app. This will make the retrieval of receipts much easier for our users.

iPhone 8 - 22.png

Kiosk Screens

Transfering the accessibility settings and items from phone to kiosk was a new interaction. Hence, users needed more information about how to pair. Instead of icons, we used actual kiosk and phone to make the steps more clear. We clarified the steps by changing the wording. The technology that been used to make this interaction mentioned (NFC).

This is home for test.png
iMac - 56.png
big-iMac - 66.png
iMac - 54.png
iMac - 57.png
big-iMac - 68.png
iMac - 55.png
big-iMac - 67.png
big-iMac - 69.png
big-iMac - 73.png
big-iMac - 72.png
iMac - 58.png
big-iMac - 70.png
big-iMac - 74.png

08. User Study

User Study 

We conducted user-based testing and expert-based testing in the NCR Usability Lab and Georgia Tech. The main aim was to observe our users without interfering with their behaviors and obtain data. 

 

Expert-Based Testing

ant-design_user-outlined.png
Frame 3.png

3 UX Expert

~ 1 hour

Accessibility and assistive technology expert with visual impairment helped us to define how well our solution meets the accessibility conventions.  Furthermore, NCR UX experts evaluated the intuitiveness and design of our final prototype.

Cognitive Walk-through, Heuristic Evaluation, After Task Questionnaire (ASQ), System Usability Test (SUS), and  Think  A-loud methods are used. 

IMG_5205.JPG

User-Based Testing

ant-design_user-outlined.png
Frame 3.png

5 simulated or real visual impairment

~ 1 hour

Kiosk in NCR’s Usability Lab used to conduct moderated user-based testing. If participants were normal or corrected sighted, they wore glasses that simulates visual impairments

Our team noted Task Completion Time, Task Success, and Number of Clicks to get quantitative data. After Task Questionnaire (ASQ) and System Usability Test (SUS) helped us to get more subjective satisfaction scores. 

IMG_5343.JPG

Visual impairment simulation glasses

General Feedbacks

IMG_5335
IMG_5335

press to zoom
IMG_5345
IMG_5345

press to zoom
IMG_5341
IMG_5341

press to zoom
IMG_5335
IMG_5335

press to zoom
1/3

+

The system was intuitive and innovative.
Product recognition of the kiosk and eliminating the barcode scanning.
Giving more autonomy to people with visual impairments.
Universal design, everybody can benefit from new features.
Using a familiar system(iOS) diminishes the learning curve.
Auditory feedback was helpful.

Auditory feedback was helpful

-

The pairing was a novel interaction that caused confusion sometimes.
Clarify the difference between accessibility settings v. settings.
Create a shortcut to enable users to pair their phones with the kiosk.
Add pop-up cards in the map view to show detailed location information.
Move the kiosk accessibility settings to the grocery store page.
Add tutorial screens showing key features of the app.
Enhance the feedback during the pairing process.
The green theme color caused confusion when it is used in certain situations. (ex. green color for a cancel button).

pexels-eren-li-7188739.jpeg

10. Next Steps

 

Next Steps

The number of tests with total blind users should be increased.
Investigation of the image recognition should be done in detail.
"Tutorials" and "help" can be added.
The color palette should be revised to prevent misunderstandings.

 

 

Lessons Learned

11. Lessons Learned

Carefully think about the users when testing.

The testing methods should be carefully tailored according to the user groups. In our case, we came up with alternate versions of wireframes to accommodate users with visual impairments.

Pivoting is A-Okay!

At the final stage, we realized some problems with the main features based on the latest usability test. So we decided to pivot as soon as we realized we are on the wrong track instead of keeping going. The data shows the effectiveness of our design improved significantly.

Frame 4 (2).png