The Beer Nut Case Study
THE PROBLEM:
Beginning home brewers can’t easily find information on home brewing.
THE SOLUTION:
Funnel new brewers to a How-to page with a prominent graphic on the homepage and improvements to the existing header navigation. And address overall design concerns expressed by users in UX testing.
MY ROLE:
UX/UI Designer
TOOLS:
Miro, Google forms, XD, InVision, Photoshop
User Research
Competitor Analysis
TheBeerNut.com offers a wide selection of home brewing products. The site is lacking clearly defined resources for the newbie home brewer. Other sites are doing a better job of welcoming new home brewers.
Proto persona
I want to make good beer at home.
Testing plan and notes
With a screen grab of the index page, users were asked a series of questions to find if a person interested in home-brewing beer for the first time, is able to do that easily with The Beer Nut website.
Initial user survey results
A google Survey Test revealed that most users were not sure where to find beginning brewing resources, that better labeling and use of index page of graphics would help.
Users wanted:
- Easier to use navigation
- A cleaner design
- Simpler index page
- Extensive knowledgebase (KB) of beginner information
Empathy map
Users want to feel confident that they can brew beer at home.
They want a site that will support that with how-to’s, guides, tutorials, YouTube videos with easy to discover information architecture.
Main takeaway:
They don’t want to have to dig for information.
Journey map
New home brewers looking for a home brewing “how-to” are left frustrated and are not likely to make a purchase if they leave the site and continue their search elsewhere.
User Persona
User Interface Analysis
Heuristic analysis of existing site
Problem: Beginning (new visitors) home brewers have to “guess” what link to choose for new brewing information. When they make their selection the target page they land on has no information on how to brew beer.
Current site user flow
Users were not clear where to go, and what would happen if the navigated to a choice they made.
User Interface Design
Proposed user flow
Create more than one path for the new home brewer to find a beginning home brewing page
Proposed Feature Matrix
Based on the survey, the most important features needed are better navigation, graphics, tutorials, blog articles and videos should be implemented.
Rapid Prototyping
Quick visual notation for the new navigation.
Lo-fi wireframe testing
Scenario: You would like to start home brewing beer, but don't know anything about it. Task 1. Locate the "Learn How To Brew Beer" page. Task 2. After scrolling the target page add the $79.99 Beer Kit to cart using the Get the Gear Modal.
Pro: When asked, all users felt comfortable with the prototypes as a potential resource.
Con: The modal needed work to be easier to use/see and that it needed to stand out more as a popup, and not part of the page.
Main takeaway:
They don’t want to have to dig for information.
100% of respondents felt comfortable with the prototype as a place to learn about home brewing.
Lo-fi wireframe prototype modal mini-cart popup iteration
Iterations to mini-cat popup made based on user feedback
Interaction Design
Moodboard
The moodboard reflects the lifestyle of the person who would be attracted to home brewing.
Style guide
The design concept is to freshen up the header navigation and overall impression of the home page with color, typography and images.
High-fidelity prototype testing
Results:
Users were able to complete the tasks without any trouble.
They still felt comfortable with hypothetically using and making purchases on the site.
They used the promo graphic more than other paths to find the page.
Liked the “Get the Gear” popup as a means of adding to the cart.
Key learnings and takeaways
The BeerNut.com site has an extensive inventory and expertise in different brewing methods for beer, wine, soda, etc., so that experienced home brewers will find it comprehensive for their brewing needs.
The site didn’t offer much in the way for the newbie home brewer (compared to the competition, who have a lot of information, tutorials, guides, how-to’s, videos and more), to be a good resource.
The presented UX/UI and design improvements will help alleviate the pain points that current users may be experiencing if they’re interested in starting a home brewing project.
Recommendation: The site needs an updated design. With color and visuals that are engaging, as well as an overhaul of the site map, better organization of information, to simplify the user experience and to bring the site on par with (or excede) the other players in the home brewing supply category.
Also: Most of the testers, when asked, said that they would like a mobile and/or watch app to help them with the brewing process.
Read the Google slide deck
Return to my portfolio