3 of Cups
Exploring the Highly Competitive Realm of Herbalism E-Commerce
Project Snapshot
Client: 3 of Cups Tea — online-only specialty tea shop
Role: UX / Product Designer
Scope: Website UX, ecommerce flows, physical product touchpoints
Duration: January 2025
Tools & Methods: User research, competitive analysis, user flows, wireframes, high-fidelity UI, usability testing
1. Problem & Context
3 of Cups Tea launched as an online-only tea shop with thoughtfully curated physical products but no cohesive digital experience to support discovery, trust, or community-building.
The core challenge was designing an ecommerce experience that:
Communicated the sensory richness of tea in a digital environment
Helped users confidently choose customizable products without in-person guidance
Built a sense of warmth and connection typical of a tea shop — entirely online
The goal was to design a user-centered digital experience that transformed browsing into an inviting ritual, not just a transaction.
2. User Research & Insights
Research Methods
Informal user interviews with tea drinkers and gift shoppers
Competitive analysis of specialty tea ecommerce brands
Review of customer questions and purchasing hesitations common in online tea retail
Key Insights
Users often feel overwhelmed by tea options and terminology.
Shoppers want reassurance: flavor notes, brewing guidance, and social proof.
Many users shop for tea as a self-care ritual or gift, not a commodity.
Primary User Needs
Clear guidance and recommendations
Confidence in purchase decisions
A sense of calm, beauty, and intention while browsing
Details have been modified slightly to protect brand
3. Design Process
Define
Based on research, the design goals were:
Reduce decision fatigue
Elevate product storytelling
Create a soothing, intuitive ecommerce flow
Ideation
Early sketches and flows focused on:
Guided tea discovery
Simplified product comparison
Education-first layouts (before “add to cart”)
Wireframes → High-Fidelity UI
Low-fidelity wireframes tested navigation and hierarchy
High-fidelity designs reflected brand values: warmth, ritual, and accessibility
Typography, spacing, and color palette were intentionally calming to mirror the tea experience
4. Solution Overview
Website UX Features
Homepage: Clear entry points for different user intents (Daily Drinkers, Gift Buyers, New to Tea)
Product Pages:
Flavor profiles and tasting notes
Brewing instructions and ritual cues
Use-case guidance (morning, evening, caffeine level)
Tea Discovery Tools:
Curated collections
Recommendation prompts to reduce overwhelm
Checkout Flow:
Streamlined, distraction-free purchasing
Clear shipping and gifting options
Physical Product Experience (Digitally Supported)
Although the shop is online-only, physical products were treated as UX touchpoints:
Packaging design reinforced brand tone and trust
Product cards and inserts mirrored digital language for continuity
QR elements linked customers back to brewing guides and product stories online
This ensured a cohesive experience from screen to cup.
5. Results & Impact
Early qualitative outcomes included:
Increased customer confidence in selecting teas without in-person assistance
Positive feedback on clarity, calmness, and ease of navigation
Growth in returning customers engaging with educational content
6. Reflection & Learnings
Key takeaways from designing for an online-only sensory product:
Education is essential UX for niche ecommerce.
Calm, spacious design can reduce anxiety and improve decision-making.
Physical products still require intentional UX — packaging, instructions, and follow-up touchpoints matter.
Future iterations could explore:
Personalization based on past purchases
Interactive tea recommendation quizzes
Expanded post-purchase digital content
7. Conclusion
This project demonstrates how thoughtful UX design can translate a tactile, ritual-based product into a compelling online-only experience. By prioritizing clarity, storytelling, and emotional resonance, the 3 of Cups Tea website supports both confident purchasing and long-term brand connection — all without a physical storefront.