We visited fast food restaurants to test how real-life users experience ordering through their websites.

This is part three of our multi-part series on usability with fast food eCommerce websites. In each part, we’ll highlight the usability problems and successes we discovered through performing guerrilla user testing⁽¹⁾ at popular fast food restaurant locations.

We’ll also offer suggestions on improving each website for higher conversions and customer satisfaction. 

Restaurants have some of the highest conversion rates in the industry⁽²⁾, complex menus with lots of options, bundling, and pricing configurations. This series will educate you about fast food’s successes and failures. Let’s get started!

Case Study: Chipotle Mexican Grill Mobile Website

To fix the errors, users must scroll through a long list of items and find the sections that require attention. Having a long list of items, the error message alone is not helpful in quickly locating the unchecked options. This creates confusion and makes it harder to identify and correct the problem. 

See the video of a user reacting to the error message.

First Solution: Pre-Populate Required Options

KFC's solution is to pre-populate any required secondary options with the most common choices. The process is typically used on other sites when the user picks an item with many secondary options. Users can process the order faster with fewer errors by having secondary options pre-selected.

On the Chipotle site, an error message appears suggesting the user has made a mistake which is not the best user experience. Other design options and interface choices can correct this. Receiving an error message in the process of placing an order lowers conversions.

Second Solution: Highlight Errors

Another easy fix would be highlighting and displaying the section that requires attention. This allows users to find the areas or items that caused the error quickly, creating a positive ordering experience⁽⁷⁾  and lessening site abandonment.

View a mockup of the error highlighted area

Usability Issue: Hidden Button

The following usability issue is the “Tap the target to find the closest Chipotle ” button on the page's bottom.

When the page is opened on a typical mobile screen, the “Tap the target to find the closest Chipotle ” button is hidden. Having the button located far away from the search field creates confusion and makes it harder to use. 

A second "Use My Location" component is displayed at the top of the search results. This component is hidden until the user types three characters into the search field. 

See the user typing into the search field, which displays a"Use my location" component in the results.

Watch this video of a user finding the closest location.

Solution: Place Button Close to Search Field

A competitive example of solving the issue is the Five Guys site, which has a component that quickly allows users to search using the current location. The closest locations are displayed below when a user clicks the “Use My Location” button. The nearest location is highlighted, speeding up the ordering process and raising conversions.

On the Chipotle site, the hidden “Tap the target to find closest Chipotle” button could be corrected by moving it next to the Search field. The second “Use My Location” displayed at the top of the search results could be removed.

The practice of placing elements in close proximity which share similar functionality is related to the Law of Proximity⁽³⁾ from Gestalt psychology.

Usability Issue: Only Credit Cards Allowed 

Users can only pay by credit card on the Chipotle site. This issue creates user frustration for anyone with other payment services set up on their phone. Chipotle slows the ordering process and lowers conversions by limiting payment options.

Solution: Allow More Payment Options

A good solution would be adding other payment options such as Google pay, Apple Pay, and PayPal. Since 2020 mobile payments have increased by 27.9% from $1.54 trillion. According to projections⁽⁶⁾, the market will continue growing at 29.1% annually over the next seven years, eventually reaching $11.83 trillion by 2028. Limiting users’ payment options, Chipotle creates an opportunity for other services that users may find quicker and easier to use.

By removing these remaining obstacles from the users’ ordering journey, Chipotle will speed up the checkout process and create a more seamless experience. Creating a positive ordering experience⁽⁷⁾ will give users a strong impression long after leaving the site. 

🥳Usability Success 1: Additional Options

An excellent example of successful usability is Chipotle product customization, the three-dot menu or "Kebab" shown on the right side of some options. It is a great method to keep the interface simple and allow users to expand more options if required.

The three-dot menu gives users an Information Scent^(x)   with interest in exploring what additional choices are available. This allows for personal choice and processing orders quickly with less confusion. 

The three-dot menu is an excellent example of how UX design and visual-design principles⁽⁹⁾ can improve customer satisfaction for a fast food eCommerce site.

Watch as a user quickly changes options with the three-dot menu.

On the Panera Bread mobile website, it’s more difficult for users to customize additional options for a product. The users must navigate multiple clicks and different interfaces to accomplish this task. In comparison, Chipotle can deliver all the various options on one screen.

Watch as a user changes options through a multistep process.

😀😀Usability Success 2: Eating with Our Eyes 

Another area of success is Chipotle's menu, which displays each food item with an attractive image.  Many studies have proven that we are scientifically drawn to something that looks appetizing^(x). Utilizing the left side of every menu item with an image of that choice, they entice users to make the most visually appealing choice, which drives up sales.