Tayst Coffee
Brand overview: Tayst sells sustainable coffee products such as compostable pods for Keurig and Nespresso
Project overview: Tayst homepage and navigation redesign, using full website analysis
My contributions: User research, competitive analysis, user personas, digital wire-framing, navigation, style guide, visual design
The team: Worked closely with Marketing Analysts, SEO analyst, and Email Strategists in audience/user research and website performance. Content Marketing specialist conducted competitive analysis.
Tools: Google Analytics, Shopify Analytics, Google Forms, Klaviyo, Adobe Illustrator, Figma, Pen and Paper
Discovery + Analysis
Current pain points
The below analytics not only demonstrated the clear room for improvement but also set our KPI’s, and how we could measure success upon completion of this redesign.
Client Questionnaire
Understanding how our stakeholders perceive their own brand is important because we can identify gaps between their perception of the brand and our own findings.
The biggest key takeaway from the client questionnaire with Tayst is the fact that they saw their Sustainability Mission as their brand superpower. We observed this superpower was not immediately apparent on the current website, and that instead, the website focused on the flavor of the coffee.
The existing website header did not speak to the client’s perceived “brand superpowers”
User Research
Installed a heat map via HotJar to the backend of the existing Tayst website to gain analytics on user action + behavior for 30 days while in the discovery phase.
Key finding #1: We found customers had to take unnecessary extra steps to complete a task. Example: When account holders pressed “login”, they are met with a second “login” button.
Key Finding #2: The most-clicked link in the informational pages on the website was the FAQ link in the footer. This tells us that users are not getting the information they’re looking for.
Key Finding #3: Many visitors go from “Our Coffee” to “Our story” to “How it Works” pages. This tells us that the information on these 3 pages should exist as their own mini-funnel, from “what is this” to “how do I buy it”? This hierarchy of information did not exist on the existing homepage.
Competitive Analysis
Some notable takeaways included the fact that Tayst required many more “clicks” to complete a purchase, which may have contributed to the high bounce rate. Tayst also had significantly more navigation menu options, which we already observed was overwhelming for users. Tayst webpages featured less CTA’s, all influencing users to “buy now” rather than guiding to more information they may be looking for before they’re ready to make a purchase.
Tayst Website Analysis
User Persona
Quantitative Findings
(Google + Shopify Analytics)
From the quantitative data derived from GA we could make assumptions that the average Tayst website user was a female in her 50’s, with an above-average household income. We gathered that most users lived in the suburbs of larger metropolitan cities. Interests included sustainability, volunteering and philanthropy, and cooking at home. We could assume that this audience was willing to pay more for convenience, and was likely to shop sustainably. Less likely to purchase a latte in a plastic cup from the neighborhood cafe than they are to purchase a more sustainable coffee they can brew at home.
Qualitative Findings
20 questions survey emailed to 5,760 email subscribers via Google Forms, we received 119 responses. Most important key takeaways were as follows:
What comes to mind when people think of Tayst coffee is: Sustainability
The experience with Tayst is primarily positive because: The high quality of the coffee and great customer service
The competitor that most people consider along with Tayst is: Lifeboost Coffee
They choose Tayst over Lifeboost because: Sustainability
Website users liked that the website: Featured honest reviews
Website users disliked that the website: Overwhelming
People that did not make a purchase chose not to because: Too many steps
People came back to shop Tayst again due to: Great customer service
Consensus / Approach
-
Clean up look + feel
Create a more consistent visual identity throughout website while also building a digestible hierarchy of information.
-
Simplified nav + usability
Pair down navigation to enable users to easily find what the information they’re looking for with less overwhelm, allow users to make a purchase in less steps.
-
Storytelling overhaul
Tighten up the brand messaging and develop a strategy for meeting customers where they are with the most relevant information and revealing that information in the correct order.
Clean up look + feel
Look + feel | Visual Identity
The visual identity on the current website was inconsistent throughout. We began by developing a more holistic brand identity, building upon an existing logo and brand font. We added a color pallet, typography, custom drawn iconography, audience personas, and voice + tone guidelines.
Look + feel | Hierarchy of info
The hierarchy of information on the existing website was not easily digestible and very repetitive. To solve for this, we started with an impactful header around eco-friendly impact, supported with trust marks, and then immediately featured what products we’re selling, how to purchase those products, and offered an opportunity for the user to quick-shop without navigating away from the homepage.
Simplify Navigation
The original navigation included 7 options. The first, “Get Started” featured a dropdown that allowed users to choose to shop only two of their existing 4+ product line.
Navigation Sketches
First, I reorganized the existing navigation options into parent buckets. Next, I added pages under each bucket that didn’t currently exist in the navigation but should, and lastly, reorganized the navigation accordingly.
Rough wireframe
The first wireframe included the 4 parent options in the navigation, plus 3 functions to the far right: account login, search, and cart.
Sub-menu options
After deciding on the parent options, we then mapped out each of the drop down menus. In this first iteration, we wanted to break down shopping options for those wanting to drink coffee at home, give coffee as a gift, or for B2B customers to make a bulk order.
We also wanted to give users the option to learn more about the brand before making a decision. Rather than bombarding them with this information on the homepage, they could choose to learn more.
Because the FAQ link was so popular on the How it Works page that people were willing to scroll down to the bottom of the site to find it, we added it to the main website navigation.
Final Mock-up
Rather than having “coffee for business” exist under the “shop” menu, we opted to have users choose whether they were shopping for coffee “for Home” or “for Business” so that B2B and DTC customers would see different navigation options.
Quickshop Feature
The purpose of the quick shop feature is to give users the opportunity to shop from the homepage, rather than navigate in multiple steps to checkout.
Wireframe sketch
Prototype in Figma
Storytelling Overhaul
I completed an exercise in which I attempted to “get into the head” of our user persona and ask myself what I would tell myself to justify purchasing from Tayst, and also how I would convince myself to NOT purchase from Tayst. We call this exercise “Barriers + Motivators”
By familiarizing ourselves with the thoughts our key users may be having throughout their experience with Tayst, we were able to develop messages and implement those messages throughout the homepage, meeting customers where they are.
Final Mock-ups
Closing remarks
This project is still in progress. The mockups are being reviewed by the client at this time. This website will be mobile-reponsive and the next step is to complete revisions and begin on mobile layout and mockups.