The Challenge

Craft Notes is is a community for Minnesota-based explorers and craft lovers. Offering Passports to visit local breweries and coffee shops. And receiving 2-for-1 discounts for craft beer, cocktail, or coffee lovers.

A good idea isn’t good if no one knows about it. Likewise, (and almost as important) is that a good idea is realized to its fullest potential. Craft Notes has a good idea…they offer two-for-one drinks at participating breweries, distilleries & coffee shops when users sign up for a monthly membership, You can also purchase a Craft Notes ‘Passport’ which gives you one free drink from around 20 different breweries, wineries and distilleries.

The owner explained that monthly memberships are low, awareness isn’t where it should be, and the user interface has some room to improve. And that’s where we come in.

The goal: how can we increase Craft Notes awareness? As UX’ers we focus on making the user experience enjoyable and intuitive. We want users to enjoy a curated experience with friends, and give the user more incentive to purchase a membership.

Deep Dive

To tackle this challenge, we needed to learn more about Craft Notes. So we explored the website, looking at how they fill their space, how they communicated their product, the images they used, advertising, and the articles. I particularly focused on navigation. Many of the images were related (in one way or another) to their passports. The homepage had passports…clicking on an image of a passport took you to a page of more passports. Clicking on that took you to an info page about passports. We saw an opportunity to improve the user experience.

But Craft Notes wants to provide a curated, high-end experience for the users out at a brewery or distillery, with friends. That means an app on a smartphone. And that is where we decided to focus.

Guiding Strategy

Now that we a pretty good idea about what Craft Notes was about, we needed to organize our thoughts and get on the same page in terms of a strategy. Should we focus on the website? On the App? A little of both? So we threw our thoughts and ideas onto a strategy guide. We discussed and tweaked as ideas came up. We came to the agreement that we would focus on the app since this is what users have with them when they are out with friends, and we saw opportunities for an improved curated experience and improved functionality.

Touchpoint Prototypes

With the app, user flow, and a curated experience in mind, I delved into the initial high-level question of how can we improve the user experience on the app. I started with some basic sketches…and I tried to keep the flow of the app in mind.

I focused on the Login Screen, Home page, Explore page, Discover page, Vendor comments/social page, and Navigation page.  Hand-drawn at first, and based on those, I opened up Sketch and designed some wireframes.

A progression of the prototypes I did, from hand sketches to wireframes…

From rough, hand-drawn ideas to relatable prototypes. Here are examples of the wireframes I designed in Sketch.

A Roadmap

With our app prototypes tweaked, we needed to step into the users shoes and follow their path from awareness, to delivery & use, to loyalty & advocacy, We formulated a Touchpoint Strategy Map, giving us a clearer picture of the users path through the app’s experience that we were proposing.

Presentation & designed prototypes

With the data we had gathered, we put everything together into a packet based on our individual findings and recommendations. We knew this was quite a lot of changes and recommendations for our client, therefore we broke it down into phases that they could implement using short-term, middle, and long-term roll-out strategies.

Here are examples of my high-fidelity design work for the mobile navigation…