My Role: UX Architect (plus UI)
Other Team Members: Zoe Sinner (UX/UI), Tiffany Yang (UX/UI), Dushan Tharmal (Business Analyst).
BeerMapper, by Savvo, is an iPad app which plots over 20,000 beers on a data map based on beer attributes. Its primary function is to allow users rate their favourite beers and to receive recommendations back on similar beers which they might enjoy.
The app had been launched in Beta form in Canada however Savvo were aware that users neither intuitively understood the primary objective of BeerMapper, nor did they enjoy the user experience of the app. We were challenged to develop a sensible user flow, a suitable onboarding process and more intuitive screens (/processes) within the app. All changes recommended by our team were to be implementable in a one-week timespan by their development team.
It was clear very early on that the beer discovery app space was already quite saturated with a large number of apps of varying quality. Another issue was the initial high price of the BeerMapper app (which at this time was live in the Canadian market for $3.99) compared with its competition.
Clicking through the application we identified many problems with the Version 1 screens, from expectation issues, usability and flow complications.
Users confirmed our initial suspicions that the map was a confusing way to present information, that there was a lack of feedback within the app and that the name & branding led to differing expectations of the apps purpose.
To address those concerns we began sketching and drawing up marker comps of the potential user flows, high level screen designs and potential micro-interactions.
After our initial ideation sessions the team identified our core goal, namely to drive users to discover new beers. In Omnigraffle, I mapped out the new application workflows, which highlights that identified goal (in this case driving users to ‘Beer Profile’ pages.
Once we understood the redesigned flow we began working on wireframing the site. Above is a redesigned Beer Profile page which I wireframed in Illustrator. In the final draft of the app the ‘Similar Beer’ carousel was later replace by a link at the client’s request.
We created a Keynote prototype to solidify our ideation process, explain new concepts to the client and to use in Cognitive Walkthrough testing (see below). Due to time constraints we developed this in keynote using the screens created in Adobe Illustrator.
TestWe conducted a Cognitive Walkthrough of the redesigned app prototype with the team’s Creative Director to identify any outstanding usability issues or nonsensical process flows/ interactions / iconography.
While our scope was quite limited, we made pretty drastic changes to the user flows within the app, beginning with requesting the user flick through a carousel to rate some beers and give the app some data points for which to draw recommendations from.
Onboarding is now improved with a new tutorial which is now a step by step process allowing the user to interact with the app elements. We also drew the focus of the user to the ‘Beer Me’ button which gives a list of recommended beers (the primary reason for buying and downloading the app) – this is a major change as previously this was a hidden link within a different module.
Our final designs took the information card out of the ‘beer space’ and created a full length card on the right of the screen. We removed several data points which added to user confusion and used the additional real estate to explain the key, retained, data points. The above screen I both wireframed and designed.
The client loved our deliverables and put in place a two-phase implementation plan. The first revision of the app, BeerMapper 2.0, went on sale in the US/Canada market over the Christmas break as scheduled and is currently available for download here.