Mobile App
Brew Guru Redesign
Role: Interaction Designer
Agency: Mondo Robot
Client: American Homebrewers Association
Year: 2019
Overview
In 2019, I worked with one engineer and one product manager to redesign and rebuild the existing mobile application, Brew Guru, using React Native. The approach let us use native components and patterns for both iOS and Android. Along the way, I made a ton of design updates based on user research, analytics, and best practices.
In 2023 the mobile app was retired after the majority of features were successfully added and integrated into the mobile-friendly American Homebrewers Association website.
Design Updates:
“Home” became “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.
2. “Articles” 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.
3. “Saved Items” was integrated into the “Deals and Recipes” section
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.
4. Enhanced “Recipes” section
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.
5. New location cards and icons on “Map” section
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.
6. New Filter UI
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.
7. Updated layout and design for the location detail page
The location detail was updated to better showcase the information you need. Icons were added to reduce cognitive overhead.
8. Updated color throughout the application
The app’s primary colors, orange and green, were updated to pass AA compliance for WCAG accessibility.
9. Typography was updated and standardized
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.
