This week I asked two co-workers (Front End Web Developer and UX Manager) and my husband to complete three tasks on each of Miller Lite, Coors Light, and Bud Light’s desktop and mobile websites. For the purposes of measuring usability, I asked the participants to complete three tasks on the desktop and mobile websites:
#1 Use search or navigation to find the number of calories in the beverage on the website. Describe the experience..
#2 Put a specific piece of merchandise in the cart. Time the interaction from start to cart.
#3 Find and ‘like’ the brewer’s Facebook page. Rate difficulty on a scale from 1-5, five being hardest.
I included mobile and desktop because after investigating each of the desktop websites, it seemed like the sites were designed for mobile viewing. Each of the websites are responsive, but optimal viewing is at the mobile dimensions. Below, you will see screenshots of identical pages as they are presented on desktop (horizontal) and mobile (vertical). In addition, I will provide a statement for each site based on the usability findings as well as a recommendation for improvement.
Bud Light’s desktop page looks and feels very similar to its mobile page. Both are encouraging the user to find a local retailer. The goal for Bud Light’s homepage is clear…make it easy to find and buy.
#1 Find the number of calories
Bud Light’s website is the only one that offers search functionality on the homepage, and “calories” doesn’t offer any results. The qualitative feedback I got from two of three testers is that the massive images on the Coors Light and Miller Lite homepages made it hard to navigate through the desktop site, compared to the mobile site. Trying to find the number of calories in each beverage was easier on the mobile sites and took 50% of the time. All three brewers offer a section called “our beers” that lists the calories, so clearly this is an important fact to have readily available on the website. One tester commented that Miller Lite has the easiest to find calorie count, because it’s located in the footer on their homepage of the desktop and mobile site. My recommendation for Miller and Coors is to reduce the size of the hero banners on the desktop sites to provide a more visually manageable desktop site. This will expedite the speed at which people can find information on the desktop site.
Tons of white space on the desktop version of Miller Lite’s subcategory shopping landing page. A user is required to visit this page and then click into the store from here. It’s not intuitive. A better experience on the mobile version of the Miller Lite site, it still requires the user to visit the subcategory page, but the products are laid out closer to each other and leads the user to scroll.
#2 Add a piece of merchandise to the cart.
Bud Light and Coors Light both have direct links to their shopping websites from their homepage. Miller Lite has a link to shop, but it takes the user to a subcategory landing page and requires another click to get to the web shop. Due to the extra step, and the confusion that goes along with it, all three testers said it took longer to put merchandise in their carts on the Miller Lite site compared to Bud Light and Coors Light. Bud Light and Coors Light came in at less than a minute on both the mobile and desktop sites. Miller Lite took one user more than two minutes to add a product to their cart on the desktop site. My recommendation for Miller Lite is to remove the second, unnecessary step from their shopping experience, and provide a direct link to their shopping site on the homepage. This will get people to checkout faster.
Coors Light’s images are not aligned on the desktop version of the website, but they line up perfectly on the mobile site. Coors light also has a homepage hero banner that takes up the entire desktop, but it only takes up half the page on the mobile site. It seems as though Coors has designed the site specifically for mobile users, which means this is likely where most of their traffic comes from. Even so, there should be a better solution for the desktop version of the site.
#3 Find the Facebook icon and like the brewer’s Facebook page.
This was rated a 1 (easiest) by all three testers on Bud Light and Coors Light’s desktop and mobile websites. Miller Lite received two 2’s and a 3 on this task because the Facebook icon is not located on the homepage. A user is required to click on “It’s Miller Time” from the homepage to find the Facebook icon. Even once the users were taken to the landing page, the images were so large and overwhelming that it was hard to find the icon. My last recommendation is for Miller Lite to place social media icons in their footer. This will make it easier for people to get connected from their branded website and become an advocate of Miller Lite.