case study
Optimism Brewing Company
Website Redesign
Role
Project Manager, Client Liaison, & Creative Director
Although a lot of the duties were shared between the group, my primary role was to manage the project, attend to the client, appease group disputes, and help steer the creative direction. Two of the team members were interested in growing in their design skills, so I stepped back and provided creative reviews, sharing my 6 years (at the time) of visual design expertise and helping build out their ideas. This ended up being a great chance to grow as a leader.
Although a lot of the duties were shared between the group, my primary role was to manage the project, attend to the client, appease group disputes, and help steer the creative direction. Two of the team members were interested in growing in their design skills, so I stepped back and provided creative reviews, sharing my 6 years (at the time) of visual design expertise and helping build out their ideas. This ended up being a great chance to grow as a leader.
Context
Optimism Brewing Company is a brewery located in Seattle, Washington. For this project, I worked directly with the client alongside a randomly assigned group of four other students: Joyce Chang, Vanessa Chien Lai, Rodrigo Tarriba, and Tabby Safari. We completely redesigned their website during a 10 week user-centered web design course as a part of my Master’s degree requirements.The site has since been implemented with changes made by the client after handoff.
.png)
Overview
Background
Optimism Brewing Company, located in Capitol Hill, is a brewery known for in-house beers, ample industrial seating, and a rotating selection of food trucks. They prides themselves on their impact efforts and doing good for the community.
Problem
Their website had inconsistent and inaccessible visual styling, a large amount of extraneous information, unclear information hierarchy, and various usability issues. The client wanted a website that was more comparable to their competitors, leaned more into their social impact efforts, and was easier for visitors to use.
How might we redesign Optimism Brewing Company's website to be more accessible to customers and comparable to their competitors?
How might we redesign Optimism Brewing Company's website to be more accessible to customers and comparable to their competitors?
.png)
Website Before Redesign
Project Goals
Improve market differentiation by increasing visibility of social impact efforts.
Improve customer experience by aligning the website with the brand in a way that is visually consistent and accessible.
Improve customer experience by reducing information overload. Create clear information hierarchy and remove excess copy.
Drive website sales by increasing visibility of to-go cans and decreasing the amount of clicks it takes to purchase items.
Skip to Final SolutionImprove customer experience by aligning the website with the brand in a way that is visually consistent and accessible.
Improve customer experience by reducing information overload. Create clear information hierarchy and remove excess copy.
Drive website sales by increasing visibility of to-go cans and decreasing the amount of clicks it takes to purchase items.
The Process
Stakeholder Interview
We met with their Marketing Director and held a Stakeholder interview. She said they just didn’t have time as a team to put much effort into the website and that one of their biggest hurdles was that their site wasn’t showing any of their social impact efforts. After the interview, we shared a Client Questionnaire with them to cover any of the questions we didn’t get to in the interview, and it was shared with the co-owners of Optimism.
Research Overview
After the stakeholder interview, we dove into the first phase of research. I set up channels of communication, a regular meeting time, and a shared drive. I helped divide up each of the tasks between the team members and myself, set deadlines for all of us, and we all got to work.
This first phase of research included:
Stakeholder Interview (mentioned above)
Client Questionnaire (mentioned above)
Customer Survey (85 Participants)
Onsite Customer Interviews (4 Participants)
Heuristic Evaluation of Desktop Site
Mobile Site Usability Testing (5 Participants)
Competitor Analysis (6 Competitors)
We completed all of this in one week! I kept everyone on deadline and personally created and sent out the Customer Survey and Client Questionnaire. The survey had several sections to help us determine who the Optimism customer was, what they were using the website for, and how their experience with it had been so far.
This first phase of research included:
Stakeholder Interview (mentioned above)
Client Questionnaire (mentioned above)
Customer Survey (85 Participants)
Onsite Customer Interviews (4 Participants)
Heuristic Evaluation of Desktop Site
Mobile Site Usability Testing (5 Participants)
Competitor Analysis (6 Competitors)
We completed all of this in one week! I kept everyone on deadline and personally created and sent out the Customer Survey and Client Questionnaire. The survey had several sections to help us determine who the Optimism customer was, what they were using the website for, and how their experience with it had been so far.
Information Architecture
After we synthesized our findings from the first round of research, we conducted a open card sort study. We had 13 participants engage with Optimal Sort to organize pages and aspects of the Optimism website into groups.
I took the lead on synthesizing the results from Optimal and creating a first draft of the new Information Architecture. The group then helped refine.
We conducted tree testing with 8 participants to verify our new Information Architecture.
I took the lead on synthesizing the results from Optimal and creating a first draft of the new Information Architecture. The group then helped refine.
We conducted tree testing with 8 participants to verify our new Information Architecture.
Card Sort Findings (Move Contact Us and FAQs to Who We Are)
A Learning Point
(& Usability Testing)
After we had finished the information architecture, it was time to build the first iteration of our redesign. I had asked one of our designers to do a mid-fidelity prototype (no images, no color, no brand fonts) of just the home page so that we talk about it as a group and then usability test our Information Architecture and experience.
The designer was very excited and ended up doing a high-fidelity prototype of many of the main pages (images, colors, fonts, everything). I learned here that when working with a designer I haven't worked with before, I should make sure that it is very clear what needs to be done and why to make sure we are on the same page.
As a leader, I don’t want to be a micro-manager and I want to give people the chance to learn and grow. There will always be miscommunications, but I would love to minimize them. I was very clear about the assignment, but I think I failed to explain the implications of going so high-fidelity early on. We ended up having to usability test with a higher-fidelity prototype because of the tight timeline, and got a lot of feedback on the visuals instead of the information architecture and experience, which is what we needed.
The designer was very excited and ended up doing a high-fidelity prototype of many of the main pages (images, colors, fonts, everything). I learned here that when working with a designer I haven't worked with before, I should make sure that it is very clear what needs to be done and why to make sure we are on the same page.
As a leader, I don’t want to be a micro-manager and I want to give people the chance to learn and grow. There will always be miscommunications, but I would love to minimize them. I was very clear about the assignment, but I think I failed to explain the implications of going so high-fidelity early on. We ended up having to usability test with a higher-fidelity prototype because of the tight timeline, and got a lot of feedback on the visuals instead of the information architecture and experience, which is what we needed.
Conflict Management
After this happened, there was a lot of tension in the group. Several people were upset that they didn’t get to contribute to the design and I had to have a difficult conversation with the designer that there are steps we needed to take as a group BEFORE the high-fidelity version. We needed to agree on a style guide (fonts, colors, type, type hierarchy, etc) and more before starting this level of design. Because it was lacking many of those planning aspects, we had to do a lot of rework as a team on the design.
I met with each of the members to see how they were feeling and what they needed to move forward, and then we all talked as a group about what the next steps should be based on those conversations.
I met with each of the members to see how they were feeling and what they needed to move forward, and then we all talked as a group about what the next steps should be based on those conversations.
Moving Forward
We were able to move forward as a group by agreeing on conducting the usability study with what we had and on how to rework the design. We implemented our usability study findings and created our high-fidelity prototype.
.png)
Some of the Usability Testing Findings
(Change Who We Are to About, Mission & Impact to Social impact, and Our Process to Our Brewing Process)
(Change Who We Are to About, Mission & Impact to Social impact, and Our Process to Our Brewing Process)
Client Approval
We pitched our high-fidelity prototype to the client and they loved it! They gave us a few pieces of feedback we implemented.
After their approval, we implemented the design in to Squarespace with custom CSS. We handed off the final Squarespace design to the client, and they have since launched it with changes.
After their approval, we implemented the design in to Squarespace with custom CSS. We handed off the final Squarespace design to the client, and they have since launched it with changes.
The Solution
My Impact
While I had input and took part in every step of this end-to-end process, my biggest impact was in driving the project forward (on-time), keeping everything organized, steering creative direction, and tending to the client.
Because of the level of organization (and drive of my team), we were able to present a high-fidelity prototype AND a responsive Squarespace design, fully backed by research, in 10 weeks. Other teams presented 5 pages.
Because of the level of organization (and drive of my team), we were able to present a high-fidelity prototype AND a responsive Squarespace design, fully backed by research, in 10 weeks. Other teams presented 5 pages.
Before and After, Home Page
First Impressions Matter
To improve brand recognition, we aligned the overall look and feel of the website with the brand personality.
To improve customer experience and understanding, we made use of white space to reduce information overload. We also conducted a content audit and reduced the amount of information shared overall.
To improve customer experience, we provided “quick links” to the highest traffic pages. We identified which pages these were via customer survey and usability testing.
To improve customer experience and understanding, we made use of white space to reduce information overload. We also conducted a content audit and reduced the amount of information shared overall.
To improve customer experience, we provided “quick links” to the highest traffic pages. We identified which pages these were via customer survey and usability testing.
Before and After, Tap List
Easy to Scan Menu
To decrease the amount of time it takes to select a beer and improve customer experience, we increased the "scannability" of beers. We did this by showing all beers with smaller images and prioritized information. The information shared was deemed most important by participants during usability testing. We allowed user to learn more at their discretion by clicking into a detail page.
To drive sales, we highlighted limited-time releases. This encourages users to order one of the beers because they could be gone the next time they visit.
To drive sales, we highlighted limited-time releases. This encourages users to order one of the beers because they could be gone the next time they visit.
Before and After, Events
Easy to Understand Events
To decrease customer questions about events, we consolidated event types, minimizing confusion. We sorted the available event types by party size to make it easier to understand which to book.
To decrease cognitive overload, we put extraneous details about specific event types on their own pages. This allows users to learn more at their discretion, rather than being presented with every piece of information up front.
To decrease cognitive overload, we put extraneous details about specific event types on their own pages. This allows users to learn more at their discretion, rather than being presented with every piece of information up front.
New Cans Page
Emphasizing Can Sales
To drive sales of the new To-Go Cans, we created a new page just for the cans. This increases visibility and awareness of the new product, while promoting online sales.
To drive sales of the new To-Go Cans, we reduced the number of clicks it takes to purchase a can. Previously, it took many clicks to and searching to find the can on their ordering tool. Now, the link is directly below the can. One click to purchase.
To drive sales of the new To-Go Cans, we reduced the number of clicks it takes to purchase a can. Previously, it took many clicks to and searching to find the can on their ordering tool. Now, the link is directly below the can. One click to purchase.
Takeaways
Results
Since we handed this design off to the client and our point of contact left her position, we did not have access to improved metrics. However, the Marketing Director and Owner gave us feedback that the website was exactly what they imagined for their brand, was well-researched, and addressed so many accessibility issues they didn’t know about.
Reflection
Although there was some miscommunications and group tensions during this project, it taught me a lot about managing a group of people who have different working styles, amounts of experience, and collaboration skills. I learned how to be specific in giving assignments, with not just the specifications, but WHY it’s important. I also learned in some cases, it might be helpful to go over the design process beforehand, to make sure there is mutual understanding among the group.
I decided to write this case study honestly, because in real work settings there will be times when there are miscommunications and tensions. It’s important as a leader to be able to understand how to address them and move forward as a team. And, we ended up delivering a site that the client LOVED. Our fellow classmates delivered a few pages in Figma, we delivered an entire high-fidelity prototype AND a full Squarespace website that matched it, backed by extensive research, all in 10 weeks. Plus, I learned management skills I can use in the future!
I decided to write this case study honestly, because in real work settings there will be times when there are miscommunications and tensions. It’s important as a leader to be able to understand how to address them and move forward as a team. And, we ended up delivering a site that the client LOVED. Our fellow classmates delivered a few pages in Figma, we delivered an entire high-fidelity prototype AND a full Squarespace website that matched it, backed by extensive research, all in 10 weeks. Plus, I learned management skills I can use in the future!
