Jesse's Teahouse

good teatimes await
case
Jesse has over 461.6K followers and 6.9M likes on TikTok. How might we translate his social media personality into an online shop that converts?
roles
Teresa - UX designer & writer
industry
E-commerce
Three mobile mocks of the e-commerce site Two mobile mocks of the e-commerce site
Context
Jesse’s Teahouse is where TikTok influencer, @yourteaguy, sells his tea products to a “tea curious” audience.

Over a month, I worked with Jesse to redesign his shop so his language is consistent and his website reduces users’ buying time.
The app on a mobile mock with a wave behind it Two mobile mocks of the e-commerce site
When you watch Jesse’s videos, he interacts with his customers. You can tell instantly that he’s their nerdy tea friend who can’t help but share his excitment about tea tidbits.
In his shop though, that feeling and communication style was lost.

He referred to himself in the first and third person. For his audience, he jumped from calling them “customers” to “tea friends,” making it hard to relate with Jesse as easily as through his videos.
problem
Jesse wasn’t speaking with his audience.
He was speaking at them. His inconsistent brand voice buried his products behind walls of text. With 73% (now 81%) of his customers mobile-first, it caused a delay in purchase.

The walls of text meant they had to swipe 3-4 times before finding his top product and another 3-4 times before finding his other recommendations.
Jesse's Teahouse's products with clear value to its customers: 'Good Teatimes Await.'
vision
Align brand voice, boost business
Position the teahouse to be an extension of Jesse sharing and connecting through the joy of tea.

By aligning the brand voice and redesign, Jesse’s followers can easily find and purchase products, which ultimately increases sales.
Launch page »
vision
Align brand voice, boost business
Position the teahouse to be an extension of Jesse sharing and connecting through the joy of tea.

By aligning the brand voice and redesign, Jesse’s followers can easily find and purchase products, which ultimately increases sales.
Launch page »
discovery
Straining through all the content
Time-saving tip: Only read the highlighted words for a summary of this section.
Business Goals
Jesse’s primary goal for his website is to increase sales and profit.

He uses his social media posts to send traffic to his website, meaning everyone who visits the page already has tea on their minds.
Users’ Traits
&
Preferences
Users’ Traits & Preferences
The “tea curious” crowd following Jesse’s Teahouse would rather be told what teas and equipments to get.

They prefer not to research as they’re overwhelmed by the amount of information out there. They want Jesse to tell them what to buy and start their tea journey immediately.
“Previously, I’ve had a little trouble on what to choose, just because it’s a really vast pool. You do a really good job at narrowing the world of tea down to the good stuff too lol, so thanks for that. Really helping me get where I want to be in my tea journey.”
- w.r.
Brand Voice
for
UX Writing
Brand Voice for UX Writing
When you read Jesse’s Teahouse, you can imagine what Jesse is like: a nerdy tea friend who loves to share his new finds.

The brand voice embodies his way of speaking: his words are energetic with liberal use of exclamation marks but still direct and informative.
The tone of voice guideline for Jesse's Teahouse The tone of voice guideline for Jesse's Teahouse
Brand Positioning
To Jesse’s Teahouse customers, other tea websites are overwhelming and imply that they should know enough about tea to find exactly what they’re looking for.

The teahouse stands out to eager beginners because they can immediately get into tea without research nor decision fatigue.

◥   Jesse curates his own starter tea set, starter tea sampler, and combo boxes.
Divider
design
Removing the walls of text
The walls of text blocked Jesse from having a conversation with the audience.

The bounce rate was 39.30%.
By using concise call-to-actions and clean design, the bounce rate fell to 34.22%.
design
Removing the walls of text
The walls of text blocked Jesse from having a conversation with the audience.

The bounce rate was 39.30%.

By using concise call-to-actions and clean design, the bounce rate fell to 34.22%.
The before and after designs
Divider
iterations 1 & 2
Using metrics to boost value
Research told us that tea friends wanted Jesse to tell them what to buy and that they prefer to not research.

So in the first launch, we structured the page with 2 types of sections:

  1. Orange which communicates guidance and social proof
  2. Green where they can purchase products




After launching, the data clearly shows that those who visited the site were less inclined to purchase.
  • The conversion rate decreased from 1.87% to 1.28%.
iteration 1
Iteration 1's information architecture
Evenly mixed sections
Research told us that tea friends wanted Jesse to tell them what to buy and that they prefer to not research.

So in the first launch, we structured the page with 2 types of sections:

  1. Orange which communicates guidance and social proof
  2. Green where they can purchase products
iteration 1
Iteration 1's information architecture
Evenly mixed sections
After launching, the data clearly shows that those who visited the site were less inclined to purchase.
  • The conversion rate decreased from 1.87% to 1.28%.
To not distract buyers and increase the conversion rate, we moved the purchase points (green sections) higher up on the page.



The conversion rate jumped to 1.96% and overall, total sales increased by 18% or $13,898.
iteration 2
Iteration 2's information architecture
Prioritized purchase points
To not distract buyers and increase the conversion rate, we moved the purchase points (green sections) higher up on the page.


The conversion rate jumped to 1.96% and overall, total sales increased by 18% or $13,898.
iteration 2
Iteration 1's information architecture
Prioritized purchase points
outcomes & performance
The numbers (so far)
We launched iteration 1 in December 2021 and iteration 2 in March 2022.
We’ll analyze iteration 2’s final metrics in June 2022.
TOTAL SALES
$220k
18% increase
AVERAGE SESSION DURATION
01:55
We’re seeing tea friends stay engaged on the page longer.
We’re seeing tea friends stay engaged on the page longer.
BREAKDOWN
  • Iteration 2 (so far) ー 2:23
  • Iteration 1 ー 01:42
  • Legacy design ー 01:58
BREAKDOWN
  • Iteration 2 (so far) ー 2:23
  • Iteration 1 ー 01:42
  • Legacy design ー 01:58
AVERAGE ORDER VALUE
$98.77
The orders tea friends place have a higher average value.
The orders tea friends place have a higher average value.
BREAKDOWN
  • Iteration 2 (so far) ー $106.83
  • Iteration 1 ー $92.36
  • Legacy design ー $104.71
BREAKDOWN
  • Iteration 2 (so far) ー $106.83
  • Iteration 1 ー $92.36
  • Legacy design ー $104.71
CONVERSION RATE
1.52%
Tea friends are more likely to buy than before when they use the site.
Tea friends are more likely to buy than before when they use the site.
BREAKDOWN
  • Iteration 2 (so far) ー 1.96%
  • Iteration 1 ー 1.28%
  • Legacy design ー 1.87%
BREAKDOWN
  • Iteration 2 (so far) ー 1.96%
  • Iteration 1 ー 1.28%
  • Legacy design ー 1.87%
next steps
Continuing to improve with metrics
We’re waiting to analyze iteration 2’s performance in June 2022. I conducted a quick retrospective of the progress so far with the Rose, Thorn, Bud exercise.
Rose (wins)
  1. Total sales increased by 18%.
Thorn (challenges)
  1. There are writing inconsistencies (capital vs. lower case, etc.).
Bud (opportunities)
  1. The site’s brand voice is closer to what tea friends are used to when watching Jesse’s videos, but not quite there yet. A brand voice guideline with clear examples may help.
This method helped me identify opportunities to improve Jesse’s Teahouse.

The current priority is to create a branding voice guideline with clear examples so Jesse and his new team can make updates without breaking the dialogue with their audience.
Launch page »