UX/UI Design
Mrs. Kelly’s Tea Website Redesign: Experience the New Look
M
r
s
.
K
e
l
l
y
’
s
T
e
a
01
Project Overview
We were tasked with analyzing and improving the website navigation and information architecture for the local business, "Mrs. Kelly’s Tea." This project focuses on delivering a seamless digital experience through a full website redesign and mobile optimization.
Goals
Enhance website usability and accessibility to create a better customer experience.
Strengthen Mrs. Kelly’s Tea’s online presence and drive business growth through optimized design and functionality.
Role
Tools
Figma, Adobe Photoshop & Illustrator
Duration
Year
UX Designer
8 weeks
2023
1
4
3
2
Discover
Design
Primary Research
User Interview
Website Analysis
Secondary Research
Existing Problem
Market Research
Competitive Analysis
Design Guide
Mood Board
Typography
Iconography
User Flow
UX Writing Document
Information Architecture
Sketeches & Wireframes
Home page Design
Product Detail Page Design
Usability Testing
A/B testing
Analyze Constructive Critiques
Final Prototype
Mockups
Final Design
Before & After Designs
Process Book
Analyze
Deliver
How did we get there?
02
Background
Mrs. Kelly's Tea is a Minneapolis-based wholesale tea leaf supplier, offering loose leaf tea to both businesses and individual customers in the downtown area
Business Goals:
Strengthen Mrs. Kelly’s Tea’s brand identity.
Increase customer engagement, satisfaction, and conversions.
Boost online transactions.
Create a human-centered design for local business growth.
User Goals:
Simplify shopping, searching, and buying.
Explore and enjoy unique tea culture.
Access info about offline events quickly.
Understand the brand’s services clearly.
03
UX Research
Before redesigning Mrs. Kelly’s Tea website, we need to understand the U.S. tea market, why people want tea, and what they look for when purchasing it.
Target Audience
Over 80% of consumers drink tea, with millennials leading at 87%, while Gen Z is rapidly catching up.
Tea’s Popularity
“About 84% of all tea consumed was black tea, 15% was green tea, and the small remaining amount was oolong, white and dark tea…”
Target Audience
Tea’s Popularity
Size of Tea Market
In 2023, Americans consumed almost 86 billion servings of tea, or close to 4 billion gallons.
Why Tea?
“...a variety of teas may boost your immune system, fight off inflammation, and even ward off cancer and heart disease.”
Size of Tea Market
Why Tea?
04
Interviews and Analysis Insights
05
Problem
The current Mrs. Kelly’s Tea website is unorganized, lacking the simplified features that users expect from an e-commerce experience. Navigation is confusing, making it difficult for customers to easily browse products or understand the company’s offerings. Additionally, the website fails to clearly communicate Mrs. Kelly’s mission and the unique value of the products, leaving users with an unclear understanding of the brand and its purpose.
How can we redesign the Mrs. Kelly’s Tea website to improve user engagement, simplify shopping, and strengthen the brand’s identity?
We focused on key features to boost engagement and improve user experience, including:
-
User-Friendly Desktop Navigation: Simple menus, quick search, and responsive design for seamless browsing on all devices.
-
Engaging Product Presentation: High-quality images, detailed descriptions, and flavor profiles to enhance shopping experience.
-
Clear Brand Story & Educational Content: Showcase Mrs. Kelly’s mission while offering brewing guides and tea culture insights.
-
Smooth Product Page: Secure checkout with detailed descriptions, high-quality images, and customer reviews to build trust.
06
Examine Current Website
Recipes For You
4.6
Drunken Noodles
Thai Cuisine
2
1
4.2
Crab Udon Soup
Vietnamese Cuisine
Top Ten Today
Because You Like Birria Tacos
What are you craving?
3
4.8
Birria Tacos
Mexican Cuisine
4
4.1
Pasta Carbonara
Italian Cuisine
Crab Udon Soup
Banh Canh Cua
Banh canh cua (which translates to crab udon soup) is a noodle soup made with a thick, tapioca broth served with banh canh (tapioca noodles) and topped with pork, shrimp, and crab. The broth has a bright, orange color with a thick, sticky texture. The broth texture almost matches the texture of the tapioca noodles which are really chewy. Traditional toppings for banh canh cua are pork, shrimp, crab, and minced green onions. But like every Vietnamese dish, there are variations depending on the recipe you’re using. Other toppings I’ve seen used are fish balls, blood cake, quail eggs, and even Chinese fried dough (Youtiao).
Place of Origin
Region or State
Type
Vietnamese
Soup
Southeast Asia
996 kcal
User Review
Budget
Duration
Cuisines
& Up
& Up
& Up
& Up
Under $25
$25 to $50
$50 to $100
Vietnamese
Thai
Mexican
Italian
>15 Minutes
>30 Minutes
> 1Hour
Go
$Min
$Max
Filter
All Ethnic Cuisines
User Review
Budget
Duration
Cuisines
& Up
& Up
& Up
& Up
Under $25
$25 to $50
$50 to $100
Vietnamese
Thai
Mexican
Italian
>15 Minutes
>30 Minutes
> 1Hour
Go
$Min
$Max
Filter
Recipes For You
4.6
Drunken Noodles
Thai Cuisine
2
1
4.2
Crab Udon Soup
Vietnamese Cuisine
Top Ten Today
Because You Like Birria Tacos
What are you craving?
3
4.8
Birria Tacos
Mexican Cuisine
4
4.1
Pasta Carbonara
Italian Cuisine
Crab Udon Soup
Banh Canh Cua
Banh canh cua (which translates to crab udon soup) is a noodle soup made with a thick, tapioca broth served with banh canh (tapioca noodles) and topped with pork, shrimp, and crab. The broth has a bright, orange color with a thick, sticky texture. The broth texture almost matches the texture of the tapioca noodles which are really chewy. Traditional toppings for banh canh cua are pork, shrimp, crab, and minced green onions. But like every Vietnamese dish, there are variations depending on the recipe you’re using. Other toppings I’ve seen used are fish balls, blood cake, quail eggs, and even Chinese fried dough (Youtiao).
Place of Origin
Region or State
Type
Vietnamese
Soup
Southeast Asia
3 hr 30 min
All Ethnic Cuisines
07
Creative Vision & Vibes
Vietnamese Cuisine > Bánh Canh Cua
Crab Udon Soup
Ingredients
Toppings (4)
Garnishes (4)
Utensils (6)
8 oz (1/2 lb)
Diced Carrots
4 medium size
Eggs
16 oz (1 lb)
Crab Meat
20 mushrooms
Shiitake
5-7 bowls
$2.99
Organic Carrots
lb
$0.99
Imperator Carrots
Baby Carrots
$3.70
Nantes Carrots
$1.29
each
each
bag
My Cart
2
Items Selected
Total
$18.15
3
Place Order
Organic Carrots
$5.98
$2.99 per lb
Remove
2
Shiitake Mushrooms
$3.18
$1.59 per case
Remove
Crab Meat
$8.99 for 8 oz
Remove
Broth (12)
Vietnamese Cuisine > Bánh Canh Cua
Crab Udon Soup
Ingredients
8 oz (1/2 lb)
Diced Carrots
Toppings (4)
Garnishes (4)
Utensils (6)
4 medium size
Eggs
16 oz (1 lb)
Crab Meat
20 mushrooms
Shiitake
5-7 bowls
$2.99
Organic Carrots
lb
$0.99
Imperator Carrots
Baby Carrots
$3.70
Nantes Carrots
$1.29
each
each
bag
My Cart
2
Items Selected
Total
$18.15
3
Place Order
Organic Carrots
$5.98
$2.99 per lb
Remove
2
Shiitake Mushrooms
$3.18
$1.59 per case
Remove
Crab Meat
$8.99 for 8 oz
Remove
Broth (12)
Recipes For You
Top Ten Today
Because You Like Birria Tacos
What are you craving?
3
4.8
Birria Tacos
Mexican Cuisine
4
4.1
Pasta Carbonara
Italian Cuisine
4.6
Drunken Noodles
Thai Cuisine
2
1
4.2
Crab Udon Soup
Vietnamese Cuisine
User Review
Budget
Duration
Cuisines
& Up
& Up
& Up
& Up
Under $25
$25 to $50
$50 to $100
Vietnamese
Thai
Mexican
Italian
>15 Minutes
>30 Minutes
> 1Hour
Go
$Min
$Max
Filter
All Ethnic Cuisines
08
Site Map and Wireframes
We have carefully organized and prioritized the sections based on their importance, determining which content should be highlighted and which would be more effective in the footer. As a result, we have identified the following:
To start our brainstorming on which wireframe layout would look the most appropriate for the homepage, we sketched 3 different wireframe sketches and the benefit of each.
Crab Udon Soup
Prepping the broth
Chop mushrooms, cilantro, scallions, carrots, pork belly, shallots, and onions on a wooden cutting board, then gather all the chopped ingredients into a bowl.
2 Hr 8 Mins Left
Instructions
Ask me anything...
Crab Udon Soup
Prepping the broth
Mix paprika, onion powder, garlic, white pepper, salt, sugar, sesame oil, fish sauce, soy sauce, and hoisin sauce together in the same bowl.
1 Hr 48 Mins Left
Instructions
Ask me anything...
Crab Udon Soup
Meat Topping
Heat a frying pan over medium heat and cook all the meat topping ingredients until they are crispy and golden brown.
1 Hr 34 Mins Left
Instructions
Ask me anything...
okie thanks homie!
Does it matter which item I cook first?
Cook the ingredients in the following sequence: mushrooms first, then carrots, followed by eggs, and finally, crab meat.
1 Hr 21 Mins Left
Instructions
Crab Udon Soup
Meat Topping
09
Wireframe to UI
We decided to move forward with the "wild" wireframe because we believe a more immersive and interactive homepage with carousels, educational content, and product advertisements will enhance user engagement and make the website stand out.
Educational sections highlight the relevance of tea and its benefits to customers.
Action buttons like "Shop Now" or "Learn More" improve UX by guiding users, boosting engagement, and increasing conversions.
Customer reviews showcase reliability, product quality, and help build a strong community around the business.
@shayayeaye1
Sous Chef
Shayla Taylor
Joined: March 1, 2024
48 Dishes Cooked
Master Chef
Chef de Cuisine
Sous Chef
Commis Chef
Chef de Partie
Kitchen Apprentice
Novice Newcomer
Reward System
My Rewards
Peanut allergies
Lactose intolerant
Hates any sauces
Preferences
Soy allergies
Hates spicy foods
Loves seafood
0/1
1/3
Sous Chef: Pick 5 weekly
50% off any dish groceries (Up to 5 servings)
Free delivery
2/5
1/3
$10 off groceries
25% off at checkout
0/3
2 free mystery ingredients
A clear, simple backgrounds photos to ensures customers know exactly what they're purchasing while making shipping and returns information easily accessible for a hassle-free shopping experience.
Detailed insights on why Mrs. Kelly’s Tea stands out, including the types of tea in each products and their unique benefits.
In the case of China Rose Tea features a black tea base, allowing customers to scroll and learn about its specific benefits and characteristics.
After sharing our first UI design draft with over 30 people, we organized the feedback into three categories:
Before - Hero Page
Final - Hero Page
Before - 3 Steps Guide
Before - 2nd Revision
Final - 3 Steps Guide
Before - Review Page
Final - Review Page
We incorporated the feedback and revised our final UI design, shown below:
A clean white background keeps the product images professional and makes them stand out against scenic photos.
A minimalistic hero design enhances the bold statement title while evoking a luxurious and calming ambiance.
A carousel feature highlights top products, including best sellers and highly rated teas, with brief descriptions to engage customers.
Consistent color schemes in educational sections highlight the beauty and essence of tea.
Having similar Illustrations can maintain a unified theme throughout the website, enhancing cohesion and sparking user interest.
Displaying real buyer testimonials and providing a space for reviews enhances trust and credibility for the business website.
Visual illustrations highlight key product features and benefits, helping buyers determine if it meets their needs.
Real-life product photos and customer testimonials provide buyers with confidence and assurance in their purchase.
Showcasing and recommending related products with similar images and backgrounds ensures the site remains cohesive and consistent with its theme.
10
Post Design Reflections
My Key Takeaways
-
Tea websites must highlight health benefits and product education beyond standard e-commerce sections.
-
Educational sections help tea brands stand out by informing customers about tea types and benefits.
-
A consistent color scheme with well-chosen contrasts enhances the natural tones of tea.
-
The hero section needed to make a strong impression while staying luxurious and calming.
Next Steps
-
Create a dedicated page to share the story behind Mrs. Kelly’s Tea and its mission.
-
Add e-commerce promotion banners on the landing page to boost engagement and highlight special offers.
-
Design a browsing page showcasing all tea products and accessories for easy navigation.