communitea

CommuniTea Website Redesign

We were tasked to find a local company in need of a website redesign and found CommuniTea Kombucha, a local Seattle kombucha company through the NextDoor app. 

My Role

My primary role was a user and design researcher. I conducted contextual inquiry and competitive analysis. Then, I contributed to the content audit and directed the card sort study to eventually create a new information architecture. While contributing to the design phase through sketching and low-fidelity prototypes, I also created our usability test protocol. 

The Problem

Not every local business has a well designed website. When the pandemic hit, local businesses needed to begin to rely on their websites to communicate with their customers and make money. When looking at the CommuniTea existing site, it felt both overwhelming and inefficient due to the large blocks of text and a very dropdown-heavy FAQ menu. We thought visual design could also use an update as there wasn’t much imagery present and there were some contrast issues. Plus, critical actions and touchpoints for any goals users wanted to complete were buried in multiple clicks across multiple pages. 

Our Approach

We approached the website redesign with a user centered design methodology. We begin with a greater understanding of the users through research and then designing, testing, and iterating on prototypes.

Target Users & Stakeholders

Primary users: Kombucha learners

Characteristics: 

• New users of this website who want to know about this new beverage and try CommuniTea’s kombucha for the first time
• People who want to support local businesses
• People above age 21 living in the Greater Seattle, WA area and neighboring areas

Goals: 

• Learn more about CommuniTea’s differences to other kombucha brands
• Learn different ways to buy CommuniTea kombucha
• Learn more about CommuniTea’s story and mission
• Find which store near them sells CommuniTea’s kombucha
• Taste their first CommuniTea kombucha

‍

Primary users: Kombucha enthusiasts

Characteristics: 

• Frequent users of the CommuniTea website who regularly buy their products
• People who would like to know more detailed information about CommuniTea’s kombucha
• Interested in drinking healthy organic kombucha 
• Interested in zero-waste products 
• May be interested in learning about the kombucha community
• People above age 21 living in the Greater Seattle, WA area and neighboring areas

Goals: 

• Successfully schedule a brewery appointment
• Successfully order home delivery of CommuniTea kombucha

‍

Secondary users: Wholesalers

Characteristics: 

• Wholesalers in the Greater Seattle, WA area and neighboring areas 
• Interested in tasting or ordering the product
• Interested in supporting local businesses

Goals: 

• Successfully contact CommuniTea Kombucha to make an appointment to taste the product
• Successfully stock the product in their grocery stores, restaurants, or bars

‍

Stakeholders

Primary:

• Current Owner (Chris): The current owner, Chris, started CommuniTea, and wants to ensure the website redesign continues to reflect CommuniTea’s mission.
• Potential Future Owner (Tim): Tim is starting to transition to own CommuniTea, and wants to refresh the website to align with investments for business growth.
• Wholesale Liaison (Zach): Zach currently manages the process for wholesale orders and wants to ensure the website redesign does not add extra work to his process.

Secondary:

• Wholesalers: Wholesalers are secondary stakeholders in this website redesign. Strengthening the brand of CommuniTea on their website could increase traffic and sales in their stores that carry CommuniTea.

‍

User Research

Our user research consisted of a variety of methods: contextual inquiry, interviews, usability testing, and reviewing analytics. We also reviewed existing market research conducted by a UW business school team from the previous quarter. We each performed these methods as individual researchers and then compiled our findings together.
‍

Contextual Inquiry

I conducted a contextual inquiry with a new Communitea website user. We were desiring existing users to perform contextual inquiry with, however, due to the short time period for recruiting, this contextual inquiry was performed with a new website user who fits the target audience, local Seattle kombucha drinker. 

Research Questions for Contextual Inquiry:

1. What do users gravitate toward on the website?
2. Are there any confusing items on the website?
3. What are their impressions of CommuniTea and their website?
4. Are there currently work arounds the user currently has on the site?
   

Areas of Opportunity found:

• Rewriting of text portions on the website and adding in additional visual aides
• Condensing the number of existing web pages, so the same information is not in multiple places or partial information split across pages. 
• Adding more to the storytelling of the mission upfront and adding a ‘face’ to the company.
• Better highlight how CommuniTea is different from other kombucha

‍

Overall Findings

Here are our top findings, including: 

• Users want a centralized account page
• Brewery appointments being the most popular page
• Currently, the information in mission and FAQ pages were rarely visited and when visited, users feel overwhelmed by the amount of text.

Comparative/Competitive Analysis

We each performed comparative/competitive analysis on other local kombucha websites:

• Analyzed architecture and navigation
• Visual audit for design
• Reviewed usability

Personas

Leveraging our user research, we developed personas to aid in our design. Our two primary personas are Miles and Sarah, the kombucha learner and the kombucha enthusiast. The kombucha learner is someone who hasn’t had Communitea kombucha or any kombucha before and is looking to learn about kombucha and try it out. The kombucha enthusiast is a returning Communitea customer who regularly drinks and orders kombucha. We also developed a secondary persona, Jack, the wholesaler.

Information Architecture Research

The existing site needing restructuring, to do this, we needed to develop a new information architecture.

Content Audit

First, we completed content audit on every page of the existing website:

• Helped derive user flows
• Identified areas for streamlining
• Established initial content cards for card sort

Card Sort

Then, we set up a card sort study:

• 36 total content cards for sorting via OptimalSort
• Cards included current content from content audit as well as new content ideas
• Open card sort - participants got to name their own categories
• Recruited those familiar and unfamiliar with the current CommuniTea website via HCDE community & CommuniTea social media

Card Sort Analysis

Next, the card sort analysis:

• Analyzed results from 22 study completions, 40% existing CommuniTea site users, 60% new users
• Utilized OptimalSort’s results analysis features of 3D cluster view & similarity matrix to begin grouping cards
• Derived category names from top names in groups from the 3D cluster view
• With groupings and category names, drafted an information architecture

New Information Architecture

Finally,  with the card sort results, understanding what participants group together and labeled those categories, we developed this architecture.

Design Ideation

With all of this research, we begin ideating on design ideas with sketches and paper prototypes.

With all these ideas, we narrowed it down to create a unified low fidelity prototype. We prototyped critical content pages to test user scenarios for all 3 personas, including: home page, which suits all users, our story and find us page, which mainly face to kombucha learner.

Testing & Iteration

We conducted usability testing with 5 users. We found aspects that went well, such as call to action buttons on the main page and the rearranged content on “our story” page. 

We also found critical areas of improvement before going to our high fidelity prototype. Our labels in navbar caused confusions and ended up breaking the user flow. For example, users failed to distinguish products versus purchase page, and some of our users misunderstood the term “wholesale” in the nav bar, which we changed to “for business” in our future design.

For better user flows, we redesigned our information architecture and created a better nav bar in our high fidelity prototype.

Brand Tenets & Visual Keywords

Furthermore, to aid us in our visual design, we developed brand tenets and translated them to visual keywords. Our brand tenets are original, environmental, and community, which translate to glanceable, organic, and casual.

Moodboards & Mid-Fidelity

We then created moodboards for further design inspiration. 

We each then took a tackle at creating a homepage based off our moodboards. From these “mid fidelity homepages”, we conducted a design critique to extract our most favorite elements and unify them as a central design system.

Final Deliverable

After these iterations, we developed a high-fidelity prototype in Figma.

Design System

In order to create consistent visual hierarchy and to improve our work efficiency within the team, we decided to develop a design system.

To reflect one of our visual keywords, which is ‘Casual,’ we thought San-serif font style would fit well with the casual vibes that we hope to present. So we chose Montserrat as our headline font and Work Sans as our body text font.

After the moodboard discussion, we chose green as our primary color and light yellow as the secondary color to show the brand image effectively. Additionally, we created other components like footer, tabs, and buttons in different sizes and different statuses in our design system.

Also, we developed a global navigation bar that shows both active, inactive, and hover status for each menu button.

High-Fidelity Prototype

In total, we designed 15 unique pages and created a clickable prototyping website through Figma. View full prototype here

We tried to integrate our brand tenets and the three visual keywords into our hi-fidelity design. We designed each page to be glanceable by providing enough white space and visual hierarchy. We also invested a decent amount of time in the UX writing to all of our pages in order to present the content in a more friendly and casual tone.

Based on the usability and the user research result, the existing home page was reported to be text-heavy, and not showing the content well enough for the new-users to understand what CommuniTea kombucha is and what this brand does & sells at a glance. 

So we designed the visual hierarchy based on the developed information architecture and added two call-to-action buttons that could satisfy the needs of two of the major target users, who are the CommuniTea kombucha new users and the enthusiasts.

Also, to show more organic vibes as we discussed in our visual keywords, we designed those organic blob components around the page. And you can also find those blobs in other pages. 

One of the issues that we have discussed was the absence of a product page where users can easily view the list of kombucha, kegs, and other items that they can purchase. In the existing page, we can see the product list only when we click on the home-delivery button which is located underneath another higher level button. And the page is also pretty text-heavy.

So, we cut down some words and created different sections & steps to orderly show the products that CommuniTea kombucha sell to the users so that the users can easily digest the contents.

We also created a new, customized page for the wholesalers, who are our third persona.

We designed a Request a Tasting page to show what our client could offer. You can see the hierarchical date and time picker that enables our users to schedule an appointment efficiently.

Another new page that we created is the My account page. Currently, the existing website doesn’t provide a login feature to manage the account or to track the order history.  After the user research, we decided to create a separate page where users can easily see their next brewery appointment, orders, gift card, and other settings.

During our redesign, connecting current and future customers with CommuniTea was a major focal point. 

While many of your loyal customers purchase kombucha by the case from the brewery, many customers are looking to buy or enjoy locally, in smaller quantities.

We iterated on the original ‘where to buy’ page to create an interactive experience for customers to find the nearest store, understand which products are sold there, and a way to find out more information about each one.

Adding an interactive map and removing other store logos helped unify the page and make it more cohesive with the rest of the design system while still providing a familiar experience to users.

We also focused a lot of time on the approach to FAQs. The original design consisted of 13 questions, each with their own dedicated page and dense amounts of text. 

During our initial round of user research, participants noted how this section was dense and overwhelming, which signaled to us that it required rethinking.

When doing a content audit we found that many questions weren’t actually FAQs, but information that you all found really important to share with customers. So we decided to deconstruct the FAQ page and redistribute its content. 

For information that pertained to specific topics or actions, we moved it to the corresponding page where the user would find that information most useful. And for content that was informational, we opted for a storytelling approach that allows you to continue sharing meaningful content in a more impactful and concise way. 

After the redesign, one participant noted, unprompted, that the new storytelling pages were really interesting and made them want to read more.

‍