Use case | Modernize Product Detail Pages Through Iterative Design for Improved Conversion Rates
Technologies Used - A/B Testing, Analytics Tools, User Research Methods
The Vitamin Shoppe is an omnichannel specialty retailer of nutritional products. I worked on several major site enhancement initiatives across The Vitamin Shoppe website and mobile app with careful considerations of the customer and their behavior through analytics and user testing, along with competitive analysis, and understanding of the brand and products.
Here's one that was really exciting in its process and outcome.
Objective: To provide an optimal and frictionless customer experience on the product detail pages (PDP). Key metric to be increase in rate of conversion.
​
Result: Conversion rate on PDP* had an incremental increase from 3% to 27% over a period of 3 months, year to year, as extrapolated from the A/B test data.
Proceed to view the user research that informed the redesigns and design iterations.
* The image below is a view of the first iteration that increased the rate of conversion.
​As the Lead UX Designer, I led the digital transformation at The Vitamin Shoppe by modernizing the most sensitive delicate product detail page which is the bread on butter of an e-commerce site.
I followed the Double Diamond process from discovery through delivery.
User Research
I began with wanting to understand the needs of The Vitamin Shoppe user, with discovering the customer journey through The Vitamin Shoppe website. I provided scenarios with tasks and sub-tasks to have users navigate the site, while expressing their thinking aloud. These tests were conducted on UserTesting.com.
Aspects of user's navigation of the site were observed for;
​
1. return users and users who knew exactly what they wanted,
2. first time users and users who had no particular product in mind when web browsing.
​
Findings
When users knew the product they wanted, they were;
-
price conscious,
-
promotions driven,
-
quick and convenience of purchase was of importance to them.
​
When users were browsing without a specific product in mind, they were;
-
often seeking product knowledge to research a category/type of product, or
-
had general idea of a product, that users then attempted to seek validation to purchase.
​
​
HYPOTHESIS
Users mental model when landing at PDP is to get a clear understanding of the options available, with a minimum expense of time or effort.
PROBLEM STATEMENT
Users trust the brand Vitamin Shoppe® to help with their well being.
How might we create enablers at PDP for users to move forward to place an order?
PROCESS - DOUBLE DIAMOND
I use the Double Diamond process to have an evidence-based approach to problems to be solved. Discovering the user pain points for most business impact.
Below is a visual representation of the Double Diamond as gathered from NN/g Group.
The image shows two diamond shapes side by side:
Left Diamond (Problem Space)
-
Discover - The phase where research and insights are gathered.
-
Define - The phase where insights are synthesized into a clear problem statement.
Right Diamond (Solution Space)
-
Develop - The phase where ideas and prototypes are generated.
-
Deliver - The phase where the final solution is refined and implemented.
DISCOVERY PHASE
DISCOVERY PHASE - Diverge - In this phase I conducted with scenario & task based usability of the site with Usertesting.com
DISCOVERY PHASE - Next I tagged the insights gathered from participants in Usertesting.com and affinity mapped to assess the patterns revealing the pain points.
DEFINE PHASE - Converge - With the pain points now known - I defined the problem and partnered with product team to define the focal points to be prioritized.
PDP - Before
Below image is a view of the focal points affecting user adoption
1st Iteration - Redesign
• All the annotated focal points were redesigned
• Accessibility and the consistency of the design were prioritized
• Price by serving size to encourage positive value perception for a high-priced item.
• Affordability was increased by showing all size and price options.
Design Iterations
2nd Iteration - Design Enhancements |
• 'Delivery Options' area
• Revert to the original number count, based on A/B test results
3rd Iteration - Design Enhancement
• Hover over the image to magnify writing on product label.
Mimic a user viewing the product at a physical store.
Full Page - Design Enhancement
4th Iteration - Redesign below the fold
Cartus Online
Anywhere Real Estate