brewhops wordmark white.png

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

Project Type: Academic Capstone Project

Tools Used: Sketch, InVision, Otter.ai, and Google Sheets + Docs

How It Started

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.

giovanna-gomes-_8KV86shhPo-unsplash.jpg

Image Credit: Giovanna Gomes on Unsplash 

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

The Process

I followed Hasso-Plattner's Design Thinking Process, which started with learning about the problem space and individual pain points, motivations, and behaviors when visiting the breweries. This human-centered approach focused on creating a solution that would be custom-tailored for its users.

design thinking process.png

Project Goal

To synthesize and apply my understanding of the core concepts of UX design to the creation of a compelling and practical digital user experience. 

Project Constraints

  • Final deliverable: hi-fi prototype (1-2 task flows), case study, and presentation

  • Designing for Android, specifically the Google Pixel 3XL

  • 4 sub-deliverables due

  • Free research methods 

  • Additional task to create a marketing website showcasing responsive web design for mobile & desktop

  • Project deadline: Sept. 11, 2020

 
Image by Wil Stewart

EMPATHIZE

Secondary Research

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. Some breweries are attempting to replace their loss of taproom sales by selling canned products. Unfortunately, with more companies wanting to do this, the market is experiencing a shortage of canning supply⁵. 

Primary Research

I conducted 5 one-on-one interviews to learn about people's pain points, motivations, and behaviors when visiting breweries. I put interviewee quotes on virtual sticky notes that I was able to group into 4 themes. From this, I learned that people care about drink selection, experience, food, and covid protocols when they visit breweries. The primary insight I gained from this research was that there are many types of 'brewery trips' people go on, and the pain points arise when breweries don't meet a person's expectations.

Interview Themes.png
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.

Primary Persona.png

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

task flow diagram.png
 
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.

Sketching & Ideation.png

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.  

Moodboard.jpg

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. 

Inspiration.png

Colours

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

Colour.png

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.

wordmark.png
icon.png

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.  

Hi-Fi Mockup.png
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.

Marketing Site.png

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

competitor analysis.png
 
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.

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/