Shantai Coffee
Shantai Coffee is a specialty coffee brand. It sells coffees and artisan pieces online and wants to open a professional channel for cafés and related businesses.
VISIT WEBSITE
CONTEXT
With specialty coffee, the difference is not visible in a photograph: it lies in the origin, altitude and process. Explaining this without overwhelming people is part of selling it online.
I designed and developed Shantai’s e-commerce website with Framer and Shopify. The shop had to sell to consumers while welcoming its first professional customers, conveying the ritual and calm that define the brand.
PROBLEMS AND GOALS
Shantai was entering a market full of specialty coffees with similar messaging. It needed an online shop explaining its differences — greater balance, lower caffeine and high-altitude cultivation — turning interest into purchases and attracting its first wholesale partners.
Problems
A market with similar messages
Origin, artisan roasting, SCA scores… almost every specialty brand tells a similar story. Shantai needed its own reasons to stand out.
Confusion over variants blocked purchases
The differences between coffee variants were not clearly explained. Customers reached the basket unsure what they were buying and left before completing their order.
Two audiences on one website
The shop targets consumers, but Shantai also wanted to launch a wholesale channel with no partners yet. Both audiences needed to coexist without losing the focus on sales.
Goals
Make coffee easier to choose and reduce purchase abandonment
A smooth, reliable e-commerce experience connected to Shopify, with the aesthetic quality of a specialty brand.
Explain the reasons behind Shantai
Make its differences visible — balance, lower caffeine and altitude — so customers understand what they are buying and why it is worthwhile.
Attract the first wholesale partners
Give the professional channel visibility and make it easy for cafés and related businesses to contact Shantai.
SOLUTION
Brand storytelling combined with the effectiveness of Shopify e-commerce.
Every coffee has a story
Every product presents its story and key information visually.
A clear, guided purchase
Explain the differences between coffees, simplify variant selection and show a clear order summary before payment.
Wholesale and School
One section to attract partners and another with short coffee tips.
Serene Awakening
A warm, minimal aesthetic: origin photography, clean spaces and an unhurried pace.
RESEARCH
Before designing, I analysed what people need to know to buy specialty coffee online without smelling or tasting it. Their questions fell into four areas.
Flavour
- What does this coffee taste like?
- Is it for espresso or filter brewing?
- What is the difference between Bourbon and Geisha?
Quality
- What makes it different from other specialty coffees?
- Where does it come from and how is it grown?
- What does its SCA score mean?
Purchase
- Which size and preparation suit me?
- How much is delivery and when will it arrive?
Experience
- How do I brew it at home?
- Are there accessories or tips to explore further?
Insights
Without tasting the coffee, flavour needs to be communicated through clear words and information.
The differences — balance, lower caffeine and altitude — need to be visible, rather than hidden.
Choosing size and preparation should be as simple as in any leading online shop.
Video advice builds trust and supports customers beyond the first purchase.
DESIGN DECISIONS
How can we sell coffee people cannot taste while preserving Shantai Coffee’s sense of calm?
Explain the coffee with the same clarity as the brand experience: tasting notes, visible differences, frictionless shopping and a clear route for professional partners.
A product page like a tasting
Tasting notes, profile, origin, altitude, caffeine and SCA score help customers choose without tasting.
Product page · Tasting notes · Coffee profile
Differences in the foreground
Balance, lower caffeine and high-altitude cultivation have their own homepage section explaining what makes Shantai different.
Home · “More than specialty”
Choose confidently before paying
Organise size and preparation options into clear steps with understandable labels.
Variant selector · Basket
Open the professional channel
A Wholesale section introduces Shantai’s philosophy to cafés and related businesses, attracting early partners while keeping the shop central.
Wholesale · “Become our partner”
CONCLUSION
Shantai Coffee’s new website shows that e-commerce can sell while telling a story. By translating flavour into clear information, highlighting the brand’s differences and simplifying shopping with Shopify, it turns interest in specialty coffee into orders and welcomes professional partners while retaining Shantai’s calm and care.
Learnings
Sell what cannot be tasted
Without smell or taste, the challenge was translating a sensory experience into useful information. The product page became central to the project.
Storytelling and conversion can coexist
The brand needed calm and space; the shop needed clarity and speed. Finding that balance was the design’s central challenge.
Design for the system
Products, variants and content live across Shopify and Framer. Reusable components allow the brand to grow without rebuilding the website.
Designing and developing together
Handling development allowed me to resolve the Shopify integration and adjust animations and responsive behaviour on the real website.
Next steps
Measure conversion
Analyse the purchase funnel — product page, basket and checkout — to identify where sales are lost.
Improve the product page with data
Test variations in how flavour and variants are presented to see which best support decisions.
Measure the wholesale channel
Track enquiries from the Wholesale section and refine the message to attract the first partners.
