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
August 2019 - December 2019
Figma, Photoshop, Illustrator
Anjali Devakumar, Morgan Chin and Yujin Xue
People with visual impairments have a hard time doing grocery shopping without any assistance from another person.
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!
Photo of a man holding a walking stick by Eren Li
Literature Review and Review of Existing Products helped us to explore the problem space.
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.
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:
The customizability of various factors like colors and brightness is not available in many of the kiosks.
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.
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
In order to understand our user group better, we have conducted various user research methods such as observations, surveys and semi-structured interviews.
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.
Wrong timings of feedbacks caused confusion.
Too many clicks are required to operate.
Some of the elements went unnoticed.
The wordings were not clear.
1 visually impaired participant
~ 1 hour
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.
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
~ 15 mins
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.
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.
3 visually impaired participant
~ 1 hour
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
To understand our data, we created an Affinity Map with the data that be obtained from user research activities.
According to the research activities and the help of the affinity map, we defined 6 pain points.
It is hard for our users to navigate in an unfamiliar grocery store.
Users have a hard time reading labels of the products.
Organizing and finding receipts of the purchases can be challenging.
Adapting to an unfamiliar technological product takes time.
Every visual impairment requires different assistive adjustments
Multimodality is required to give effective feedback to users.
04. Understanding Users
By creating user personas, journey maps, and storyboards we aimed to understand our users better and get more information about assistive technologies.
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.
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.
After our sessions, we selected three possible ideas then created the low-fi paper prototypes and tested them with our users.
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.
Editable accessibility features.
Familiarity through the ability of users to use their phones.
New “tap to pair” interaction.
The menu button was hard to find.
hard time using the receipt feature
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.
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
Inconsistent with existing accessibility features.
Potentially dangerous for the users to walk around the grocery store with phones in their hand
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.
An easier way to identify products.
Potential privacy & security concerns.
Items needed to be put into the cart to be read aloud.
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
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.
Testing starts with mobile wireframes
Flow 1: Transferring items from phone to kiosk
Holding the phone
close to the kiosk
4 Seconds Delay
Flow 2: Transferring items from phone to kiosk
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
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.
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.
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.
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.
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).
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.