Designing a craft beer journey

This was originally published on Medium.


Designing a craft beer journey

Encapsulating the work in progress and done to redesign Commonwealth Craft, a craft beer blog exploring microbreweries in New England.

Current Commonwealth Craft design

Redesign goals

User goals are to find the best craft beers in New England. Find great breweries to visit. Become part of a community of people with an interest in craft beer. Find out where a good drinking event will be and when.

Company goals are to go to every single brewery in New England, and to take everyone along for the ride. So grab a pint and raise it high. Wherever you drink and whatever you drink, know that you are not alone. You are part of Commonwealth Craft, and this is Commonwealth, we share.

Usability goals are to improve discoverability, aesthetic and minimalist design, efficiency of use, to provide informative feedback, be consistent between the system design and the real world, to meet the organizations’ goals, and to minimize user errors.

Personas

The project started by getting familiar with the site and their users. To get a better understanding of the particular users, I asked the Commonwealth Craft team to fill out a survey working towards proto-personas beyond the stereotypical beer drinker.

Bob —28 years old. BU graduate. Living in the Porter square. I enjoy drinking with my old college friends, if not more than the taste of the beer itself. I visit CC to read about some of the latest happenings in craft beer in MA, whether that is the newest nano-brewery that opened down the street, to the newest brew offered by a wide-known craft brewer, to the latest trends in beer styles (what’s up with those sour beers, anyway?).

Callie — 25 years old. Bob’s girlfriend. BU graduate. Living in Davis square. I’m looking to learn more about microbreweries and what this craft beer craze is all about from somewhere that’s readable and fun—approachable, funny, and informative. Bob tol me about CC and it seems to fit the bill. I’m most interested in organizing long weekend trips with Bob that will be fun for both of us.

Dave — 35 years old. Married and living in Lowell. Umass graduate. Homebrews on the weekends because craft beer is my escape after work hours. Looking to get an inside look at some of the breweries in the area and the latest trends in brewing so that I can optimize my time visiting nearby breweries and knowing what to expect when they get there, and more time enjoying the bierkultur and brews.

Content Strategy

The best animation and style example of a beer blog

First thing was to reevaluate the information architecture. To get a better sense of what was currently successful for beer blogs, I did some competitive analysis and found four sites of interest: good beer hunting, embrace the funk, beervana, and craftbeer.com. After a usability test and several card sorting exercises with persona fitting users, the following site map was agreed upon. Also of note, the users suggested that CC post their amazing photos to Instagram for mass consumption. Another media option is videos of the beer tastings for a richer user experience. Lastly, the event hosted by CC is buried under the top menu. Events hosted by CC, should the first thing on the home page for most exposure. The new menu has more descriptive titles because users misunderstood “Events” to be events organized by CC instead of a digest and “Breweries” to be a list of breweries in the area, not those that have been visited already.

Given the new information architecture, it is time to drill into the site design and templates that will support task success for our personas. Bob wants to know about upcoming events for his next college buddies get together. Callie wants to get a better understanding of the craft beer craze and a nearby brewery worth visiting with Bob. Dave is interested in the latest microbrewery trends.

New homepage IA

To support the task of nearby breweries worth a visit for Dave, prime real estate on the home page is dedicated to that information. For newbies like Callie, the about page is prominently listed in the menu and should detail the mission and a link or brief introduction to craft beer. The new design takes user feedback into account and promotes the upcoming event by CC clearly, supporting Bob’s goal for a get together with his college buddies.

Blog list for breweries visited and tastings

For a more scannable list of posts and to emphasize the beautiful images, a tile-based list of posts is recommended. This design is further supported by the fact that users did not read any of the excerpts from the original listing page.

First draft of blog post template

Again, we want to emphasize the beautiful photos, but the content page needs more detailed work to be considered in the visual design. A consistent template for “favorite brew” and location will help with readability and a consistent reader experience.

Visual Design

The work in progress prototype can be found here. The type ramp was defined with the help of typecast. The mockup was built on moqups.