For a brief summary of this article, check out my Design Critique presentation.
Mainstreamers rejoice! Craft beer is no longer an industry to be appreciated only by the hipsters of your city, force feeding “Think Local” stickers down the throats of the mildly social conscious consumers. In fact, in an economy with almost-monopolies in nearly every new sector (Airbnb, Amazon, Google, etc.), craft beer is changing the game for the beer industry.
And with these changes has come the rise of Untappd (yes, the spelling bothers me too). For those unfamiliar, Untappd is a mobile app that allows you to socially share what beers you’re drinking, and where you’re drinking them, with your friends and your local craft beer community. You can even earn badges for exploring beers of different styles, locations, and countries. If you’re a brew fanatic, this app is a one-stop shop for everything you might want to know about craft beers. If you’re a brewmaster, Untappd is your Yelp. Verify your brewery, join Untappd for Business, and get access to valuable data, resources, and in-app promotions. This app gets it.
Since the app’s release in 2014, Untappd has garnered a fair bit of attention from the app community, placing at 150 on the Inc. 5000, landing on Time’s 50 Best Apps of 2016 list, and even getting a nice little nod on Medium. But what is all the hype about? With a 4.8/5 rating in the app store, over 7 million downloads, and $8 million in revenue in 2017 alone, Untappd has grown 2800% (you read that right) in just 3 years, becoming a huge resource for both craft brewers and drinkers alike. Let’s not forget that while craft beer aficionado numbers are still small relative to the Bud Light drinkers of the world, small and independently owned craft breweries account for 98 percent of all U.S. operating breweries.
Even the competition for Untappd is fairly limited. A few similar offerings exist, but none with particularly outstanding design and usability or marketing opportunities. The ones that come closest are BeerMenus and BeerAdvocate.
BeerMenus and Untappd are nearly identical in that they showcase the same information in slightly different ways and both have very limited design. BeerAdvocate is a more organized search engine for beer reviews, which would be a concerning competitor, however the company appears to focus its efforts solely as a website resource, offering no app for users.
So with limited competitors and a knack for monetizing the social nature of craft beer, Untappd has taken the lead as a valuable resource for the craft beer community. That being said… if we’re being honest, Untappd is a butterface of an app. Despite having all the information you could ever want to know about beer, breweries, events, and what your friends think about it, Untappd is not pretty, intuitive, or particularly easy to use. I’d argue that Untappd’s business strategy has maybe leaned a little too heavily into their first-mover advantage, unfortunately allowing the app’s design to fall by the wayside.
Now, let’s dive in.
The first screen you land on whenever you open the app is the ‘Explore’ tab. It’s a logical first choice, because you can pretty much do almost anything you’d need to do from this page. Search, explore trends, check barcodes, view recommendations, the craft beer world is your craft oyster. But instead of feeling helped or welcome, the user almost immediately feels overwhelmed. This screen is flat, it’s use of iOS default fonts makes it feel generic, and you get the impression that it’s trying to be everything to everyone. So how can we fix this?
Without looking at user data, it’s hard to know what to cut from this page and what to keep. So, I kept it all, choosing to focus on smaller changes that can make an impact without dramatically altering what the user sees. First, I created an abstract background image and laid the sections on top of it, with the intention of allowing the background to move dynamically as you scroll. This concept is hard to demonstrate through a static mockup, but the idea with this is to elevate the information on the page. A great example of this execution would be the Chase Mobile app, although it uses a stock photo rather than a completely abstract image for the background.
The only other changes I made had to do with the typography on the page. Untappd uses Proxima Nova on their website, and had that been a free font, I would have loved to apply it to this project as it would have maintained better brand consistency. That being said, it’s not free. So I went with good ol’ Open Sans instead. It’s a flexible and easy to read font, but adds a little extra style to the screen, making it feel less like a generic prototype and more like the real deal. You’ll notice that I also changed the link colors to match the yellow on the rest of the screen, because if Untappd is really going to go with that color scheme then we might as well go all the way.
Although I only show these changes to one screen of the app, I believe that they are straightforward and impactful enough to be applied consistently across the rest of the app, enhancing the user experience, without making any cuts to content or information.
Now if there was one thing about this app that I really wished I could change, it would be the “check-in” page. For an app centered around social sharing, it sure is overwhelming to make a post about a beer. While all the information it asks for is relevant to what users want to share, the way this screen is laid out is asking a lot from people who have potentially already gotten a little buzz on.
My personal problem, is that darn ‘Add Photo’ button. Without fail, I always forget to add a picture to my check-in, because I’m always so flustered about filling out the rest of the screen, and the image reminder is soo easy to overlook in its current position. Even more frustrating, it’s a known fact in marketing that posts with photos have insanely higher engagement rates than text-only posts. I know, I know, “Melissa this isn’t Instagram. I just wanna post my beer and drink it.” BUT if we’re holding true to the social emphasis on this app, pictures ARE important, and I believe there’s a way to find a balance.
Two steps?? What is this nonsense? Maybe it’s crazy, but my theory is that by dividing up the process, you can grab the user’s focus with a simple first step, like taking a straightforward, square picture through a built-in camera, which will in turn boost their confidence enough to add whatever other information they choose without overwhelming them by asking for it all at once. Plus, you’ll notice they always have the option to opt-out of the photo, go back to retake it, or cancel altogether.
The second step is a simplified version of that original screen. I’ve improved the color coordination and selection indicators of the tags to make it easier to see your choices. I’ve also removed the “Purchase Location” section, because having an additional “Location” section is confusing for the user and somewhat redundant.
You might also notice I’ve added a couple things at the top of the check-in screen. Now you can actually remember what style this new beer is, which is definitely an important factor when you’re evaluating new brews. On the second screen, I’ve also added a small thumbnail of the picture you might have just taken, serving as a nice little reminder that your photo hasn’t disappeared since the last step.
So that’s that. While there is SO much you can do with this app in terms of design, I believe this simple approach could make a big impact on improving the user experience while biding time for a complete redesign or overhaul. That’s just my two cents at least. And if you’ve made it all the way through this post then cheers!