The Essential Product
〰️
The Essential Product 〰️
Meaningful Product Pages
Redesigning the standard product templates to add meaning & storytelling to each product.
Role
Project Lead
Lead Designer
Year
2022 - 2024
Disciplines
UX/UI
Product Strategy
Visual Direction
Graphic Design
Introduction
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.
Challenges
Are there opportunities to add or trigger cross sell on the page without hurting conversion?
How can we inject more storytelling and life to these products?
There are 2,000+ products active in the store. How can we design custom templates that doesn’t require a new template for each product?
How can we design the pages to have higher add to cart rates?
The Default Layout
A look into the old product page in both mobile & desktop format
Mobile
old version
Desktop
old version
Product Page Metrics
old version
Add to Cart Rate
Bounce Rate
Upsell Rate
A Meaningful Layout
Visually rich, customized, and optimized product pages with newly added features to help boost product conversion.
01
Sticky add to cart
The form selector designs are inconsistent, where the dropdown would be outlined in a rectangle but the CTA’s are in a solid pill form.
Unify the form selector design and work with developer to require the add to cart CTA to be sticky for mobile.
02
Shopify Metafields
Shopify came out with a new feature (metafields) in 2022 which helped with creating custom templates that could link to specific products.
Update all existing products with inputing information, and updating custom templates using metafields.
03
Optimize for mobile formatting
The default theme resorted to laying out the composition in carousels which disrupted the storytelling of the page.
Optimize pages for mobile collaborating with the developer and standardizing the layout to be more compact.
04
Newly added features
The default layout and the usability of the website does not extend beyond adding the product to cart which ends the experience when the user isn’t ready to purchase yet.
Integrate features like back in stock, wishlist, and subscriptions so these pages could be more user friendly with keeping in touch with the products.
05
Visually Rich product pages
The store has a variety of products that require different storytelling and care to inform the customer about the details and benefits.
Collaborate with team members on a weekly basis to conceptualize each launch to design a custom product page that could illustrate the depth of the product.
What Difference Was Made?
Updated Metrics
Add to Cart Rate
+0.8% Increase
Bounce Rate
10% Less Bounces
Upsell Rate
4% Increase
Conclusion
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.