Uncategorized

Design Restaurants for People, not Just Speed

As fast food kiosks proliferate, how can they be better designed?

In Automat, Hopper expresses the loneliness and sadness of an “automat” where food service is automated.

Over the past couple years, kiosks have popped up in an increasing number of fast food establishments as replacements for cashiers. Prior to using tablets, restaurants used vending machines, tickets, and food cubbies to automate food ordering and delivery. Today, much of the adoption in fast food is driven by the reduced cost of replacing people with kiosks. Another benefit is that customers can order food more quickly from kiosks.

But in this rush to save money and increase profits, fast food restaurants are neglecting the user experience.

Curious about how restaurants might design kiosks better, I spent some time visiting these restaurants with coworkers with the aim of observing how others use kiosks.

Through this research I found that when kiosks are integrated within fast food restaurants, they are certainly capable of increasing the speed of ordering. But there are other considerations: the user experience (UX) design of the app, the placement of the kiosk, and how restaurant workers fit into this product-service system.

General Pattern of Kiosks

In my research, my coworkers and I visited four restaurants: McDonald’s, Panera, Cafe X, and Eatsa. Each of these kiosks follows the same pattern.

  1. Line up
  2. Look through menu on tablet
  3. Select dishes
  4. Modify dishes
  5. Pay for order
  6. Pick up order

Despite this common set of user actions, all of the kiosks varied in how they support the user.

User Interface (UI) Design

It’s obvious, but it’s so important that the app on the kiosk needs to be well designed. For early kiosks such as the Japanese one below, design was not a priority and resulted in glorified vending machines with images and labels printed on buttons.

Credit to Daniel‘s Food Diary for this picture.

In the early years of automated kiosks, it might have made sense to copy a menu and just put it on screens. However with more complicated menus and possibilities for modifying burgers, salads, and other food items, the design of the app needs to be organized more thoughtfully. If not, people will face challenges with finding and navigation. These challenges reduce the expediency of the app, thus weakening a core value proposition of kiosks.

Panera’s Neglect of Basic UI Principles

Panera’s kiosk is an example where basic UI design principles seem to have been forgotten or de-prioritized.

When looking at the menu screen, the text in the left column doesn’t adequately contrast with the background because of the similarity in hue, saturation, and brightness.

The texture behind the text doesn’t help with legibility either.

On the main section, the types of foods and their labels go against the Gestalt Principle of Grouping. This principle states that when items are spaced together, they are more closely associated.

In the case of the Panera menu, the “Seasonal Favorites” label is closer to the picture of what appears to be a bowl of soup than the image to its right. Adding to this confusion is that the label for “Nutrient-Packed” is pushed so far to the left that it’s in the shadow of the left navigation menu. The simple change of moving labels closer to their pictures would help here.

Panera could greatly improve their service and expedite their process if they valued usability more in their design.

Eatsa’s Overwhelming Choices

Eatsa’s kiosk design also had some challenges. Eatsa is a restaurant where you can buy bowls of quinoa with pre-defined combinations of toppings. This is simple in concept, but there were some challenges with ordering toppings.

Initially it was exciting to scroll through the toppings and imagine how each would taste and feel in my mouth: avocado, fried garlic, pickled veggies. But there were so many options that I didn’t know what to select. After a couple minutes of scrolling, I decided not to add anything.

“Hmm, Avocado’s creaminess + toasted peanuts’ nuttiness and saltiness = yum??”

Hick’s Law helps to explain this paradox.

Hick’s Law states that the time it takes to make a decision is related to the number of options. This law seems to apply here to Eatsa’s bowls of quinoa and toppings.

In Eatsa’s defense, one reason they may include so many options for customization is to maintain novelty for frequent lunchtime visitors. To address the challenge of overwhelming toppings, perhaps there could be better groupings of them or a recommended list based on the bowl selected.

McDonalds’ and their McFlurry-Smooth Flow

In contrast to Eatsa, McDonald’s has a relatively smooth flow. Here is my coworker Pablo breezing through his order.

During his ordering process, there are points where he has difficulty looking through modifications for his Crispy Chicken Sandwich. However, he’s still able to go through the whole process in under a minute.

The usability challenges of Eatsa, McDonalds, and Panera’s kiosks are not so severe that they prevent users from completing orders, but they do present friction. If they fix these problems, they could help customers spend less time waiting.

Physical Design

In addition to the app on the tablet, restaurants need to consider physical access to the kiosk and how the kiosk may impede the flow of people in a space.

McDonald’s Kiosks Half Full

Once you’re standing in front of the kiosks, it’s clear how to use them and where to find your favorite food. But before that step, you need to get in front of one, and that’s harder than you’d expect.

When we visited McDonald’s, someone was waiting behind us in line until a restaurant worker informed the customer that the kiosks are two-sided. Perhaps this is unintuitive, because one side of each kiosk is facing the wall.

It’s also kind of awkward to walk around people to get behind the kiosk.

If they added more space or more-clearly communicated that the backs of kiosks were usable, then customers could more easily discover this functionality. Part of this problem may arise from the fact that this McDonald’s existed before the kiosks, so it may have been hard to place them in a more optimal location.

If McDonald’s improves on the discovery of the backs of kiosks, then they can further speed up the ordering process, arguably something you go to McDonald’s for.

Cafe X Line is a Crowd

Cafe X also faces challenges with its layout. The kiosks are in a walkway, so this makes it awkward to line up behind the kiosk. Instead, people crowd around it, obscuring the kiosks from others.

Someone approaching the machine will not see the kiosks.
Instead they go up to the tablets on the periphery of the glass enclosure.
Then they’re confused and not sure how to use the tablets. They turn around, see kiosks, and get behind the crowd.

If there were a place to line up, then there would be clearer directions for where to go. Hopefully in future iterations of Cafe X, we’ll see space better organized for lines.

Eatsa’s Restaurant Flow

Eatsa understood that people need both an orderly place to line up and clear directions for what kiosks to use. Going through the line and waiting for food at Eatsa took maybe 5 minutes total, despite at least 4 people being in front of me when I showed up. At most other restaurants this whole process might take 10 minutes.

There’s a general clockwise flow throughout the store that keeps people from walking into each other.

The design of the store and the tablet helps with this.

  1. Queue up in a single line
  2. Order from a kiosk
  3. Pick up food from cubbies

The Line

Queuing theory predicts that a single line is faster than having multiple lines. Though there are competing models based in behavioral economics, one benefit that’s pretty clear is the clarity. People know where to line up. Then when a customer reaches the front of the line, a restaurant worker directs that person to an available kiosk.

Empty Space

Between the front of the line and the kiosk, there’s space. This space makes it easy to walk over to the kiosk without walking through someone else’s path.

Not Everyone’s Eatsa

It’s understandable that spaces not originally designed for kiosks don’t naturally lend themselves to kiosks. But because of this designers need to study how the kiosks shape the flow of people through restaurants. Hopefully with kiosks becoming more commonplace this will become a standard step in setting up kiosks.

Service Design

Despite the usability challenges at Panera detailed above, kiosks have been a financial success for Panera. According to Nick Setyan, Panera has been able to increase its throughput of customers so much that they allocated more hours to food preparation work.

As cashiers are replaced with kiosks, there’s another role where we might see more people: Food Expert.

Coffee Experts of Cafe X

Oftentimes baristas carry a wealth of knowledge on coffee, but it’s awkward to stand there asking a barista about different roasts. Imagine chatting with a barista as they describe the flavor profile of the Cortado while a line builds behind you. Completely unacceptable.

If I tell you it’s basically a latte, will you move? I’m late for a meeting. (PC: Chevanon)

But at Café X, the coffee baristas don’t make the coffee. They instead stand to the side while robots make coffee and the kiosks take orders. If you want to learn about the Cortado or chat about the differences between the Guatemalan and Brazilian roasts, you can.

Kiosk-Centric Service Design

At other restaurants where kiosks have been installed, you see restaurant workers helping people use the kiosks. At Eatsa, when a customer accidentally ordered the wrong thing, a restaurant worker helped them fix their order. At McDonald’s, restaurant workers help people find available kiosks. All this service seems oriented at mitigating the drawbacks of kiosks.

Beyond this, human contact is limited and the experience feels less personal than ordering from a person.

But what about service design that goes beyond making kiosks usable?

Café X presents a different vision for automation in fast food. It shows how when human labor is freed from transactional work, people can provide better customer service and deepen appreciation for the food.

Conclusion

In my survey of kiosks, I found several usability challenges related to the apps on the kiosks. Further challenges are posed by the physicality of the kiosks. As large, immobile interfaces, kiosks have dependencies on and influence the spaces they’re placed in. Lastly, I learned that kiosks might not exactly end up replacing cashiers, but just change the role that people play in connecting customers with food.

Good design can already be found at different restaurants. At Eatsa, the spatial design of the restaurant helps users fluidly move through the restaurant. At McDonald’s, the design of the app helps users place orders with ease. At Cafe X, people are reallocated to connect customers to food through conversation and knowledge.

Restaurants can easily automate transactional work by copying their menu and putting it on a kiosk. But if they want to build a great experience, there are many opportunities for delight.

Further Thoughts

Outside of ordering food, there are numerous places where restaurant work is being automated. Momentum Machines is automating burger making, sushi conveyor belts have automated food delivery for decades, and now drones are automating delivery.

What do you think are use-cases where automation fits well into the eating experience? When does it not make sense?

Thanks to the Pivotal SF Design team, Elliot, Liz, Mischa, Dylan, and Rachel for their feedback. Thanks to Liz, Prianka, Morgan, Michael, and Pablo for joining me in visiting restaurants.

Change is the only constant, so individuals, institutions, and businesses must be Built to Adapt. At Pivotal, we believe change should be expected, embraced and incorporated continuously through development and innovation, because good software is never finished.


Design Restaurants for People, not Just Speed was originally published in Built to Adapt on Medium, where people are continuing the conversation by highlighting and responding to this story.