BREWHOP

Enhancing the Beer Drinking Experience Through An Engaging Exploratory App

 

PROJECT BRIEF

 

 
BrewHopHero
 
 

Serving as an educational, exploratory, and social beer app, BrewHop engages beer drinkers of all interests and expertise.

It provides users a platform to search & browse elements of the brew universe, develop personal brew indexes that can be shared with others, and connect socially through brew events & establishments.


IDEA ORIGIN

 

  • Started a personal bottlecap collection
  • Thought of a way to track beers and experiences
  • Wanted to connect people with beer events near them
  • Combination of these generated idea for app and logo
 
BrewHopLogo.png
 
Bottlecaps.png
 

PROBLEM STATEMENT

  • Beer drinkers do not have access to a platform to explore, track, rate, and share their beer experiences.

USER GOALS

  • Create a personalized virtual beer collection to track and rate beers people have enjoyed at home and abroad.
  • Provide a way to make users’ drinking adventures more interactive by visually sharing their experiences with others.
  • Simultaneously explore, learn, and try different aspects of the beer universe in an engaging, fun way.

USER RESEARCH

 

Conducting personal interviews was the main source of research in gaining insight into what kinds of features and information people want to see in apps. Wanting BrewHop to be useable by people of all levels of beer interest, I made a point to interview each of these types of people (rare beer drinkers, casual beer drinkers, and beer enthusiasts).

Through the research, I found that each of these users brings a unique, different perspective that is equally critical in determining the key aspects of the app that will make it engaging, interactive, and useful enough to keep users invested over the long-term.

 
 
 
 
 

FEATURES USERS WANT

 
  • Creating own content in a creative and engaging way
  • Involving groups makes people more likely to use app to enhance experiences
  • Continuous new content created by both users and system
  • Clear call to action & easily accessible features
 
Instagram.png
Speaker.png
Groups.png
Switches.png
 
 
 

PERSONA

 
Persona.png
 

COMPETITIVE ANALYSIS

 

Untappd, Beer Citizen, and Barly are beer rating/reviewing app platforms that would compete directly with BrewHop. Each had features I liked enough to apply to BrewHop, however all 3 were tailored for a specific target market or function that seemed to inhibit their overall reach and usability.

Pros

  • Lots of data/beer content, Badges to encourage interest in using the app longterm, Sponsorship, Tagging friends and check-in function to add social engagement

Cons

  • Arbitrary ratings, Inconsistent organization, Unenjoyable interface/design, Information that goes way over the head of casual drinkers
Competitors.png

Throughout the process of designing, I was very aware of the need to appeal to all types of users, focusing on elements and features that would allow for anyone to have an informative and enjoyable experience using the app.


SKETCHES & SCREEN FLOWS

 
  • Initial notecard sketches of the welcome sign-in screen and two main navigation screens (BrewNews & BrewProfile)
  • Idea of the overall design layout inspired by the Bleacher Report mobile app, additionally including the simple 5 part nav bar and some form of an auxiliary sidebar
  • Needing to determine an MVP, I decided to focus on building out the nav bar pages and leaving the sidebar as an element for future iteration. This led into an information architecture card sort (below right) using these notecard sketches, with arrows used to indicate flows and interaction between screens
App Welcome Sketch
Brew News Sketch
Brew Profile Sketch
 

After sketching very basic versions of pages and design layout on notecards, I delved into cleaner, grid-based sketches that indicated possible flows within each nav bar category. This was extremely helpful in visually seeing how screen space would be balanced between content and design elements. In addition, I was able to represent the interaction of cascading pages within each category and what information I wanted to highlight on particular pages.

 

SITEMAP & USER FLOW


WIREFRAMES

 
Explore2.png
Explore3.png
Explore4.png
Explore5.png

Referencing back to the research about users wanting clear call to action and easily accessible features, my aim was to create very explicit navigation and the ability for users to go back and forth within the app seamlessly. This idea was put into play in the higher fidelity wireframes through the nav bar and cascading headers where users could see exactly where they are in the app and how to go back to a previous screen. The readability wasn't ideal at this point, but the overall concept was highly praised by users.

ONBOARDING

Onboarding1.png
OB2.png
OB3.png
OB4.png

Onboarding screens have the ability to set the tone of the app and thus could be considered the most crucial aspect in inviting and welcoming people in. In addition to the initial look at the visual elements that people are most attracted to, I think of onboarding screens as my way as the designer to have a conversation with the user to make them comfortable and let them know what the app can do for them.

Naturally having a limited amount of screens to try to explain the entirety of an app to the user, I honed in on explaining elements that would showcase BrewHop's diverse and powerful functionality to the user. Feedback I received regarding these screens were overwhelmingly positive, with people specifically referencing getting an entire scope of the app and being very excited to get in the app to continue exploring.


FINAL PROTOTYPE

 
Hi Fidelity Screens

Along with the concept of my design, this prototype primarily highlights the ease and versatility of navigation between different sections and pages in the app. Potential user flow :

  • Searching for a specific beer through the BrewExplore function
  • Need to switch to view the BrewIndex in their profile
  • Go straight back to what they were exploring simply by tapping the BrewExplore nav button.

The interaction would take them directly to that specific page they were previously on with 1-tap, and with 2-taps would take them back to the BrewExplore landing page without having to hit a back arrow button multiple times. This feature would be highlighted upon first use in the app.

Another element of the platform revolved around making interaction within the app fun and engaging. This is put into practice in the Badges section of the profile, where a user can tap on a specific badge to learn more about its significance. I added a pop interaction to this section that opened up a dialogue box that would pop and rotate into place once developed, with the ability to exit via a cancel button or just by simply tapping the badge once again.

These micro-interactions can be crucial in creating lasting experiences that reach the users in ways to spark their emotional states, a sure fire way to appeal to them and keep them excited about new things they may encounter while experiencing the app.


FUTURE GOALS

 

This app is a personal passion project of mine and my first in the UX Design field. Having come up with the idea and all visual elements completely on my own, I would like to continue building out the app to a point where I can get it developed so that it can be presented to breweries, establishments, and beer companies with the goal of bringing the app live to both Apple and Android App stores.

Going forward I would focus on the BrewProfile aspect of the app. The main appealing function of the BrewProfile is to allow people to get rewards for drinking beer and logging their experiences in the app, also driving people to brew establishments to further enjoy the ever expanding brew universe.