How might we design a touch screen ordering experience for a tech-powered restaurant?
Client
Role
Tools
Duration
Spyce Restaurant
Sketch, Invision, FramerX, Sketching, Google Hangouts
Lead Product Designer
06 Months
Spyce is the world's first completely robotic kitchen. Instead of line cooks Spyce uses seven robotic woks to create a variety of bowls and salads. It was created by four MIT students in 2016 and it has it's flagship dine-in locations not too far away in downtown Boston. Here's how Spyce works: customers order food and drinks via a touchscreen, the robo-chefs receive the order and prepare the food, human hospitality workers pack and deliver the food to customers.
About the Project
In June 2019 Spyce reached out to me to redesign the interface of their touchscreen ordering kiosk app. Spyce was in the midst of opening their second, larger location, where they wanted to emphasize their food, drinks, and hospitality. Spyce had long been known as "the robot restaurant" and they were in the midst of a branding revamp to help emphasize the humanity of their brand. I've worked on kiosk apps in the past before so I was ecstatic at the possibility of increasing my IOT experience. I flew to Boston for a couple of weeks to meet the team and get to know the inner workings of Spyce.
Research
I spent a week in Boston to conduct user research in Spyce's flagship restaurant, observe the robo-cook, and interview stakeholders. I met with Spyce customers, human hospitality workers, engineers, and product team members.
Using a mix of quantitative and qualitative research methods including user interviews, I began to piece together a complete picture of what Spyce's needs were.
The main goal of the user research was to discover the pain points that customers experience when ordering from Spyce. We wanted to also explore how those with dietary restrictions can feel confident when ordering quickly. I put together a basic research plan with the team and scheduled user interviews. The interviews gave us a a great kick-off point, but systematic observation of how customers used the touchscreen ordering app gave quantitative insights into usability bottlenecks.
Spyce deals with hundreds of types of transactions daily. By synthesizing and then mapping the user research data, we created an inventory of scenarios that generate problems. These problems were later translated into user stories.
User Journey Map
The Challenge
The project vision was to improve the visual design and usability of the touchscreen kiosk app while reducing friction. This meant an overhaul of the design system currently used across Spyce apps. This also meant decreasing the time it took for all customers to order, especial those with dietary restrictions as they made up a large portion of our user base. Red Antler worked with the Spyce team to create their new website design and branding, it was my job to adapt this branding to the new kiosk experience.
Specifically, we wanted to:
* Understand the pain points of diners with dietary preferences and restrictions
* Understand current solutions and workarounds - both dining in and when ordering digitally.
* Understand emotions tied to these experiences
Integrate Red Antler work done thus far with the Kiosk experience
* Fix diet and menu ordering issues
User Experience Design
First, I worked with product management and Spyce's in house UX designer to articulate the project requirements and break the project down into features. I worked closely with the team to create and critique wireframe concepts. I then created Invision prototypes that outlined our various approaches to the ordering app. We then measured the pros and cons of each approach, the chosen concepts were then retested with users using Lookback.
User Flow in Overflow.io
Brand Design
While the screens were going through additional rounds of testing, I began to design the UI. Before my arrival, Spyce worked with Brooklyn-based agency Red Antler to overhaul their entire branding and design their new website. Red Antler also helped establish their brand pillars:
Kiosk Design
Once the team landed on a branding concept from Red Antler it was my job to translate their marketing-based design language into elements that were appropriate for the touch screen. This lead to several iterations of Red Antler's style guide, because many of the elements were not intended for a mobile or tablet experience. Accessibility also seemed to be an afterthought for the Red Antler team so there was some rework to be done there as well. It was also my job to create a tablet and mobile animated mockups for each screen.
First, I designed several options for the category screen to give the product team a sense of how the other screens might look.
I worked with the lead product manager to iterate on the design concepts while weighing the pros and cons of each.
Things to keep in mind when designing for touch screens:
Minimize recall: It’s necessary for touchscreen users to be reminded of the items they’re customizing, the customizations themself, and previous items ordered.
Accessibility for all: Users of all backgrounds - including those who are disabled, colorblind users, users with bad eyesight, non-English speakers, and those with dyslexia should be able to complete their orders with ease.
No frills: The touchscreen should be well designed but avoid unnecessary visual elements and steps.
Efficiency: Minimize clicks so that users are able to complete tasks quickly, but also provide back buttons so that users are able to correct errors.
Privacy: minimize the sharing of personal information so that users are able to confidently complete transactions.
Targets: Make targets large enough for those with large hands.
Help users avoid analysis paralysis
Provide light options for a variety of lighting conditions.
Provide clear concise copy
Final Mockups
I ended up designing over 100 screens for Spyce's Kiosk and IOS app. The project is launching at the end of the summer after facing a slight delay due to Covid. Here's a sample of screens that I have permission to share:
