BeerNut.com
Project Overview
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
2
Team:
Mark LaPoint (solo)
User Analysis
Competitive Analysis
4
TheBeer.com Nut 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.
User study: Proto-persona
5
I want to make good beer at home.
User study: testing plan and notes
6
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.
“It might take
some digging”
“It's fine...not terribly engaging”
User study: initial user survey results
7
Testing 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.
User study: initial user survey results
8
Users wanted:
User study: Empathy map
9
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.
Current site user journey
10
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. They don’t want to have to dig for information.
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: Charles
11
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. They don’t want to have to dig for information.
User Interface Analysis
Heuristic analysis of existing site
13
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
14
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. They don’t want to have to dig for information.
User Interface Design
Proposed user flow
16
Proposed Feature Matrix
17
Based on the survey, the most important features needed are better navigation, graphics, tutorials, blog articles and videos should be implemented.
Rapid Prototyping
18
Quick visual notation for the new navigation
Lo-fi wireframe prototype
19
Lo-fi wireframe testing
20
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.
Lo-fi wireframe testing
21
Takeaways:
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.
Lo-fi wireframe testing
22
Question about the wireframe prototype:
Lo-fi wireframe prototype feedback iteration
23
Interaction Design
Moodboard
25
Style guide
26
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
27
High-fidelity prototype testing
28
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.
“I liked that I didn't have to
navigate from the main page.”
“Looks very nice (and)
easy to navigate.”
Key findings and takeaways
29
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.
Key findings and takeaways
30
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.
Key findings and takeaways
31
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.
Key findings and takeaways
32
Additional thoughts:
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.
Thank you.