A full website redesign for the Seattle-based small business CommuniTea Kombucha.
Problem
After consulting with the CommuniTea Kombucha team regarding their goals for the website and how it will support their business, our student team set out to redesign the official CommuniTea Kombucha website.
Design Question
How can we update the CommuniTea Kombucha website to help meet their business goals?
Solution
This project culminated in a proposed new design system, content reorganization and rewrite, as well as a high fidelity Figma prototype to illustrate page interconnectivity. Our feedback was taken into account and CommuniTea Kombucha made changes to their website that aligned with our research findings and design suggestions.
Outcome
The proposed website redesign was handed off to the CommuniTea Kombucha team and was used to influence official website updates.
The Process
Redesign Goals
Before our team began redesigning the CommuniTea Kombucha website, we consulted with the CommuniTea Kombucha team. The team consisted of Chris Joyner, the founder and brewmaster, Tim Miller, kombucha brewer and possible company buyer, and Zach Lyons, marketer and chief storyteller of the company. Working together, we developed a set of goals that this redesign would strive to accomplish.
The redesign would:
Increase successful home delivery interactions by 10% after one year of homedelivery section redesign.
Increase successful conversions in retail settings by 10% after one year of find us section redesign.
Convert 10% of existing wholesale customers from using the current manual invoice and order method to the online ordering system within 1 year of website business section implementation.
Increase page views related to CommuniTea “About” FAQ content by 10% through the use of a content audit to guide and reorganize website information hierarchy.
Research
To hone in on what the design problems our redesign would solve, our team used a wide range of methods such as interviews, a survey, usability testing, website analytics, competitive analysis, market research, and a content audit.
Our summarized findings include:
An unmet need for a centralized account login
Brewery Appointments is a popular page with users, yet it is buried and difficult to find
Mission and FAQ pages are rarely, if ever, visited by users
Website visitors feel overwhelmed by the amount of text present throughout the website
Website visitors are confused about what makes CommuniTea different than other kombucha brands
When prioritizing purchasing kombucha, kombucha drinkers prioritize brands that are environmentally conscious, locally-produced, and community-oriented.
Website visitors feel overwhelmed by the amount of text present throughout the website.
Design
Content Redesign & Information Architecture
Leveraging what we learned from the user research, we developed personas to aide our redesign process. Having personas available helped our content redesign process because it gave us the opportunity to prioritize what kind of content should be present on the website. By considering the website content from the point of view of the personas, our team was able to practice the user empathy integral to the art of UX design.
Miles is a kombucha learner, or someone who hasn't had CommuniTea Kombucha or any other kombucha brand before and is looking to learn about kombucha before trying it out.
Sarah is a kombucha enthusiast, a returning CommuniTea customer who regularly drinks and purchases CommuniTea Kombucha.
This is a persona for Jack, a wholesale purchaser of CommuniTea Kombucha. Due to project scope, we considered this persona a "secondary persona" and prioritized the other two personas.
After determining what sort of needs the website content would fulfil, our team conducted a card sort to get a better understanding of how the website's ideal information architecture would look like. This was done through a Card Sort via Optimal Sort with 22 participants. Of those who participated, 60% were new users who have never visited the CommuniTea website, while 40% were returning users.
After processing the Card Sort data, we developed this information architecture system.
Visual Design, Part 1
The first step of our design ideation consisted of basic sketching.
Our team then designed some basic wireframes. We explored visual methods to separate and organize content in a visually appealing way, as well as rewrote the content to better fit the needs of website visitors.
Evaluation
Usability Testing
Using our wireframe with the interactions prototyped in Figma, we conduced a small usability test of 5 users. We found aspects of our redesign that went well, such as call to action buttons on the main page and the rearranged content on the “our story” page, but we also found many critical areas of improvement. For example, our labels in navigation bar caused confusions and end up breaking the user flow. For example, users failed to distinguish the products versus purchase page. Some of our users also misunderstood the term “wholesale” in the navigation bar, which we changed to “for business” in our high fidelity design. Overall, the results of the usability test led us to iterate upon our information architecture and content and make it to be a bit more easily digestible.
Visual Design, Part 2
To aide us in our visual design, we developed brand tenets and translated them to visual keywords.
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.
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.
After discussing and critiquing the moodboards, we chose green as our primary color and light yellow as the secondary color to show the brand image effectively. We also created other components like the footer, tabs, and buttons in different sizes and statuses in our design system.
We developed a global navigation bar that shows active, inactive, and hover status for each menu button.
Overall, our team designed 15 high fidelity website pages. You can view pdfs of each of these frames here.
These high fidelity pages followed the design guidelines we created. (Sidenote, see all those cool pictures? We took those too!)
Before & After
HOME PAGE: Based on the usability and the user research results, the existing home page (in the left) was reported to be text-heavy. In response, 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: the CommuniTea kombucha new users and the enthusiasts. Additionally, to showcase more "organic" vibes as we discussed in our visual keywords, we designed those organic blob components around this page and several other website pages.
PRODUCT PAGE: One of the major issues that our research uncovered was the absence of a product page where website visitors could easily view the list of available kombucha, kegs, and other items for purchase. Our product page redesign heavily iterated upon the written and visual content to create more concrete sections. By doing so, we were able to make the product page offer the information that website visitors were seeking.
FIND US PAGE: During our redesign, connecting current and future customers with CommuniTea was a major priority. 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. The use of a map is a design suggestion that CommuniTea recently integrated into their currently published website, check it out here.
FAQ PAGES: The original FAQ design consisted of 13 questions, each with their own dedicated page and dense amounts of text. The bulky and overwhelming FAQs came up frequently in our user research interviews, as participants consistently noted how this section of the website was dense and felt overwhelming. While doing a content audit we found that many of the questions were not in fact actual FAQs, but rather information that the CommuniTea team thought was important for customers to know. 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. 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.
CommuniTea made actual changes to their existing website based off of our research results and suggested design guidelines.
We had great communication and collaboration with CommuniTea.
Our team also had excellent intra-team collaboration: we had some fantastic design critique sessions and amazing communication skills!
Our recruitment process for interviews and survey involved using existing CommuniTea customers and being able to promote opportunities to participate in our research through email blasts, which was an amazing resource to have access to as a team.
This project was an excellent content management experience with a full content audit and plentiful opportunities to practice UX writing.
Our team got to go to the brewery, take lots of pictures for the website, and get a behind the scenes tour to learn about how CommuniTea Kombucha is made. This collaborative project made our team just that much closer with the small businesses in the Seattle community.
Limitations
Our proposed research design didn't fully consider system, technology, or time limitations. As we provided a comprehensive design overhaul, only some changes were actually able to be implemented in real life by the CommuniTea Kombucha team.
Our research participants tended to be heavily skewed towards either brand new users or loyal users, with little representation from other types of website visitors such as wholesalers.
If we could do this again, we would
Include a wider range of users that fit the Sarah and Miles personas for usability testing.
Create more high fidelity components earlier on so that we could more easily modularize the design system.
