BeerRun Case Study
Four beer enthusiasts developed BeerRun to provide consumers with easy access to their favorite beers right at home. The app features well-known and local craft beers. My responsibilities included designing a promo page, managing project deadlines, taking product photos, and color grading photos.
Year: 2020
Duration: 2 months
Tools Used: Adobe XD
Process Overview
- User Personas
- UX/UI Analysis
- Wireframes
- Color
- Typography
- Prototype
- Sitemap
- User Flows
User Personas
Each of us created user personas as part of our UX research. These user personas allowed us to better understand our consumers' needs in order to design our app accordingly.
UI Analysis
In this chart, we analyze the user experience of alcohol delivery apps. We examined the same four apps that we had examined in the previous analysis. Onboarding (allowing users to join the app when they open it for the first time) provides the highest quality of user experience. Among the other features users enjoy is the ability to browse through the app’s alcohol selection and shopping cart (which lets them see the item they have added) and the ability to contact customer service.
UX Analysis
In this chart, we examined four different apps to see which user interface features were common. We conducted a competitive analysis of Drizly, Saucey, Swill, and Minibar. Our team analyzed their color scheme, shape, font, logo type, and the graphic space used over the course of their apps. Our research found that red and blue were the most commonly used colors, as well as the shapes used are rounded rather than angular. The majority of alcohol delivery apps used a sans-serif font and a logo with a word mark. Further, most apps used centered space instead of a horizontal space.
Color & Typography
Sitemap
Here is an overview of BeerRun, starting with the landing page. Users can create accounts or log in. The user can choose to browse the beer selection in four different ways: by country, by brand, by style (for example, IPAs, stouts, and ales). The user can then view the promotions, which include 2 coupons: 20% off their first purchase when they create a BeerRun account, and 50% off the first beer they purchase with the promotional code. After selecting items, users can view their cart and checkout. From the home page, they can go to the about page to learn more about BeerRun and why they should choose our delivery services. They can also access the settings page from the home page. They can edit their account, view recent orders, and add favorites. Additionally, they can check out and update their profile, and upload a profile picture.
User Flow: New User
This is an overview of the user’s journey through BeerRun. First, they create an account. Next, they are taken to the homepage and able to explore BeerRun features. In this user flow, the user first browses through featured beers, then taps the “see all” to see all items. After exploring through the beers, the new user adds an item to their cart and checkout.
User Flow: Returning User
In this user flow, we show how BeerRun might be used by a returning user. The user is directed to the home page when logging in. Users can access their favorites by going to their account. When they are ready to check out, they add their favorite beer to their cart.
Wireframes
The following screens illustrate different stages of the onboarding process. Upon landing on the first screen, the user is greeted with the logomark.
The second screen is the registration page, which allows users to create an account. If they already have an account, they can tap the "Login" button.
The third screen is displayed after the user taps on “Login” where they can sign in to their account.
The following screens show the different features of BeerRun. The first screen shows the overall settings for the user (language, password, edit profile, recent orders, favorites, or view legal information from BeerRun).
The second screen displays the user's recent orders. When the user clicks on "view order details", they can get a closer look at their order.
The third screen displays the user's favorite drinks. Additionally, users can tap "Browse Beers" to easily navigate and explore.
The fourth screen displays the user's profile. The user can change either their language, password, profile picture, or billing information on this page. They can also log out from here.
The following screens illustrate the different pages of browsing. The first page is the homepage for browsing, which displays promotions, featured beers, and the beers by country.
The second screen allows the user to browse by top brands like Budweiser or even local brands like Garage Brewing Co.
The third screen lets users browse by countries, such as Mexico or Belgium.
The fourth screen is BeerRun's homepage. The promotions will be displayed here, and users can browse by popular categories such as style, country, and brand.
The following screens show a continuation of browsing through BeerRun. The first screen shows images and names of BeerRun's featured beers.
In the second screen, BeerRun's top brands are shown in images and names.
The third screen shows images and names of the top countries listed by BeerRun.
The following screens display BeerRun's promotions. The first screen displays all the promotions.
The second screen will contain details about the promotion.
The following screens illustrate the checkout process and the about page of BeerRun. The first screen shows a preview of the product. A quantity selection option is available. Users can read a description of the product.
The second screen shows the user's cart. The user will see this if the cart icon is tapped or if the cart is reached after adding an item.
The third screen appears after the user checks out. There will also be a promotional banner on this page.
The fourth screen provides information about BeerRun. You can find information about BeerRun's about me page here, as well as information about customer satisfaction.
High Fidelity Wireframes
The following screens illustrate how the onboarding process works. We changed the landing page to display an image and our logomark.
In the second screen, we made the container for the profile image into a bottlecap. In addition, we decided to display the image both in the registration and login screens.
The third screen shows the login screen. The login screen was designed similarly to the low fidelity wireframes, but we also added an image to complement the logomark. In addition, we fixed the visual hierarchy of some of the text, such as "Already have an account? Log in.".
We didn't stray too far from the wireframe layouts in these screens. The sections were kept in the same format. The font sizes were adjusted to create a better visual hierarchy. As there was no way to reorder an item while viewing previous orders, we added a reorder button in order to eliminate the need for users to search for previously ordered items. We added a plus icon to the favorites page so the user can easily add items to their cart.
In general, our team tried to make the UI design consistent with the wireframes. We ensured that the UI was easy to use and readable.