THE ESSENTIAL
PRODUCT LISTING PAGES

Redesigning the standard product templates to add meaning & storytelling to each product.

PRODUCTS WITH STORIES THAT MATTER

Role

Project Lead
Lead Designer



Year

2022 - 2024

UX/UI
Product Strategy
Visual Direction
Graphic Design

Disciplines


The Essential keeps things fresh by launching products nearly every day which helps drive traffic to the website. Data shows an increase in sales on days when a product is dropped vs on days when there are no drops.

The Essential store’s mission is to add meaning to people’s lives through products they use and love, made by people who know and care, with stories that matter, and means that are honest. This mission is clearly evident through the storytelling on the product pages. Because we launch different products across various categories, the product pages require a custom format.

I was the project lead and in charge of designing the product pages - customizing the default theme template, collaborating with developers, implementing new features, and creating new custom templates for each product launch collaborating with the sourcing team to design specialized pages.

Intro

CHALLENGES

01

How can we design the pages to have higher add to cart rates?

02

How can we design custom templates that doesn’t require a new template for 2,000+ active products?

03

Are there opportunities to add or trigger cross sell on the page without hurting conversion?

04

How can we inject more storytelling and life to these products?

THE DEFAULT LAYOUT

A look into the old product page in both mobile & desktop format

Mobile
old version

Desktop
old version

OLD PRODUCT PAGE METRICS

3.9%

Add to Cart Rate

49%

Bounce Rate

5.2%

Upsell Rate

A MEANINGFUL PRODUCT LAYOUT

Visually rich, customized, and optimized product pages with newly added features to help boost product conversion.

Re-designed the UI to unify the form selector design and worked with developer to require the add to cart CTA to be sticky for mobile.

STICKY ADD TO CART

Created a templated system for different product categories and updated all 2,000+ products with inputing information on the back end which resulted in launching products faster to scale the business.

SHOPIFY METAFIELDS

Optimized web design for mobile collaborating with the developer and standardizing the overall layout to be more compact and flow better for storytelling.

OPTIMIZE & FORMAT FOR MOBILE

Integrated & designed features like back in stock, wishlist, and subscriptions to make the product experience more user friendly with keeping in touch with the interested products.

NEW FEATURES TO INCREASE UPSELL RATE

Collaborated with cross functional stakeholders on a weekly basis to conceptualize each launch story and strategize and design a custom product page that could illustrate the depth of the product.

VISUALLY RICH PRODUCT PAGES WITH STORIES TO TELL

NEW PRODUCT PAGE METRICS

4.7%

Add to Cart Rate

+0.8% Increase

39%

Bounce Rate

+10% Less Bounces

9.2%

Upsell Rate

+4% Increase


As a result of my work on The Essential app helped double app sessions & activity, improve AOV by 15.1% and improved conversion rate by 1.2%.

Additionally, we did some quality‑of‑life improvements: created a unified store-aisle system for the app, transitioned to system fonts, and unified navigation bars.

Please note, the UI and animations in this portfolio have been updated to reflect my current standards.

Conclusion