Welcome to BrewHops, a native Android app that aims to support local breweries by making it easy for users to explore and discover what's near them. 

Role: UX Designer

Timeline: 10 Weeks

Project Type: Academic - Capstone

Tools Used: Sketch, Figma, and InVision

The Problem Space

In July 2020, the world was amid a global pandemic, and my UX Design program challenged me to find opportunities for design intervention.

The idea of BrewHops came to me when I was at my first beer club get - together since the pandemic started. My friends and I noticed a significant change in Vancouver's brewery scene. Table service only, 6 people max were allowed at a table, and the wait times were excruciating. These changes impacted our entire experience and made it less enjoyable for everyone. After speaking to a brewery owner, I learned that the pandemic and its restrictions affected the taproom business model as well, as breweries experienced less customer turnover. This information led to creating my design challenge.

How might we enhance the craft beer experience in order to attract more consumers to support local breweries?

The Process

Following IDEO's Design Thinking process, I wanted to start by gaining a deeper understanding of my users and the problem space before ideating, prototyping, and testing potential solutions. 

Project Goal

The purpose of this project was to synthesize and apply my understanding of the core concepts of UX design to the creation of a compelling and practical digital user experience. 

Constraints

  • Project deadline: September 11, 2020 (10 weeks)

  • Final deliverable would be a hi-fi prototype consisting of 1-2 task flows, case study, and presentation

  • 4 sub-deliverables due within the 10 week timeline

  • Designing only for Android, specifically the Google Pixel 3XL

  • Additional task of creating a marketing website showcasing responsive web design for mobile and desktop

 
Image by Wil Stewart

EMPATHIZE

Secondary Research

I conducted secondary research first to gain more information on the problem space. I discovered that pre-pandemic, the craft beer culture was experiencing explosive growth⁶. Its primary consumers were found to be adventurous 19-30 year olds who enjoy craft beer for its diversity of beer styles and flavour profiles² ³. While this group mainly consumed craft beer at breweries, pubs, or restaurants, the pandemic shifted this behaviour to more at-home drinking. This is due to safety, longer brewery lineups, and no longer having attractions such as arcade and board games available¹. 

 

Additionally, breweries reported a 40% decrease in business due to the pandemic and lower demand for craft beer. Many breweries are trying to replace their loss of taproom sales with canning products, however, the supply of cans is limited⁵. 

Primary Research

Next, I conducted 5 one-on-one interviews to learn about people's pain points, motivations, and behaviours when visiting breweries. I put interviewee quotes on virtual sticky notes that I was able to group into 4 themes. Here's the primary insight I gained from research: there are many types of 'brewery trips' that people go on, and the pain points arise when breweries don't meet a person's expectations.

 
Beer Bottles

DEFINE

Primary Persona

Research findings led me to create Michael, the primary persona of BrewHops. Michael gave me a better understanding of my target market and provided direction for making future design decisions.

Michael's Experience Map

An experience map was made to visualize design intervention opportunities that could enhance Michael’s brewery experience. An interesting opportunity to pursue was in the planning phase as there was no one place Michael could go to help him decide what brewery to try.

Task Selection

When determining the functionality of the app, I wrote 26 user stories to encompass Michael’s expectations. These user stories were grouped into 5 epics being: order, plan, review, profile, and discover. I selected Discovery as the core epic to pursue because research found that Michael had several information needs when visiting a brewery. The primary user story pursued was the following: 

As an adventurous craft beer consumer, I want to explore and discover breweries near me so that I can visit them one day and sample their beers.

Task Flow Diagram

Based on the core epic and user stories, I came up with a task flow diagram to show how Michael would use BrewHops to discover a brewery. This task flow helped me understand what screens and functionality I would create for BrewHops. No system decisions were used as they didn't seem necessary for this task flow. 

Task Flow Diagram of Discovering a Brewery

 
Image by Meritt Thomas

IDEATE

Sketching

To get the creative juices flowing, I started the ideation process with a round of Crazy 8’s. Once this was complete, I  sketched multiple variations of how the screens might look before deciding on the first iteration of sketches that would be digitized.

Mood board

When thinking about how BrewHops should feel, I curated a mood board that aimed to attract the adventurous and curious target market. Feelings of warmth, relaxation, and friendship came to mind as these were common descriptors my interviewees used when talking about the breweries.  

Inspiration

Considering the apps that my target market uses, I wanted BrewHops to feel comfortable, familiar, and intuitive. I used InVision to organize inspiration for each screen and specific components such as the navigation bar and icons. 

Colours

I chose orange and blue for the brand's primary colours. These complementary colours together symbolize joy, freedom, inspiration, and reliability

Wordmark & Logo

The BrewHops wordmark and logo underwent many changes while striving for a look and feel that fit the app. The name itself is the combination of two words. 'Brew' is another term for a drink, and 'hops' refers to brewery hopping in addition to being a key component of beer.

After looking at countless brewery wordmarks and experimenting with various typefaces, I finally landed on Windsor, a typeface recognized for its playful yet familiar feel. 

The logo is of a beer stein to help users recognize the app quickly on their phones. Since the initial sketch, I simplified the design to match other Android apps. A linear gradient finally helped achieve a more vibrant and energetic look than the solid orange.

 

Greyscale

I translated sketches into a digitized greyscale prototype. The greyscale allowed me to test BrewHops on users and catch usability issues while the effort to fix them was low. In total, I did 3 greyscale iterations. While I moved onto hi-fi mainly due to time constraints, I realized later the importance of focusing on usability issues that had a higher impact and effort to change. Had I done this process again, I would've started with a paper prototype using the Marvel app, as the issues I uncovered would've been caught sooner with a significantly lower effort to update.

The video clip added here is of BrewHops' first greyscale prototype. The prototype has significantly changed due to usability testing, iterating, and my growth as a designer

Image by BENCE BOROS

PROTOTYPE

High Fidelity

The time had come to make my greyscale prototype come to life with color and images, utilizing the UI library and moodboard I curated. To date, I've completed 6 iterations of BrewHops, with each iteration followed by usability testing.  

Image by Gonzalo Remy

TEST

 

Usability Testing - The "Aha Moment" 

Testing allowed me to uncover usability issues and validate that the current solution would help my target market discover and be more inclined to support local breweries. The first 2 digitized grayscale prototypes had proper usability test session and output reports written after each round, with later testing uncovering more UI issues such as ghosting that were easier to fix and didn't require a lengthy document.

 

I tested on 5 users each round and learned that while most people were able to complete the set tasks, there was a lot of confusion about the wording used. I call this my "aha moment" because up and until then, I had thought that BrewHops was foolproof. 

Notable high impact changes included:

  1. Updated wording that users didn't understand

  2. Removed hashtags and pre-selected filters that users found confusing

  3. Updated the navigation bar to a more standardized size

  4. Added social proof

  5. Ensured the app met WCAG AA standards throughout

 
Beer Sign

MARKET

Marketing Website

The goal of the marketing website was to promote BrewHops and attract users to download the app. When creating this, I focused on establishing a brand voice and narrative for the product. 

An additional challenge with this was to create a mobile viewport. Through a content flow diagram, I was able to visualize how the elements transitioned between desktop and mobile. I designed the marketing site in Figma as I wanted to test out the carousel functionality.

Check out my process below, or visit the desktop & mobile prototypes directly.

Market & Competitor Analysis

The primary competitors of BrewHops are Untappd and brewery websites. The competitor analysis chart shown below the descriptions compares the 3 in terms of functionality.

Untappd
Untappd is an app that helps people “Discover and Share”⁷ beer. Users can check-in to various breweries and rate their beers on the app. There is some gamification involved as users can unlock cleverly named badges as they use the app.

This success of Untappd with over 1 million downloads, 85 thousand reviews, and a 4.7 rating in the Google Play Store shows that there is a market for craft beer apps.

Brewery Websites
Brewery websites such as Yellow Dog Brewing Co. are another competitor. Many of these sites offer online ordering, which is a feature that was added to BrewHops as well⁸.

Competitor Analysis Matrix

 
Image by George Cox

REFLECT

Design Impact

BrewHops aims to be a one-stop-shop for craft beer needs. In addition to supporting a strong craft beer culture, BrewHops hopes to help the adventurous consumer satisfy their itch to try something new. 

Supporting local breweries is also important to BrewHops, especially independent breweries that have been impacted most by the pandemic. The BrewHops app hopes to increase user awareness of these breweries with a simplified exploration process.

KPIs

If BrewHops launched, KPIs measured to see if the app is successful in the market include (but not limited to):

  • The app's performance relative to Untappd (reviews, rating, number of downloads)

  • Rating and number of downloads in the Google Play Store

  • Number of active users

  • Number of in-app reviews made daily/weekly/monthly

Next Steps

This project was an excellent learning experience for me to apply the skills that I had gained from BrainStation. Now that the program is complete, I plan to continue to refine my skills as a UX designer by: 

  • Develop other task flows in the app based on previously made user stories

  • Conduct user testing on my target market with each subsequent iteration

  • Gain feedback from fellow designers as I continue to develop my UX skill set

Project Learnings

1. Dig deep to understand your "why"

With multiple projects on the go in addition to BrewHops, I sometimes lost track of the app and its purpose. Keeping my project goals and design challenge always visible (at the top of my Sketch board) helped me stay on track and made me feel like I was designing something of value. 

 

2. Test your product on your target market early and often. 

I received a lot of support during this process from my fellow UX design friends - but unfortunately, not many of them enjoyed craft beer. While my UX friends helped me improve the UI, copywriting, and usability of the app, testing BrewHops on its target market uncovered the most valuable insights into user expectations and frustrations. This project felt complete when target users reported no real usability issues and that they accomplished their goal of exploring and discovering new breweries. 

 

3. Iterate, Iterate, Iterate... 

BrewHops went through many iterations before I felt that I had accomplished what I wanted from this project. Looking back at my first greyscale version of this app, I am happy to see how far I've come from the start of my UX Design program.

 

If you've made it this far - cheers 🍻, and thank you for reading! 

Works Cited

  1. Bartel, M. (May 24, 2020). ‘The public is the big unknown’ — Tri-City breweries cautious about reopening tasting rooms. Tri-City News. Retrieved from https://www.tricitynews.com/news/the-public-is-the-big-unknown-tri-city-breweries-cautious-about-reopening-tasting-rooms-1.24140104

  2. Beer Me BC. (2019). BC Craft Beer Trends: Seven Year Survey Data Analysis. Retrieved from https://beermebc.com/2019/12/18/bc-craft-beer-trends/

  3. Carneiro, J. (2019). What makes craft beer so popular with millennials? DSM. Retrieved from http://dsm.cheap/food-specialties/en_US/insights/beverage/craft-beer-millennials-consumer-insights.html

  4. Garrett, J. (2020). Final Gravity - What Will Be Left of Beer Culture After COVID-19? Good Beer Hunting. Retrieved from https://www.goodbeerhunting.com/blog/2020/6/30/final-gravity-what-will-be-left-of-beer-culture-after-covid-19

  5. Morris, C. (2020). Craft brewers upend their business models in fight to stay alive. Fortune. Retrieved from https://fortune.com/2020/10/14/craft-beer-brewery-covid-businesss/

  6. Turton, C. (2019). Five Breweries That Defined Vancouver’s Craft Beer Decade. What’s Brewing. Retrieved from https://www.whatsbrewing.ca/2019/12/vancouvers-craft-beer-decade/

  7. Untappd. (2020). Untappd - Drink Socially. Retrieved from https://untappd.com/

  8. Yellow Dog Brewering Co. (2020). Home - Yellow Dog Brewering. Retrieved from https://yellowdogbeer.com/

Have a project in mind? Let's create something together!

  • Dribbble
  • LinkedIn

©2021 by Vanessa Ungerer