High Garden Header.png

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

 

PRoject details

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. 

 

CONTRIBUTION

User Research
Competitive Analysis
Persona Development
Task Analysis
Information Architecture
Branding
Visual Design
Wireframes
Usability Studies
High Fidelity Mockups
 

 

TOOLS USED

Sketch
Illustrator
Photoshop
Invision

 
 
 

overview

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.    

 

PROCESS

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.*

EMPATHIZE

bagging-hands-only-shot.jpg
 

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:

  1. Rise of the conscious consumer
  2. Flavor is winning
  3. Great year for green tea
  4. Using tea for health/wellness/lifestyle
  5. 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
 
 
“The trend is turning away from gimmicky packaging and lab created “natural” flavorings that treat us like children. Consumers are searching for better and better tea and with that comes great craft and a value market.”
— Henrietta Lovell, Rare Tea Company
 

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. 

Majority Findings

  • Buys tea for enjoyment (Half of users for benefits of tea)

  • Prefers convenience

  • 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

 

DEFINE

leah-blending.jpg
 

competitive analysis

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.

 
 
 
 
 

personas

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.

 
 
 
 
 

STRATEGY BLUEPRINT

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.

 
 

IDEATE

dapo-oni-100847.jpg
 

SITEMAP

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.

 
 
 
 

BRANDING

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.  

 
 

LOGO EXPLORATION

 
 
 

BRAND STYLE TILE

 
 
 
 

LOW FIDELITY WIREFRAMES

 

HOME SCREEN

  1. Simple navigation with drop down, search and sign in/cart on every page. Minimal navigation to simplify and match HG’s business goals.
  2.  Three rotating images to give user brand ethos -  highly curated photography with HG’s taglines, monthly specials, events, etc. 

  3.  Spotlighting HG’s mission statement, what sets them apart, what they offer, culture.

  4.  Shop section with best selling or featured products or categories; quick view option for layover with info and add to cart

  5.  HG has a growing number of Instagram followers with increased activity – featured with handle and recent posts 

 
 
 
 

PRODUCT PAGE

  1. Sub navigation showing all categories. Underlined  category based on product choice.

  2. Three images to be enlarged. Prominent product name, reviews and select/add to bag. 

  3. Each product has taste, ingredients, caffeine level and steep instructions – all seen in user data. 

  4. 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

 
 
 
 
 

HOME SCREEN

 

PRODUCT SCREEN WITH NAVIGATION

 

CATEGORY SCREEN

 
 
 

HIGH FIDELITY USABILITY TESTING

My main focus in the testing here was to observe the ease and understanding of three things:

  1. High Garden as a business – what they offer, the feel, the ease of learning about and buying tea
  2. Navigation and element
  3. 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:

  1. Universal "categories" of teas and the many varieties within is not well-known
  2. Surprisingly, my users kept asking about caffeine levels
  3. Everyone loves the idea of sample packs
  4. Two of my three main nav headings are confusing
  5. There's little knowledge of the wellness / health benefits of tea and herbs