SUMMARY
The Booth Brewing Co. is a brewery that started in Seoul, Korea, but now brew in Eureka, CA. The Booth Brewing is one of the major leaders within the craft beer industry in S. Korea and the brewery is shifting goals to penetrate the U.S. market. I got hired to redesign their current website. I focused to create a platform that delivers quick and easy access to information which contributes to the overall digital experience.
MY ROLE
Over 10 months at a scrappy, startup brewery, I’ve had the opportunity to grow with an entrepreneurial mindset and juggle multiple roles. Here is a list of my main responsibilities:
UX Researcher and UX/UI Designer - interviews, personas, site map, prototype, user-testing and implement design
Digital Marketing Specialist- content creation, ads, engagement, Instagram Influencers and campaigns
Coordinate events- beer festivals, other community events, and design marketing material
Build Public Relations- press release and media release
Manage merchandise-inventory, shipping, multi-channel selling, and customer service
PROBLEMS
The brewery moved to California in 2017 and created a website soon after but never promoted it and remained unfinished. The major issues include:
Lack beer list page
Difficult to navigate and locate distribution points on their beer map page with embedded excel sheet
Unorganized content makes navigation difficult
SOLUTION
Create Beer List: Find the latest release, discover the right beer for your tastebuds, and check out the reviews for each brew.
Update Beer Map: Enter zip code to find the nearest store with The Booth beers in stock and filter by the specific brew users’ are looking for.
Structure Content: Re-organize content according to the specific subject and structure the content in a way that users can easily skim and access information.
TARGET AUDIENCE
Based on 15 user interviews, website inquires and interactions with users at beer festivals, I was able to understand the needs of the target audiences.
COMPETITIVE ANALYSIS
MoSCoW
To give an overview of the competitive space, I selected 4 breweries out of those mentioned by interviewees. This revealed which areas were key for improving our product. I combined competitor features with features suggested by interviewees. I used the MoSCow approach to decide which features are essential and possible to implement.
Site Map
User Flow
I visualized how users would accomplish various tasks within the website through my user flow. I then created a site map, experimenting with different taxonomies and page placements with the 3-click rule and Hick’s law in mind.
WIREFRAMES & USER TESTING
To be able to share my mockups with my team more efficiently, I used Balsamiq to sketch initial concepts. Regular check-in with the sales and production team challenged me to iterate on my design and add additional screens.
In my initial design, I created a filter for each type of beers in the beer map so the users can find their favorite beer from The Booth. However, the sales team stated that it would be difficult to keep track of the inventory of each store. Since The Booth has limited time and resources.
After reiterating with users, I found that users wanted to find reviews of each product. So we integrated Untappd which is similar review/rating app like Yelp, but for beer.
FINAL HI-FI PROTOTYPES
BEER LIST
One of my main focuses was to design a beer list page and filtered them based on current availability, year-round, EurekaSeoul (special brewery) series, limited edition and an archive of all the brews. I prioritized the filters based on available brews to brews that are no longer available.
After clicking on the selected beer, there’s a description of the beer along with the tasting note icons and beer reviews on Untappd. In addition, I added icons that indicate the available sizes (can or kegs) for the bar/restaurant/bottle shop owners. The brewery sells kegs that are smaller than the common half barrels, so it was crucial to indicate the keg size.
For the mobile design- I had 3 options for the filtering function. For option 1, I added the search function so users will have multiple ways of finding a specific brew, but the team thought it was unnecessary since the brewery only had 11 beers total but only 6 are currently available.
Users felt that option 2 felt easier to scroll since the filter was on the bottom of the screen. They didn't readjust their thumbs without to click on the top portion of the screen.
“WHERE CAN I FIND YOUR BEER?”
This is the most common question consumers ask at beer festivals or other events. Instead of searching the closest city from the excel tab, users can enter their zip code and filter the stores with a specific mile radius.
priorized ux hierarchy
Based on the user interviews, I organized content in a way that users would easily find everything they need without big efforts and eliminated the sidebar tab.
Added “Events Form” for non-profit organizations to request donations for their upcoming beer festival.
7 out of 10 users took more than 3 clicks to find the beer map. In order to resolve this issue, I decided to add the store locator in carousel of the landing page.
NEXT STEPS
We planned to design a mobile web app since the company plans to expand, but unfortunately our team closed operations.
KEY LEARNING POINTS
Follow F-shape pattern: to create a design with good visual hierarchy, a design that people can scan easily. F-shaped layout feels comfortable for the most western readers, because they have been reading top to bottom, left to right for their entire lives.
Understand the value of team work: working together with sales team and production team helped me understand different perspectives and provided a space for collaboration.
Be Customer Obsessed : communicating directly with customers and business owners led to understanding user pain points and worked continuously to enhance their experience online and at outreach events.
Learn Entrepreneurship: learning to be flexible when unexpected problems arise and being able to juggle multiple roles to help the business grow with limited team members.