Dr. John's sells healthy hard candies made from Xylitol, a natural, sugar-free ingredient. The client had was looking to redesign their site to look like some of their competitors.
After conducting usability research, I found several usability errors and a severe disconnect between what users thought the site was trying to sell and the product itself.
Rather than redesign the site to look like one of its competitors, the research I conducted steered the client to redesign the site to focus on creating an easier and more communicative experience.
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 does not sufficiently explain the product – credibility is needed to convey the benefits of Xylitol.
The prime target audience is gen x women followed by baby boomer women.
Users show significant interest in the medical benefits – particularly if they are diabetic, experiencing dry mouth or have a condition where they are unable or discouraged to consume sugar.
Users care about where Xylitol is sourced from – there is a negative association with Xylitol that comes from corn because that variant is typically produced outside of the US.
The biggest barriers to conversion is the lack of knowledge of Xylitol.
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 loved the visuals for each of the products on Jeni's and it was easy to see why. Each product is distinctive but also simple and easy to understand.
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.
I took a quick look at Xylitol and sugar-free competitors. I also looked at Dylan's Candy Store, even though they did not focus on sugar-free candy, I found the site to be extremely usable and it became a strong source for inspiration.
Xylitol Candy Competitor
Featured on Shark Tank, earned large exposure.
Recently became the number 1 Xylitol hard candy seller on Amazon.
Site focuses too much on their Shark Tank experience, not on user needs.
Site doesn't actually sell candy nor does it link to the resellers that are selling the product.
Xylitol Gum Competitor
Value proposition is clear, accessible and consistent throughout the site.
A section is dedicated towards educated users about the benefits of Xylitol.
Ice Chips does not compete with Dr. John's best selling products and only sells Xylitol Gum.
Specialty Candy Store
Widely recognizable boutique candy store with strong branding on the site.
Attractive product photos along with clear product descriptions.
Could not find sugar-free candy despite the FAQ insisting it was available.
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.
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.
Average Cart Value
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.
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.
We summarized our findings into 6 main insights:
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.
Thanks to aspartame, the words sugar-free no longer equates to healthy. Two users believed aspartame caused cancer.
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.
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.
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 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.
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?
To keep ourselves accountable to the problem statement, we drafted three design guidelines to help us craft our concepts.
All content must reflect the product's value which is an all-natural, sugar-free candy.
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.
The design need to be familiar and feel natural throughout the entire site.
The client agreed to UX research only. Because I wanted to finish out the project, I provided pro-bono work for the wireframes
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.
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.
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.
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.
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.
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.