Case Study
Asha Tea House, Reimagined
Client
Asha Tea House
Team
Independent
Timeline
2 weeks
Tools
UX Research, Figma, Optimal Workshop, Notion
Better Ingredients, Better Tea
Asha Tea House is a local tea shop emphasizing third-wave tea and tea ware. I redevelop their e-commerce experience so that their online presence matches the quality of their product and service. This case study follows how I researched and reimagined the Asha Tea House Website.
Why are we here?
In a 2-week design sprint, I improved upon Asha Tea House’s website's overall e-commerce experience. In this case study, you will follow me as I identify and address heuristics, conduct competition research, and restructure the information architecture in order to improve their users’ e-commerce experience.
Prompt
Asha Tea House needs help updating their existing e-commerce shop. Asha Tea House is a locally owned tea shop that sells drinks, tea leaves, and teaware. The owners have communicated that they built their own website but were not pleased with the results. They have plenty of website visitors yet few completed purchases. They have hired me to help them increase conversions, sales, and make their e-commerce experience more user-friendly.
Research
🕵️
Research 🕵️
So, What’s Wrong?
In order to identify user pain points, I conducted a heuristic analysis to find lapses in the website’s design.
Pain Point #1
Confusing navigation.
On the landing page, everything appears to be in order. When you scrutinize the primary navigation, confusion begins. There are three calls to action with similar phrasing in the primary navigation: order, buy tea, buy tea ware.
Pain Point #2
Complicated product organization.
Users are limited to browsing products within secondary categories. These categories range from 2-17 products offering little room to genuinely browse. In addition, a hidden primary categorization page can be navigated with no apparent labeling or organization.
Pain Point #3
Ejection from the website’s environment.
One of the primary navigation buttons will remove you from the website to continue shopping. Not only is this disruptive to the experience, but can confuse users who do not realize that there are two shops that are available on Asha’s website.
Synthesis
🧪
Synthesis 🧪
Meet Our Hero
In addition to the existing prompt, I was given a specific type of consumer that would be shopping on Asha’s website. This consumer was dubbed The Spontaneous Shopper and values finding the unexpected. This consumer was the driving narrative to develop a persona for my users.
Introducing Allison Chen, our Spontaneous Shopper.
Feeling adventurous one day, she decided she wanted to learn to make tea at home. To her dismay, she had a hard time understanding and navigating her favorite local tea shop’s website to begin her tea-making journey.
She wants to support local businesses and learn about the culture of brewing tea.
However, she was pained to discover that her local tea shop was too detailed for her to navigate their website.
She needs a way to learn the basics of tea and to be able to browse and purchase the products that fit her lifestyle and tastes the most.
With a fuller understanding of the users’ pain points and needs through Allison’s eyes, I am able to dictate a problem statement from her perspective.
Problem Statement
Allison needs a way to learn about and purchase tea and tea ware to begin her newfound hobby.
What are others doing
❓
What are others doing ❓
Market Analysis
I created 2 feature inventories identifying industry norms that were relevant to tea and the e-commerce space.
Competitive Analysis
Comparative Analysis
Feature Takeaways
Amidst countless inspiring features that other websites offered, these were what I identified to be the most applicable and impactful.
All Product Pages
In relation to Asha’s complicated product organization, I noticed that other tea e-commerce websites had an all-products page. Despite having more varieties of tea than Asha, they were able to organize them into consumable-sized categories that did not overwhelm the user and allowed them to shop freely.
Quick Add to Cart
What Art of Tea does exceptionally well, having the ability to quickly add items to your cart is a feature that provides users with both the ability to spontaneously add items to their cart and prevents the need to navigate between the shop and product pages.
Dynamic Thumbnail Previews
While Asha already has appealing and aesthetic product images, what made other e-commerce pages stand out were dynamic thumbnails. Remaining static in their idle states they do not overwhelm you when browsing, but as you hover and shift your focus to specific products you visualize and contextualize the product.
Product Reviews
Another simple and common feature that Asha lacks is product reviews. Even with the in-house descriptors of each tea’s flavor profile, having community input allows customers to make more informed decisions when purchasing their tea.
Brainstorming
🧠
Brainstorming 🧠
Sketches
After an extensive overview of the website’s heuristics and inspiration drawn from other e-commerce platforms, I began the most frequented pages.
Home Page
From a card sort, I created a new primary and secondary navigation for the website. I also incorporated features from the competitive and comparative analysis.
Shop Page
I created an all-products shop page and updated the primary and secondary categorization, from the card sort as well.
Product Page
I created a product page layout that accommodates the customizability and variation that Asha’s products have.
Implementations
💻
Implementations 💻
The New Header
From a card sort, I was able to consolidate the primary and secondary navigation categories on the header. In addition, I was able to distill the multiple shopping call to action into two distinct shopping experiences.
Immediate Call to Action
Popular and locally sourced products are featured on the home page, following general e-commerce trends and supporting the user’s need for quick and guided shopping.
Restructured Information Architecture
In an open and closed card sort activity, I received insights on amateur and experienced categorization of Asha’s products. From user data and industry norms, I reorganized Asha’s entire inventory.
Moving Forward
⏩
Moving Forward ⏩
The following are features and ideas that I could not thoroughly flush out for the final prototype due to time and project constraints.
Embedding Square
While conducting the competitive analysis, it became apparent that keeping the entire shopping experience within a website was an issue spanned beyond just Asha. Any business using Square’s POS would redirect to Square’s ordering page. Working with Square to create an embedded store page would facilitate a seamless shopping experience.
Dynamic Thumbnails
Highlighted in the feature inventory, dynamic thumbnails contextualize and elevate the shopping experience. While upholding Asha’s high standard of quality, coordinating the resources to produce this feature went beyond the timeline of this project.
Reflections
🪞
Reflections 🪞
Information Architecture
A major component in the website’s redesign was the evaluation and reorganization of its information architecture. Not knowing where to begin, I rebuilt the website navigation based on data from a card sort of the website’s content. Through this, I learned of the discrepancy between a business and users perspective and its impact on an experience.
Evaluations and Analyses
Prior to this design sprint, the only research method I knew was conducting user interviews. In addition to card sorting, I conducted a heuristic evaluation and competitive/comparative analyses. These focused investigations taught me how to look for and identify design features to improve my prototypes. This practice taught me the necessity to constantly learn and stay updated on design trends and principles
Generalizations and Validations
My impression of research was founded on the belief that it must be derived from quotes and observations directly from users. Throughout this project, I was exposed to the many direct and indirect methods by that generalizations about users can be formed. I found that while research comes in many forms, whether they are found from users, analyses, or trends, it will fundamentally need to be scrutinized through testing and replication to be validated.