Many fast casual restaurants like Chipotle and Sweetgreens offer "build your own" options to accommodate different user needs. When ordering in-store, all selections/customizations are done via face-to-face communication.
Brightloom's restaurant eatsa
B2B2C model
Brightloom wants to provide a digital kiosk ordering solution to increase ordering speed and accuracy and lower labor costs for fast-casual restaurants. Hence, I was asked to
To get a deep understanding of the problem, I put together a research plan to build up better understand the problem and build up my design empathy
Observe customers
Answer customer questions
Chipotle, Sweetgreen
In-person, rush hour ordering
How do they place orders?
What does their user journey look like?
Replacing in-person ordering with kiosk ordering reduces a lot of communication pressure and helps new customers visualize what they are ordering. Though my research, I also realized that digital ordering brings new challenges.
As showed above, the biggest challenge is that:
Though my research, I got to understand more about the user’s ordering process. Also when ordering in person, you walk to the counter, stuff will assemble the food based on your order and you go to check out via the cashier. It’s a very linear process. However, in digital ordering, you can change your mind at any time before you checkout and go through as much back-and-forth as you want.
I also thoroughly researched competitors' products to understand what the needs are from the restaurant's perspective and shared findings with my team. Working closely together, we were able to define the Product Requirement Document together to better scope this project.
Competitor research
Product team discussion
As a team, we wanted to build a minimum viable product that works with most fast casual restaurants' basic 'Build your own' menu that ensures a smooth and delightful end-user experience.
To think out of the box, I explored many different design directions and then I put all of them on a white board to share and discuss with both my design team and product team.
Competitor research
Product team discussion
With the help of the exercise, as a team, we started seeing some design patterns we all like and forming team alignment. This exploration also helped make the vague design concept more concrete.
Vertical scrolling
Gallery view
Full wireframe
A few intentional design decisions were made:
After establishing a more concrete design direction within the team, I decided to test the design with real users in the early stages to get user feedback and verify our assumptions.
10
participants in total
Think aloud, interview, observe
Use the prototype to build a bowl they wanted for lunch.
All users were able to successfully order food
60% of users clicked on the navigation bar
20% of users noticed the order summary
I iterated the design based on feedback. The sidebar was moved to the right side to put more weight on the order summary view and I added a 'What's inside' title bar to make it even more clear to users and increase the information hierarchy.
10
participants in total
Think aloud, interview, observe
Use the prototype to build a bowl they wanted for lunch.
All users were able to successfully order food
40% of users clicked on the navigation bar
80% of users noticed the order summary
After testing, I realized that when the sidebar is on the left, it matches people’s expectations of an e-commerce website’s menu, so users expect it to be navigation but don’t understand it’s also a summary. When the sidebar is on the right, it’s closer to a shopping cart showing order summary information. Because users can easily scroll through the modifier list already, I prioritized order summary over navigation.
There are thousands of real-world restaurant problems in designing a "build your own" customization feature. To release sooner, I finalized an MVP version for implementation.
I also lead demo sessions with the Product Manager and VP of Product from one of our clients and collaborated with Customer Success Managers to deploy our white label app to out clients all over the world.
increase in ticket value
decrease in restaurant setup costs
restaurant chains
countries
Also, the design supports restaurant brand identity and food photography and serves as a reusable framework that Brightloom can apply across most restaurant models.
After releasing the 'Build your own' feature for kiosk, I was asked to bring it to mobile to complete our white-label app suite. Because mobile screen sizes are much smaller and users are more likely to order food on the go, I decided to focus more on the order summary feature.
.gif)
Browse and select modifiers
After the first ingredient is added to the order, a small drawer will slide up to show users the number of modifiers as a reference.
(Research has shown that the number of modifiers being added to the cart is the most important reference information when users are optimizing their order.)
I mimic the "add to plate" experience and connect the gallery view to the order summary drawer.
Evaluate and optimize
After adding ingredients to the bowl, users can drag to open the drawer to see full order summary information.
If they want to go back to the gallery view, they can drag down to close it and continue customizing their order.
(I got the inspiration while watching WWDC 2019 with engineers. We applied the new iOS 13 modal concept to this project.)
The mobile design covers the end-to-end ordering process from browsing modifiers all the way to final checkout. Motion design plays an important role in my design: it helps users understand the relationship between different design components and guides them throughout the process. Also, it makes the interface more fun and playful.
Stage 1
Stage 2
Stage 3
“Build your own” for mobile delivers a consistent experience with the “build your own” kiosk experience. Unlike the old “build your own” interface that only supported the eatsa menu, the new design supports varying restaurant customization models and was needed for Brightloom to sign new restaurant customers.
Thanks for reading!
Back