Introduction
Setting the Context
In January 2023, Jun Huang of Arcane Herb, a traditional family-owned Chinese herbs business, approached us with an exciting opportunity. After nearly 40 years of serving Chicago's Chinatown with natural health remedies, she and her family were ready to expand their customer base and sell to a broader audience with fresh branding and the launch of a new e-commerce line. They sought our expertise to design a modern website that would provide a seamless user experience, showcase their new brand, and boost sales to reach a new audience.
My Role: Product Designer UX/UI
Dates: January - June 2023
Team: Carrie Webber, Luan L., Sofia D.
Tools Used: Figma, Adobe Fresco, Asana, Slack
Problem
Slow Business Growth
Despite their long-standing success in Chicago, Arcane Herb was experiencing a slowdown. They had a loyal but small customer base that never seemed to expand, keeping the business at a stagnant growth.
Goals
Engage a New Audience
To address this, Arcane Herb wanted to expand its reach beyond the local community and engage a broader audience with a new product line that would allow the business to grow faster. Additionally, they sought to sustain the trust they established through their physical store by conveying their credibility online.
We knew Arcane Herb could engage a new audience with a website designed to foster trust, enable easy purchasing, and educate users about herbal wellness.
1. Foster Trust: Promote credibility with a logical site map, product transparency, verified product reviews, and a referral program.
2. Facilitate Ease: Allow users to easily complete purchases without friction and find new products with familiar interfaces and affordances.
3. Encourage Discovery: Encourage customers to learn about Chinese herbs with a robust herb index and complete product information.
Audience
Who is seeking herbal wellness?
We surveyed 75 people in order to understand exactly who would be the prospective audience for Arcane Herb’s website.
Why a survey? We knew a survey method would provide quantitative data that could help us understand the demographics, motivations, and shopping habits of this new group. It could also help validate that people would want this product.
UX Research Data: Results showed that women were much more likely and more interested than men to try Chinese herbs. Additionally, for people who were very likely to try Chinese herbs, they were spending up to $50 per month on health and lifestyle products. Additionally, some participants reported existing ailments (both congenital and genetic), while others were taking preventative supplements.
Conclusion: Our target audience is women between the ages of 20-50 who already spend money on health products. They have not familiar with Chinese herbs but are open to using herbal remedies to address a health concern.
Conclusion: Our target audience is women between the ages of 20-50 who already spend money on health products. They have not familiar with Chinese herbs but are open to using herbal remedies to address a health concern.
Hypothesis: Users will be cautious to purchase and ingest new products but motivated by recommendations from friends and family, as well as medical professionals.
Result: Our research confirmed our hypothesis that building trust and credibility in order to gain new customers for Arcane Herb would be crucial, especially for those who had never tried traditional Chinese medicine before. We saw that recommendations from friends and family, followed by medical professionals, were important to include, likely in the form of verified reviews, doctor testimonials, and a referral program.
“I want to know the origin of the product, where it comes from, and what third party is testing it.”
- Research Participant
Competitive Analysis
Who else is out there?
A competitive analysis revealed Arcane Herb’s strengths, weaknesses, and areas of opportunity. We looked at four main competitors: Five Seasons TCM, Gaia Herbs, Alkaline Herb Shop, and For the Biome.
Strengths:
- Modern branding sets Arcane Herb apart.
- Brick-and-mortar storefront and access to staff helps build credibility.
- Modern branding sets Arcane Herb apart.
- Brick-and-mortar storefront and access to staff helps build credibility.
Weaknesses:
- Limited information and resources on current website.
- Simple links require too many clicks on top navigation.
- Limited information and resources on current website.
- Simple links require too many clicks on top navigation.
Opportunities:
- Include a 'Shop by Interest' tool and 'Referral' program.
- Highlight verified customer reviews and product origin information.
- Highlight family history and facilitate customer interaction.
Problem Statement
Defining the problem
With a clear problem statement to solve for, we were ready to move forward as a team toward a 'north star' vision.
Information Architecture
Structure that Makes Sense
With research data in mind, I collaborated with Arcane Herb to redevelop their site map to include a suitable classification structure and familiar navigation that would work well for the audience's mental model. Improvements include:
1. Better classification structure and navigation
2. Reduced clicks to complete purchases
3. Enhanced herb information and a highlighted referral program
2. Reduced clicks to complete purchases
3. Enhanced herb information and a highlighted referral program
Ideation and Sketching
Bringing Our Ideas to Life
We combined our sketches to build out a first draft of each of Arcane Herb’s web pages, focusing on the priority features of the website.
Mid-Fidelity Prototype
A Simple Design
A functioning prototype with a modern design, improved navigation, and enhanced credibility.
The mid-fidelity design utilizes a simple and modern design, making it easier to navigate and more pleasing to use. The design also contributes to the credibility of the business.
Usability Tests
Insights from 5 Usability Tests
I put the mid-fidelity product in front of 5 users and observed them using the website as they completed the following 3 task scenarios:
Trust
Referral Program
Task Scenario 1: Show me how you would tell another person about this business in order to recommend a product to them.
Referral Program: Most participants understood the referral program and it was observed that 2 out of 5 people were delighted by the referral credits. However, they expected a unique shareable link and found the process too long. Because of this, we shortened the referral flow and added a unique share link. We believe this word-of-mouth feature will foster trust between our new audience and the website.
Ease
Complete a Purchase
Task Scenario 2: You want to buy turmeric for some inflammation you’ve been experiencing. How would you use the website to buy it?
Product Page: It was observed that 4 out of 5 people were able to easily complete a purchase without friction. However, some users were confused by the term ‘TCM’ and expected to see more product details, including dosage, directions, origin of herb, and related articles. We will define ‘Traditional Chinese Medicine’ and include the origin of the product to increase credibility and trustworthiness.
Quick Shop: Users preferred more info over a carousel of product photos. We removed the ‘Quick Shop’ feature and lead straight to the full ‘Product Page’ instead.
Discovery
Herb Reference Guide
Task Scenario 3: You want to know more about another herb. How would you do this on the website?
Herb Reference Guide: Most users accurately understood this feature as an encyclopedia (or index) where they could discover new products and get detailed info on various herbs. This feature will also help build trust and confidence in Arcane Herb as a brand.
Hi-Fidelity Prototype
A Website Built to Engage a New Audience
As I elevated the mid-fidelity prototype to hi-fidelity, I integrated the insights gained from our usability tests and aligned the design with Arcane Herb's new brand guidelines.
Fosters Trust
Referral Program
A quick process to refer friends and family promotes word-of-mouth credibility. The use of a logical site map and familiar features, along with complete product information and verified product reviews, all contribute to the brand's trustworthiness.
Facilitates Ease
Product Page
The main action for the user (shop) is clear, with a bold button color that contrasts with the background. Customers can easily subscribe to receive regular shipments for each product from this page as well, ensuring regular purchases and repeat clientele.
Encourages Discovery
Shop by InterestBeing able to filter products and shop by interest helps people who aren't familiar with herbs to discover new products. Users can choose their ailment from the left column, then filter for teas, herbs, and supplements.
Encourages Discovery
Herb Reference Guide
This in-house index explains the health benefits of each product and allows customers to discover new herbs. Users can click through a list A-Z or search for something specific if they don't yet know what they're looking for.
Next Steps
Currently in Development
The final body copy and product images from Arcane Herb were received in June. We then coordinated with their contracted engineer to run through the design and communicate clearly about the product specs to ensure a seamless hand-off. We expect the project to be completed in 2024.
