a product detail page template

A
digital
project
Client
Hanes, Inc.
Industry
Contract UX Designer
Bra shoppers could judge fit before buying instead of after returning, on a template that stayed in production three-plus years
For Hanes bra shoppers, to make size and style decisions confident enough to trust before purchase, measured by a page the development team built to specification and kept in production.
13 feature categories specified in one annotated wireframe
100
%
allocation
9
weeks
From
06/2014
To
07/2014
Webflow Template - Designed by Azwedo.com and Wedoflow.com
Shipped
My Role and Partners

Contracted as UX Designer through 24 Seven Talent for Hanes, Inc. Full-time allocation across a nine-week engagement, from brief to development-ready specification. Partnered directly with Hanes ecommerce stakeholders to define the usability goals for the brand's product detail page template; the build was executed by the client's development team.

Context & Constraints

  • A template-level redesign: one layout serving the brand's full apparel catalog, not a single product page
  • Brassieres are the most fit-sensitive category in apparel ecommerce, where a wrong-size purchase becomes a return and a lost customer
  • A redesign of a live template rather than a greenfield page — the new hierarchy had to work within the existing site
  • Nine weeks from brief to delivered specification

Approach

  • Partnered with client stakeholders to define the two usability problems: choosing the right size and style, and surfacing fit feedback at the point of decision
  • Conceptualized the page as a system rather than a layout, resolving every feature into 13 primary categories
  • Delivered annotated wireframes documenting each category's purpose, dependencies, and micro-interactions for handoff
  • Produced high-fidelity wireframes establishing layout, typographic scale, and visual rhythm for build

Impact

    • Shipped to production on the Hanes ecommerce site, with the built page matching the annotated specification
    • Full template specified in nine weeks, brief to development-ready wireframes
    • 13 feature categories gave stakeholders and developers one shared map of the page, testable and maintainable module by module
  • Artifacts summary

    No items found.
  • Design: Annotated wireframe (13 feature categories) · High-fidelity wireframe · Detail-view spec
  • Case Study

    Close-up specification of the size and style selection area with customer review content adjacent.
    Detail of the size and color selector in the product detail page header.

    Overview

    In mid-2014, Hanes, Inc. contracted me through 24 Seven Talent to redesign the product detail page template for its ecommerce site. The brief centered on the brand's most fit-sensitive category: customers struggled to select the right size and style of brassiere online, and the client wanted customer feedback woven into the page to help shoppers judge fit and comfort before purchase. As an individual contributor, I owned the UX of the template end to end — from structuring the page's feature set into 13 primary categories through annotated and high-fidelity wireframes delivered for build. Success meant a specification the development team could implement faithfully, and they did: the production page closely matched the wireframes.

    Evidence of Need

    The evidence base for this engagement was stakeholder-stated, not primary. Hanes ecommerce stakeholders identified two problems from their own sales and returns experience: shoppers struggled to select the right size and style, and the page offered nothing to help them judge fit and comfort before committing. The product reality corroborated it — a single bra style carries band size, cup size, color, and style variants, which is more decision load than one flat layout can carry without a hierarchy. Customer review content already existed on the site through BazaarVoice but sat away from the decision point. No user research was commissioned within the nine-week window; the design proceeded from stakeholder goals and catalog structure, which is the honest limit of what this work rests on.

    Strategy

    North Star: make the right size the easiest choice on the page.

    1. Keep style and variant decisions visible but not noisy
    2. Elevate fit and comfort signals near the add-to-cart moment
    3. Reserve the page's prime real estate for the buy path

    Prioritization. The buy-path modules — imagery, size chooser, style selector, price and promotion, add to cart — were designed first and given uninterrupted vertical space. Everything else (fit feedback, product details, policies) was arranged as just-in-time guidance surrounding that path, available at the moment of doubt rather than competing for attention before it.

    Design and Solution

    The central problem was hierarchy, not screen design: one layout had to serve the entire catalog. I resolved every feature on the page into 13 primary categories, each documented with its purpose and expected behavior, so the page could be built, tested, and later amended one module at a time. For the fit problem specifically, customer feedback was positioned adjacent to size and style selection rather than below the fold, letting shoppers draw on the experience of buyers with similar fit needs at the moment of decision instead of after a return. The high-fidelity wireframe then translated that specification into a build-ready layout.

    Delivery

    The annotated wireframe served as the handoff document, carrying each section's purpose, dependencies, and micro-interactions so the development team could build without a second interpretation layer. Implementation alignment was confirmed against the built page.

    Risks & mitigations.

    • Choice overload → feature grouping and progressive disclosure
    • Low confidence in fit → proximate fit and comfort feedback near primary actions
    • Variant complexity → consistent controls and explicit state changes
    No items found.

    Outcomes

    The clearest read on this work is the December 2017 capture of the live page. Three years after delivery, the specified structure was still doing its job: breadcrumb trail into the category, band and cup selectors as separate stepped controls, a sizing help link sitting directly beside them, star rating and review count promoted to the top of the page, and color selection carried as swatches rather than a dropdown. For an apparel PDP — a template most brands rebuild every eighteen months — three-plus years in production is a long life, and it suggests the hierarchy held up against merchandising pressure that a weaker structure would have absorbed.

    What I'd improve next

    I would analyze the BazaarVoice customer sentiment comments the site was already collecting. The reviews were treated as a feature to place; they were also a standing corpus of unprompted evidence about fit, comfort, and where the product descriptions were failing shoppers. Reading them for themes would have grounded the design in user language rather than stakeholder assumption, and would have given the engagement a research plan to hand forward.

    The live page in December 2017 — three years after delivery, still built on the specified structure.
    Learn more at the external product page
    Portfolio Webflow Template - Carolina - Designed by Azwedo.com and Wedoflow.com
    My activities
    Contact
    Portfolio Webflow Template - Carolina - Designed by Azwedo.com and Wedoflow.com
    Submitted! We’ll take it from here! 🪄
    Oops! Something went wrong while submitting the form.