top of page

THE BEER TRaveler

THE BRIEF

Beer drinkers want to browse for various beers to taste.

Develop an app to satisfy their needs.

Time frame: One week.

​

Team: Three designers and four developers.

 

I was directly responsible for:

​

  • user journey

  • user stories

  • initial sketches

  • home screen

  • mock ups

 

The Beer Traveler project had a rapid one week turn-around and involved delivering design specifications to developers. We used Sketch, Photoshop and Balsamiq to generate our deliverables.  

RESEARCH

The team conducted a small survey at the We Work office space in downtown Austin. We also conducted several interviews across breweries. We discovered a frustration in locating suggested beers, and discovering new beers to drink. The research we conducted provided input on what functions an app should provide and what users would find most useful. 

COMPETITION

The team took a look at Untappd for feature possibilities and things to improve on. Our analysis found that Untappd is easy to navigate and error recovery is simple but, errors are easy to make. It falls short in regards to discoverability as the iconography is confusing and not easily recognized. Important descriptive information such as IBU and ABV are not easily seen, and the color contrast in the main banner was too low. This information aided our style guide creation. 

SKETCHES 

Using our research we began to sketch quickly and placed our white boarding into the POP (Prototyping on Paper) app for rapid for testing. ​Using feedback we iterated to improve flow. We mind mapped 'beer' to help drive a name for the application, eventually settling on Beer Traveler.

​

USER FLOW

In tandem with rapid prototyping, our team generated user flows to get an idea of what it would be like moving through the application to achieve a goal. We corrected some of the original POP flow problems and made sure to add error handling for bad search returns.

WIREFRAMES

Pulling all our information together, we worked in Balsamiq to produce higher fidelity interactive wireframes. These were delivered to the development team as an architectural outline with core features to aid their development process. We discovered through daily stand-ups that our app's initial search bar couldn't be implemented by the engineers. The search parameter carousel on the app startup screen was our team compromise. 

STYLE GUIDE AND MOCK-UP

In order to communicate our aesthetic and design standards clearly to the development team, we created a style guide. Our colors were derived from the home screen illustration. Our font styles of Economica and Raleway were chosen to improve legibility. We also provided the developers a higher fidelity mock-up (above right) of a single page. 

HOME SCREEN

Beer, lets just admit it, its a staycation you drink. If that's true, then the app we made is a staycation trip advisor. That's an A train to boring-ville. 

​

Corona flips the script on this in a big way: beer is a beach. I decided to follow suit and add some 'get away' to the app. I developed a home screen with travel posters in mind.

FINAL PRODUCT

We successfully produced the first version of our application. The team was very proud of the group effort and our final product. You can search for beer based on several categories including the type of beer, your location, the alcohol content to name a few. You're also able to save beer into tasted and tried lists.

WE LEARNED

  • Good communication with your development team is essential 

  • Make sure you have error messaging accounted for in your sketch phase. 

NEXT STEPS

Things to consider for future iterations: 

  • Expand search within saved and tried

  • Refine the look - animated elements like bubbles, interface improvements.

  • Correct the cognitive overload on the search carousel.

  • Gamification - create a user notation system and badge reward system for beers tried.

  • UBER and LYFT direct link

bottom of page