Case Study
Case Study
Case Study
Conversion-Driven Product Experience
Conversion-Driven Product Experience
Custom Ink offers thousands of customizable products, ranging from t-shirts to notebooks. My goal was to redesign the product details page to make decision-making quick and easy. This bold overhaul not only made information more accessible, it also empowered customers to make informed decisions with ease.
Custom Ink offers thousands of customizable products, ranging from t-shirts to notebooks. My goal was to redesign the product details page to make decision-making quick and easy. This bold overhaul not only made information more accessible, it also empowered customers to make informed decisions with ease.
Meet the Team
Before 👎
Irrelevant information, endless page scroll, difficult to find what matters
Meet the Team
2 Product Designers
1 Product Manager
3 Software Engineers
After 👍
Optimized layout and best utilization of space
Collapsible sections to allow customers to view only what they WANT to view
Larger, more detailed images
Reviews pushed up in the page to help instill confidence in their product choice
After 👍
Before 👎
Irrelevant information, endless page scroll, difficult to find what matters
After 👍
Optimized layout and best utilization of space
Collapsible sections to allow customers to view only what they WANT to view
Larger, more detailed images
Reviews pushed up in the page to help instill confidence in their product choice
The Choice Paradox
Challenges + Goals
With so many products available through the catalog, customers were having a hard time choosing the right product for their event. The previous Product Details Page (PDP) was incredibly lengthy, and required customers to scroll through endless fluff just to get the information they needed.
We needed to create a Product Details Page that was going to help customers choose a quality product that would fulfill their needs - and fast.
Challenges + Goals
With so many products available through the catalog, customers were having a hard time choosing the right product for their event. The previous Product Details Page (PDP) was incredibly lengthy, and required customers to scroll through endless fluff just to get the information they needed.
We needed to create a Product Details Page that was going to help customers choose a quality product that would fulfill their needs - and fast.
Choice Paradox
Assumptions
Assumptions
Condensing sections and moving elements would optimize use of space
Presenting only relevant information to users could reduce decision fatigue
Due to the overwhelming amount of options available, making the page easier to scan will help make customers choose a product quickly
Condensing sections and moving elements would optimize use of space
Presenting only relevant information to users could reduce decision fatigue
Due to the overwhelming amount of options available, making the page easier to scan will help make customers choose a product quickly
Condensing sections and moving elements would optimize use of space
Presenting only relevant information to users could reduce decision fatigue
Due to the overwhelming amount of options available, making the page easier to scan will help make customers choose a product quickly
2 Product Designers
1 Project Manager
3 Software Engineers
130,000+ Minutes of Research
130,000+ Minutes of Research
Baymard Institute uncovers what designs cause usability issues, how to create “State of the Art” user experiences, and measure how our UX performance stacks up against leading e-commerce sites. We used Baymard and competitive analysis as starting points to discover ways to optimize our Product Details Page.
Baymard Institute uncovers what designs cause usability issues, how to create “State of the Art” user experiences, and measure how our UX performance stacks up against leading e-commerce sites. We used Baymard and competitive analysis as starting points to discover ways to optimize our Product Details Page.
We used Baymard's UX Benchmarks to test and gauge the effectiveness of our Product Details Page.
Hierarchy Harmony
Hierarchy Harmony
To test the assumptions and create a plan, we focused strictly on layout by going low fidelity. By simplifying all parts of the previous layout, we had the ability to freely move elements around like puzzle pieces.
To test the assumptions and create a plan, we focused strictly on layout by going low fidelity. By simplifying all parts of the previous layout, we had the ability to freely move elements around like puzzle pieces.
Let's get low fidelity: minimizing all the page elements into gray boxes helped us move pieces around like a puzzle to find the best possible layout.
"I'm not scrolling through all this."
"I'm not scrolling through all this."
Seeing the incredulous length of the previous mobile page below highlighted how necessary a redesign was.
Seeing the incredulous length of the previous mobile page below highlighted how necessary a redesign was.
See the before (left) and after (right three designs) of the page length alone that helped mobile users see exactly what they needed!
Obstacle Audit
Obstacle Audit
While experimenting with layouts, I created user scenarios and set up interviews with five customers to understand where the main points of friction. How did the current site experience, and specifically the Product Details Page, hinder their decision-making?
While experimenting with layouts, I created user scenarios and set up interviews with five customers to understand where the main points of friction. How did the current site experience, and specifically the Product Details Page, hinder their decision-making?
"Too much information"
"I'm not scrolling through all this"
"I rely heavily on reviews"
"I usually pick products based on how many people love it"
"Too much information"
"I'm not scrolling through all this"
"I rely heavily on reviews"
"I usually pick products based on how many people love it"
Neatly Nested
The redesign focused on larger, detailed images, collapsible sections, and elevated reviews.
The redesign focused on larger, detailed images, collapsible sections, and elevated reviews.
Neatly Nested
Desktop View: Collapsible sections gave the customer the option to read more into something they cared about, and skip over what they didn't.
Mobile View
Mobile View: Collapsible sections reduced the page length by 65%!
Reflection
Reflection
Through thorough research, multiple rounds of design critiques, testing our assumptions with prototypes, and iterating designs, we successfully designed and deployed a new product details page for web and mobile platforms, generating $600k in the first year.
We discovered the core issue of helping customers gain confidence in their product choice not only relied on the product details page, but the product catalog as a whole.
We implemented badges like "Customer Favorite" and "Best Seller" on the top three products to give customers an easier starting point, and the project was a massive success in revenue generation but also driving holistic strategy over singularly solving one small problem.
Through thorough research, multiple rounds of design critiques, testing our assumptions with prototypes, and iterating designs, we successfully designed and deployed a new product details page for web and mobile platforms, generating $600k in the first year.
We discovered the core issue of helping customers gain confidence in their product choice not only relied on the product details page, but the product catalog as a whole.
We implemented badges like "Customer Favorite" and "Best Seller" on the top three products to give customers an easier starting point, and the project was a massive success in revenue generation but also driving holistic strategy over singularly solving one small problem.
© Jimin Ngo 2025