Crafting a unique user experience

Rating beer through an app shouldn't be boring. We paired AI technology and advanced user interactions to create a memorable user experience. Includes: branding, user flows, wireframes, user testing, and prototyping.

AleMate 🍻

Software used: Illustrator, Photoshop, Figma, ProtoPie

My role: Design direction, branding, user flows, UX design, prototyping

Project partner: Max Vecchitto

Problem: Beer lovers desire a robust rating app to track the beers they try and discover new brews. There is currently no robust rating system that goes beyond a simple 1-5 scale in a single category.

Solution: Create a comprehensive beer rating system that creates a custom beer profile for the user to match them to new beers and create a profile library for favorite beers.

About: Alemate is a valuable tool in any beer drinkers’ app arsenal. Use this app to identify beers that match your personal preferences, create custom beer profiles, and find the beers you like at the closest available location.

Along with being able to find the right beer that matches your specific tastes, it’s fun and easy to use while having a robust rating system to make sure the beer you’re picking is going to be the right one for you.

Show off your prowess next time you’re at a brewery with Alemate’s patented color identifier, which allows you to use your phone's camera to match the beer’s color with our database of beers. See if your mate’s beer matches your flavor profile to find out if it’s the right sud for you!

Research

Competition-
Untappd is a multifunctional app that allows users to rate beers on a scale of 1-5, and write personal descriptions for their taste notes.
It allows users to find breweries, direct message other users, and show the breweries you’ve checked in at.
What separates Alemate is that the beer rating is much more quantifiable than a simple 1-5 of how much the user enjoys the beer.
Overall, the app is convoluted and difficult to use.

Target Audience -
Beer drinkers under the age of 65. For beer enthusiasts and picky sippers.
People that are willing to try new things, but know their preferences and what they normally like to drink.
As the beer market continues to grow with an ever-expanding range of flavors and styles, so do user’s preferences for the beers that they like. Beer drinkers deserve to know if the beers that they buy will be one that they will  enjoy!

Market -
Untapped has 9 million users. We believe there is a significant market share of users of the app that would use only Alemate over Untapped, or a hybrid use of both.


Logo sketches

Final logo and branding

The brand style guide put together for Alemate.

User Persona

User persona created to help understand the target audience of Alemate.

Wireframes

Initial wireframes used to organize the UI of the app.

User Studies

When walking the users through the wireframes we realized we were creating a stale and non-user friendly product. The rating system was indeed comprehensive (win), but at the cost of engaging the user in a fun way (lose).

We decided to work through user flows to decide what are the key functions and features of the product, while brainstorming ways to make the usability more engaging.

User flows

User flow for rating a beer.
User flow for profile matching.

UX Features

Our UX design shifted from a simple rating app, to an engaging rating system.

Intuitive: The user would begin by taking an image of the beer glass or the can/bottle. Our AI system would recognize the can or bottle and match it with that beers profile, saving the user from having to manually enter in the beer information (brewery, IBU, ABV, etc).

AI Features: If the camera recognized a beer glass, the user could swipe left or right to match the glass filter with the glass shape. Our advanced AI technology would analyze the beer color and make a guess on the beer itself based on the color, beer profile and geographic location.

Engaging: Next, a user would be taken to our rating page. An empty beer glass would appear with rating categories above the glass (aroma, flavor, taste, etc). The user would then "fill" the glass by sliding a bar to give that category a rating of 1-5. Then, they would swipe over to the next category, filling the glass again.

Comprehensive: Once the user has rated all the necessary categories, our system will create a rate card profile for that beer. The rate card includes the average score of the beer (averaging all the rated categories together) and breaks down the individual rating categories. The card will also tell you what your profile match % is based on your beer profile and the nearest location of where you can purchase the beer.

A breakdown of the UX screens and function

Easy and frictionless: The steps to rate your favorite Ale is easy! First, take a picture of your Ale scanning the glass or QR code on the can. Then, fill the glass to rate for your desired categories. You can also add custom hashtags for organization. Alemate will take the average of each rating to give a total rating. Finally, save to your ratings!
Organized and accessible: Visit the home page where you can view your highest rated Ales (Top Shelf Mates), explore beer categories, and discover recommended beers. Recommended Ales are based on your flavor profile developed by your ratings of beers. The more beers you rate, the more your beer profile develops and better matches you with new Ales.
Customized to the user: On your profile page you can customize the categories on your rate page, set your preferences for intake, and add details to your beer profile for added matching capabilities.

Prototyping

Prototyping of the glass filling to rate each category. Prototype created using Protopie.
AI technology using photo scanning to match the beer color to a specific Ale, saving the user from having to manually type in or search for a specific beer.

Usability testing

We conducted usability testing of our prototype to look for user pain points and areas of improvement.

Pain point 1: Through usability testing we recognized the sliding bar on the right side of the screen was not in a convenient location for most users (who are holding their phone in one hand and most likely a beer in the other).

Pain point 2: The sliding scale is not intuitive enough for the user. We needed to enlarge the thumb icon and add a brief animation showing the liquid filling to make the user more aware.

Revised prototype rating screens

Revised the user experience of filling the glass with an easier process.

User task studies - 100% success rate of users rating the categories correctly.

‍

Rework of the rating and filling system for rating Ales.

Final UX Screens

Alemate launch and marketing

Thank you for reading!

Other projects: 

A. Steele Creative 2021