Brew Guru

Roles: Lead UX Designer, Lead UI Designer

Project Overview

A redesign/rebuild of American Homebrewers Association mobile application, Brew Guru. The new build was done with React Native which allowed us to use native components and patterns for both iOS and Android. In addition to redesigning the app, I made a large amount of design changes based on user research and best practices. Below, you’ll find embedded prototypes for both iOS and Android as well as details outlining many of the design updates.

Prototypes

iOS

Android

Design Updates

The navigation was redesigned to align with the native patterns of Android and iOS devices. Additionally, a few sections of the information architecture were altered to provide a better experience for the users.

Home becomes Deals

As you can see in the image below, a new new section called Deals replaced the entire Home section. User research revealed that the Home section was a bit overwhelming, but users did love the ability to see local deals as well as the quick access to their membership card (which they use to get deals). Analytics also showed that the Deals feature in the Home section was the highest accessed feature. I recommended simplifying this section, focusing on deals, while still accounting for all the features that existed on the previous Home section. Which leads me into the topic of Articles.

Articles is added to the navigation

Articles is another section that was added to the navigation. The Articles feature previously lived below Deals in the Home section. Analytics showed very little user interaction on the Articles feature, but the users that did navigate there had high rates of repeat engagement. Elevating the visibility of this feature allows them to better track the analytics and evaluate how valuable Articles is to the users.

Saved Items is integrated into Deals and Recipes

Saved Items was dropped from the navigation and integrated into each relevant section (Deals and Recipes) using familiar, native controls to help provide a more intuitive user experience. See the image below that shows where users can access saved Recipes.

Recipe categories have more detail

The Recipes section also received a design update. Meta information was added beneath each beer category, allowing users to see how many styles and recipes are available for that category at a quick glance. Check out the prototype at the top of the page to explore the recipes section.

New map location cards and icons

The location card on the the map was redesigned and utilized for both Deals and Locations. Now only one card is used and it clearly shows the location type (via the icons), location name, distance, and the member deal (when applicable). This component is reused in the list view of the Maps section and in the Deals section. The location icons were also enlarged and simplified. The color for location icons that don’t have member deals are shown as grey, but in the same shape - allowing color to be the main visual indicator as to whether the location has a deal or not.

Map Filter

The map filter was updated with native components and now showcases Locations Types as a legend of the map icons, reinforcing the connection between the Location Types and their symbols.

Location Detail

The location detail was updated to better showcase the information you need. Icons were added to reduce cognitive overhead.

Updated Color

The app’s primary colors, orange and green, were updated to pass AA compliance for WCAG accessibility.

Typography

I simplified the typography styles, reducing 20+ styles down to 11. Then I aligned the style names with the iOS and Android style guidelines which made them easier to implement using React Native.