0%
100%

Dragon Herbs

Client:
This is a spec project with a focus on Dragon Herbs
Year:
2018
Project type:
Website redesign
Project duration:
3 weeks
Role:
UX Designer, UX Researcher, Information Architect
Contributors:
Solo project
Tools used:
Docs, Sheets, Keynote, Post-Its, Realtime Board, Index cards, Audio Recorder, QuickTime, Sketch app, InVision
Visit Project:
Link

Overview

Dragon Herbs is an L.A. based vendor of tonic herbs, superfoods and other natural and holistic East Asian remedies. My objective was to increase their website usability and online customer experience.

Challenge

How might we help users scan through products and navigate the Dragon Herbs website so they quickly and easily find their product and check out?

Design Goals 

  1. Streamline the information architecture to help customers find items easily 
  2. Redesign the homepage so customers know where to look to find what they want
  3. Optimize the checkout process to increase completion of sales

Discover

Evaluation & analysis

I kicked this off with a Heuristic Evaluation using the LEMErs framework and found issues with the site's branding, content, font-size, and product placement. 

There were also some very unfriendly error messages and no real validation to keep users from triggering these errors. You can see a sample of my Heuristic Evaluation below.

Sample heuristic evaluation

Then, I compared the Dragon Herbs site to two direct competitors and two indirect competitors and found the site did not stand up to the features these other sites offered. 

Direct competitors, East Earth Trade Winds and Chinese Herbs Direct, had much simpler navigation. 

Their indirect competitors, Natural Partners and Washington Homeopathic Products, were even stronger, offering many features that made using their sites effortless and enjoyable. A sample of my full analysis is below.

Sample competitive and comparative analysis
Sample C&C analysis

User interviews

Next, I talked to people face-to-face to find out what they thought about Dragon Herbs. I interviewed four people interested in natural remedies and alternative medicine. 

Fifty percent of interviewees had autoimmune diseases and this was the specific reason for their interest in homeopathic and non-western medicine. 

One hundred percent of interviewees suggested they would leave the Dragon Herbs site upon loading the homepage.

A plum colored field with the title "Listening to the User" followed by four quotes from users unhappy with the Dragon Herbs user experience
What users thought about the Dragon Herbs online user experience

During these interviews, I discovered something interesting – the brick and mortar experience of Dragon Herbs was very different from their online experience. The local store was spacious, inviting, beautifully decorated and attended by helpful staff. 

It stood in stark contrast to the website, which was cluttered and off-putting, employing a mish-mash of Orientalist design elements and an unattended live chat feature. I was excited to elevate the online experience to the level of the brick and mortar store.

Define

User persona & story

I started by creating the user persona of Susan Cooper, a 40-something web analyst who is looking for natural health alternatives to her prescription medication and wants to find effective, high-quality products fast.

User persona, Susan Cooper

Then, I developed a user story for Susan, a scenario where she would interface with the Dragon Herbs website and where I could begin investigating her experience.

Susan is shopping for a natural health alternative to her prescription medication and wants to compare products so she can quickly buy the most effective one for her needs.

Journey map

With the user story in mind, I created a journey map. As our user persona, Susan Cooper, feels her way through the Dragon Herbs site, she experiences many ups and downs. There are several points at which Susan has very strong motivation to simply give up and leave the site.

Customer journey map
Susan Cooper's journey with Dragon Herbs

Feature prioritization

After developing Susan Cooper and mapping out her journey, I had a strong basis to recommend features for priority implementation, including adjusting font size, simplifying content and navigation, rebranding, and adding product reviews.

Feature prioritization diagram
Feature prioritization

Develop

Information architecture

Now it was time to get down to brass tacks. Because the Dragon Herbs site had a sprawling architecture, I knew I had my work cut out for me. Fortunately, I have years of experience tidying up unfriendly information architecture.

Card sorting

I card sorted with three users to gain insights on what navigation items were most important and needed to be displayed prominently, as well as what product inventory content they wanted to see most when shopping for products. 

While the product inventory card sort was useful, the results of my site navigation card sort were unclear and I knew I'd need to start by using my best judgment and then validating my assumptions through user testing.

Yes, that's my foot

Sitemap

I audited the Dragon Herbs site (over 300 pages and 500 files), recommended re-evaluation / deletion of a few pages, and merging of several others. 

The original sitemap had a very flat structure, offering up too many choices to visitors. The site overall needed content strategy to really clean up the pages and would benefit from lean content.

Revised sitemap

User flows

I whiteboarded the user flow for the shopping and checkout process on the Dragon Herbs site to figure out where I could streamline it.

A person whiteboarding a checkout user flow
I had fun!

Then I researched and ideated on a flow that take the user to the success point faster. While I was at it, I added a flow allowing a visitor to sign up for notifications when an out-of-stock item gets restocked. I succeeded in reducing the checkout process from 5 steps to 3 steps. 

A comparison between the final revised 3-step checkout process and the old 5-step checkout process

Wireframes & navigation schema

I sketched and then Sketched wireframes for five pages and additional ones to cover user interactions on those pages. 

Pages included are: homepage, product listing page, product detail page, shopping cart page and checkout. View a PDF of the wireframes.

Low-fi wireframe thumbnail sketches

I also sketched navigation schema and transferred that sketch to Sketch. See the PDF of my final navigation schema.

Sketch of navigation schema
First draft of nav schema

Branding

In preparation for final mockups, I put together some color palettes I thought would be a good fit for an upgraded Dragon Herbs aesthetic.

A palette based on the interior design of their brick and mortar store
A palette using colors selected from their current web design
A palette based on their popular Goji berries

Deliver

Here is a side-by-side comparison of the current Dragon Herbs website and my redesigned homepage wireframe.

Before and after comparison

Prototype

I used InVision to create my initial prototype. The prototype demonstrates the shopping cart popup, product modal, mega menu and the three step checkout process I designed.

 

User testing

Using my prototype, I tested with one user who power shops for alternative medicine. Her feedback was very positive with comments on the redesign being "better" and "much more modern". 

However, my treatment for the required fields read as unorthodox, something I want to address in my next iteration, in addition to adding more content screens.

Next steps

I came to the end of the time I had for this first iteration. My punch list for my next iteration includes:

  • Rebranding: select final color palette, potentially redesign logo
  • Full color mockup and prototype
  • Content strategy: streamline content further
  • Product strategy: re-evaluate product lines and naming
  • Mobile app

See my other work

Blizzard | MLG

I assisted MLG with the redesign of key product experiences and features.

The Commune (@Medium)

I participated in the 2018 SOLA/HACK design hackathon for South LA.

Bird Tour

We integrated a new self-guided tour feature into the existing Bird app.