Leikam Brewing

Designing a welcoming site for a friendly brewery.

TL;DR

Over the course of 80 hours I redesigned a responsive website for a local taproom. Based on interviews I conducted with a number of potential customers I aimed to improve the look and feel of the existing website as well as the information hierarchy. I conducted usability testing with a handful of other potential customers for insight into where my design did and did not hit the mark. This key feedback helped me improve upon and iterate my designs.

View mobile or desktop prototype.

introduction

Leikam Brewing is a local brewery and taproom in Portland, Oregon, crafting kosher vegan beers since 2014. They opened their taproom in 2019, unfortunately just in time for the pandemic, but they remain open today. I spoke with the owner of Leikam who told me their business goals are to make good beer and be a sustainable business, but also to build community. They currently support the community by hosting events and donating a share of their profits to local non-profit organizations. 

“To have a welcoming community space and to bring people together.”  
- SL, Owner

Leikam Brewing has a website that is adequate, but it doesn’t project the kind of warmth their company and taproom present in person.

Mockup of existing Leikam Website
The cool color palette of their current website belies the warmth and friendliness of Leikam Brewing.

Importantly, it does a poor job of promoting upcoming events, as they simply embed their Instagram feed into the site. They do this because it's an easy way to post new information without needing to know how to update their website, but a user only sees the image they posted; details are only accessible by clicking through to Instagram.

screenshot of Instagram feed from Leikam website
Only two of these thumbnails even provide information.
Research

Other local taproom websites are sleek, with a dark palette and limited colors. They clearly display location and hours, and some sites provide details about their beers. These sites usually promote events in a clear way, but many just embed their Instagram feed, like Leikam does. They use professional photographs of their venues and beers, though I noticed they rarely show people enjoying them.

screenshots from area taprooms
Screenshots from local taprooms Steeplejack, Von Ebert and Ruse

In order to better understand a typical Leikam customer (or potential customer) I interviewed 5 people who fit the demographic: middle-aged, community-minded middle-class Portlanders, many of whom have children. I conducted these interviews over Zoom, even though they were local, because of Covid.

The people I spoke with reported that they would go to a taproom to attend an event, to be with friends and family, and for good food and beer, and they want to feel welcome and safe. They said the things they would look for on a taproom or cafe website were:

  • Location/Hours
  • Interesting events
  • If it's family friendly
  • Menu/taplist
  • Covid safety: masking and proof of vaccination and has year-round outdoor seating

Key Finding:
Because Covid was still in full swing when I conducted these interviews, most of the people surveyed weren’t even going anywhere at the time, but they generally said they would be more likely to support a business if they know it supports good causes.

“I am a values based consumer…if I see value-aligned stuff it makes me more likely to want to throw money at them.”  
- KG

I dropped in one day to do a site visit and spoke to the bartender, who described Leikam as a “warm, friendly neighborhood spot” but noted that the current website doesn’t portray that well. One of the people I interviewed had been there many times and she agreed, saying:

“It's got this, like, homey atmosphere and it's nice to just hang out and let the kids play games.”  
- KW
Define

I tried to imagine the steps a potential customer might take, as well as the pain points they might encounter, with a customer journey map. This customer, for example, can’t tell from the existing website whether or not they can bring their kids to an event at Leikam. 

customer journey map
(click to enlarge)

Based on my research, I felt the new website should primarily do two things: 

  1. Provide essential information that is easily located; and
  2. Demonstrate that Leikam brewing is a welcoming, community-minded place.

That Leikam Brewing welcomes families and children sets it apart from other local taprooms. Leikam also distinguishes itself from other venues by hosting community events and by contributing money to social causes. These are important things for their target audience and should feature prominently on their website. 

At the time I was working on this project Covid was in full swing and the state mask mandate was still in effect. Leikam Brewing took the extra steps of requiring patrons and staff to be vaccinated (not a citywide requirement), and providing covered outdoor seating in this famously rainy part of the country. Add the fact that Leikam beers are vegan and kosher, and you can get a feel for the audacious hospitality that Leikam strives to provide, that they care about their customers and take steps to consider their safety and comfort to truly make them feel welcome.

I drew a site map to help organize and plan the website.

site map
Design

Design

I decided to design the site mobile-first, with most information available on the home screen.

early wireframe sketches
Preliminary sketch
mid-fidelity wireframes
Mid-fidelity wireframe

I thought potential customers might want to know which non-profits were benefited by which beers, so I imagined an overlay could open when a user tapped a specific beer on the taplist.

beer/non-profit overlay
Color palette inspired by beer images

I chose warm colors for this site inspired by different types of beer and a friendly typeface called Corben for the headers. I used the sans serif font Noto Sans for body text, as it is easy to read and has a tall x-height. I didn’t need to design a logo because Leikam already had one. 

Most importantly, for a hero image I used a stock photo (since I didn’t have access to professional photos from the venue) of people drinking beer and having fun together. More than anything this image would later be indicated by testers as going a long way to make Leikam Brewing seem welcoming and fun.

stock photo for hero image
The right stock photo speaks at least a thousand words.
animated GIF of mobile Leikam homepage design
animated GIF of menu and food and drink info from mobile prototype
Working prototype in action
Test

I conducted usability testing with my mobile prototype remotely, because Covid numbers were still high in our area, and I had users screen share their view of the prototype. I didn’t know until later that it’s not a good idea to test a mobile prototype on a desktop. Again I tested middle-aged community-minded people, most of whom are parents. 

In terms of simple navigation and content, users were able to find most of the information I’d hoped they would:

What is this business? 5/5

Where is it and when is it open? 5/5

Are kids allowed? 4/5

What kinds of beer do they have? 5/5

Do they have outdoor seating? 0/5

Clearly this design needed to do a better job of indicating there is outdoor seating, but even within the positive results I could see room for improvement. It took users longer to find some information:

graph indicating response time for test participants to locate information on prototype
Data, visualized

Qualitative questions showed that users believed Leikam Brewing would be welcoming, family-friendly and unpretentious. They mostly thought they would go there even during the pandemic, because they required masks and proof of vaccination. They were less influenced by the fact that the beers were kosher (even though coincidentally all five testers were Jewish) and only somewhat likely to choose a beer based on which non-profit the proceeds would support.

 

“I feel like I’d fit in.”  
- TA

After testing these 5 users I took a little time to make improvements to the prototype design, based on what I had learned. On the home screen I 

  • Simplified the logo to reduce visual clutter 
  • Simplified the hero text
  • Improved the visibility of the important Covid information by including a mask illustration and placing it higher on the homescreen
  • Subtly reduced the contrast on the hero image to improve readability without decreasing the fun and hectic feel of the photo
before and after hero design

 

before and after homepage text

I changed the first header to specify upfront that Leikam is family-friendly and added a photo gallery to showcase the venue, featuring the outdoor dining space. This is especially important because the people I interviewed were extremely Covid-cautious and would only go somewhere if they knew they could eat and drink outdoors.

I also redesigned the beer cards to feature the non-profit for each beer, since the users I tested generally didn’t click for more information, or even realize that was an option.

before and after beer card design
Conclusion/Next Steps

If I had a do-over on this project, I would do these things differently: 

  • Test mobile design on a mobile device, even if it meant using only local testers
  • Screen for beer drinkers in empathy testing
  • Ask users “which beer would you choose and why” instead of asking whether they thought knowing which non-profit benefited would help them choose
  • Follow up with the business owner midway to get their feedback before progressing further

This was the first project I’d designed mobile-first, and I now understand why designers take that approach. It was so much easier to scale up than down, and it forced me to consider what was truly necessary to include in my wireframes.

Mostly I enjoyed the visual design aspect of this project, especially once I found a stock photo for the hero image that captured the friendly feeling I wanted the website to reflect. Leikam Brewing is a special place and we want people to know that.

View mobile prototype or desktop

Work together?

I'd love to hear from you! Send me a message & I'll be in touch soon.