BEERecs banner
Role
Product Designer,
UX Researcher, UX/UI Designer
Date
2022

Get Some Help Choosing Your Next Craft Beer

Craft beer has been growing in popularity and beverage market share over the past few decades and is now a common sight at dinner parties, sporting events, restaurants, and groceries. There are often numerous local brewery options available on top of more widely distributed and ubiquitous offerings. With so many options and frequently changing seasonal brews to choose from, even serious beer geeks can feel overwhelmed. How can craft beer be less confusing and more approachable? An app can help educate craft beer novices about different beer styles, introduce seasoned beer enthusiasts to new alternatives, and optimize all users' discovery experience.

Project Goals

The app was originally conceived of as a beer and food pairing guide similar to wine pairing apps which help users learn more about wine. During initial research it was discovered that this feature did not appeal to the target user base, so the focus shifted to trusted advice and discovery. The intent is to create a product that is useful to a range of craft beer enthusiasts, from total novices to experts.

Through personalized and location-based recommendations, users can make sense of the sometimes overwhelming number of craft beer options out there, read reviews, and discover new and unexpected choices.

BEERecs app screens 1

Research

Initial research consisted of in-depth competitor analysis and user interviews, with the primary goals of understanding what motivates people to choose a particular craft beer and how this experience could be streamlined and improved. While research began with a focus on a food pairing strategy, the interview outcomes led to a realignment of the product's focus, moving away from the original concept towards a resource for discovery and trusted advice.

Research Questions

  • How do you choose a particular beer when you're out to eat or purchasing for an event?
  • How do you explore new beers that you are unfamiliar with?
  • If you feel overwhelmed or confused by a large or unfamiliar selection, how do you make a decision?
  • What factors influence your choice of a particular beer to buy for a dinner party at home or to bring to someone else’s gathering?
  • How often do you seek recommendations or assistance from others when making a decision?  Who do you ask?
  • When choosing a beer, do you prioritize local breweries?
BEERecs researchBEERecs provisional personas

User Interview Results

  • Three of four users, even those who consider themselves expert beer drinkers, feel overwhelmed with large menu selections.
  • Multiple offerings of a same beer style make a decision difficult.
  • Four of four users are intimidated by the notion of guidelines around pairing food and beverages usually associated with wine, and don't place much value on them.
  • Three of four users prefer to buy beer from local breweries, either at home or when traveling, and are often open to trying something new.
  • When offering beer to friends while hosting an event or as a guest, four of four users feel it needs to align with their group's preferences and ideally be something new and interesting for them.
  • Even seasoned craft beer enthusiasts are open to seeking help deciding between beers, particularly if the help comes from friends or another trusted source.

Primary User Persona

Based upon the research results, a primary user persona was developed to capture the lessons learned and help guide the ongoing development of the app. With the newly established focus on advice and discovery, this persona pays particular attention to the experiences of choosing a craft beer while dining out and hosting or attending a social event.

BEERecs primary persona

Information Architecture

With the purpose of the app determined through research findings and a primary user persona in place to guide development, focus moved to how users would interact with the app. Careful consideration was given to navigation and app structure in order to ensure a streamlined and intuitive experience.

App Map & User Flows

The app was mapped out to establish the features that would best support discovery and finding trusted advice through user reviews. Major features were laid out to address user motivations found through research and broken into navigation tabs for easy access. The new user experience involves registration along with a flavor profile quiz and setting a home location so that recommendations can be personalized to a user's taste and local options are featured prominently.

The main user flows were established to determine the scope of the prototype to be built. The end goal of each flow is to get a beer recommendation and read reviews for advice, with the main flow involving shopping for a social event. A secondary flow focuses on exploring local beer while traveling to a new city. Both flows demonstrate numerous browsing methods that users can take to get to the same destination.

BEERecs app mapBEERecs user flows

Wireframes

With the app structure laid out and main user flows established, initial screen wireframes were built. This process began with hand sketching to quickly test numerous potential options. The ideas were developed through multiple iterations and refined to the point where they were ready to be built digitally. All major user flow screens and tabs were built to test the overall layout and evaluate what refinements would be needed. This stage involved careful study of Apple's Human Interface Guidelines, and the app typography, interaction elements, and overall structure reflect these standards.

BEERecs wireframe sketchesBEERecs wireframes

UI Design

The user interface design builds upon the app wireframes and refines numerous screen layouts in order to make navigation through the app quick, intuitive, and enjoyable. Apple's Human Interface Guidelines continued to be a critical resource during this stage of design.

High-Fidelity Mockup

The key screens identified in the user flows along with all of the main tabs were developed into a high-fidelity mockup ready for usability testing. The visual design of the app is kept intentionally minimal to counterbalance the wide variety of colors and artistic styles present in the beer labels and imagery. The primary orange and yellow color scheme evokes the copper-colored look of certain styles of craft beer.

BEERecs app screens 2

Discover, Learn About, and Find Craft Beer

BEERecs makes the process of finding a craft beer more accessible. If a particular beer sounds appealing, the app helps users find it at a local restaurant, bar, store, or through a delivery service. They can also find local breweries to support via a map, which can be particularly useful when visiting a new city. A built-in style guide helps users understand what's behind their favorite flavors and notifications keep them current with community advice and new recommendations.

BEERecs app screens 3

Usability Testing

With a functioning prototype in hand, usability testing participants were recruited. Three users were given access to the app and in-person tests were performed to analyze how well the main flows could be performed. Participants were given a series of tasks to accomplish and their experiences were observed and recorded.

Usability Prompts

  • Task A - you’re going to be hosting an event at your house and you know your friends like craft beer, particularly IPAs, and you want to pick something out that they’ll enjoy.  You have some experience with craft beer but would like to get some help. Open the BEERecs app, get a recommendation for a beer, and read some reviews.
  • Task B - now that you’ve read reviews and think this is the beer you should buy for your friends, find a place nearby where you can purchase it.
  • Task C - you want to support local business (or are visiting a new city) and would like to see what’s available from local breweries.
  • Task D - your friends’ interest in IPAs is making you want to learn more about the style so you can talk about it with them.
BEERecs prototype

Testing Outcomes

The test results were recorded and organized into an affinity map in order to establish patterns of success, pain points, and identify potential additional features. Overall, the participants were able to navigate through the app without trouble and appeared very comfortable exploring it on their own without prompting. On numerous occasions participants completed upcoming tasks independently through curious browsing.

  • Tasks A, B, and C - 100% task completion rates - all participants were able to complete the three task flows of finding beer and reading reviews, finding a purchasing location, and looking through the style guide without issue.
  • Task D - 66% initial task completion rate - one participant initially attempted to find local breweries through the search tab, but eventually completed the task by using the local beer map tab.
  • Users were unaligned in their back and forth browsing strategies which made it difficult to establish a clear use pattern, but the multiple available approaches gave each user the opportunity to choose a preferred method.
  • Additional information and buying opportunities were requested on the purchasing location screen, and refinement of the UI was identified as an ease of use improvement.
  • Two out of three participants found the app straightforward, clean, and easy to use, and all three were comfortable exploring it on their own without prompting.
BEERecs affinity map

Priority Revisions

Based on the usability testing results, a set of high impact revisions were made to the app. A revised prototype was built as a milestone to record these updates.

  • The back button touch target size was increased for easier use.
  • Text sizes were increased incrementally throughout the app to be more legible.
  • Participants were more interested in skimming numerous user reviews rather than reading a full review in-depth, so the review cards on the beer details screen were adjusted to show more lines of text.
  • Location hours were added to the purchasing locations screen.
  • Delivery services were added to the purchasing locations screen as an additional set of options beyond brick and mortar stores.

Reflection & Next Steps

The most important takeaway from this project was the value of initial user research in defining the problem. The proposed focus on a craft beer and food pairing app didn't bear out as a significant issue for users, but other common user frustrations were discovered that helped steer the project towards solving the right problem. Diving into Apple's Human Interface Guidelines was another key learning experience, as well as learning how to put a large amount of information at users' fingertips in a clear way while requiring the fewest number of clicks. Next steps in the project would include development of the new user profile setup, including the flavor profile quiz, and additional features like searching nearby purchasing locations and a way to build a network of trusted reviewers.

BEERecs banner