Leikam Brewing
Designing a welcoming site for a friendly brewery.
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.
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.
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.
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.
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
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.
Based on my research, I felt the new website should primarily do two things:
- Provide essential information that is easily located; and
- 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.
Design
I decided to design the site mobile-first, with most information available on the home screen.
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.
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.
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:
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
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.
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