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 hundreds of hours of Hotjar footage with the intent of finding friction in the user journey. While watching footage of new users I began to notice an interesting pattern, users would find a product, click into it, read for a short time only to return and click into the next product in line. Rinse and repeat until they either got bored of looking and left or they found what they were looking for (most of the time they got bored.)
Initial Assessment
The trend of users clicking into product pages to read for a few seconds and then they’d back out to look at other product pages. My 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 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 the ideas and discover more I dove into a 2 week research sprint which included:
- 55+ user interviews with UserTesting.com
- 100+ hours of even more Hotjar footage
- 2,000+ survey responses
With all of this information gathered I 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
I came up with these lo-fi protypes after brain storming possible solutions that would:
- Allow freedom to explore
- Help find a product specific to individual health concerns
- Keep page load speeds from increasing
The idea was whenever the users’ cursor hovered over a product tile a small modal would appear, pulling the product 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.
For mobile a simple hyperlink of “More Info” would bring up the modal, giving users quick access to each products information. Initial design had the product benefits as the quick information but I conducted A/B testing using ingredients to fill the modals and found that users overwhelmingly preferred the benefits.
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 was 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