High Garden Tea Website
Redesign of current website to provide consumers with a welcoming, trusted place to learn more about tea and to purchase locally-grown, high-quality products
Challenge: Coffee is the preferred drink in America, but tea is starting to gain traction due to varying tastes and health/wellness benefits. There is a knowledge gap when it comes to the varying types of teas, caffeine levels, tastes and brewing methods. The culture of tea can seem overwhelming to consumers, so most teas are left unexplored.
Goal: High Garden hopes to use their website/online store to increase overall awareness and knowledge of tea while encouraging consumers to choose HG as their primary source for quality, locally-grown teas and herbs. All the while, the owners want to maintain the High Garden brand ethos: welcoming, trusted, quality-driven, local and health-conscious.
High Fidelity Mockups
Founded in 2012, High Garden serves as an “old fashioned, apothecary-style tea shop" that specializes in hand-prepared herbal infusions and directly sourced whole-leaf teas. The owners seek to be a part of the online shopping market without losing the experience of a locally grown, artisan tea shop.
The current High Garden website lacks a cohesive design aesthetic, but more importantly, the user experience is stale, directionless and content-heavy. High Garden offers exceptional products, extensive knowledge of tea and genuine customer service, so I feel like the site could could use a revamp to communicate their strengths.
I trust the tried and true framework of Design Thinking: 1) understand, 2) explore, and 3) materialize. To help analyze and organize the framework is broken down into six phases: empathize, define, ideate, prototype, test and implement.*
SECONDARY RESEARCH – tea industry
I wanted to begin my research by looking into the tea industry itself – current trends, predictions of the industry and any influencers who have a similar brand ethos to High Garden. Majority findings showed the following:
- Rise of the conscious consumer
- Flavor is winning
- Great year for green tea
- Using tea for health/wellness/lifestyle
- Companies following these trends and providing these to their consumers include Leaves and Flowers, Samovar Tea, Tea People, Rare Tea Company and Art of Tea
SECONDARY RESEARCH – ONLINE SURVEY
Next, I gathered more information on the customer's tea drinking and tea shopping habits. I asked questions regarding the experience with in-store buying vs. shopping online, and if there was any preference.
Buys tea for enjoyment (Half of users for benefits of tea)
Importance on availability of preferred tea with a wide variety of options
Wants to explore, taste and see before buying
Desires quality and freshness
Desires knowledge of tea prep / brew
Desires knowledge of tea sourcing
Buys at grocery stores + specialty tea shops
High Garden is the only dedicated tea shop / apothecary in Nashville, so I looked online for indirect competition. Art of Tea, Mountain Rose Herbs and Bulk Herb Store seemed to have a similar ethos and product offerings, so I compared navigation, overall features and product page features here.
Patterns in the user data suggested two main types of tea shoppers. Violet represents the tea drinker enthusiast who enjoys exploring the world of tea, regardless of price. Rebecca is the occasional tea drinker, knows what she likes and prefers to purchase tea while she's running other errands.
The strategy blueprint allowed the opportunity to explore options. I tried alternatives, crossed some items off, reworked ideas, and start over again. I prioritized the top challenges of the user + bringing High Garden to the online sales world.
My competitive research and user data helped to showcase the most important pages on the sitemap. Visit, Shop and Learn are presented as the most prominent, since these are the main goals of the business and user.
High Garden has all the "feels" of a rustic atmosphere in their store, but their current logo needed a modern update. I explored four variations with modern and rustic typefaces and explored organic and curved shaped herbs/flowers/leaves. Natural, organic, holistic and simple – these represent the ethos and style that High Garden offers. An assortment of stock photography and current images on the current website helped with the color palette and rustic/brush stroke edges. The color green is highly associated with nature and health, encouraging a sense of compassion, kindness and nurturing, so this seemed to be a great choice for the brand.
BRAND STYLE TILE
LOW FIDELITY WIREFRAMES
- Simple navigation with drop down, search and sign in/cart on every page. Minimal navigation to simplify and match HG’s business goals.
- Three rotating images to give user brand ethos - highly curated photography with HG’s taglines, monthly specials, events, etc.
Spotlighting HG’s mission statement, what sets them apart, what they offer, culture.
Shop section with best selling or featured products or categories; quick view option for layover with info and add to cart
HG has a growing number of Instagram followers with increased activity – featured with handle and recent posts
- Sub navigation showing all categories. Underlined category based on product choice.
Three images to be enlarged. Prominent product name, reviews and select/add to bag.
Each product has taste, ingredients, caffeine level and steep instructions – all seen in user data.
Suggestions based on the chosen product. Usually in the same category and can also show a sample pack to encourage exploring variety of tea.
HIGH FIDELITY WIREFRAMES
PRODUCT SCREEN WITH NAVIGATION
HIGH FIDELITY USABILITY TESTING
My main focus in the testing here was to observe the ease and understanding of three things:
- High Garden as a business – what they offer, the feel, the ease of learning about and buying tea
- Navigation and element
- Adding two items to the cart from two different pages
I was able to perform in-person testing with four tea drinkers – three novice and one experienced. The process was extremely enlightening and showed some common themes:
- Universal "categories" of teas and the many varieties within is not well-known
- Surprisingly, my users kept asking about caffeine levels
- Everyone loves the idea of sample packs
- Two of my three main nav headings are confusing
- There's little knowledge of the wellness / health benefits of tea and herbs