Local Brew
Digital Prototyping
Project Background: For my Interaction in Practice course, I was asked to research, pitch, and prototype a mobile application. The application should serve a neeed or solve a problem and should provide or aid a service. The application needed to include at least these basic sections:
Sign Up/Register/Set Up
Login and/or Startup
Home Screen/Dashboard
Main Service or Functionality
User Setting and/or Profile
Account Cancellation or Deletion
Problem: What is the local beer of an area and where can I buy it? - Imagine you are in a new city (and/or state) and you are looking to purchase a local beer but you not only don’t know what that is, but you also don’t know where to go to find it.
Action: To address the problem, I first thought about the target audience, and I could empathize with them directly because I love to travel and have been in this situation. I came up with “Local Brew.” It served the population who may not want to stop at a brewery to get a growler fill or sit and have a beer, but rather stop into a store and grab a six-pack. This service also benefited merchants who were looking to market their inventory to the population not looking to visit a brewery. It utilized location based services to show the consumer where they can go to purchase local beer.
User Base: There are two main users of Local Brew. The first would be the “buyer” (aka “beer enthusiast”) and the “seller” (aka merchant). These two personas were discovered after conducting research of the intended target audience.
Beer Enthusiast: The buyer is someone who is looking to expand their tastes in beer and enjoys craft brew, specifically those that are local to the area they live in or are visiting. As home brewing is increasing in popularity, the need for inspiration and heightened palate is also increasing. This persona (and app idea) was generated by people who enjoy taking road trips to different locations and want to try something new. They are often on a budget and aren’t looking to purchase a growler from a brewery and don’t have the time to always sit and have a pint. This person is looking for something they can pick up at the store and take home to enjoy at home or at their hotel later in the trip. Local Brew would also service the home brewing community who may be looking to expand into distribution. They could see who is carrying local beer and might be open to a fresh face.
Merchant: The seller runs a store (either small scale or large scale) and is looking to promote the fact that they sell local/craft brews in their establishment. The idea of “local brews” is extremely popular in MI and has been expanding across the Midwest and the country as a whole. Merchants may have a steady inventory or it may change on a seasonal basis so they can make those adjustments as necessary.
Scope: This project took 7 weeks to complete. The table to the right provides the projeect schedule. User research was been removed from scope as it was considered to have been done prior to the strategy phase.
Deliverables:
Screen Flow
Screen wireframe
Finalized Wireframe (post design review)
Prototype Step 1 (Navigational functionality)
Prototype Step 2 (post design review)
Final Prototype Submission (post design review)
Weekly status updates (Sunday each week) in the form of an email.
Results: Through many peer design reviews, the project went through various iterations resulting in changes made addressing user needs vs. business needs and typogrpahy concerns. 7 iterations, 50 screens, and 1000 cups of coffee later.
Lessons Learned: Before this class, I had only created 1 clickable prototype — and it was literally during the first week of class at my day job in a different software than what I used for this project. Therefore, diving head first into a 7-week process of researching, designing, and prototyping a brand new application appeared "a tad" overwhelming. That being said, I feel like I learned a lot about analyzing content structure and how interactions and play into that.
Forcing myself to set strict project scope for this project was a challenge. As I was designing the interactions, I kept thinking of things I could expand upon. With the limited amount of time I had and without doing the proper user research, I drew a line in the sand and I would tackle interactions driven by a user's needs in a future iteration (if the project were to be extended or a real life scenario).
Peer feedback was my biggest asset. As I am used to working in a team, I relied on my classmates to look at the application through a different lens and provide feedback accordingly. My husband and I are both beer enthusiasts and would be a key user of this application, so I designed the app knowing what we do not like about other similar applications.
I expanded my knowledge of design software and learned Figma for this project. I exported designs from Sketch into the program and found that the Apple iOS library did not export well. I had to change some of the icons at the last minute.
Competitive Analysis
Untappd
This is the main competitor in this space and has the most followers. I really like the number of options it gives you to search and use to build your profile. That being said, it’s a tad overwhelming when you get to the main page after setting up an account. Prior to the main page it does give you a “highlight” onboarding that included icons that you would see throughout the app. This app is global and can be used in multiple countries. The create account workflow provided helper text that shifted above the input field when the user clicks to insert information. This is helpful because it reminds them what they are supposed to be entering if they become distracted in the middle of the process.
Brewery Passport
This is the second leading competitor on the market. I liked how I could view locations not only on a map, but in list view as well letting me know how many miles away a location was away from me at that time. There is not a user community feature in this app (personal achievements only). It is rather simple and doesn’t have many “extras.”
Barley
With the fewest amount of followers, I liked how this application categorized its beer. They had a section for “palate” that you could search based on specific types of flavors, and the inventory/menu section had a nice amount of information on the tile. If someone wanted more information they could click on the selection to get a full description of the beer. There is not a user community feature in this app. It is rather simple and doesn’t have many “extras.” It’s mostly about learning the beer and not where to find it.
Design process artifacts are displayed below. I started by documenting the workflow based on user actions. From there I created two versions of wireframes. Through several design reviews and iterations, I created a clickable prototype.
User Flow
Site Map
Identifying the navigational flow for the Local Brew site map began with additional competitor research to see how my ideas of hierarchal order compared with others. I identified what did and did not make sense and began making an outline of what order I felt was best. Once I had an idea of which pages were going to be included, I conducted an open-ended card sort with 3 of my close friends/family who were identified as potential users of the application (and who were familiar with its competitors). I placed each of the pages on a single sticky note.
The navigational flow begins on the left and progresses to the right. The navigation menu allows the user to navigate from page to page without having to go back to the homepage (annotated accordingly). The pages are identified in the site map with a red outline. Filters are in blue and any content or actions within a page are in green.
Wireframes
Iterations
Typography
“Although I am viewing and interacting with your prototype on a desktop computer, I found myself leaning towards my monitor to read some of the text. Perhaps explore defining a minimum that exceeds 12px for readability? I personally try to use 14-16 as a minimum for mobile since some users may have large font size enabled on their devices.”
— Edward G (classmate)
Content Hierarchy
"I would revisit the content hierarchy in the menu and homepage as you refine your prototype, putting the most important or frequently-used options at the top."
— Lindsey S (classmate)
User Needs vs. Business Needs
"Still struggling with the primary and secondary buttons for the Delete Account page. Perhaps it feels too close to an email list I can never unsubscribe from? Should the primary button to support the user’s goal in going to this page, or to support the business goal?"
— Emily Q (classmate)
Explore the Prototype
*Note: Not everything is clickable.
Tap anywhere on the screen to identify one of the blue "hot-spots"