top of page
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
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!
Problem
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.
Background
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.
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
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
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.
User Observation
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.
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
Surveys
37 responses
~ 15 mins
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.
Semi-Structured Interviews
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.
Understanding Data
03. Understanding Data
Understanding Data
To understand our data, we created an Affinity Map with the data that be obtained from user research activities.
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
Understanding Users
By creating user personas, journey 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 - 1 (1)
MacBook Pro - 2
1/2
Journey Maps
Storyboards
.png)
1
.png)
2
Ideation
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_4694
IMG_4696
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
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
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.
-
Potential privacy & security concerns.
Items needed to be put into the cart to be read aloud.
Final Solution
,,
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
Iterations
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_124205 (1)
IMG_4895
IMG_20191101_125954
1/8
Mobile Wireframes
Testing starts with mobile wireframes
Kiosk 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
Oranges
Successfully
Recognized
Items Couldn't
Recognized
Item Search
Item Add
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.
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.
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.
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.
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).
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.
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).
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.
User Study
Expert-Based Testing
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.
User-Based Testing
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.
Visual impairment simulation glasses
General Feedbacks
IMG_5335
IMG_5345
IMG_5341
IMG_5335
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).
10. Next Steps
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
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.
.png)
bottom of page