High impact PDP
Neostrata’s outdated product detail page struggled with cluttered layouts and low conversions. I led a redesign in 2023 that increased Add-to-Cart Rates by 74% and Conversion Rates by 68%.
Lead UX Designer @ Kenvue, Released November 2023
The product detail page plays a crucial role in the purchasing journey, and the original hadn’t been updated in years.
The brand team saw it as outdated, and with new competitors entering the skincare market, failing to modernize it could impact market share.
As the sole UX Designer, I led the end-to-end redesign of the page, from research to hand-off.
Many thanks to all of my cross-functional partners who worked to bring this design to life. It indeed took a (small & agile) village.
The goal was to create a better page experience that led to more purchases.
👩🏻 User Goal
Be able to easily find information on the page.
🎯 KPI
Average time on page
💼 Business Goal
Increase purchases from the product page.
🎯 KPI
Add to cart rate, conversion rate
✨ Impact
A smoother purchasing journey, increased revenue and improved user satisfaction.
Research suggested users struggled to scan information easily.
I conducted a visual audit and documented inconsistent font weights and styles which created a weak typographic hierarchy. This would make it harder for users to scan and prioritize information.
The audit also revealed accessibility issues with some interactive elements failing WCAG AA 2.1 compliance, making them difficult to see and use.
I also conducted an unmoderated task-based user study that resulted in over half of participants overlooking content or getting confused by content grouping.
Heatmaps suggested users were comfortable with vertical navigation and accordions.
Utilizing HotJar’s heatmaps, I found that 75% of users scrolled past the fold on mobile, indicating strong engagement with the upper portions of the page and about 39% interacted of the tracked traffic interacted with accordions.
A noted challenge in research was ensuring that initial results didn’t mask underlying friction.
There was a 93%+ success rate across all tasks, which ended up being a bit misleading. Since we asked all 15 participants to speak during the study, I analyzed each recording to uncover friction points.
Aligning with stakeholder preferences and tight timelines, I shared and iterated on high-fidelity mockups.
Due to business constraints we would test the final design on a flagship product on the live site. If it performed well, the template would be applied to the full portfolio.
Through close collaboration with stakeholders, product managers and engineers I iterated and refined the designs, incorporating insights from each discussion.
FINAL DESIGNS
Improving the “scannability” and accessibility.
To enhance readability and help users quickly find key information, I refined the typographic hierarchy by standardizing font weights, sizes, and spacing while also addressing contrast issues to meet accessibility standards. These adjustments improved visual structure, making it easier for users to scan content and prioritize important details at a glance.
Making purchase options easier to find.
User testing revealed that participants struggled to locate purchase options, even though they eventually found them. To address this, I refined the UI of the module, ensuring better visibility. Since this update was a priority for stakeholders, it went through multiple iterations before final approval.
Creating a more intuitive and engaging experience for key content.
I designed an interactive before-and-after module that showcased larger images on mobile and highlighted key product statistics, making it easier for users to engage with content they find valuable while reinforcing the product’s effectiveness.
A nail biting success, the results were positive after we launched in October 2023.
after 1 month.
💼
Add to Bag Rate
+152%
✨
Conversion Rate
+40%
after 3 months.
👩🏻
Average Time on Page
-5%
💼
Add to Bag Rate
+74%
✨
Conversion Rate
+68%
A last minute study before portfolio adoption led to one last iteration.
After the results from the 3 month readout came back positive, we conducted a quick comparison study to gather feedback on the original and new page templates. Users did prefer the new template (yay!), but disliked the first accordion drawer being open by default. Based on this insight, we adjusted the template to keep it closed by default and then the template was adopted to the whole portfolio.
UNIFIED DESIGN
Building a scalable, flexible design system.