Everyone loves coffee or tea!
However, some grocery stores don't have staffed cafes. Instead, they rely on self-serve devices. Such as the 'Schaerer Coffee Art C'. Which can be found in many Whole Foods Market locations.
But not all shoppers and employees at Whole Food Market can read the instructions on the device due to language barriers, poor vision, or literacy. I have personally assisted multiple folks there who could not complete the self-service on their own.
This UI Redesign adds voice command and language selection to include all users. And new interface elements ease legibility and create an enjoyable beverage experience.
Methodology, Field Photos, and Wireframes
Paper Sketches - Wireframes
Retaining the existing functionality of the devices UI, but increase accessibility & delight.
Guiding Questions:
How can the UI be accessible for non-English readers?
How can the UI be accessible for the disabled?
What should the new icons look like?
How to balance user clarity and delight?
Sketchapp UI Artboards
Two Key-path Scenarios: Ordering french roast coffee & ordering hot water for tea.
Galleries will display steps for each scenario, followed by large individual images of each touch screen along with details on design decisions.
Home Screen
- Background gradient imitates Allegro coffee cups
- Payton One font imitates cafe chalkboards
- New voice command and language selections buttons
Make Your Selection
- Increased legibility of navigation header with large Payton One font size
- Removed unnecessary 'back' button
- Voice command & language selection still visible
- Icons added for each beverage icon
- Large border to call out to the user that their beverage selection has been submitted
- Shadows have been added to all buttons to give depth to the screen, prompting the user to press the touch screen.
Size Selection
- Size options include icons for visual cues
- Back arrow in top left made more legible with solid light grey fill in contrast to a black background. And orange fill to the arrow icon.
- Thick orange border to indicate size selection input
Pouring Screen
-As beverage pours, the user sees a large image of a mug with their selection information displayed
- The cancel button has been changed from a circle to an octagon, similar to a traffic stop sign.
- After the beverage has been dispensed the device automatically returns to the home screen.
Selecting Hot Water
Hot water for tea is very popular and contains some unique steps compared to coffee
Hot Water Size Selection
The size selection screen can be consistent between all coffee and hot water beverage selections
Hot Water Outlet Alert
- Hot water is spouted out of a different spigot than coffee
- The message prompts user to move their cup to the proper location in legible Open Sans font
- Image displaying the self-serve device and familiar mug icon shows the user where to place cups
- The alert message is in an orange bubble over a blue blur covering the previous screen
- Hot water will not dispense until the user clicks the distinctly angular 'OK' button
Pouring Hot Water Screen
- Icon warms user to be safe of hot water
- Cancel button changed from circle to octagon similar to traffic stop signs
Summary
Project takeaways and lessons learned
- Style guides for typography and Sketch layer styles are super handy!
- Subtle gradients make for eye please UI backdrops
- The Sketch community has a wonderful library of shared icons
- And making your own icons is also quite fun!
Creating the 'Make Your Selection' screen took the most effort (particular the beverage option buttons) but after that, the rest of this project was a downhill experience.
