summary.
Neostrata.com is a skincare eCommerce platform aimed at providing science-backed solutions for its customers. Neostrata’s outdated product detail page struggled with cluttered layouts and low conversions. As the sole UX designer, I led a redesign in 2023 that increased Add-to-Cart Rates by 74% and Conversion Rates by 68% after the first 3 months.
original product detail page.
redesigned product detail page.
the issue.
The product detail page is pivotal in guiding customers through the purchasing journey. The brand team felt the page was outdated, as it hadn’t been evaluated in recent years. With competitors constantly entering the skincare market, a lack of updates could affect market share so the need to align the PDP with modern user expectations and to support key business goals made this project a high priority.
my role.
As the sole UX designer on this project, my role was to uncover user pain points, define the core problems, and create a design strategy that balanced user needs with business goals. I was responsible for driving the overall design direction and I encouraged early ideation and collaboration by engaging in sprint planning, weekly stand-ups and iterative reviews.
Our agile team was made up of two developers, a product manager, a business manager, a data analyst, two creative designers, a quality analyst and a copywriter.
Tools & Techniques Employed
- Insight-Driven Design
- User Testing via UserZoom
- Site Analysis via HotJar & Google Analytics
- Mocks & Prototyping via Figma
the visual audit was low effort and confirmed design inconsistencies and contrast issues.
research.
For this project I was able to uncover several key issues through visual audits, heatmap analysis via HotJar, and user testing via UserZoom.
visual audit.
The visual audit was a good way to confirm any design inconsistencies on desktop, tablet and mobile. I also used the Stark Contrast tool to evaluate the contrast of important elements. The audit revealed:
- Inconsistent and inaccessible design elements contributed to an outdated appearance.
- Some interactive elements on the page failed to meet WCAG AA 2.1 compliance standards.
headlines with inconsistent styling & tabs not passing WCAG 2.1 AA compliance standards.
heatmap analysis.
HotJar heatmaps data revealed that 75% of users scrolled past the fold on mobile, indicating strong engagement with the upper portions of the page. While users did interact with the closed accordions, it only amounted to 38.8% of the tracked traffic. Noted learnings:
- Users demonstrated no hesitation scrolling through the page, indicating comfort with vertical navigation.
heatmaps tracking the past 6 months of user traffic via HotJar.
user testing.
Although ideally I would have loved to also conduct a desktop test, I received approval to conduct only one test on UserZoom, so I prioritized mobile screens since they represented the majority of the user base.
For unmoderated and remote task-based user tests, the UserZoom platform allows up to 15 participants if you opt to record the sessions. So at the expense of having more participants, I opted for the recordings, thinking it would be more useful to be able to observe how real users interacted with the page as they attempted to complete the define tasks.
I asked participants to think aloud as they completed the 6 tasks. Upon completion of the study, I was surprised to find a 93% or higher success rate across all tasks. Did we really need to work on this page?
the test was technically a success.
However, from my past experience with similar tests, I knew that a task marked as successful by participants didn’t necessarily mean it was completed without friction. So I took a deep dive and analyzed each screen recording, noting quotes along the way, here are just a few as an example:
"...the benefits would be under..results? Possibly?"
"oh, that's kind of confusing, it says claim 20% off, but this claim says 40% off?"
"I see key ingredients here, is that the bullet points? I wish you'd label what this big long list is."
some participants quotes from various parts of the task-based test.
From user testing I gathered:
- Over half of the testing participants overlooked content hidden within accordions.
- The grouping of content seemed to be confusing, further hindering users' ability to find what they needed.
- A lack of hierarchy and structure made it difficult for users to locate important content, resulting in poor navigation.
example of UserZoom participant not being able to find the subscription option.
synthesis & goals.
From the research it became clear that design inconsistencies, contrast issues, and an unorganized layout was preventing consumers from having a frictionless experience. I also learned that users were comfortable scrolling, so bringing content out of hidden accordions, which would make pages longer, could be received well.
How can we create a more intuitive and visually cohesive product detail page that encourages users to add items to their cart?
With a goal now established, I collaborated with the team's data analyst to define and set up measurements of success. Our KPIs would be:
- Average PDP views
- Add to cart rate
- Conversion rate
- Average time spent on the PDP
various high fidelity iterations across desktop, tablet and mobile in adobe xd.
design.
I presented high-fidelity mockups early on since my key stakeholders had previously expressed a preference for reviewing completed designs, and wanted them on a tight timeline. I also would not be able to test before launching on the live site just due to business constraints.
We'd launch the approved design to the live site on one flagship product and test that page against the current design, and if it performed well, we'd be able to adopt the template across the whole porfolio.
ideation.
In the earliest iterations, I focused on addressing inconsistent design elements by updating the primary CTA to align with the rest of the site, standardizing headline weights for consistency, and reworking the desktop tabbed layout to match the mobile accordions. Additionally, I brought the accordions above the fold on desktop to improve visibility and accessibility.
early iteration showing some type updates and a structural update from tabbed to accordion.
Some friction seen through testing were participants not being able to find purchase options easily, even though it was above the fold. This ended up being the one section that held up stakeholder approval. It went through 3 iterations.
purchase options exploration (original is highlighted)
During user testing, participants praised the How To Apply section, especially for unfamiliar products, initially I had created a full width section for it, pulling it out of the drawers. After learning that the videos were actually outdated and being pulled from the servers, I placed it back in a drawer.
the how to apply section that didn't make the cut due to unsupported content.
Another note from testing was how users were confused with "Results" and "Before/After" being in separate sections, so I designed a new module that combined the content and made it more interactive. The experience would be more engaging while allowing mobile images to take up the full screen.
combining content and featuring the results section outside of the original accordion experience.
prototyping.
To verify the new interactions I wanted to add to the page, I created a prototype in Adobe XD to verify technical feasibility with the development team.
video of the real results prototype.
handoff.
Final designs as seen below was handed off to our development team after 6 iterations. I wished I could have tested it beforehand, I was nervous to just launch it live and see how it did, but that's what I had to work with.
approved desktop version.
approved mobile version.
results.
The design was launched on a flagship product in October 6, 2023.
after 1 month.
+0%
Add to Cart Rate+0%
Conversion Rate+0%
Page ViewsThe Add to Cart Rate was up 152% (10.5% to 26.47%), the Conversion Rate was up 40% (4.6% to 6.5%) and the number of Page Views was up by 193% (1,232 to 3,615). Time on page was not covered in the initial read.
after 3 months.
+0%
Add to Cart Rate+0%
Conversion Rate+0%
Page Views-0%
Time Spent On PageThe Add to Cart Rate was up 74% (15.2% to 26.5%), the Conversion Rate was up 68% (3.9% to 6.5%) and the number of Page Views was up by 18% (3,070 to 3,615). Time Spent on Page was down by 5% (8 sec diff)
further learnings.
After the 3 month readout I received the green light to conduct a comparison study to gather subjective user feedback on the 2 PDP templates that were live. Overall users from the test group preferred the new design, stating that it felt more modern and engaging, but users did not like having the first accordion open by default. So upon adoption of the template to the portfolio, we made sure that it would be closed by default.