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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
I whiteboarded the user flow for the shopping and checkout process on the Dragon Herbs site to figure out where I could streamline it.
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.
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.
I also sketched navigation schema and transferred that sketch to Sketch. See the PDF of my final navigation schema.
In preparation for final mockups, I put together some color palettes I thought would be a good fit for an upgraded Dragon Herbs aesthetic.
Here is a side-by-side comparison of the current Dragon Herbs website and my redesigned homepage wireframe.
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.
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.
I came to the end of the time I had for this first iteration. My punch list for my next iteration includes: