Case study - competitor UX analysis of fast food brands
This case study focuses on the fast food industry. You have just been employed by McDonald's to relook the user experience of the McDonald's website. Within the UX process one of the things you'll look at is if the McDonald's website is standing its own against the competitors:
- Identify competitors: The following are screenshots of the home page from each of the competitors included in the competitor analysis. Please keep in mind that at the time of publishing this book, these visuals might have changed.
Even though there are many competitors that can be used for this case study, we settled on Burger King as the direct competitor and KFC for the indirect competitor. Burger King is a direct competitor because the products sold at Burger King and McDonald's are mostly the same. Chicken and beef burgers with chips and drinks.
KFC is an indirect competitor because KFC is also a fast food chain, but it only sells chicken and no beef, as the direct competitor to the same user.
- Content and navigation: The labels of McDonald's main navigation have quite a lot of links and are quite small, which might confuse the user. With the white on black text it's also hard to read and distinguish between the different links. When a link is selected the entire page jumps as it's loading the images, which makes it hard to browse the website.
Burger King's main navigation page is clear and easy to read. The typography supports the brand identity and the site is easy to navigate.
KFC's content is clearly structured in categories and each product has its own page with the relevant information. The active and inactive states of the link color (grey versus black), as well as the fade out images, make it clear where the user is in the navigation.
- Aesthetics and style: McDonald's use of color is not reinforcing the brand. The home page looks a bit bland with only the logo in color. Also, the main image when the user enters the site is of soft drinks and not a juicy burger. The hero image can be more enticing. The presentation of the product looks appetizing.
The deals are clear with a creative touch to keep it interesting.
Burger King's use of color is excellent. The brand is well represented and the hero image is clear and enticing. They use a different angle to display the burger with separate ingredients, rather than just a burger as used in most burger adverts. The products are clear on a white background, which makes them stand out more.
The deal's design style follows the traditional "sale look" of a big bold price and call to action on an image.
KFC is using all visual elements to support the brand identity. The color palette is spot on and amplifies the product range beautifully.
KFC follows the same clear product on white background approach, but the promotions are not as clearly marked as the other competitors; it disappears within the main navigation.
KFC promotions
- Heuristic analysis: McDonald's form validation has clear notification messages to explain to the user what's gone wrong and what's expected. However, the design is not simplistic and the overwhelming visuals can be distract the user from finding what they're looking for.
Burger King's website is simplistic and mostly consistent, thus the user knows at all times where they are on the website and what they're looking at. There are no areas within the website where the user can move outside the bounds of what's available for interaction, and thus no system notifications are present.
KFC's browsing experience is mostly consistent, though where the user does interact with system notifications such as error messages in the form validation, the styling could be more clear and the message, more descriptive, for example, by using "Please add your first name" instead of "This is a mandatory field", which sounds very impersonal.
- UI animations: McDonald's seems to have no UI animation, except when the main navigation expands. Moving through the website pages has a jerky effect and there are not smooth traditions from one page to another.
Burger King also seems to have no UI animation, except for the slider on the home page. The transition between pages when navigating through the website is abrupt and the pages jump from one to another.
KFC is utilizing the UI animation the best from all the brands. The burger menu opens in a sequence and also KFC uses a loader if images take too long to load.
From the high-level categories we briefly discussed, the following comparison table can be drawn up. Please keep in mind that each of these categories can be discussed in a lot more detail and this case study is just a guide to get you started on your own competitor analysis. The following matrix was used to calculate the scores within the table; you can draw up your own matrix and set your own guidelines for the evaluators to score:
- Score 1-3:
- 1: If the competitor has none of the elements present
- 2: If the competitor has 20% of the required elements present, but they've been executed poorly
- 3: If the competitor has 20% of the required elements present and they are executed well
- Score 4-7:
- 4: If the competitor has 30-45% of the required elements present and the execution is evenly balanced between excellent but could have been better
- 5: If the competitor has 45-60% of the required elements present and the execution is evenly balanced between excellent but could have been better
- 6: If the competitor has 60-70% of the required elements present, the execution is evenly balanced between excellent but could have been better
- 7: If the competitor has 70-80% of the required elements present, the execution is evenly balanced between excellent but could have been better
- Score 8-10:
- 8: If the competitor has 80% of the required elements present, but the execution could've been done better
- 9: If the competitor has 90% of the required elements present, but they've been executed well
- 10: If the competitor has all the required elements present and they've been executed well
As you can see from the score matrix in the case study we scored well-executed elements higher than having more elements present but executed poorly. Quality over quantity goes a long way with user experience. It is better to have less features and implement them correctly than have features that are not working as well as they should and impact the enjoyment of the user.