Quick Summary
My Role: UX/UI Designer
The Problem: Users couldn’t quickly find the product that they felt related most to their specific health concern.
The Solution: Create a modal that displays high-level benefits of products when a cursor passes over the product tile or when when the “More Info” button is pressed on mobile devices.
The Results: A 46% increase in the Time On-Page metric, a 13% decrease in our bounce rate for Product Pages and a 3% increase in purchases resulting in $9.3 million of additional sales. (And a really nice plaque)
%
Increase in Time On-Page Metric
%
Decrease in Product Page Bounce Rate
%
Increase in Purchases ($9.3 Million)
Problem Discovery
I dedicated a decent portion of my time at Nature’s Sunshine to watching hours of Hotjar footage with the intent of finding friction in the user journey and areas where we could improve an experience. While watching footage specifically of new visitors using the site I began to notice an interesting trend. Users would navigate using the health topics menu, click into the first product page in the row, spend a short time without visible interaction, return back to the health topic menu and then click into the next product in line. Rinse and repeat until they either got bored or found what they were looking for (most of the time they got bored.)
Initial Assessment
After we noticed the trend of users clicking in and out of product pages only to return to the previous page and click on the next product, our problem statement was simple: “I can’t find the product that I feel relates most to my health concerns.” Our research had shown that some of our new users had heard of specific “Hero” ingredients but the majority of users hadn’t researched herbal supplementation in depth. Nature’s Sunshine had over six hundred products in their portfolio so naturally things got confusing. To develop our ideas and discover more we dove into a 2 week research sprint which included:
- 25+ user interviews with UserTesting.com
- 100+ hours of even more Hotjar footage
- 2,000+ survey responses
With all of this information gathered we began Affinity Mapping and found that users wanted freedom to explore, they didn’t know what they were looking for and that site load times were too high.
Prototype
After brain storming possible solutions thay would allow freedom to explore, help find a solution to individual concerns and keep load speeds from increasing I came up with this lo-fi protypes. Whenever the users’ cursor hovered over a product tile a small modal would appear, pulling the data from our database. This design was unobtrusive, maintined the visual aspects that our customers were familiar with and did not add any significant load to the page so that we could maintain site speed. We desgined a hi-fidelity prototype and delivered it to the development team at the beginning of one of their sprints. The feature only took one two week sprint to code, it wasn’t intrusive, it easy to discover and solved the problem for our users.
Testing
We began tracking metrics immediately, using Google Analytics and manually tracking interactions using Hotjar. The difference was stunning and immediate with a 46% increase in the time on page metric, a 13% decrease in the product page bounce rate and a 3% increase in purchases (9.3 million dollars). With the benefit tile people did not have to click into every product only to back out when they found it wasn’t what they were looking for resulting in more time on page, a lower bounce rate and the increase in product purchases.
More Featured Projects
Hydrojug
Simplifying product pages with science
Health Topics
Increased engagement and clarity