Quick-Service Restaurant Kiosk
Toast, Inc.
Goal:
In order to increase adoption and grow revenue for Toast, the goal of this project was to improve the usability of Toast's quick-service restaurant kiosks.
Process:
Designed and developed mobile ordering flows for a quick-service restaurant kiosk, from initial user research to developing wireframes and interactive prototypes.
Client
Toast, Inc.
Role
UX Researcher,
UX Designer
Methods
Field Interviews, SWOT,
Usability Testing
Tools
Sketches, Balsamiq,
Figma
Overview
In order to increase adoption and grow revenue for Toast, the goal of this project was to improve the usability of Toast's quick-service restaurant kiosks.
Based on field interviews and usability testing, the kiosk designed by my team was aimed to enhance the ordering process for patrons with dietary restrictions, as well as decrease the ordering time for patrons looking to quickly purchase grab-n-go items. Our design also incorporated nested modifiers, which was a key feature request from Toast.
My Role
My role during this project was as a UX Designer and UX Researcher on a team of 4.
I was involved with each stage of the process, which included:
-
Initial user research
-
Sketching and wireframing
-
Prototyping
-
Usability testing
-
Presenting final designs and findings to clients at Toast
The Process
Restaurant and Patron Interviews
The team interviewed one restaurant manager and five quick-service restaurant patrons to learn about kiosk benefits, challenges, and overall usage.
Personas
Based on the data collected from the patron interviews, two personas were created: the "Efficiency Seeker" and the "Order Organizer".
SWOT Analysis
In addition to the initial interviews, the team conducted a SWOT analysis (strengths, weaknesses, opportunities, threats) of three Toast competitors in the kiosk space.
Sketching
After developing our personas, the team ran a design studio workshop where we sketched out ideas and created a group vision for our kiosk design.
Wireframing
With the sketches finalized, we designed a low-fidelity clickable prototype in Balsamiq.
Usability Testing
The team tested the clickable prototype during a usability test with five participants.
Final Prototype Design
Based on feedback from the usability test, we designed a high-fidelity clickable prototype in Figma. This used branding from one of Toast's customers, Flour Bakery & Cafe.
Client Presentation
At the end of the project, we created a presentation for our clients at Toast to communicate our findings as well as show our final design and provide recommendations.
The Design
The below design shows examples of screens, from sketching through wireframing in Balsamiq, to the final prototype in Figma.
Some primary areas of focus:
-
For patrons with dietary restrictions or preferences, a 'Dietary Preferences' filter was included to help flag food items that fit dietary needs.
-
For patrons with limited time, a grab-n-go section was added to allow for quick purchases of food items.
-
Nested modifiers were added in the food detail pages to add simplicity to the ordering process.
Limitations and Challenges
Throughout the project, limitations and challenges arose, such as:
-
Having minimal access to a physical Toast kiosk for design and testing.
-
Usability testing was conducted on laptops rather than on physical kiosks or tablets.
-
Time constraints which limited the ability to conduct additional rounds of interviews and usability testing.
Results and Reflection
The final deliverable was presented to the stakeholders at Toast. Our clients were impressed with our prototype design, and planned to use that and the findings from our research to help determine the direction they wanted to take with their kiosk interface.
If the team were to continue the project past the final deliverable, some next steps would include:
-
Continuing to evolve the design of our prototype based on additional user feedback.
-
Meet with additional restaurant managers and patrons to discuss their interests and concerns with our designed features (e.g. dietary preferences filter, grab-n-go, modifier redesign).
-
Execute a pilot with additional restaurants.