Optimizing Optimism's User Experience: Case Study Cover Photo displaying mock-ups of redesigned desktop screens

Optimism Brewing company

Optimizing the website user experience for a local brewery

Project overview

Optimism Brewing Company is a family-owned brewery best known for their diverse selection of craft beers and expansive industrial interior. As one of 77 breweries (and counting) residing in Seattle’s booming craft beer scene, Optimism needed a website refresh to set themselves apart from existing competitors and reestablish their brand’s digital presence.

Over the course of 10 weeks, my team executed various user research methods to build empathy with our client and target users, restructured the website’s information architecture to align with target users’ mental models, completed 3 rounds of iterative design and evaluation, and handed off a fully redesigned website that anticipated users’ needs, satisfied business goals, and exceeded our client’s expectations.

Jump to Design Solution Overview

My role: UX designer

Every step of this project was a collaborative effort among all 5 members of our team. While I made hands-on contributions to each phase of the user-centered design process, I led the UX Design and Strategy work by translating research findings, user needs, and business goals into actionable design requirements and bringing our ideas to life through mid- and high-fidelity Figma prototypes.

Project Team (5)

Joyce Chang (UX Researcher)
Vanessa Chien Lai (UI Designer)
Jess Hord (Project Manager)
Tabby Safari (UX Designer)
Rodrigo Tarriba (Usability Specialist)

Project Type

Website redesign

Project Duration

10 weeks

Final deliverables

High-fidelity Figma prototype
Redesigned SquareSpace site

My Primary contributions

Design system
Rapid iterative prototyping
Visual identity design
Design requirements
Content strategy

Information architecture
Copywriting
Heuristic evaluation
Stakeholder interview
Survey design

Problem space

Below is a high-level overview of the top 3 problem areas our client asked us to address through our redesign.

Missing the mission

Optimism is a mission-driven organization that prides itself on using beer as a means to give back to the local community.

However, hardly any information detailing the what, why, and how behind their brand mission and extensive philanthropic work was being communicated through the website.

As a result, the website failed to paint a full picture of who Optimism is and what the company stands for.

Usability & accessibility issues

Broken links, unintuitive information architecture, dense blocks of superfluous copy, low color contrast ratios, and a lack of visual consistency across the site hindered users’ ability to find and discover useful information and Optimism’s ability to create a strong first impression with prospective customers.

Conversion rate (un)optimized

An absence of product spotlights and calls-to-action (CTAs) across the website demonstrated that our client was missing out on opportunities to drive sales for their canned beer products, merchandise, and event space offerings.

As a result, our client was consistently falling short of monthly ecommerce sales and event booking goals.

Final Design highlights

Our solution

Our primary goal for this project was to deliver a website that caters more intentionally to user needs while helping Optimism better communicate who they are and what they stand for as a brand and mission-driven organization. Below is an overview of the top 5 highlights from our final deliverable.

HomePage

Making a strong first impression

The design anticipates user needs, goals, & questions by providing quick links and CTAs to the highest traffic pages.

Showcasing guest-friendly policies and social impact metrics helps increase user awareness of Optimism’s core values.

Displaying canned beers and event space offerings enhances visibility as a means of driving sales.

Social media links and a newsletter sign-up field serve as touch points to boost brand engagement.

Reproducing the full site map in the footer improves site navigability and SEO.

Streamlining the tap list

Providing options at a glance

Breaking the tap list into categories and cutting content down to the essentials significantly reduced information overload by communicating the highest priority beer details at a glance.
Seasonal brews are displayed at the top of the page to create a sense of urgency that gently nudges users toward visiting the brewery while supplies last.

Tap List

Giving users the option to learn more

By relocating lower priority beer details from the tap list to new Product Detail Pages (PDPs), we allow users to learn more about a particular beer at their own discretion.
For beers available in To-Go cans, we included a CTA that redirects users to the corresponding To-Go Can PDP on Optimism’s external ecommerce website to increase visibility and sales potential.

Beer PDP (New)

Final high fidelity mockup of new product details page

Social Impact (NEW)

final high-fidelity mock-up of new Social Impact Page

Building trust through transparency

Our new Social Impact page communicates the why and how behind Optimism's core values and philanthropic initiatives to help drive awareness and build brand affinity.
Displaying year-to-date donation metrics helps build legitimacy into social impact claims by inviting users to hold Optimism accountable.

Providing new purchase pathways

We created a brand new page to showcase Optimism's To-Go Cans and increase sales potential by providing new purchase pathways directly from the main website.

To-GO Cans (NEW)

final high-fidelity mock-up of new To-Go Cans page

Optimizing event bookings

Book Event Space

Consolidating to clarify

Early usability testing revealed that users were confused by the difference between our client’s 4 event space packages, resulting in choice paralysis.
We consolidated event packages down to 3 options, then clearly differentiated them with head counts and succinct descriptions to help direct users toward the type of event that best fits their needs.

Special Events (New)

Final high-fidelity mock-up of new Special Events page

Providing answers up front

We created a new page to provide users with details around accommodations and pricing for each Special Event package.
The side-by-side comparison visualization clearly outlines the main differences between each special event space and allows users to compare options in a less cognitively-taxing way.  
The addition of photo galleries and corresponding FAQs allowed us to provide answers to common questions up front, thereby reducing the need for correspondence with Optimism’s Events Coordinator.

Design approach & Execution

Designed with intention

Every aspect of our design solution was thoughtfully and meticulously considered with user needs and business goals in mind. The design is simple and straightforward, striving to inform and intrigue without overwhelming users or sacrificing character. Content is broken up into clear, easily-digestible chunks to minimize cognitive load and direct users’ attention to key information.

The interplay of bright colors, wavy section dividers, rounded corners, and playful headings establishes a brand image reflective of Optimism’s quirky, spirited brand personality while ample white space between UI elements echoes the open, airy design of the brewery’s interior environment, unifying the digital and the physical to create a cohesive brand experience.

Demo Our Final Prototype in Figma

Final prototype screens

Final Design: Dog-timism Photo Gallery page

Final high-Fidelity Mock-Up: Special Event Types

High-fidelity Mockup: Our Brewing Process page

Final Design: hours, location, and parking page

High-Fidelity Mock Up: Guest-Friendly Policies page

How we got there...

Our process

To inform our design decisions, our team followed a user-centered design methodology—an iterative, data-driven process that prioritizes user needs through each phase of the design thinking process.

skip to design explorations

Research

Stakeholder interview
Customer survey
Customer interview
Heuristic evaluation
Usability testing
Competitor analysis

Define

User needs
Target users
Design requirements

Ideate

Feature ideation
Information architecture

Design & Evaluation

Mid-fidelity design & evaluation
High-fidelity design & evaluation
Design system

Click the links above to jump to the corresponding section

Uncovering opportunities

Research

Our team applied 6 different research methods to explore the landscape of user needs, business requirements, and brand narrative that would ultimately inform our design decisions and redesign strategy.

Our fixed 10-week timeline meant that we only had 1 week to strategize, recruit participants, execute each method, analyze our results, and document our findings.

Jump To

Stakeholder interview

Research — Part 1 of 6

Stakeholder interview

To kick off the project, I led a stakeholder interview with Optimism’s Marketing Director—our primary point of contact over the course of our project—which helped our team align on the business objectives, brand goals, technical constraints, and overall scope of our project from the outset.

Business Objectives

Increase To-Go Cans sales.
Increase event bookings.
Increase Sunday-Thursday foot traffic and brewery revenue.

Brand Goals

Increase user awareness of Optimism’s social impact efforts, brand values, and equitable business practices.

Brand Values

Giving back to the community.
Supporting local nonprofits and social justice initiatives.

Website Concerns

Difficult and time-consuming to update.
Broken food truck links.
Too many emails from customers asking for event package details.

Primary Users

Existing Customers
Prospective Customers
Event Planners
Nonprofit Event Organizers

Technical Constraints

Client does not have a dedicated web developer, so the final deliverable needs to stay in SquareSpace and be easy to update and maintain.

Research — Part 2 of 6

Customer survey

I collaborated with our Project Manager to design a Customer Experience and Demographics Survey to help our team understand who our target users are and how they interact with the website.

Top User Tasks (N=85)

Top User Tasks Chart: when asked to indicate their goals for visiting the optimism website, 85 survey respondents answered as follows: 68% check the tap list , 61% check the food truck schedule, 58% look up hours of operation, 35% read more about the company, 28% buy products or merchandise, 28% check the events calendar.

Research — Part 3 of 6

Customer interviews

I drafted questions for semi-structured interviews conducted with 4 customers at the brewery to gain insight into their:

Motivations for visiting the brewery
Awareness of Optimism’s social impact efforts
Perception of Optimism relative to other breweries
Impressions of the website

Why customers visit the brewery

Customers come to Optimism for the wide beer selection, food trucks, spacious seating area, and dog-friendly environment.
2/4 customers noted that the likelihood of visiting Optimism is impacted by the availability of food trucks.

Social Impact Awareness

3/4 customers were aware that Optimism does some kind of social impact work in the local community, but no one knew the specifics.

What Sets Optimism Apart

4/4 customers noted the size of the brewery as Optimism’s foremost distinguishing factor.

Observations from Website Exploration

Unintuitive information architecture prevents users from finding and discovering useful information.

Research — Part 4 of 6

Heuristic evaluation

I performed a site-wide heuristic evaluation by judging content for compliance against Nielsen’s 10 Usability Heuristics. This method served as a quick yet comprehensive way to identify usability and accessibility issues throughout the website and ultimately revealed where user pain points were likely occurring.

Heuristic Violations (N=118)

Consistency & standards (n=47)
Aesthetic & minimalist design (n=32)
Recognition rather than recall (n=16)
Flexibility & efficiency of use (n=10)
Match between system & real world (n=4)
Visibility of system status (n=4)
Error prevention (n=1)

Violation Severity

Accessibility Violations

Low color contrast ratios
Inaccessible text contained within PNGs
Interactive elements missing focus states
Body font size smaller than 18pt
Missing OR misclassified H1s, H2s, etc.
Missing ARIA attribute labels
Missing alt text for images

Research — Part 5 of 6

Usability testing

We conducted moderated usability testing with 5 Optimism customers who had never been on the website to assess how well users were able to find relevant information related to the top tasks we identified through our customer survey.

Animated gif of user scrolling down optimism's old Tap List page.

The Endless Scroll Takes a Heavy Toll

When tasked with finding a beer they’d like to try, 5/5 users expressed frustration toward the long list of details on the Tap List.

When asked to share which details they took into consideration when determining whether a particular beer appealed to them, users noted beer image, tasting notes, style name, and ABV% to be their primary deciding factors.

Screenshots of Optimism's old mobile navigation menu

Mismatch Between Mental Models & Menu Options

Because the existing information architecture did not align with users’ mental models, participants had a hard time associating the actions they wanted to take with the terms used for navigation items.

For example, 4/5 users attempted to find gift cards under the “Order” menu on their first attempt when it was actually located under the “Visit” menu.

Animated screen recording of user encountering broken link when clicking on a link in the Food Truck Schedule.

Bounce Rates Fueled by Broken Links

When clicking on the food truck name in the calendar pop-up, 5/5 users encountered a broken link, which resulted in 3 users leaving the website by google searching the food truck name in order to find more information.

Post-task feedback revealed that users expected to find a description of the food truck and/or links to the food truck’s Instagram or website in place of the error message.

Original mobile screens: unclear event descriptions

Low Clarity Yields Low Confidence

When tasked with reserving space for a 50-person office party, users were confused by the difference between Special Events and Private Mezzanine Events with regard to accommodations, food options, and exact pricing, leading to choice paralysis. Post-task feedback revealed:

3/5 users would have contacted Optimism prior to submitting an event inquiry in order to clarify the aforementioned details.
4/5 users wanted to see more photos of the event spaces.

The Endless Scroll Takes a Heavy Toll

5/5 users expressed frustration toward the long list of details on the Tap List. Users wanted a streamlined Tap List that allowed them to quickly scan through their options.

When asked to share which details they took into consideration when determining whether a particular beer appealed to them, users noted beer image, tasting notes, style name, and ABV% to be their primary decision factors.

Mismatch between mental models and menu options

Because the existing information architecture did not align with users’ mental models, participants had a hard time associating the actions they wanted to take with the terms used for navigation items.

For example, 4/5 users attempted to find Gift Cards under the “Order” menu on their first attempt when it was actually located under the “Visit” menu.

Bounce Rates fueled by broken links

When clicking on the food truck name in the calendar pop-up, 5/5 users encountered a broken link.

Post-task feedback revealed that users expected to find a description of the food truck and/or a link to the food truck’s Instagram or website when clicking the food truck link.

Screenshots of Optimism's Special Events description and Private Mezzanine Events description

Low Clarity Yields Low Confidence

3/5 users would have contacted Optimism prior to submitting an event inquiry in order to clarify the aforementioned details.
4/5 users wanted to see more photos of the event spaces.

Research — Part 6 of 6

Competitor analysis

We evaluated Optimism’s strengths, weaknesses, opportunities, and threats (SWOT) relative to their top 10 competitors in order to identify potential gaps in service and uncover where opportunities might exist to create a competitive advantage through our redesign.

Strengths

Optimism represents everything the local craft beer drinker wants: Independent and family-owned; focus on small-batch artisan beers; creativity and variety in beer selection.
Unmatched size and seating capacity: more than 2X the seating capacity of the runner-up brewery.
Strong core business values: extensive philanthropic efforts; high levels of corporate responsibility; high employee satisfaction.
Location in Capitol Hill: within Seattle’s most densely populated neighborhood; near major public transit stops, university campus, and several apartments.

Weaknesses

Use of non-traditional beer style names does not appeal the Beer Enthusiast segment.
Using SquareSpace as CMS and web host prevents integration with Optimism’s separately hosted ecommerce website.
Website tap list selection doesn't always accurately reflect what's on tap at the brewery.

Opportunities

Using descriptive terms and tasting notes in place of traditional beer style names is unique to Optimism, giving them favorable appeal among casual/novice beer drinkers who are uninterested in the technicalities and driven by taste, novelty, and experience.
Optimism hosts several in-house events throughout the year in order to stay connected with their customer base, showcase new beers, and draw in new customers.

Threats

Young brewery competing with established players who have been in the game for well over a decade.
In a highly competitive and saturated market with threats of new and existing competitors looming constantly.
Seattle breweries are considered some of the best in the country: intense pressure to live up to high expectations.

Defining user needs & Design Goals

Define

Taking a multifaceted, mixed-methods approach to our research provided our team with rich data that allowed us to clearly define who our target users are, how they interact with the website, and how we might address their needs and pain points through our redesign.

User needs

Target users

Design requirements

Define — Part 1 of 3

User needs

We used affinity mapping to synthesize our research findings, identify unique user pain points, and map them onto needs that we could satisfy through our redesign. Below are the 5 most pervasive pain points we discovered.

User pain point

Unintuitive information architecture prevents users from finding and discovering useful information.

User need

Intuitive navigation: Restructure information architecture to align with target users’ primary goals and mental models.

User pain point

Superfluous beer details on the tap list contribute to information overload and decision fatigue.

User need

Scannable tap list: Prioritize essential details and primary decision factors. Relocate additional details to individual product detail pages.

User pain point

Encountering broken links when looking for food truck information.

User need

Meet users where they are: Provide users with food truck web/social links to eliminate the need for external search.

User pain point

Users are confused by the difference between Optimism's 4 event space packages, resulting in choice paralysis.

User need

Clear & distinct event options: Consolidate both events under a single Special Events category then rename them as “Main Floor Events” and “Mezzanine Events”, respectively, to add clarity.

User pain point

The absence of event pricing and accommodations details creates unnecessary friction for users interested in hosting an event the brewery.

User need

Provide answers up front: Include event pricing and accommodations details on the website to reduce the need for verbal and written correspondence with the Optimism team prior to submitting an event inquiry.

Define — Part 2 of 3

Target users

Our user research revealed 4 target user groups:

Existing customers
Prospective customers

Corporate event planners
Nonprofit event planners

User task matrix

How do userS interact with the website?

After creating a User Task Matrix to visualize the frequency and importance of various tasks carried out by each group, we noticed significant overlap in the prioritization of tasks carried out by Existing and Prospective Customers (16/24) and those carried out by Corporate Event Planners and Nonprofit Event Organizers (16/24).

This observation prompted us to take a closer look at each target user group's primary goals.

H=High frequency task; M=Medium frequency task; L=Low frequency task; N/A=Unlikely to engage in task.

Switching the focus from tasks to goals

Why do userS interact with the website?

Focusing on user goals showed us that there was not only overlap in HOW each user group interacts with the website. There was also a great degree of similarity behind WHY they interact with the website. This realization led us to narrow our target user groups down to Customers and Event Planners.

User personas

Who are we Ultimately designing for?

Customer Persona

Ezra Explorer embodies the psychographic characteristics, needs, goals, and behaviors of existing and prospective Optimism customers whose primary goal for visiting the website is to look for information to help them decide if and when to visit the brewery.

Event Planner Persona

Paige Planner embodies the psychographic characteristics, needs, goals, and behaviors of corporate event planners and nonprofit event organizers whose primary goal for visiting the website is to book event space and host an event at the brewery.

Define — Part 3 of 3

Design requirements

To help guide our UX strategy and solutions, I translated our user research findings into actionable design requirements divided into 3 categories: Usability goals, Brand goals, and Business goals.

Usability goals

Designing for what users want to DO

With our personas in mind, I formulated 3 Usability Goals centered around delivering an ideal experience that anticipated and intentionally catered to users’ needs, goals, and questions.

Be Efficient

The design is stripped back and streamlined in a way that highlights core functions, features, and information while avoiding superfluous content and excess ornamentation.

Be Intutive

Our solution provides users with the information they need when they need it and where they expect to find it.

Be INCLUSIVE

Accessibility is baked into the design foundation to ensure that all users of all abilities can easily access and navigate the website.

Brand goals

Designing for what users want to feel

The minimalist aesthetic that characterized the brewery’s interior was lost on the visually-cluttered design of our client's website. To minimize the disconnect between Optimism's physical and digital presence, we needed to treat the website as an extension of the brewery by focusing our visual design direction and content strategy on crafting a cohesive brand experience.

Be Consistent

Our solution both embodies and extends Optimism’s quirky, spirited brand personality through the aesthetic & tonal direction of its design.

Be playful

Our solution prioritizes usability while infusing joy and delight through color, language, messaging, and movement.

Be Transparent

Our solution communicates the what, why, and how behind Optimism's core values and philanthropic work clearly and authentically.

Business goals

Designing to drive engagement

Our client’s first two business goals were fairly straightforward, but their third business goal—to increase brewery revenue—was a big ask. Good UX design alone can’t promise more website visitors or foot traffic without marketing, but what it can do is make it easier for users to discover specific information once they are on the website.

Our research revealed that food trucks are not only an integral part of the Optimism experience but that some customers even plan their brewery visits around them. If we could increase the discoverability and functionality of the Food Truck Calendar page, perhaps we could entice more customers to visit the brewery.

Increase To-Go Can Sales

Increase To-Go Cans sales by 25%.

Increase Event Bookings

Increase event bookings to 10+ events per month.

Grow Taproom Revenue

Increase Sunday-Thursday foot traffic to grow taproom revenue beyond pre-pandemic figures.

Generating Ideas Toward a solution

ideate

With our user personas and design goals in mind, we began the ideation phase where we defined the essential elements, features, and structure of the website.

Feature ideation

Information architecture

ideate — Part 1 of 2

Feature ideation

Our team came together for a brainstorming session to discuss what kinds of features we would need to include to satisfy our users’ needs and design requirements. These are the 6 core features we landed on for our first iteration.

Quick Links & CTAs

Provide affordances that help users complete their top tasks quickly and efficiently.

Scannable Tap List

Break the tap list into categories and remove non-essential product details to minimize cognitive load.

Comparison Visualization

Help users understand the main differences between Optimism's special event packages.

Featured Products

Showcase To-Go Cans, merch, and event space offerings on the homepage to increase visibility and drive conversions.

Product Detail Pages

Create new Product Detail Pages (PDPs) for each beer on the tap list, where lower-priority details can be accessed.

Image Galleries

Provide images of the main floor and mezzanine event spaces to showcase Optimism’s spacious interior.

Feature comparison chart

During our competitor analysis, we evaluated the features of our top 5 competitors’ websites to get a feel for the kind of content and functionality users might generally expect to find on a brewery’s website. Rows in blue indicate features that we incorporated into our redesign to drive user engagement.

Key ENGAGEMENT Features TO INCLUDE

Add "Food Trucks" to top-level navigation menu.
Featured Product modules on homepage.
Instagram feed & social media links on homepage.
Newsletter sign up field above footer.
Image galleries showcasing brewery interior and exterior.
Web and social links for each food truck.
Dedicated "Philanthropy" page.

ideate — Part 2 of 2

Information architecture

We conducted card sorting and tree testing with 21 participants to align our new information architecture (IA) with target users’ mental models.

Open card sort

To gain insight into how our users understand & categorize information, we conducted an Open Card Sort on Optimal Workshop with 13 participants

We used Optimal Workshop's Best Merge Dendrogram to cluster information based on individual pair relationships and arrive at the first version of our new IA.

Best Merge Dendrogram (annotated). Click to expand.

New site map: Iteration 1

Based on Open Card Sort Results

Tree testing

To assess how well our new IA supported core user tasks, we performed a Tree Test with 8 new participants.

Overall, participants had a 96% success rate but first-click tracking prompted us to make three key changes (see below).

Screenshot from Optimal Workshop Treejack Test

Screenshot from our Optimal Workshop Treejack Test.

New site navigation: Iteration 2

Based on Tree testing Results

Design Iteration 1 of 3

Mid-fidelity design & evaluation

We began the design phase 4 weeks before hand off. Given our tight timeline, we skipped low-fidelity sketches and jumped straight into mid-fidelity wireframes to give ourselves enough time to complete 2 rounds of usability testing and implement the final design in SquareSpace.

I took the lead on creating our mid-fidelity wireframes in Figma after coming together with my teammates and aligning on which features and screens to prioritize for our first round of usability testing.

Design approach

Mid-fidelity prototype

Evaluation: Round 1

Mid-Fi Design & Evaluation — Part 1 of 3

Design approach

Desktop vs. Mobile Design

Even though 62% of website engagement took place on mobile, we decided to create a desktop prototype because we knew our final deliverable would have to be build in SquareSpace. Since SquareSpace automatically resizes content to fit different screen widths, we knew that our final deliverable would be mobile responsive as long as our prototype was designed within the constraints and capabilities of SquareSpace.

Atomic Design

To expedite the prototyping phase, I leveraged atomic design principles to create a design system with reusable components and templates, which allowed me to build out 80% of the screens we needed for our first round of usability testing in about 3 days. Jess (Project Manager) and Vanessa (UI Designer) helped me build the remaining pages with a few days to spare before testing.

Mid-Fi Design & Evaluation — Part 2 of 3

Mid-fidelity prototype

Mid-Fidelity Product Details Page mockup for tap list items

Mid-Fidelity "Our Events Calendar" page mockup

Mid-Fidelity Book Event Space page mockup

Mid-Fidelity Special Events Details page mockup

Mid-Fi Design & Evaluation — Part 3 of 3

Evaluation: Round 1

Usability testing

We conducted moderated usability testing on our mid-fi Figma prototype with 4 participants to assess how well the overall structure and layout of the design supported core user tasks and ensure that we were heading in the right direction before investing time into full mockups complete with colors, images, and dynamic interactions.

What went well

All users were able to complete their tasks without additional help or prompting.
It took all users 1 click to find the Food Truck Schedule.
It took all users 1 click to get to the To-Go Cans PDPs on Optimism’s external ecommerce website (compared to 3-6 clicks on the original website).

Room For Improvement

Felt the copy above the tap list was unnecessary and just wanted to see the beers.
Expected to see To-Go Cans prices displayed on the homepage.
Confused by the wording of 2 navigation items.

Client feedback

We were also able to get buy-in from our client early on and ensure that our copy revisions, brand messaging, and content hierarchy were in line with their brand vision and business goals.

What went well

Happy with the content of our new “Mission and Impact” page and the addition of donation metrics on the homepage.
Supported our decision to consolidate Special Events and Private Mezzanine events into a single category and rename them to 'Main Floor Events' and 'Mezzanine Events', respectively.

Room For Improvement

Wanted to incorporate guest friendly policies on the homepage.
Worried that having two featured products sections on the homepage—To-Go Cans and Merch—would make them come across as too transactional and focused on sales.
Requested minor copy changes throughout.

Design Iteration 2 of 3

High-Fidelity Design & Evaluation

Design system

Applying V1 feedback

High-fidelity prototype

Evaluation: Round 2

Hi-Fi Design & Evaluation — Part 1 of 4

Design system

I initiated the high-fidelity design phase by finalizing our atomic design system and component library, which allowed us to establish visual consistency across pages and build/modify screens at lightning speed.

Having the design system in place also allowed teammates with less Figma experience to contribute to the prototyping phase without having to worry about breaking the design.

Hi-Fi Design & Evaluation — Part 2 of 4

Applying V1 feedback

I worked with our Project Manager and UI Designer to apply the user testing and client feedback we received on our mid-fidelity wireframes to our high-fidelity prototype. Below are some of the iterative changes we made in response to the 4 most pervasive issues.

01. Tap List

Cutting unnecessary content

Beofre

BEFORE Shot: Mid-Fidelity screenshot of Tap List. Removed copy is highlighted in red

V1 Feedback

Users felt the copy above the tap list (highlighted above in red) was unnecessary and just wanted to see the beers.

After

V2 Changes

We cut the copy and got straight to the point, streamlining the tap list even further.

02. HomePage: To-Go Cans Section

Prioritizing transparency

BEFORE

V1 Feedback

Users wanted to see To-Go Can prices up front. Our client was also concerned that bombarding users with too many CTAs might make them come across as too transactional and focused on sales.

After

V2 Changes

I removed the individual CTAs within each product container to make room for prices, left-aligned product details, then added one catch-all CTA underneath the product block that redirected users to our new To-Go Cans page.

03. HomePage

Prioritizing core values

New Content

New Section Added to homepage: guest-friendly policy accordions

V1 Feedback

Our client took pride in their guest-friendly policies and wanted to include them on the homepage.

V2 Changes

To avoid overwhelming users with too much information, I hid policy details in accordions so users could get the gist from the labels and have the option to read more if they wanted to.

04. Navigation Menu

Fine-tuning information architecture

V1 Feedback

When tasked with finding info about Optimism’s philanthropic work, some users were deterred by the label used for the “Mission & Impact” page as they felt it sounded too corporate.

V2 Changes

We renamed the page to Social Impact to add clarity.

V1 Feedback

Users expected to find a list of things they CAN’T do at the brewery on the “Brewery Policies” page when it was actually a list of things they CAN do.

V2 Changes

We renamed the page to Guest-Friendly Policies to add clarity.

Visit Navigation Submenu items: Before and After applying V1 feedback

HI-Fi Design & Evaluation — Part 3 of 4

High-fidelity prototype (first draft)

High-fidelity Round 1 mockup: Our events calendar

High-fidelity Round 1 mockup: B.E. Juicy Product Detail Page

High-fidelity mockup: hours and parking page

High-fidelity Round 1 mockup: Heliotropic Product Detail Page (PDP)

High-fidelity Round 1 mockup: To-Go Cans page

Hi-Fi Design & Evaluation — Part 4 of 4

Evaluation: Round 2

Usability testing

Our UX Researcher and Usability Specialist took the lead on conducting remote, moderated usability testing on our high-fidelity prototype with 4 additional users.

What went well

All users were able to complete their tasks without additional help or prompting.
We received several positive comments about the overall look and feel of the design. Users especially liked our use of color, “punny” headings and taglines, and all the dog images featured throughout the site.

Room For Improvement

Wanted to see more pictures of the brewery interior to get a better feel for the space.
Expected hours and location to be displayed more prominently on the home page.
Expected our location map to be interactive and to be provided with the addresses of nearby parking areas.

Client feedback

Our client was delighted by how the design turned out and appreciated all the considerations we made to ensure quicker and easier website updates on their end.

What went well

Felt that our wavy section dividers added a “delightful touch of whimsy” that captured the spirit of the brand.
Especially intrigued by the look of our new To-Go Cans page.
Appreciated the addition of web and social links for each food truck vendor in the calendar pop up.

Room For Improvement

Didn’t like the vertical wave used for the homepage hero image.
Concerned that the layout of the To-Go Cans page would not be able to support new releases without getting too long.
Wanted us to feature To-Go Cans on corresponding tap list beer PDPs to increase visibility.

Design Iteration 3 of 3

Final Design

With less than 2 weeks to hand off, I worked with our Project Manager and UI Designer to refine our design and prepare our final deliverable. I focused on applying the latest round of user testing feedback to our Figma prototype while my teammates started building out the screens in SquareSpace.

Below are some of the final modifications we made based on our second round of usability testing and client feedback. To see our top 5 design highlights and final prototype screens, jump back up to the solution overview section.

Back to Solution Overview

Final design modifications

Simplifying the homepage hero

BeFORE

While our client loved the horizontal wavy dividers I used to segment blocks of content throughout the website, they were not a fan of the vertical yellow wave used for the homepage hero image.

After

In response to client feedback, I simplified the hero image.
Getting to the tap list was users’ #1 priority, so I also added a CTA to take them straight there.

Prioritizing function > form

Our client released 3 new lines of To-Go Cans between design iterations, which made it painstakingly clear that I had prioritized form over functionality when designing the original To-Go Cans page.

To avoid an endless scroll repeat, I pivoted to a 3-column grid layout. While the new design lacked the same level of visual interest, it ensured that users could easily scan the page and weigh their options in a less cognitively taxing way.

Showcasing the brewery's interior

Users wanted to see more pictures of the brewery to get a better feel for the space, so I created a new “Brewery Image Gallery” page nested under the Visit menu to provide users with captivating images of the brewery interior, exterior, and outdoor courtyard.

NEW PAGE

Screenshot of new Brewery Image Gallery page

Covering all bases with quick links

BefOre

When tasked with finding what time Optimism closes on weekends, users expected to find the brewery's hours displayed more prominently on the homepage.

After

I added a pathway to the “Hours, Location, & Parking” page to the quick links section on the homepage.
I also added links to the Events Calendar and Table Reservation Form to ensure that all core user tasks were directly accessible from the homepage.

New Page

New "Dog-timism" Photo Gallery page (Final Design)

Leaning into optimism's dog obsession

By encouraging dog-owners to tag Optimism on Instagram to get their dog’s photo featured on the website, this last minute page addition served as one final touchpoint to to boost brand engagement and build brand affinity.

Outcome & Reflection

Weeks

Iterations

Redesigned
Screens

New Pages

100%

Final Grade

Client feedback

Big improvement. The presentation makes a lot of sense. The language is fun and right on brand.

Gay Gilmore
Owner & Co-Founder, Optimism Brewing

There are so many things I didn’t realize were so well researched and accessibility issues I didn’t think about. Wildly impressive and big props!

Kristine Pham
Marketing Director, Optimism Brewing

Things I would have done differently

Additional user testing on Live Site

Given additional time, we would have completed a third round of usability testing on the live SquareSpace site. This would have allowed us to evaluate whether our final design changes sufficiently addressed the issues encountered during our second round of testing on Figma and understand how some of the design trade-offs we had to make in SquareSpace affected the overall user experience.

ADVOCATED FOR MIGRATION AWAY FROM SQUARESPACE

Initially, our team planned on integrating our client’s main website with their separately-hosted ecommerce website. Due to incompatibility with Optimism’s Point-of-Sales (POS) system, integration would not be possible on SquareSpace, so we suggested migrating to a more flexible CMS platform (i.e. Webflow, Shopify, etc.) that would support the integration and give our team more control over finer design details.

However, two weeks into the project, our client decided they were not ready for migration or integration. Had our roles been different (employees vs. students working for free), we would have urged the Optimism team to reconsider migration to allow for a less time consuming build and allow us to address the complaints we received from customer survey participants regarding the online ordering process on the ecommerce website.

PAID MORE ATTENTION IN CLASS

All five members of our team assumed that the scope of our class included a full website redesign, which is what we promised our client during our very first meeting. However, 8 weeks into our 10-week quarter, we realized that we did not, in fact, have to deliver an entirely redesigned website and could have focused on 5-10 core screens (oops). Somehow, we managed to impress both our client and our professor with our end results, and we had the summer ahead of us to catch up on some much-needed sleep.

Thank you's

Thank you to Kristine Pham (Optimism Marketing Director and our primary point of contact throughout the project) for your impossibly quick responses to emails and text messages, carving out an hour or more every week to meet with our team, trusting our process, and providing us with all the assets, analytics reports, and resources we requested throughout the project.

Thank you to Suzanne Boyd (professor and Founder/CEO of AnthroTech Design Consultancy) and Rebecca Destello (assistant professor and Senior UX Research Manager at Google) for an incredibly thorough and rewarding class and for all your support, advice, and feedback along the way.

Last but not least, thank you to my incredibly talented teammates for taking on this project with me. And shout out to Slack, Zoom, Google Docs, and FigJam for enabling the perpetually open lines of communication and collaboration that made it all possible!

Me and my team after giving our final presentation in class. From Left to Right: Joyce Chang (Lead UX Researcher), Jess Hord (Project Manager), Me (Lead UX Designer), Rodrigo Tarriba (Usability Specialist), Vanessa Chien Lai (UI Designer)

Project team after our final class presentation (L to R): Joyce Chang (UX Researcher), Jess Hord (Project Manager), Me (UX Designer), Rodrigo Tarriba (Usability Specialist), Vanessa Chien Lai (UI Designer)

NEXT PROJECT: TASWIRA