Dr. John's

Role

Lead UX Designer

Medium

Responsive E-Commerce Site

Contact Me

Background Information

Requirements

The solution needed to work with Shopify, preferably it would work with a template to save development costs.

The solution cannot allow users to reduce their monthly payments —increasing the monthly payment, however, is allowed and encouraged.

The Current Site

Client's Preferences

What was unique about this project, was the client's initial ask of redesigning their website to the style and looks of two particular sites, Jeni's Ice Cream and Hershey's. The client was not insistent on these wishes but I knew that the client would want to have sufficient evidence for any design decision that did not follow the look of these two sites.

The client envisioned the new homepage to look like Hershey's, in terms of visual style and function. The client wanted more banners to promote their products and bigger hero images. The research we uncover later on led us to back away from this particular design.

Content Analysis & Site Evaluation

I took an extensive look at Dr. John's current site and content to understand the site's current findability and usabilty. Whereas the client originally wanted a visual redesign, I found several red flags that made me believe that the site needed more than a superficial makeover.

Value Proposition Is Not Noticeable

Throughout the homepage, the only mention of the word 'sugar-free' is located below the hero image and above the three products. With so little positive space and two attention demanding elements surrounding it, I believed that the value proposition would go largely unnoticed.

Inconsistent Naming Structure

Some products veer on being too descriptive, while others are extremely short. When viewed as a group, it can confuse users and make the experience seem disorganized.

Menu Items Are Cutoff By The Fold

The product menu list is so long that 3 to 4 menu items get cut off by the fold. In order to navigate to these items, users have to scroll down while keeping the product menu list active. The difficulty and inconvenience of reaching these items, I theorized, would have a profound impact on the pageviews and conversions of these items.

Ordering Process Lacks Visual Cues & Standard Conventions

I questioned whether users could visualize 8 oz, 1 lb, and 1.5 lbs of candy and if they preferred actual amounts IE 20 pieces. I also noted that the add to cart functionality lacked an effective signifier that told users that an item was added. Hitting the add to cart button triggered an brief animation that changed the button text to 'Added to cart' and changed the color of the button. After a few miliseconds the button then went back to its normal state. The unusual location and medium of the signifier, the brief time that it was active and the act of reverting back to its normal state made me believe that users would not know if an item was added to their cart.

Heatmap Analysis

Current Site Heatmap

Previous Site Heatmap

Looking at both heatmaps revealed that the previous site was more effective in that it got users to engage with more of the site's important elements. The product categories seemed to be more effective in getting users to continue to scroll down, whereas the new site replaces this feature with an awkward blank space. The heatmaps also made me wonder if there was value in the product categories in that it conveyed to users the products that Dr. John's sold and served as an important navigational element.

Performance Analysis

6.29%

Conversion Rate

$59.98

Average Cart Value

52.59%

Bounce Rate

60.0%

New Users

The first thing that should be said is that Dr. John's has a stellar conversion rate. For reference, a strong e-commerce rate is around 2%. The product's niche market and its strong marketing affiliation with Dentists may be the reason for such a high rate. One area that can be improved upon is the bounce rate, which sits at 52.6%, an average to higher than average number, which is surprising given Dr. John's other strong metrics. The more I looked into Dr. John's analytics, the more I suspected the experience for causing users to bounce at such a high rate.

Unfortunately, the absence of event tags meant that I could not see things like cart abandonments or interaction with specific elements.

Organic Traffic Non-Branded Keyterms

50% of users come from non-branded terms, search queries that do not have the brand name in them. Users that come in from non-branded terms are less likely to be familiar with the brand, they may have no knowledge of the product and thus are less likely to convert. Analyzing non-branded keyterms provides unbiased insights on the product's audience.

When I clustered the non-branded terms into smaller groups, I found that 20% of non-branded terms contained the term 'Sugar-free' and another 20% contained the term 'Xylitol'.

The homepage contained only one reference to sugar-free candy and did not mention Xylitol at all. The content and the experience continued to be the main culprit for the high bounce rate.

Usability Testing

Initially, I aimed for 6 user interviews, unfortunately the client was only able to get 1 user interview. Due to the lack of users, I switched tactics and opted to run usability tests instead, where recruitment would not be limited to Dr. John’s users. Instead I recruited users that were within the gen x age range and that had an interest in healthy lifestyle candy. The less restrictive recruitment allowed me to recruit 6 users fairly quickly.

The Homepage Failed To Communicate The Product

Users did not understand the value proposition of Dr. John's until seeing the product pages. Unfortunately, half of all users see no more than one page on the site.

Sugar-Free Doesn't Mean Artificial Sweetener-Free

Thanks to aspartame, the words sugar-free no longer equates to healthy. Two users believed aspartame caused cancer.

Inconsistent Product Descriptions Confused Users

Some product descriptions were long and had the words 'sugar-free' and 'Xylitol'. The ones that didn't were incorrectly assumed to not be sugar-free by users.

The Cart Functionality Confused
Users

As suspected, the lack of response caused users to click on the add to cart button multiple times, believing that the button wasn't working. Users had to make the unnecessary adjustments once they got to the cart page.

Ordering By The Pound Was Too Difficult To Visualize

Through the given scenarios, users consistently over-ordered lollipops. Most selected 1 lb option over the 6 oz option, getting 50 lollipops instead of the 15 to 20 lollipops that they were expecting.

Users Need Guidance When Browsing Products

Users that were unfamiliar with the product wanted to find the most popular products. The Dr. John's user told me that her son only liked certain flavors and had special needs due to severe allergies.

Research Synthesis

The Problems

How can we make sure our users understand Dr. John’s candies so that the product and it’s benefits are clear and visible throughout the entire experience?

How can we make the process of buying Dr. John's candies more intuitive so that the process is easy, predictable, and familiar?

Design Guidelines

To keep ourselves accountable to the problem statement, we drafted three design guidelines to help us craft our concepts.

All-Natural, Sugar-Free

All content must reflect the product's value which is an all-natural, sugar-free candy. 

Secondarily Educational

Users that want to learn about Xylitol are able to do so but an understanding of Xylitol should not be necessary to any part of the experience.

Consistent, Familiar and Predictable

The design need to be familiar and feel natural throughout the entire site.

Design Concepts

The client agreed to UX research only. Because I wanted to finish out the project, I provided pro-bono work for the wireframes

Homepage

Usability tests showed that users had a difficult time understanding the product and the purpose of Dr. John's site. I designed the homepage with the approach that users should be able to understand Dr. John's product and value statement immediately, wherever they were on the homepage. 

The static hero image replaces the carousel, so that the user receives only one message, that Dr. John's sells sugar-free candy. Where the client would use running carousels to bring attention to a promotion, I added a red bar that would display any running promotion. This bar was also static, making it easier for a user to see the promotion and click on the CTA.

I reintroduced the product category section since the heatmaps from the previous site showed that this section had a positive effect on engagement with the rest of the site. The product category section also reinforces the sites purpose, to sell natural, sugar-free candy.

The section below reframes the value proposition in comparison to other candies that label themselves as 'sugar-free'. This section should dispel any fears that Dr. John's contains artificial sweeteners and allows users to learn more about Xylitol, should they choose to do so.

Menu

I redesigned the menu with the intention of increasing findability and usability. I removed the newsletter menu item and put it in the footer in order to streamline the main navigation. I went with a mega menu/drawer approach to fit the numerous product menu items above the fold and give them the space and attention they needed. I reduced the size of the header so that users could focus more on the content.

Product Pages

Usability testing proved that users had a difficult time visualizing the Dr. John's product in terms of weight. I switched the units of measurement to number of pieces, which was a more familiar way of buying candy for users.

I also added a section that featured similar products according to what users recommended.

Each product description is built with the same formula. All-Natural, Sugar-Free + the Product Name. The added consistency should help users understand that all products are natural and sugar-free.

Project Debrief

Dr. John's is currently developing a new site, based on the wireframes and UX research that I put together. Below is an early look at the new site.

Homepage Improvements

Usability testing showed how ineffective the old homepage was at communicating with users. Most users were unaware that Dr. John's sold candy until they reached the second or third pages. In a real scenario, homepage's that can't describe the product offering, causes users to leave.

The new homepage focuses on communicating that Dr. John's sold healthy candy — the hero image and subsections were all built specifically to highlight the product.

The product categories are displayed in the next section, giving users an indication of what products they can expect to shop for.

Also included is a new section that describes what Dr. John's candy is made of. This reinforces the notion of healthy candy by giving users as much transparency as possible.

Words like 'Sugar-Free' and 'Xylitol' were removed as both terms made users associate Dr. John's candy with artificial sweeteners, which had a reputation for causing cancer. Instead, we replaced these terms with descriptors that were associated with natural, healthy, and organic ingredients.

Product Category Pages Are Sortable

During the buying scenarios, I noticed that some users struggled to pick a candy to purchase because they were missing the ability to know the best-selling items. Other users had very specific dietary requirements and told me how difficult it was to have to locate nutritional information. The ability to sort on product pages should make the buying process much faster and more pleasant.

Cart Additions Were Given Affordance

A simple overlay module was added to show the user that the cart addition was successful. For convenience, users are able to proceed to checkout, straight from the module.

Reflections

Dr. John's was an extremely fun and rewarding project due to the uniqueness of the product. When I first surveyed the product and site I thought it would be a relatively simple matter of fixing some of the usability issues. The research, as it always does, showed me that there was more, particularly with the messaging and presentation of the project.

I learned first hand how powerful association was in terms of marketing a product. 'Sugar-Free' was meant to describe Dr. John's as an alternative to unhealthy sweets. But thanks to aspartame and sucralose, their association with causing cancer, and the companies that were marketing products that contained artificial sweeteners, the term 'Sugar-Free' no longer drove positive connotations and instead became a red flag for savvy, health-concious consumers.

The homepage, product category pages and product pages all need to work in unison to deliver an experience that is both pleasant and clear in its intentions, in order to provide value to the user.

I loved working on this project and am very proud of the team for making this project come to life.