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.
.png)
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
.jpg)
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
Conversion Rate
Average Cart Value
Bounce Rate
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.
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.
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.
