// H2 heading

// Optimism brewing Company

Optimizing the website user experience for Seattle's largest brewery

Project overview

Optimism Brewing Company is a family-owned brewery and taproom in Seattle, WA best known for their diverse selection of craft beers and expansive industrial interior. As one of 77 breweries residing in Seattle’s booming craft beer scene, Optimism needed a website refresh to set themselves apart from the competition 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 target users, restructured the website’s information architecture to align with target users’ mental models, completed three rounds of iterative design and evaluation, and delivered a fully redesigned website that anticipated user needs, satisfied business goals, and exceeded our client’s expectations.

Bright, light-filled Optimism brewery tasting room with people seated on wooden benches and tall tables surrounding by tall windows and a timber-lined ceiling on a polished concrete floor

Busy brewery tasting room with wooden benches, tables, and stainless steel brewing tanks in the background.

Night view of Optimism Brewing Company's brick-lined, industrial-style exterior with large yellow entry door at the center surrounded by expansive windows with people seated inside at tables.

Optimism Brewing's outdoor beer garden with strung lights hanging above wooden picnic tables, tall wood-top tables lined with yellow bar stools, large green plants, and bright blue folding chairs and benches nestled between tall black metallic container walls

Interior and exterior photos of Optimism Brewing Company

My Role

I made hands-on contributions to each phase of the user-centered design process and 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 high-fidelity Figma prototypes.

Team (5)

Joyce Chang (UX Researcer)
Vanessa Chien Lai (UX Designer)
Jess Hord (Project Manager)
Rodrigo Tarriba (Visual Designer)
Me (UX Designer)

Project Type

User-Centered Web Design

Timeline

Mar — Jun 2022 (10 weeks)

Deliverables

High-Fidelity Figma Prototype
Live Website

My Primary Contributions

UX Design

Prototyping

Visual Design

Content Strategy

Design Requirements

Heuristic Evaluation

Information Architecture

Survey Design

Stakeholder Interview

Jump to Design Solution

Jump to design solution

// H2 heading

// Introduction

The problem

Below is a high-level overview of the top three areas our client asked our team to focus on through our redesign.

Problem // 01 of 03

Missing the mission

Optimism Brewing is a purpose-driven organization that prides itself on giving back to the local community through extensive philanthropic work.

However, hardly any information detailing the what, why, and how behind the company's mission and social impact initiatives 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.

Screenshots of two old Optimism Brewing Company web pages before website redesign

Original website screenshots (before redesign)

Problem // 02 of 03

Usability & accessibility

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

Problem // 03 of 03

Conversion rate (un)optimized

An absence of featured products 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.

Original website screenshots (before redesign)

// H2 heading

// Top 5 design highlights

Our solution

Our primary goal for this project was to deliver a website that anticipates 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 five highlights from our final deliverable.

Final website homepage design for Optimism Brewing with beer, food truck, event, and social media sections.

Making a strong first impression

The homepage anticipates users' needs, goals, & questions by providing (a) CTAs and (b) internal links to the highest traffic pages above and directly below the fold

Showcasing (a) guest-centric policies and (b) social impact metrics helps drive awareness of Optimism’s core values

Displaying (a) canned beers and (b) event space offerings enhances visibility as a means of driving conversions

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

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

Streamlining the tap list

02a

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 (name, image, tasting notes, style, and ABV%) 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

Final Taplist page design for Optimism Brewing with beers arranged in four-column grid layout

02b

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 to purchase as To-Go Cans, we included a CTA that redirects users to the corresponding To-Go Can PDP on Optimism’s seperate online ordering website to increase visibility and sales potential

Final product detail page design showcasing image, details, and online order availability for Optimism's "B.E. Juicy" IPA

Final Social Impact page design showing community support, donation metrics, and employee benefits with photos and charts.

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 Optimism's seperate ecommerce website

Final To-Go Cans page design showcasing 7 To-Go-Can varieties arranges in a three-column grid

Optimizing event bookings

Final design for Event booking page showing table reservations, special events, nonprofit events, and customer reviews.

05a

Consolidating to clarify

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

Final webpage design for new Special Events page detailing key differences between the two special event types (main floor vs mezzanine event) along with corresponding image galleries, FAQs, and inquiry forms for each event package.

05b

Providing answers upfront

We created a new "Special Events" page to provide users with details around logistics, accommodations, and pricing for each type of special event space
The side-by-side comparison visualization outlines the main differences between Main Floor and Mezzanine events, allowing users to compare options in a less cognitively-taxing way
The addition of photo galleries and corresponding FAQs for each event space allowed us to provide answers to common questions upfront, thereby reducing the need for correspondence with Optimism’s Events Coordinator prior to submitting an event inquiry

// H2 heading

// 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 visual identity and tone of voice reflective of Optimism’s quirky, spirited brand personality while ample white space between UI elements echoes the open, airy design of the brewery interior — unifying the digital and the physical to create a cohesive guest experience.

Demo final figma prototype

Final deliverable screens

Final webpage design for "All beers" page

Final design for "Our Brewing Process" page

Final design for in-house event detail pages

Final "Hours, Location, and Parking" page design

Final product detail page design showcasing image, details, and online order availability for Optimism's "Heliotropic" beer

Final "Guest-Friendly Policies" page design

Final design for Optimism's in-house events calendar

How we got there...

Hide

SHOW

// H2 heading

// Design thinking framework

Our process

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

Skip to design phase

Interactive Table of Contents

Phase 01

Click the links above to jump to the corresponding section

Phase 01

Research

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

Phase 02

Define

Phase 03

Phase 04

Design & Evaluate

Click the links above to jump to the corresponding section

// H2 heading

// uncovering opportunities

Research

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

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

Jump To

01 //

Stakeholder interview

02 //

03 //

04 //

05 //

Jump to

Stakeholder interview

Research // Part 01 of 05

Stakeholder interview

To kick off the project, I led a stakeholder interview with our primary point of contact, Kristine Pham (Marketing Director at Optimism Brewing), which helped our team align on the primary objectives, pain points, technical constraints, and overall scope of our website redesign from the outset.

Project objectives

Increase awareness of Optimism’s core values, philanthropic initiatives, and equitable business practices
Increase canned beer sales (a.k.a. To-Go Cans)
Increase event space bookings

Website concerns

Tedious and time-consuming to update
Broken links on Food Truck calendar
Too many emails from customers inquiring about event space details (pricing, accomodations, etc.)

Target website users

Existing customers
Prospective customers
Event planners
Nonprofit organizations

Technical constraints

Client doesn't have a dedicated web developer, so final deliverable needs to stay in SquareSpace and be easy to update and maintain

Research // Part 02 of 05

Customer survey

I collaborated with our Project Manager to design a Customer Experience 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% want to learn more about the company, 28% buy products or merchandise, 28% check the upcoming events calendar.

Research // part 03 of 05

Customer interviews

I drafted questions for semi-structured interviews conducted with four 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 local breweries
Impressions of the website

Motivations

Why customers visit the brewery

Most common responses included wide beer selection, food trucks, location/promixity, spacious seating area, and dog-friendly environment
50% of participants noted that the likelihood of visiting Optimism is impacted by the availability of food trucks

Awareness

Social impact awareness

75% of participants were aware that Optimism does some kind of social impact work in the local community, but no one knew the specifics

Perception

What sets Optimism apart

100% of participants noted the brewery's massive size as its foremost distinguishing factor

impressions

Observations from website exploration

Unintuitive information architecture prevented participants from finding and discovering useful information

Research // part 04 of 05

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.

See full report

Violation severity

Violation severity breakdown from my heuristic evaluation

Screenshots from my Heurio heuristic evaluation report. Click to expand.

Research // part 05 of 05

Usability testing

We conducted moderated usability testing with five Optimism customers who had never been on the website to assess how well users were able to find information corresponding to the top six tasks identified through our customer survey. These were the top four pain points we uncovered:

Screen recording of original Tap List page (before redesign) illustrating the amount of scrolling required to view the full page

Tap list

The endless scroll takes a heavy toll

When tasked with finding a beer they would like to try at the brewery, 100% of users expressed frustration and/or overwhelm toward excessive beer details and the amount of scrolling it took to view the full Tap List
When asked to share which details they took into consideration when determining whether a particular beer appealed to them, 100% of users listed beer name, style, tasting notes, and ABV% among their primary decision factors
80% of users also listed product image as a primary decision factor

Screen recording from original website (before redesign) illustrating broken links users encountered when attempting to find more food truck info

Food Truck Schedule

Broken trust fueled by broken links

All users encountered broken links when clicking on a food truck name in the calendar, negatively impacting brand perception by leading some users to question the overall quality of website content
Post-task feedback revealed that users expected to find a brief description and links to the food truck's Instagram/socials when clicking on the food truck name

The purple path illustrates the steps to get from the Homepage to the Gift Cards page using the original navigation menu (before redesign). However, all 5 users incorrectly assumed the page would be nested under the "Order" menu (red) . Click to expand.

Navigation menu

Mismatch between mental models & menu options

Across several tasks, users had a hard time associating the actions they wanted to take with the terms used for navigation items
For example, 80% of participants attempted to find the "Gift Cards" page under the “Order” menu when it was actually located under the “Visit” menu (see image)

Screenshots of the "Special Events" and "Private Mezzanine Events" descriptions from Optimism's original website (before redesign). Click to expand.

Event space Details

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. Post-task feedback revealed:

60% of users would have contacted Optimism (via phone or email) prior to submitting an event inquiry in order to clarify the aforementioned details
80% of users wanted to see more photos of the event spaces

01 // Tap list

The endless scroll takes a heavy toll

When tasked with finding a beer they would like to try at the brewery, 100% of users expressed frustration and/or overwhelm toward excessive beer details and the amount of scrolling it took to view the full Tap List
When asked to share which details they took into consideration when determining whether a particular beer appealed to them, 100% of users listed beer style, image, tasting notes, and ABV% among their primary decision factors

Mobile screen recording illustrating the amount of scrolling required for users to view the full Tap List page on the original website (before redesign)

02 // Food Truck Calendar

Broken trust fueled by broken links

All users encountered broken links when clicking on a food truck name in the calendar, negatively impacting brand perception by leading some users to question the overall quality of website content
Post-task feedback revealed that users expected to find a brief description and links to the food truck's Instagram/socials when clicking on the food truck name

Mobile screen recording illustrating the broken links users encountered when attempting to find more food truck info on original website (before redesign)

03 // Navigation

Mismatch between mental models & menu options

Across several tasks, users had a hard time associating the actions they wanted to take with the terms used for navigation items
For example, 80% of participants attempted to find the "Gift Cards" page under the “Order” menu when it was actually located under the “Visit” menu (see image)

Three mobile screenshots from Optimism's original website illustrating the correct path users needed to take to get from the homepage to the Gift Card page with the original information architecture alongside the incorrect path that 3 out of 5 participants took and the incorrect path 2 out of 5 participants took instead.

The purple path illustrates the steps users needed to take to get from the Homepage to the Gift Cards page on the original navigation menu. However, all 5 users incorrectly assumed the page would be nested under the "Order" menu (red).

04 // Event space inquiries

Low clarity yields low confidence

60% of users would have contacted Optimism (via phone or email) prior to submitting an event inquiry in order to clarify the aforementioned details
80% of users wanted to see more photos of the event spaces

Original mobile screens: unclear event descriptions

Screenshots of the "Special Events" and "Private Mezzanine Events" descriptions from Optimism's original website (before redesign)

Research // part 06 of 06

Competitor analysis

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

Strengths

Independent and family-owned brewery focused on small-batch, artisanal beers
Family-friendly, dog-friendly third space for locals
Largest taproom in WA state with more than 2X seating capacity of runner-up
Strong core business values: Extensive philanthropic work, high levels of corporate responsibility, high employee satisfaction
Location in Capitol Hill (Seattle’s most walkable and densely populated neighborhood) near major public transit stops, restaurants, public parks, and university campus

Weaknesses

Use of non-traditional beer style names does not appeal to circumspect traditionalists who prefer classic, time-tested styles without experimental adjuncts
Website content is tedious and time-consuming for staff update, so Tap List page 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 and novice beer drinkers who are uninterested in the technicalities and driven more by flavor, novelty, and experience

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

// H2 heading

// synthesizing insights

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.

Jump To

01 //

02 //

03 //

Jump to

Define // part 01 of 03

User needs

We used affinity mapping to synthesize our research findings, identify user pain points, and map them onto needs that we could satisfy through our redesign:

Unintuitive information architecture prevents users from finding and discovering useful information

Intuitive navigation
Restructure information architecture to align with target users’ primary goals and expectations

Excess beer details on the Tap List contribute to information overload

Scannable tap list
Prioritize only essential beer details and primary decision factors on the Tap List; relocate additional details to new product detail pages

Encountering broken links when looking for food truck information contributes to loss of trust and confidence in the quality of website content

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

Lack of clear distinction between "Special Event" vs. "Private Mezzanine Event" packages creates friciton in the event inquiry process, potentially contributing to lost event booking opportunities

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

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

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

Define // part 02 of 03

User personas

While our research revealed four primary user groups — existing customers, prospective customers, event planners, and nonprofit organizations — further analysis into how and why each group interacts with the website led us to narrow our target user groups down to Customers and Event Planners.

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 professional event planners and nonprofit organizations whose primary goal for visiting the website is to determine whether the brewery might be a viable venue to host an upcoming event

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.

Optimism Target Customer Goals Flow Chart

Define // part 03 of 03

Design requirements

To help guide our design strategy and solutions, I translated our research findings into actionable design requirements aUsability goals, Brand goals, and Business goals.

Be efficient

The design must be stripped back and streamlined in a way that highlights core tasks and features while avoiding excess ornamentation

Cut content down to the essentials
Use white space, images, and visuals to break up dense blocks of copy
Apply the bite-snack-meal approach to break content into clear, easily-digestible chunks and direct users’ attention to key information

Design team will conduct moderated usability testing with the same set of tasks used during discovery research phase and track the following metrics to assess whether our changes help users accomplish their goals more efficiently:

Number of errors
Number of clicks
Post-task Likert ratings of users’ perceived ease/difficulty in completing tasks

Be intutive

The design must be stripped back and streamlined in a way that highlights core tasks and features while avoiding excess ornamentation

Restructure information architecture to align with target users’ mental models
Make strategic use of headings to direct users’ attention to key information

Be inclusive

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

Use descriptive CTAs that give users a clear idea of where they’re going
Minimum 4.5:1 color contrast ratio between foreground/background elements
Minimum 18pt body font size for enhanced legibility across devices

Design team team will run frequent accessibility audits to ensure final deliverable meets or exceededs Level AA Web Content Accessibility Guidelines

Designing for what users want to DO

Usability goals

With our personas in mind, I formulated three usability goals centered around delivering an intutive user experience that anticipated and intentionally catered to users’ needs, goals, and questions.

Be efficient

The design must be stripped back and streamlined in a way that highlights core tasks and features while avoiding excess ornamentation

Be intuitive

The website must provide users with the information they need when they need it and where they expect to find it

Be inclusive

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

Designing for what users want to feel

Brand goals

The minimalist aesthetic that characterized the brewery’s interior was lost on the current 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

The website embodies and extends Optimism’s quirky, spirited brand personality through its visual aesthetic and tonal direction

Be playful

The website prioritizes usability while infusing joy and delight through color, language, messaging, and movement

Be transparent

The website communicates the what, why, and how behind Optimism's core values and philanthropic work clearly and authentically

Designing to drive engagement

Business goals

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 good marketing, but what it can do is make it easier for users to find and discover specific information once they are on the website.

Our research revealed that food trucks are not only an integral part of the Optimism brewery experience but that some customers go as far as to 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 Canned beer Sales

Increase year-end canned beer (a.k.a. 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

Define // part 03 of 03

Design requirements

To help guide our design strategy and solutions, I translated our research findings into six actionable design requirements:

Be intuitive

The website provides users with the information they need when they need it and where they expect to find it

Be efficient

The design is stripped back and streamlined in a way that highlights core tasks and features while avoiding excess ornamentation

Be inclusive

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

Be consistent

The website embodies and extends Optimism’s quirky, spirited brand personality through its visual aesthetic and tonal direction

Be playful

The website prioritizes usability while infusing joy and delight through color, language, messaging, and movement

Be transparent

The website communicates the what, why, and how behind Optimism's core values and philanthropic initiatives clearly and authentically

// H2 heading

// generate ideas

Ideate

With our user personas and design requirements in mind, we started ideating on the essential elements, features, and structure of the website.

Jump To

01 //

Feature ideation

02 //

Information architecture

Jump to

01 //

Feature ideation

02 //

Information architecture

ideate // part 01 of 02

Feature ideation

Our team came together for a brainstorming session to discuss the features and functions we should prioritize to satisfy our users’ needs and design requirements. These are the six core features we landed on for our first iteration:

Homepage

Internal linking

Help users complete their top tasks quickly and efficiently by providing ample pathways to core pages and content from the homepage

Tap list

Glanceable grid

Organize the tap list into a multi-column grid featuring only primary decision factors (image, name, style, tasting notes, ABV%) to minimize cognitive load

Events

Comparison visualization

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

Homepage

Product spotlights

Showcase To-Go Cans, merch, and event space offerings on the homepage to boost visibility and sales potential

Tap list

Product detail pages

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

Events

Image galleries

Provide images of the main floor and mezzanine event spaces to showcase the brewery'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 02 of 02

Information architecture

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

Open card sort

We conducted an open card sort on Optimal Workshop with 13 participants to gain insight into how our users understand and categorize information.

We used Optimal Workshop's Best Merge Dendrogram to cluster information based on individual pair relationships and arrive at the first interation of our new site map (see below).

Annotated Best Merge Dendrogram from our open card sort. Click to expand.

Site map // Iteration 1

New Site Map Navigation Tree based on Open Card Sort Results

First iteration of new site map (based on open card sort results)

Tree testing

To assess how well our new information architecture supported core user tasks, we performed a tree test on Optimal Workshop with eight new participants. Overall, participants had a 96% success rate, but first-click tracking prompted us to relocate three pages to better align with user expectations (see below).

Screenshot from Optimal Workshop Treejack Test

Screenshot from our Optimal Workshop Tree Test

Site map // Iteration 2

Iteration 2 of New Site Map based on Tree Testing Results

First-click tracking revealed that 63% and 75% of users expected to find the "Contact Us" and "FAQs" pages, respectively, nested under the About menu (rather than the Visit menu) while 88% of users expected to find the "Reserve a Table" page nested under the Visit menu (rather than the Events menu)

// H2 heading

// Iterative design

Design & evaluate

We kicked off the design phase four weeks prior to handoff, giving us just enough time to execute three design iterations with two rounds of usability testing sandwiched in between before building out the final design in SquareSpace.

Jump to

Jump to

Design & Evaluation // Iteration 01 of 03

Mid-fidelity design

I took the lead on building 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.

Mid-Fidelity Product Details Page mockup for tap list items

Mid-Fidelity Book Event Space page mockup

Mid-Fidelity Special Events Details page mockup

Mid-Fidelity "Our Events Calendar" page mockup

A sample of the mid-fidelity wireframes I designed for our first round of usability testing

Evaluation (Round 1)

Usability testing

We conducted moderated usability testing on our mid-fidelity prototype with four 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 high-fidelity designs complete with colors, images, and dynamic interactions

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.

Usability testing

We conducted moderated usability testing with four 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 high-fidelity wires complete with colors, images, and dynamic interactions.

Users were able to complete all nine tasks without additional help or prompting
It took all users one click to get to the To-Go Cans product detail pages on Optimism’s external ecommerce website (compared to 3-6 clicks on the original website)

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 two 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.

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

Wanted to communicate core values and 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

Design & Evaluation // Iteration 02 of 03

Design system

To expedite the high-fidelity design phase, I leveraged atomic design principles to create a design system with reusable components and standardized section templates, which allowed me to build out 80% of the wireframes we needed for our second round of usability testing in less than three days.

In addition to helping us maintain visual consistency across pages and build/modify wires at lightning speed, having the design system in place also allowed us to bake accessibility into our design foundation.

Optimism Design System

Applying V1 feedback

I worked with two teammates to apply the feedback we received from our first round of usability testing to our high-fidelity prototype. Below are four examples of the iterative changes we made in response to user and client feedback: