E-commerce

Product page optimization

ROLE

Product designer
in a scrum team

Product designer
in a scrum team

Product designer
in a scrum team

EXPERTISE

UX/UI design,
E-commerce

YEAR

2023 - 2024

2023 - 2024

2023 - 2024

Project description

We redesigned product detail pages (PDPs) for a high-traffic health and wellness e-commerce platform to improve engagement, build trust, and boost revenue.

Objectives

  • Enhance user engagement on product pages.

  • Increase conversion rates by improving the add-to-cart process.

  • Build user trust through clear and concise information presentation.

Deliverables

  • Comprehensive UX research and analysis.

  • User flows and high-fidelity UI designs.

  • A/B testing plans and analysis reports.

  • Final design assets ready for development handoff for each product page.

UX Constraints
& solutions

Constraint: Overloaded content and inconsistent visual hierarchy led to user confusion.

Solution: Simplified the layout to prioritize essential information, implemented a consistent visual hierarchy, and introduced trust-building elements like customer reviews and clear return policies.

Constraint: Lack of trust elements and missing product benefits reduced user confidence.

Solution: Highlighted key product benefits prominently and added trust indicators such as certifications and customer testimonials.

Research & discovery

We combined competitor analysis, usability testing, user surveys, and A/B testing to identify key issues and validate improvements. These insights helped shape a cleaner layout, stronger trust elements, and better mobile usability.

Project description

We redesigned product detail pages (PDPs) for a high-traffic health and wellness e-commerce platform to improve engagement, build trust, and boost revenue.

Objectives

  • Enhance user engagement on product pages.

  • Increase conversion rates by improving the add-to-cart process.

  • Build user trust through clear and concise information presentation.

Deliverables

  • Comprehensive UX research and analysis.

  • User flows and high-fidelity UI designs.

  • A/B testing plans and analysis reports.

  • Final design assets ready for development handoff for each product page.

UX constraints & solutions

Constraint: Overloaded content and inconsistent visual hierarchy led to user confusion.

Solution: Simplified the layout to prioritize essential information, implemented a consistent visual hierarchy, and introduced trust-building elements like customer reviews and clear return policies.

Constraint: Lack of trust elements and missing product benefits reduced user confidence.

Solution: Highlighted key product benefits prominently and added trust indicators such as certifications and customer testimonials.

Research & discovery

We combined competitor analysis, usability testing, user surveys, and A/B testing to identify key issues and validate improvements. These insights helped shape a cleaner layout, stronger trust elements, and better mobile usability.

Competitor analysis

Benchmarked leading e-commerce platforms to identify UX best practices, layout patterns, and trust-building strategies relevant to the health and wellness sector.

Surveys

Collected responses from active customers to understand user expectations, shopping behavior, and pain points — especially around clarity, delivery info, and variant selection.

Research & Discovery

Gathered insights on user pain points (like managing multiple family profiles and tracking varied medication regimens), and benchmarked competitors.

Usability tests

Ran unmoderated sessions with target customers to observe how they interacted with the existing product pages and checkout process, uncovering key friction points.

A/B Testing

Conducted 2 live A/B test cycles for each product page to validate design hypotheses with measurable data, focusing on CTA placement, layout clarity, and information hierarchy.

Competitor analysis

Benchmarked leading e-commerce platforms to identify UX best practices, layout patterns, and trust-building strategies relevant to the health and wellness sector.

Surveys

Collected responses from active customers to understand user expectations, shopping behavior, and pain points — especially around clarity, delivery info, and variant selection.

Research & Discovery

Gathered insights on user pain points (like managing multiple family profiles and tracking varied medication regimens), and benchmarked competitors.

Usability tests

Ran unmoderated sessions with target customers to observe how they interacted with the existing product pages and checkout process, uncovering key friction points.

A/B Testing

Conducted 2 live A/B test cycles for each product page to validate design hypotheses with measurable data, focusing on CTA placement, layout clarity, and information hierarchy.

Competitor analysis

Benchmarked leading e-commerce platforms to identify UX best practices, layout patterns, and trust-building strategies relevant to the health and wellness sector.

Surveys

Collected responses from active customers to understand user expectations, shopping behavior, and pain points — especially around clarity, delivery info, and variant selection.

Research & Discovery

Gathered insights on user pain points (like managing multiple family profiles and tracking varied medication regimens), and benchmarked competitors.

Usability tests

Ran unmoderated sessions with target customers to observe how they interacted with the existing product pages and checkout process, uncovering key friction points.

A/B Testing

Conducted 2 live A/B test cycles for each product page to validate design hypotheses with measurable data, focusing on CTA placement, layout clarity, and information hierarchy.

Research outcomes

The research confirmed that improving trust cues, clarifying product value, and reducing friction in the checkout process would have the greatest impact on conversions. Findings also highlighted opportunities to connect user symptoms directly to products, provide supportive visuals, and enhance cross-sell potential.

Insights were prioritized using an effort–impact matrix, focusing first on changes that could deliver quick conversion wins while laying the foundation for long-term improvements.

Improve layout structure

Use clear visual hierarchy, section spacing, and whitespace to guide users effectively.

Connect symptoms to products

Link user symptoms directly to product benefits with supportive visuals.

Research & Discovery

Gathered insights on user pain points (like managing multiple family profiles and tracking varied medication regimens), and benchmarked competitors.

Optimize CTAs

Ensure “Add to Cart” buttons are visually prominent and placed at key moments.

Add trust indicators

Include reviews, certifications, and cues that build confidence in product accuracy and quality.

Research & Discovery

Gathered insights on user pain points (like managing multiple family profiles and tracking varied medication regimens), and benchmarked competitors.

Communicate benefits clearly

Add a dedicated section that explains product value in a concise and organized way.

Explain how it works visually

Use step-by-step instructions, icons, and simplified copy to improve user understanding.

Improve layout structure

Use clear visual hierarchy, section spacing, and whitespace to guide users effectively.

Connect symptoms to products

Link user symptoms directly to product benefits with supportive visuals.

Research & Discovery

Gathered insights on user pain points (like managing multiple family profiles and tracking varied medication regimens), and benchmarked competitors.

Optimize CTAs

Ensure “Add to Cart” buttons are visually prominent and placed at key moments.

Add trust indicators

Include reviews, certifications, and cues that build confidence in product accuracy and quality.

Research & Discovery

Gathered insights on user pain points (like managing multiple family profiles and tracking varied medication regimens), and benchmarked competitors.

Communicate benefits clearly

Add a dedicated section that explains product value in a concise and organized way.

Explain how it works visually

Use step-by-step instructions, icons, and simplified copy to improve user understanding.

Improve layout structure

Use clear visual hierarchy, section spacing, and whitespace to guide users effectively.

Connect symptoms to products

Link user symptoms directly to product benefits with supportive visuals.

Research & Discovery

Gathered insights on user pain points (like managing multiple family profiles and tracking varied medication regimens), and benchmarked competitors.

Optimize CTAs

Ensure “Add to Cart” buttons are visually prominent and placed at key moments.

Add trust indicators

Include reviews, certifications, and cues that build confidence in product accuracy and quality.

Research & Discovery

Gathered insights on user pain points (like managing multiple family profiles and tracking varied medication regimens), and benchmarked competitors.

Communicate benefits clearly

Add a dedicated section that explains product value in a concise and organized way.

Explain how it works visually

Use step-by-step instructions, icons, and simplified copy to improve user understanding.

Research showed that streamlining product information, reinforcing trust signals, and reducing decision friction would likely improve conversion. These became the foundation for our ideation phase.

Ideation & brainstorming

We mind-mapped around layout, trust, CTA behavior, and how to surface benefits more effectively.

Key optimization ideas

1. Improve layout ideas: Section spacing · Whitespace balance · Clear hierarchy

2. Optimize CTA behavior: Bold CTA · Fixed position · High contrast

3. Highlight product benefits: Short copy · Value-first · Feature section

4. Connect symptoms to products: Symptom icons · Linked benefits · Visual cues

1. Improve layout ideas: Section spacing · Whitespace balance · Clear hierarchy

2. Optimize CTA behavior: Bold CTA · Fixed position · High contrast

3. Highlight product benefits: Short copy · Value-first · Feature section

4. Connect symptoms to products: Symptom icons · Linked benefits · Visual cues

Key optimization ideas

1. Improve layout ideas: Section spacing · Whitespace balance · Clear hierarchy

2. Optimize CTA behavior: Bold CTA · Fixed position · High contrast

3. Highlight product benefits: Short copy · Value-first · Feature section

4. Connect symptoms to products: Symptom icons · Linked benefits · Visual cues

5. Build trust with transparency: Reviews · Certifications · Clear info

6. Make results easy to understand: Key highlights · Clean layout · Simple wording

7. Explain how it works: Step-by-step · Icons · Plain language

Design & iteration

Guided by user research, internal collaboration, and focused ideation, the design phase aimed to translate insights into a clear, trustworthy, and conversion-driven product page experience. During this phase, worked closely with PM, developers, and QA for sprint-based alignment; participated in daily standups and stakeholder reviews. Marketing was looped in to align product benefits with campaign messaging. The goal was to balance business objectives with user needs—making key information more accessible, reducing friction, and visually reinforcing product value.

Sample product page design

The final product page design was shaped by focused ideation and user insights. Key improvements included:

  • A clean layout with clear visual hierarchy and smart use of whitespace

  • Prominent, consistent add-to-cart buttons with better mobile visibility

  • Trust-building elements like customer reviews and certification badges

  • A concise product benefits section with value-first messaging

  • Symptom-based product linking with supportive visuals

  • Simplified result reports and an easy-to-follow “how it works” section

Testing focus: vitamin D product page

We tested the redesigned flow for the vitamin D test page with real users to evaluate clarity, trust, and ease of use. The flow included key sections such as pricing, test instructions, and result accuracy — all optimized based on direct feedback from usability sessions.

Main feedbacks

1. Price visibility: Place price above the fold or use a sticky banner on mobile for better visibility.

2. Variant component Make variant selection interactive by updating the title, bullet points, and images based on the selected option.

3. Test accuracy: Add an FAQ that emphasizes test accuracy, lab reliability, and the quality of equipment used.

4. Improved instructions: Move the "how to use the test" section higher on the page, using larger text or icons to increase visibility.

5. Content focus: Prioritize essential facts (price, biomarkers, test type) and simplify content hierarchy for better readability.

4. Improved instructions: Move the "how to use the test" section higher on the page, using larger text or icons to increase visibility.

5. Content focus: Prioritize essential facts (price, biomarkers, test type) and simplify content hierarchy for better readability.

Main feedbacks

1. Price visibility: Place price above the fold or use a sticky banner on mobile for better visibility.

2. Variant component Make variant selection interactive by updating the title, bullet points, and images based on the selected option.

3. Test accuracy: Add an FAQ that emphasizes test accuracy, lab reliability, and the quality of equipment used.

4. Improved instructions: Move the "how to use the test" section higher on the page, using larger text or icons to increase visibility.

5. Content focus: Prioritize essential facts (price, biomarkers, test type) and simplify content hierarchy for better readability.

Main feedbacks

1. Price visibility: Place price above the fold or use a sticky banner on mobile for better visibility.

2. Variant component Make variant selection interactive by updating the title, bullet points, and images based on the selected option.

3. Test accuracy: Add an FAQ that emphasizes test accuracy, lab reliability, and the quality of equipment used.

4. Improved instructions: Move the "how to use the test" section higher on the page, using larger text or icons to increase visibility.

5. Content focus: Prioritize essential facts (price, biomarkers, test type) and simplify content hierarchy for better readability.

4. Improved instructions: Move the "how to use the test" section higher on the page, using larger text or icons to increase visibility.

5. Content focus: Prioritize essential facts (price, biomarkers, test type) and simplify content hierarchy for better readability.

Converting the pages

We converted the pages in two separate phases. In the first phase, we updated the most popular products to the new layout by creating relevant content and assets for each one. An A/B test was created for each product page in this phase to measure its individual performance. In the second phase, we decided to convert the remaining pages without running any A/B tests, as the results from phase one already showed clear improvements in key KPIs.

A/B Test

We tested the redesigned product pages against the originals to measure real impact. The results showed clear improvement in key metrics.

A/B Test results

32% increase in engagement

43% more add-to-cart actions

24% boost in revenue

A/B Test results

32% increase in engagement

43% more add-to-cart actions

24% boost in revenue

A/B Test results

32% increase in engagement

43% more add-to-cart actions

24% boost in revenue

Selected final mockup

This high-fidelity mockups bring together insights from research, usability testing, and business goals. The design focuses on clarity, trust, and conversion—featuring a prominent price, simplified product highlights, and a visual breakdown of the tested food categories (in this example). The layout adapts seamlessly across desktop and mobile to support a smooth purchase journey.