big_bbox_index-dark.png

BreakfastBox

Creating a delightful morning experience

In the Fall 2016 semester through Berkeley Innovation, I worked with Marisa Ahmed, Varna Vasuvedan, and Kate Lee with Nourish Technologies on their pilot product, BreakfastBox (“BBox”), a freestanding kiosk that uses a standalone robotic system to prepare hot breakfast. Our team was mentored by Karen Li and Tim Guan.

BBox ordering app

MY ROLE

The project was separated into 4 major sprints – User Research, Ideation and Prototyping, User Testing and Iteration, and Hi-Fidelity Mockups and Presentation. The entire team worked during all sprints, and I served as the sprint leader for the final sprint, overseeing and building high-fidelity mobile mockups and physical prototypes, as well as our final deliverables to the client.


 (Really delicious looking) food from BBox's MVP in Chicago

(Really delicious looking) food from BBox's MVP in Chicago

The Problem

Bbox challenged us to identify pain points in their customer experience from their initial MVP, which was run in a Chicago office building, and reinvent a more delightful morning experience for BBox customers.

Our team worked on the physical BBox kiosk as well as a native ordering app to work with the kiosk. 


Research

The goals of our research were to understand people’s morning routines, where breakfast fits into people’s morning routines, how people view their experiences with restaurants, and people’s perceptions of the automation of restaurants.

 Left to right: contextual observations at Eatsa SF and organizing observations from research

Left to right: contextual observations at Eatsa SF and organizing observations from research

During research, we conducted secondary research, contextual observations, guerrilla interviews, and sent out a survey. We focused on college students, young adults, and full-time professionals mostly in the Bay Area. 

Research Insights

We learned a few key insights from our research that drove the rest of our design process:

  • When thinking about restaurants, consumers value health, quality, and taste.

  • Lack of time in the mornings was the most common reason for survey participants skipping breakfast – however, most respondents desired incorporation of some type of morning meal into their daily routine.

  • People expressed an aversion to seeing robots or machines cook their “fresh” food, with some even citing a “seemingly dystopian” vibe.

  • Regarding the existing BBox web app, most interviewees thought that the process was relatively simple, but desired more visuals to help inform their ordering process.


Ideation

Focusing on insights that we gathered from research, we began ideation on the restaurant’s kiosk wall, as well as the mobile ordering app.

Wall ideation

Mobile app ideation

For the wall, we thought through what elements needed to be on the wall, such as pick-up cubbies, an ordering station, and signage. Additionally, we began ideation for the organization of those elements on the wall, developing heat maps and watching the movement of customers during the MVP to understand the physical flow of users. As we moved more deeply into the interaction, we discussed how a customer would specifically interact with the wall, considering safety, sanitation, and people's comfort level with seeing robots handle their food.

For the mobile app, we focused on creating a streamlined onboarding, ordering, and sign-up process, as well as adding more visuals to the interface. At this point in the process, we considered the high-level flow of how a user should be ordering their food from BBox.

We knew to push for a native app because a large part of the user experience would be based on push notifications keeping users updated about the status of their breakfast order.

During the ideation phase of both major parts of this project, we kept in mind the needs of BBox’s users, who are often busy or in a rush, potentially tired, and hungry, along with our understanding of how people approach mornings and breakfast. 


Prototyping: Diverging Ideas

In order to gain a better understanding of the scale of the physical wall and the experience of ordering breakfast through a mobile app, we began building physical and digital prototypes.

Wall | 3D modeling + physical prototypes: 

Prototype 1. Left: 3D model, Right: building a cardboard prototype

When prototype 1, we placed an ordering kiosk to the left of pickup cubbies so that first-time users or users without mobile phones could still order from Xbox. We initially used a green background under wood planks in order to communicate BBox’s natural and healthy food. We built this prototype out of cardboard to gain a general understanding of the scale and layout of the kiosk wall. 

Prototype 2. Left: 3D model, Right: building a plywood and acrylic prototype

In prototype 2, we focused on how the pick up cubbies would function. After trying different ways such as drawers or elevators, we arrived at a turntable type of cubby. In building these cubbies, we wanted to ensure that we could clearly communicate where the user’s food was, but also prevent users from tampering with the robot placing the food. For this prototype, we focused on building a single pick-up cubby out of plywood and acrylic, in order to closely model the actual experience a customer would have when picking up an order from BBox. 

Mobile App

Alongside prototyping the wall, we began to build mid-fidelity prototypes of the mobile app in order to flesh out user flow. We also conducted some (very) lightweight testing of the onboarding, ordering, and sign-up process. 

Iteration of screens for ordering app

In this prototyping phase, we added images of food as well as initial visual design, which was guided by existing BBox branding. Seeing the app flow beyond grids of grey boxes helped us understand some deeper specifics of the app (What format works best for images of different types of food? Drink? How can a user customize an order?)

In addition to making the prototype more high-fidelity, we fleshed out the process for user sign-up, as well as some more specific UI and interactions when there was an active order at a kiosk. At this point, we also began to think about how the app experience translated into the user's experience with the physical restaurant.


Refinement: Converging ideas

Shots of the final deliverable

As we focused more on Prototype 2 for the Physical kiosk, we built a refined prototype of the pick-up cubbies out of plywood and acrylic to focus in on how one user would interact with a cubby. We also paired this high-fidelity prototype of one cubby with the high-fidelity prototype of the mobile app, walking through the experience of ordering food, waiting for food, and picking the food up at the cubby

Our final deliverable to Nourish Technologies combined together the mobile app and the cubby for the functional and delightful morning experience that we were striving for. 


Reflections + Lessons learned

As this was the first physical project I have ever worked on, I learned a ton about physical design. I really saw the value of building lo-fi physical prototypes, which helped my team and I understand the scale as well as physical interactions with the product in a way that no sketches or 3D models could have helped us understand.

In the future, I would want to learn more about selecting the right materials for a project and technique for building physical products.

 The team! :)

The team! :)