Barrel Head Brewhouse | Mobile Experience
The Problem
The pandemic has launched us into new territory and presented us with a new set of social norms around dining and consumption. San Francisco brewery Barrel Head Brewhouse needed to define a new digital tool for their customers to support the way they are meeting these new norms, while maintaining a relaxed, seamless, and informative dining experience.
My Role
I conceptualized, planned, and executed on all parts of the UX process from end to end for this project. I worked with the owners, staff, and customers of Barrel Head to obtain user data and persona insights, as well as conduct usability testing later in the project.
The Process
The Plan
I began by creating a research plan that outlined what I wanted to learn and how I was going to obtain the information. I started broad, and set out to gather information around 4 primary questions:
Why customers go to barrel head brewhouse...what make it unique?
How has the pandemic changed the restaurant experience?
How do bay area residents feel about and use technology that is integrated into the dining experience?
How do people use the existing Barrel Head Website?
I conducted User Interviews with 8 participants, between the ages of 29 - 53, including Barrel Head customers specifically, and bay area residents more broadly.
I used Affinity Mapping and a series of writing exercises to frame my insights into Problem Statements, “I” Statements, and How Might We Statements. I then sythesized the information even further into a set of key learnings about the Barrel Head Brewhouse customer base and establishment.
Key Learnings
The number one reason people go out to restaurants and bars is to socialize
People like to try new things within the parameters of their tastes
People wants to see a wide variety of information on the menu, depending on their personal goals
Primary frustrations of those interviewed included: No access to staff, no access to the information they need, technology that diminishes social interaction
Preference for digital menu, ordering and payment vs. VIA staff is about even
81% of people who view the Barrel Head site view it on Mobile
I created one primary persona and three secondary personas to explore customer demographics, characteristics, motivations, and pain points, and gave each persona context with a user scenario to more accurately visualize and articulate their experience. From my user interview insights, I knew I needed to create a mobile app, and I used a competitor analysis and feature prioritization to determine which features I would focus on in my initial sketches and wireframes.
Information Architecture
For my initial wireframes and prototype, I create 4 primary flows that all originated from a landing page, a homepage, and a global nav:
1. Reservation Flow
2. View Menu, Order, Payment Flow
3. To Go Order Flow
4. Build Your Own Manhattan Flow
Additionally, I included functionality in the Menu flow that allowed for customers to create and manage their own tab for the duration of their brewery visit.
Usability Testing was conducted with 5 participants from primary and secondary persona groups using a high fidelity prototype. I visually aligned the results from my tests with segmented User Flows to better identify problem areas and quantify information.
Insights
Reservation Flow
60% of participants wanted to see the details of the reservation repeated back to them on the confirmation screen
80% of participants wanted the ability to edit their reservation details at each step of the flow
Menu Flow
60% of participant were confused by the check out process and felt they wanted more visibility into the details of their tab
60% of participants wanted to see the details of their purchase on the confirmation screen
40% of participants didn’t understand that they had an open tab that they could manage
To Go Flow
60% of participants wanted to see the TIP auto calculate into their total
Manhattan Flow
60% of participants wanted to see Manhattan suggestions from the establishment, with the ability to edit
80% of participants wanted to be assured they could switch out and edit options as many times as they wanted prior to submission
Informed by the insights I gained from Usability Testing, I created a new set of user flows and segmented them to more effectively isolate and address each issue. I then used these to update my prototype.
Reservation Flow
Menu & Order Flow
Digital Tab & Payment Flow
To Go Order Flow
Manhattan Project Flow
