"Build your own" for mobile

Brightloom is a technology company powering other restaurants’ digital ordering experiences by providing white-label kiosk apps and mobile apps. 6 months after the release of "build your own" in kiosks, I was asked to design the mobile "build your own" experience to expand our mobile offerings.
Audience
Fast casual restaurants and their customers
My role
Work as the only designer on this project and run the entire design process from initial research to implementation support

Problem statement

Many restaurants want to offer a mobile ordering experience in the digital era. One of the biggest challenges for restaurants like Chipotle and Sweetgreens to move from in-person ordering to digital ordering is the complicated "build your own" user experience.
After releasing the “build your own” feature for kiosks, Brightloom wanted to bring it to mobile to complete our while-label app suite.
However, due to the big difference in screen sizes, it’s impossible to translate the kiosk design to mobile directly. I decided to take the adaptive design approach and create a new mobile “build your own” layout that works for all mobile devices.

Research

In order to dig into the problem and hear what users thought, I recruited 8 participants who eat at fast casual restaurant like Chipotle at least once a week to share their customization experience with me and play a codesign game.
“I make sure at least one meal a day is healthy food. I want high-protein, low-sodium food. Some greens, but I don’t care which vegetable.”

Users plan to eat healthy food from time to time to achieve nutrition needs

“I am not picky about food… If I can customize, I also want to replace the wine sauce and feta cheese and customize the dressing portion.”

Customization meets customer's complex needs

“Ideally, I want to see what’s inside and what’s available side-by-side to make the best choice.”

Need to know what’s available before customizing

Since we already released kiosk “build your own” to all of Brightloom’s customer restaurants, I flew to Chicago and ran some user research at the Dearborn Roti location with 10 customers to interview and observe Roti customers.
“Even though I have been here so many times, before I tried the kiosk, I never realized that they allow me add up to 5 toppings without additonal charge.

The digital “build your own” interface makes the customization rules clearer to the user.

“Previously, when ordering in person, I always felt pressured to finish my order ASAP and I tend to do a lot of guesswork and make rushed decisions.

The gallery-based modifier list view reduces ambiguity for users and helps them order food confidently.

“Now that I can see what I selected previously, I can get a sense of how much more stuff I should add to my order.”

Having a selection summary view helps users confirm their selections and make them.

I recorded 10 customers’ ordering process during the field research and did an action analysis to see how they build up their meals step-by-step in order to figure out what’s the most desired user flow. In general, there are three stages: browse and select modifiers, evaluate and optimize, and confirm and checkout.
Stage 1
Browse and select modifiers
Stage 2
Evaluate and optimize
Control budget
Reduce calorie intake
Stage 3
Confirm and checkout

Concepts

The research helped me understand the importance of creating a smooth and seamless modifier browsing experience that integrates well with the order summary view. I did a brainstorming session to see how I might tackle the design.

In the browse and select modifier stage, streamline the modifier browsing experience

The entire user journey starts when users are browsing the modifer list. They will have to digest all the modifiers and make decisions based on their personal needs. I explored both list view and gallery view to compare them.
Wireframe
List view
Gallery view
High-fi
 
While list view provides a cleaner interface, gallery view is better at showing users food photos and engage them in the building process. This way, users’ attention will focus on the modifier list view and dive into the flow without distractions.

In the evaluate and optimize stage, provide minimum viable information to users as reference

Eventually, users will want to review their previous selections and decide what they want to do next. In order to support this, I designed a compact version of the order summary view, making important reference information like number of modifiers and price available to the users.
After the first modifier is added, a small modal will pop up from the bottom of the screen, showing the user what they have selected so far. Also, I added a small animation showing the selected modifier moving from gallery to the summary in order to explain the connection between the two.

In the confirm and check stage, list out modifiers and promote transparent communication

After adding several modifiers, users will need to see what they have selected so far and decided if they want to check out from there or continue modifying. For this, the compact order summary won’t be sufficient. In my design, the user can drag the compact order summary modal up to see a full order summary.
In the full order summary view, users can delete modifers. If they want to continue customizing, they can drag the modal down to switch back to the compact version. Also, they can use the “Add to cart” button at any point to check out.

Final Design

After breaking the “build your own” experience into three stages, I was able to focus on micro-interaction design at every stage and optimize the entire experience for users. The entire flow is illustrated as below:

Stage 1

Browse and select modifiers

Stage 2

Evaluate and optimize

Stage 3

Confirm and checkout
Due to the nature of white-label, “build your own” mobile is designed to support varying restaurant branding needs, such as light theme and dark theme. I created a corresponding white theme design to make sure the transitions between stages was still easily understood by users.
“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.