This is part one in a five-part series on usability issues with fast food eCommerce websites. In each part, we'll highlight the usability problems (and possibly some successes) we found performing guerilla user testing on five popular fast food restaurant websites.
We'll also offer suggestions on improving each website for higher conversions and customer satisfaction.
Why Study Restaurant eCommerce?
Restaurant eCommerce ordering is worth studying for a variety of reasons:
Restaurants have some of the highest conversion rates in the industry, making them easier to study because their user base is very motivated to complete a transaction.
Restaurants have complex menus with lots of options, bundling, and pricing configurations.
Restaurants require a user to select a store location and often choose between pickup or delivery options, which adds steps and complexity to the checkout flow.
There are a tremendous amount of different restaurants and design solutions to compare.
With this series, you'll learn from big fast food’s successes and failures. Let's get started!
Case Study: Wendy’s
For part one of our series, we studied users ordering at http://wendys.com. We will show some of the biggest problems with Wendy's platform and how we'd solve them.
Usability Issue: Unclear call to action
The first usability issue is unclear call-to-action buttons displayed on Wendy's home page. These elements slow users and prevent them from completing their transactions.
Beginning on the very first page highlighted in yellow, two call-to-action buttons appear visually the same. The two CTA buttons are so similar that users do not know the quickest path to place their order. These buttons' proximity and similar visual styles slow user progress and lower conversion rates.
Let's take a look at a competitive example - KFC's home page. Following UX best practices(1) KFC has designed a CTA button that is easily reachable by thumbs and presents a clear sales path for users to follow.
By following KFC's lead, Wendy's can remove confusion and guide users to the next step in the food ordering process.
Usability Issue: Full-page Loading Screen
When a user picks either CTA button from the home page a repeating animated loading screen opens. This animation fails to offer any feedback and only slows down the users' ordering process.
The best fix is to remove this animation screen entirely and send them directly to the next page. This issue can be corrected by better Frontend engineering practices and asynchronous loading of resources.
Usability Issue: Hidden Promotion Value
Wendy’s forces users to register before showing some of the promotions they might receive. When a user selects the Offers button at the top of Wendy's menu, they are sent to a new modal screen asking them to sign up for rewards and exclusive offers. However, the site fails to list what offers the users will receive for completing this action. When all the user wanted was to view the special offers.
This screen shows the user there are offers available, but it does not display what the offers are or what a user will receive for signing up.
Watch this short clip of a user trying to navigate to the Offers, but they quickly abandon exploring the promotions when they see the registration page.
The mistake Wendy's makes are they fail to supply information about these specific offers or deals(2), causing user hesitation and confusion.
Let's take a look at another competitive example. Arby's registration page shows how descriptive text can move users quickly through the ordering process. Arby's displays the offer above the registration section, which allows for a quick understanding of the form's goal and its value to the user.
Wendy's should implement this use of descriptive text to better position the benefit of registering for offers. This would reduce user hesitation and improve the ordering flow.
Usability Issue: Lagging Response
Responsiveness is another usability issue on Wendy's site. The video below shows the lag in the system response to a user's action. This delay between selecting a button and the interface updating is confusing to users and slows the conversion process.
The following two videos show users' confusion over this lagging response when trying to build a combo.
The first video shows the user closing the drink selection instead of continuing with the selection
The second video shows an incorrect “double tap” because the user didn’t realize the first click began to change the page.
This issue occurs when a user chooses to create a combo from any page. The Doherty Threshold(3) UX rule that tells us a waiting time of more than <400ms> will lower the conversion rates and the user will be out of sync with the process. These users have clicked and are waiting for an action to take place. Because of this common problem users are slowed when trying to complete the ordering process.
Platform and industry conventions(4) suggest adding spinners, numbered steps, or other user feedback to fix this issue. By implementing these changes Wendy's will remove obstacles from the user's ordering journey.
The Nielsen Norman Group has published a helpful article addressing just this issue: Progress Indicators Make a Slow System Less Insufferable. (5).
Let Users Order First
The number one customer satisfaction strategy for eCommerce businesses is to provide faster checkouts to customers. This is consistent with average cart abandonment rates that often lie between 68–75%(6).
This interruption of the primary task of ordering and paying for food breaks the cardinal rule Don't Force Users to Register Before They Can Buy. (7)
In our process of interviewing users, we found that Wendy's site had issues, but none stopped a user from ordering. Users were delayed and confused with the current interface and a few would have stopped and ordered at the store.
Look for our next post on another of the big 5 fast food eCommerce restaurants using our guerrilla user study(8) techniques.
Wendy's Site Map
To understand their usability problems, it’s helpful to understand Wendy’s overall eCommerce flow. The image below shows the major steps on their site:
- Rubik: Call for Attention. UI Design Tips on CTA Buttons: Feb 23, 2018: Accessed on July 11, 2022: [Online]. Available: https://uxplanet.org/call-for-attention-ui-design-tips-on-cta-buttons-5239413aded2
- Kim Salazar: Applying for Discounts and Promotions on Ecommerce Websites: June 2, 2019: Accessed on July 11, 2022 [Online]. Available: https://www.nngroup.com/articles/applying-discounts/?lm=ux-learn-in-restaurants&pt=article
- Doherty Threshold: Accessed on July 11, 2022 [Online]. Available: https://lawsofux.com/en/doherty-threshold/
- Rachel Krause: Maintain Consistency and Adhere to Standards (Usability Heuristic #4): January 10, 2021:Accessed on July 11, 2022 [Online]. Available: https://www.nngroup.com/articles/consistency-and-standards/
- Kate Kaplan: Progress Indicators Make a Slow System Less Insufferable: September 5, 2021: Accessed on July 11, 2022 [Online]. Available:https://www.nngroup.com/articles/progress-indicators/
Shopping Cart Abandonment Rate: Accessed on: July 11, 2022 [Online]. Available:https://www.geckoboard.com/best-practice/kpi-examples/shopping-cart-abandonment
- Amy Schade: Don't Force Users to Register Before They Can Buy: July 5, 2015: Accessed on July 11, 2022 [Online]. Available: https://www.nngroup.com/articles/optional-registration/
Lade Tawak: A beginner’s guide to guerrilla research: Oct 18, 2019. Accessed on: July 11, 2022 [Online]. Available: https://www.invisionapp.com/inside-design/a-beginners-guide-to-guerrilla-research/