UX Design Case Study - BrewScout

With a rapidly growing craft beer scene in BC, there is an increasingly large hurdle in trying to disseminate all the latest information related to craft beer. As an exploratory student project in the UX Design Professional Program at RED Academy, our team was tasked with creating a mobile application for craft beer enthusiasts to take on their journeys throughout all the various craft breweries in BC. There were a few craft beer applications currently available but none specific to BC craft brewers, so we were assigned the BC Craft Brewers Guild as an organization to build for as a client.

The Challenge:

  • To design a flow that allows users to discover multiple breweries of Vancouver & the Lower Mainland
  • To design a flow to plan out a day trip to visit multiple breweries, and allow users to invite their friends to different locations or the entire trip
  • Build an interactive prototype using Axure
  • Target devices: iOS or Android phones

There was a two week turnaround, so we had to get a lot done in a short amount of time. Thankfully we had a great team dynamic. We participated in each stage of the process, but we were able to utilize our different backgrounds to enhance the final product. My biggest contributions were in construction of the user flows, interface layout, and developing an interactive prototype in Axure.

The Team

  • Mike Lenizky — Research & Presentation
  • Kat Wearing — Visual Design & Branding
  • Paul Wilson — User Flows, Interaction Design, & Prototyping

Research

First things first, we needed to do a bit of research and explore the craft brewery scene in the Lower Mainland. Not a bad gig, right? We were each craft beer enthusiasts to some extent already, but we needed to get a sense of the varying knowledge levels and interests of the potential audience of the app. We built a set of interview questions as well as an online survey to find out. There were 11 user interviews conducted, as well as 30 responses to the survey.

As far as competitors, there was a bit of an opportunity here. There’s a good mobile app in Untappd but it’s better for sharing beer ratings, it’s not focused on the Vancouver scene, and you can’t plan out a trip to multiple breweries directly from the app. There were a couple bike tours, but they were quite costly and restrictive in how much beer you could sample. A comprehensive Vancouver craft beer guide is available called The Growler but it is only available in print form.

We then performed a contextual inquiry, in that we went out one afternoon to visit a few local craft breweries. (Again, this was a pretty sweet gig.) First thing we did would be like many people would do: take out our mobile phones and enter “craft breweries” into Google Maps. Only 6 of the top 15 results were actually breweries, with the rest being liquor stores, bars, or restaurants. That would definitely be a source of frustration in trying to plan out a trip.

Planning

We compiled the research data into a few user personas and scenarios.

Using the user personas and scenarios as a guide we built out a user flow framework. We brainstormed a list of potential features and prioritized them for our MVP. Our main focus was in the trip builder function, finding brewery information, and sharing trip ideas with friends. All while keeping it simple and geared toward the desires and pain points of our users.

Design

Next step was to start designing the interface. We used the Design Studio method to develop the layouts of a few key screens, individually sketching out our ideas, presenting them to the others, and creating a composite design utilizing the best characteristics of each.

Our biggest point of contention in the design process was what to present the user after they have added a brewery to a trip. What would the best option be to enhance user engagement?

  1. take them directly to the trip builder screen, give them a short tutorial of its features for first-time users, and present a list of nearby breweries. If they’d like to go back to the previous screen they could press a “back” button
  2. Have a notification pop-up in the top-right corner that a brewery has been added to the trip. Provides visual feedback but not a clear next action for the user to take.

Our first paper prototype went with the first option, however when we tested it we found that users were frequently trying to get back to the previous screen they were in. If they wanted to quickly add a couple breweries they saw in a list they found the frequent context switching to be an annoyance. So, we switched to option 2, changing the language, button feedback and modal box to give the user a clear idea what next action was available to them without needing to leave their current browsing position.

Brewery details screen & “Add to Trip” notifications

Through user testing we were able to discover other potential issues, which were resolved by refining the text & iconography, and streamlining the interface by removing unused features.

“What’s on Tap” screen, Favourite function, & drop-down menu
Evolution of the Trip Guide Notification icon
Trip Builder and Itinerary screens
Tutorial Pages for Trip Builder

Prototyping

Our initial prototype was created on paper and we quickly put together an InVision prototype showing some the features of the first iteration of our digital build. Partway through the project, the instructors informed us that a requirement of the final prototype was it was to be created using Axure, a powerful rapid prototyping application. Highly functional prototypes with dynamic content and animation are possible, but with a fairly steep learning curve at first. I took on the challenge learning the application, and my previous programming background came in handy making use of variables, conditional logic, and animation to enhance the interactivity of the prototype.

Results and Next Steps

All in all, the project went really well. We received positive feedback from instructors, wanting to have the project to be highlighted as an example of RED academy’s student work in the InVision blog. Although the project was assigned as a concept piece, there was interest in developing the app further. (Update February 2017, the app is now being built by Oiled Digital)

Since we only had two weeks to work on this project before moving on to the next one, we had to leave out some features. Some possible next iterations could include:

  • build out a section of app for breweries to highlight new beer offerings and special events
  • notifications for new beers on tap from breweries you’ve visited or favourite beers back in rotation
  • integration of transit routes & times into the app
  • a button to call taxi from the app, enter home address in user profile to automatically get directions when “you’ve had a few,” etc.
  • curated multi-brewery tours sponsored by guild members or shared by the community
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.