[Echo Design Group] Product Style Guide
Transforming product discovery to eliminate consideration-stage drop-off and boost conversion
ROLE
UX Designer
TEAM
UX Designer · Customer Experience Manager
TIMELINE
Jun — Aug 2026
TOOLS
Figma · Claude · Shopify · Klaviyo · Hotjar
PROBLEM
How might we eliminate consideration-stage drop-off?
A scarf is one of the most versatile accessories in fashion, yet most shoppers lack the knowledge to style it. Shoppers frequently enter an extended consideration loop, leaving the page to search for styling ideas or holding off on purchasing.
SOLUTION
An interactive styling module directly in the product page:
By embedding styling techniques directly into the product page, shoppers instantly see product versatility in context. This validates their purchase decision right at the point of conversion.
A comprehensive encyclopedia for every way to style a scarf:
Integrating the Scarf Encyclopedia directly into the main navigation builds immediate context before shoppers select a product. If a specific style catches their eye, they can seamlessly shop by scarf type or purchase the exact item featured in the encyclopedia.
RESEARCH
I used Hotjar and Shopify to understand our users.
Hotjar mouse tracking indicated that shoppers are browsing images to visualize how the scarves can be styled.
Shopify sales data indicated that listings with more styled model photos performed better than those with static product shots.
DESIGN PROCESS
The product page module holds dense information in a small container.
Since the module's size is less than half the screen, I had to make sure everything was scannable and not too overwhelming.
Claude's ideations
The dual-navigation setup creates high cognitive load for casual browsers.
My final design
Shoppers are not always familiar with style names. Less visual noise invites the browser.
A/B/C Testing: The Encyclopedia is a whole page and holds even more information.
REFLECTION
E-Commerce UX design taught me more than I expected.
Adapting UI density to user intent and attention bandwidth across discovery.
Different shoppers have different intentions, therefore different levels of attention. New shoppers need broad, educational discovery (Main Site Nav Encyclopedia) to understand the broader context of the scarves, whereas returning shoppers require lightweight, product-specific visual proof (PDP Styling Module) to convert.
Implementation and future impact
Leveraging Shopify metafields directly links the style guide to the specific product on view while improving overall SEO search visibility. Connected via Shopify and Klaviyo, analytics will track an increase in Conversion Rate and Average Order Value (AOV) driven by integrated email and website traffic.