'Build your own' food customization

White Label App | Tablet and Mobile Design | 6 months
Project Overview
Brightloom is a technology company powering other restaurants’ digital ordering experiences by providing white-label kiosk apps and mobile apps. In this project, I was challenged to redesign the item customization flow under the in-store kiosk framework to deliver a more engaging and fun "make your own" experience.
My Contributions
- Conducted user research to understand the problem
- Led brainstorming session to generate new ideas
- Iterated the design from low-fi to high-fi
- QA and work with CS managers to onboard clients
- Built mobile design system

Problem Statement

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

Design a modular , self-explanatory , inclusive and unified food building experience.

Research

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

Work as front-of-house

Observe customers
Answer customer questions

Chipotle, Sweetgreen
In-person, rush hour ordering

Interview eatsa customers

Observe in other restaurants

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:

User's decision-making process involves much more back-and-forth than before

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.

Ideation

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.

Exploration

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:

  1. Vertical scrolling could be the primary interaction technique to browse through content.
  2. Use gallery view to provide an image-based ingredient browsing experience.
  3. Design a sidebar which serves as both navigation and order summary.

Iteration and testing

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.

Initial testing

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.

Second testing

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.

Implementation and deployment

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.

20%

10%

5

3

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.

From kiosk to mobile

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.

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

Browse and select modifiers

Evaluate and optimize

Confirm and checkout

“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.

Other projects

Crow-sourcing Management Platform
'Build your own'  Customization
Outcomes spending analyzer
White Label App Design System