Mobile App

Brew Guru Redesign

Role: Interaction Designer
Agency: Mondo Robot
Client: American Homebrewers Association
Year: 2019

Project overview

In 2019, I partnered closely with our client, a product manager and a single engineer to redesign and rebuild the Brew Guru mobile app using React Native. This approach allowed us to leverage native components and platform-specific patterns while supporting both iOS and Android from a shared codebase.

Throughout the project, I iterated on the design based on user research, analytics, and mobile best practices, making continuous improvements to usability and performance.

In 2023, the mobile app was officially retired after its core features were successfully integrated into the mobile-friendly American Homebrewers Association website. At the time of retirement, Brew Guru maintained an average rating of 4.0 out of 5 across 5,760 user ratings.

Prioritizing the member deals

Based on user research and analytics, we replaced the existing Home section with a new, focused Deals experience. Research showed that while users found the Home screen overwhelming, they consistently valued two things: access to local deals and quick access to their membership card, which they used to redeem those offers.

Analytics reinforced this insight, revealing that Deals was already the most frequently used feature within the Home section. This shift created a clearer, more purposeful entry point to the app and set the stage for how supporting content, including Articles, would be organized moving forward.

Improving article discoverability

Previously, the Articles feature lived below Deals within the Home section and saw relatively low overall engagement. However, analytics revealed that the users who did discover and use Articles returned to it frequently, indicating strong value for a smaller but engaged audience.

By increasing the visibility of Articles, we created a clearer opportunity to better understand its impact, track engagement more effectively, and evaluate its long-term value to users. This change allowed us to test whether broader exposure could translate into sustained adoption while preserving what existing users already found compelling.

Embedding saved items into core sections

The Saved Items feature was removed from the primary navigation and instead integrated directly into the sections where it was most relevant, including Deals and Recipes. This approach reduced navigation complexity while keeping saved content easily accessible within the user’s natural workflow.

We used familiar, native controls to make saving and retrieving content feel intuitive and consistent with platform expectations. The example below highlights how users can access their saved Recipes directly within the Recipes experience.

Optimizing recipes for exploration

The Recipes section was redesigned to improve clarity and discoverability. We added helpful meta information beneath each beer category, allowing users to quickly see how many styles and recipes were available before diving deeper. This added context made it easier for users to browse and decide where to explore next.

Creating a more intuitive map experience

The map location card was redesigned into a single, reusable component used across both Deals and Locations. The updated card clearly communicates key information at a glance, including location type through iconography, location name, distance, and any available member deal.

This component is reused consistently across the map and list views, as well as within the Deals experience, helping create a more cohesive system. Location icons were also enlarged and simplified to improve scannability. Locations without member deals use the same icon shape in a neutral gray, allowing color to serve as the primary visual indicator of deal availability while maintaining visual consistency.

Clarifying location detail pages

The location detail page was redesigned to better highlight the information users need most. Supporting iconography was added to improve visual hierarchy, reduce cognitive load, and make key details easier to scan at a glance.

Updating colors for usability and compliance

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

Improving typographic consistency

The typography system was simplified by reducing more than twenty text styles down to a focused set of eleven style. This consolidation improved consistency across the interface while making the system easier to maintain and scale.

Style names were aligned with iOS and Android platform guidelines, creating a shared language between design and engineering. This alignment streamlined implementation in React Native and reduced friction during handoff, making the typography system easier to build, reuse, and evolve over time.