BrewGene · Andrew Clemente

Overview

BrewGene helps people find their next beer. You rate the beers you’ve tried, and the more you rate, the better BrewGene’s recommendations get. In September 2015 BrewGene brought me in to design its first mobile app for iOS and Android, translating an established web service into something people would reach for at the bar.

From website to app

The website already had the core pieces: beer ratings, a Top 100, friends’ activity, and personalized recommendations. The job was to turn that into an app people would open at the bar. I organized it around a five-tab bar — Home, Search, Places, Cellar, and Friends — with rating always one tap away in the header.

Discover: Home leads with a Beer of the Day and the current Top 100 leader. Every beer gets its own page with its style, ABV and IBU, a star rating, tasting notes, and quick actions: “Having One Now,” add to watch list, recommend to a friend, find it nearby, and “people also like.”

Your beers: The Cellar keeps every beer you’ve rated, the Watch List holds the ones you want to try, and Recommendations turns your ratings into suggestions — the heart of what makes BrewGene different.

Three BrewGene screens — My Cellar with sortable rated beers, the Watch List with swipe to remove, and personalized Recommendations — My Cellar sorts your rated beers alphabetically, by rating, or by most recent; the Watch List supports swipe to remove; Recommendations turns ratings into suggestions.

Out in the world: Beer Buddies finds friends by username, email, or address book. Nearby Places lists bars and breweries around you, and each bar gets its own page with whether it’s open now, its beer menu, recent beers, and a quick way to call or visit.

Design and handoff

I designed the interface in Photoshop and Sketch, refining it across several rounds between September 2015 and early 2016. Every screen went to the BrewGene team as a fully layered artboard, with an exported asset kit — headers, backgrounds, tab bar and action icons at 1x, 2x, and 3x — ready for their team to carry into development.

Three BrewGene screens — Beer Buddies friend search, Nearby Places list, and a single bar listing with actions — Beer Buddies, Nearby Places, and a single bar listing with its open status, beer menu, and recent beers.

Three BrewGene screens — beer search results, the New Submission form for adding a beer, and the More Options menu — Beer Buddies, Nearby Places, and a single bar listing with its open status, beer menu, and recent beers.

Outcome

BrewGene kept me on as a contractor through 2021. The design work was finished in 2016, and they didn’t need more of it after that.