UX CASE STUDY

Site Enhancements: Product Detail Pages

Back
Product Detail Pages

Project Overview

When Sally Beauty's executive team commissioned a third-party marketing agency to completely overhaul their branding, I was tasked with integrating an entirely new visual aesthetic into our existing design system. A major lift involved updating the Product Detail Pages (PDPs), one of the most critical parts of an e-commerce website, without sacrificing usability or conversion performance.


Company:

  • Sally Beauty Holdings, Inc.

Project Length:

  • 4 Months

My Roles:

  • UX/UI Designer
  • Researcher
  • User Test Facilitator

Tools:

  • Figma
  • UserTesting.com
  • Quantum Metrics

Methods:

  • Heuristic Evaluation
  • Discovery & Research
  • UX Strategy
  • User Flows
  • Visual/UI Design
  • High Fidelity Wireframes
  • Accessibility Standards
  • User Testing & Evaluation

Goals & Challenges

The Business Context

The executive decision to completely overhaul the Sally Beauty website was not just an aesthetic choice but part of a larger brand strategy to reposition itself in an increasingly competitive beauty retail market. However, this created a potential business risk: product detail pages generate the majority of e-commerce conversions, and any disruption could significantly impact revenue. We couldn't afford to simply apply new branding without addressing fundamental usability concerns.

The Design Challenge

The third-party redesign delivered a dramatically different look, clearly developed by a graphic design team whose primary concern was aesthetics. Implementing this new look would require careful consideration of:

  • Design system integration: Our existing UI library needed comprehensive updates without breaking active projects
  • Usability preservation: New designs had to maintain proven UI patterns and accessibility standards
  • Multiple page variants: Individual products, multi-option products (color, size, scent), and out-of-stock scenarios all required unique templates and process flows for associated functionality

Opportunities

Our stakeholders on the e-commerce and analytics teams had raised concerns about site performance issues the product team needed to tackle in the new fiscal year. Rather than simply giving the PDPs a facelift, our UX team recognized this as an excellent opportunity to identify as many areas of improvement as possible and tackle them in one initiative.

Discovery & Research

Heuristic Evaluation & Gap Analysis

The UX team conducted a thorough assessment comparing the marketing agency's wireframes to our existing site, identifying several key areas for improvement:

  • Missing functionality: Critical features omitted from the new design
  • Accessibility concerns: Elements that contradicted established accessibility standards
  • Usability conflicts: New patterns that contradicted successful existing UI behaviors
  • Performance opportunities: Areas where we could address known customer pain points

Meanwhile, our junior designer conducted comprehensive competitor research to benchmark our current PDPs against industry standards, revealing opportunities to improve our adherence to best practices.

Old Site vs. Instrument Team Redesign
Comparison of the live site's product detail pages (left) vs. the proposed rebrand (right)

Data-Driven Requirements Gathering

I extracted insights from several months of e-commerce and analytics research decks to identify specific customer pain points on our existing PDPs. This data became crucial for justifying design decisions and ensuring our rebrand addressed real user needs rather than just aesthetic preferences.

Requirements Gathering
Determining requirements for PDP optimization from e-commerce and analytics research decks

Design System Audit

With a robust library of existing page templates and UI assets, we conducted a comprehensive audit to determine:

  • Which components needed updates vs. complete rebuilds
  • How changes would impact ongoing projects in handoff status
  • Documentation requirements for maintaining design system consistency
  • Priority sequencing for development implementation
Example of Design System Component Updates
Example of a complex, nested PDP component update in the design system

The Design Process

Strategic Project Breakdown

Given the complexity of updating multiple PDP variants while maintaining an active e-commerce site, we found it helpful to break down the project into focused sprints targeting general sections of the PDP anatomy, then further into more specialized components within those sections. This approach allowed us to prioritize efficiently while ensuring thorough attention to each page variant's unique requirements.

Comprehensive Wireframing & Flow Documentation

I created high-fidelity wireframes for all PDP variants, ensuring each template included detailed interaction flows to demonstrate functionality and guide development implementation:

  • Single product pages: The default "boilerplate" template with all the basic elements included on every PDP
  • Color selection variant: Products with extensive color selection options and functions unique to this variant (grid vs. list views, color swatch search)
  • Multi-option variant: Products with options for non-color attributes like size and scent
  • Out-of-stock: Examples of unavailable options for each variant
PDP Wireframes
Pixel perfect wireframes for all PDP variants, with detailed interaction flows to demonstrate functionality and guide development implementation. View the figma file here.
PDP Redesign
Example of the optimized PDP redesign for products with multiple color options. Explore design details for every PDP variant here.

Additionally, there were conditional scenarios that required their own separate tickets but were still considered part of the larger PDP initiative:

  • Product bundle promotions
  • Email alert signup for out of stock items
  • Similar products comparison chart
  • Content slots for marketing messaging
  • Rewards tooltip messaging for different membership tiers
PDP Flow Example
Example of a user flow, in this case for the rewards member tooltip login. Explore all flows for PDP functionality here.

Prototyping & Iterative User Testing

Since we wanted to validate multiple aspects of the redesign, I planned a comprehensive testing strategy across project phases:

Phase 1: Brand Interpretation Testing

Initial survey-based testing evaluated how users interpreted the new iconography and color schemes from the marketing rebrand. This helped us identify which aesthetic elements caused confusion and needed modification.

Brand Interpretation Testing
Survey results showing which aesthetic elements caused confusion and needed modification.

Phase 2: Functional Prototype Testing

We tested interactive prototypes of two key variants to cover the most important functions:

  • Single product PDPs for streamlined purchasing decisions
  • Multi-option product PDPs for complex selection processes

Prototypes
Interactive prototypes of the multi-option product PDP test

Phase 3: Promotional Feature Testing

Special focus on bundle promotion functionality, which e-commerce frequently uses but had historically caused user confusion. Testing revealed different use cases and informed clearer communication strategies.

Product Bundle Functionality
Example of product promotional bundle redesign & improved functionality

Results & Refinements

Our optimized designs tested positively across all variants, requiring only minor refinements. The testing validated our approach of preserving proven UX patterns while updating the visual design, and confirmed that our improvements to promotional clarity would reduce customer confusion.

Full Comparison of PDPs
Full comparison of the evolution from the older live site (left) to the rebrand design (center) to the final optimized design (right). Explore before and after examples of all PDP variants here.

Implementation & Results

Incremental Rollout Strategy

Development implemented PDP updates incrementally, allowing for A/B testing of individual components. This approach minimized risk while providing data on each enhancement's impact.

Measurable Impact

  • Conversion rate improvements: PDP conversion rates increased consistently across all page variants during A/B testing
  • Component-level optimization: Individual element testing allowed us to identify which specific changes drove the most impact
  • Design system strengthening: Updated UI library provided a more cohesive foundation for future projects
  • Performance gains: Integration with e-commerce team recommendations addressed known site performance issues

Design System Evolution

The project resulted in a significantly enhanced design system that:

  • Maintained consistency: All updates aligned with new brand standards while preserving usability
  • Improved documentation: Comprehensive component guidelines supported future development
  • Enabled scalability: Modular approach to PDP variants created templates for future product categories
Design System Evolution

Key Learnings

Balancing Brand Vision with User Needs

This project taught me how to effectively advocate for user experience within brand-driven initiatives. By using data to justify design decisions, I was able to push back on aesthetic choices that would have compromised usability while still achieving the marketing team's brand goals. The key was framing UX recommendations in terms of business impact rather than design preferences.

Managing Complex Stakeholder Alignment

Successfully coordinating between marketing's brand vision, e-commerce's performance needs, analytics' data insights, and development's technical constraints required careful communication and prioritization. I learned to create alignment by focusing everyone on shared goals—improved conversion rates and better customer experience—rather than getting caught up in individual department priorities.

Strategic Project Decomposition

Breaking a massive rebrand project into focused component sprints proved essential for maintaining quality while meeting aggressive timelines. This approach allowed deep focus on each element's unique requirements while ensuring the overall experience remained cohesive. It also enabled better risk management through incremental testing and rollout.

Data-Driven Design Advocacy

Using existing analytics and research to support design decisions proved crucial when integrating third-party brand designs. By grounding UX recommendations in performance data and user research, I could advocate for necessary changes while demonstrating respect for the brand investment and executive decision-making.

Long-term Impact

The enhanced PDP templates became the foundation for Sally Beauty's post-rebrand e-commerce experience, providing:

  • Sustained conversion improvements: A/B testing showed consistent performance gains across product categories
  • Design system foundation: Updated components supported future site enhancements and new product launches
  • Cross-team collaboration model: The integrated approach became a template for future brand and UX initiatives
  • User experience preservation: Successfully maintained usability and accessibility standards through major visual changes

The PDP enhancement project showcased how strategic UX thinking can transform a potentially disruptive brand mandate into an opportunity for comprehensive user experience improvement, resulting in measurable business impact and a stronger design foundation for future growth.