The Challenge:

Redesign the company's old website to give it a more modern look and perform better by making their 600+ products and 3 different pricing tiers less confusing and more accessible to users.

Research

By researching what actions current users were taking on the old site and asking what goals users had when coming to the site we found some key takeaways to influence the the new design

User most frequently came with a health problem in mind rather than looking for a specific supplement
Customers were more satisfied with the product when they took a supplement for more than 30 days
Users needed more product information to make a decision but with the sheer amount of product offerings were often overwhelming

User Decision Design

Nature’s Sunshine had over 600 products so building a site architecture that supported that many different products had to be well thought out and also distilled down into manageable user decisions to avoid choice overload. Our research showed users came with a health condition in mind so our architecture needed to support finding a supplement that addressed that condition. We decided to use contextual search supported by topical iconography to help a consumer quickly find relevant products and simplify their choice.

Streamline User Purchases

One of the challenges we ran into while creating our mid fidelity design was Nature’s Sunshine was pricing structure. They had 3 prices for every product depending on whether you were a member, consumer, or subscriber. Nature’s Sunshine is not the only company to offer more than one price on a page, Amazon does it with their subscribe and save products. But to offer 3 prices on one page proved to be a difficult task especially while trying to encourage customers to take additional actions such as subscribe or become a premium member.

Product Page Ideation

This design wouldn't work because there was no way to select frequency

This design allowed for all the functionality but with the colors the text was hard to read clearly.

This one solved the problem with quantity and the readability

Product Page Final

Displaying 3 possible prices for a single problem but with this implementation we were able to increase subscriptions by 40%.

With health concerns there are also sub-concerns with in each category. Ex Heart Health they want heart help but they also want blood pressure help. In doing this it took the amount of products from 600+ to about 5 with just a few clicks and made it more relevant to the customer.

To also help decide which product the user wanted we implemented a hover effect that allowed the user to get a high level view of the product with having to go into the product description page.

High Fidelity Design

In our high fidelity design we were able to solve the issues of complex pricing and more then one call to action on our product page by adding color blocking to accent the pricing, easy to skim bullet points to educate about each tier and displaying all customer pricing tiers to entice additional action (such as subscribe or become a member). Then in our content navigation we added dynamic header images that changed as you scrolled across each health condition to help further support our contextual search and iconography

Insights After It Was Released

Using Hot Jar, Google Analytics and studying conversion data we were able to optimize the user experience. Here is one example

Optimization #1

We tested which of the 3 pricing tiers to auto highlight and we found that if we auto selected the Subscribe option subscription, subscriptions increased by 43%

The Challenge:

Design Skills Used

Role:

10%+

65%

300%

40%