Case Study

Custom eCommerce Product Page

eCommerce Website
Client:
Project Summary:
A CRO product detail page re-design. For a brand that has two websites and 7-8 product detail page templates. Combining it all into one.
Services:
  • UX Design
  • Market Research
  • UI Design System

How it started:

LEO Wertzberger, CTO at Tiger companies reached out to us for design help it's two large eCommerce websites: Tiger Supplies and Tiger Medical.

Tiger companies is based in Irvington, NJ and has a showroom + warehouse at their headquarters.

When we first met at the headquarters the team was very warm and welcoming it was the beginning of a beautiful journey!

It's me! Standing in Front of the Tiger Headquarters - Irvington New Jersey


After meeting with the Tiger Team in their NJ headquarters we together defined what the core challenges are:

The challenges:

  1. The product detail page looked too cluttered
  2. There were 6 existing page template the team was using to create pages
  3. It was hard to up-sell essential accessories with the existing design
  4. Every product has unique packages and customization and it can be more streamlined
The Challanges


Project's Goals:

The goals of this project was very clear:

  • Organize & simplify the product page
  • Make the path to checkout faster
  • Push and sell more product accessories
  • Make it easier to configure item options
  • Differentiate essential form no-essential elements on the page
  • Entice B2B Buyers to request a quote

The Project's Goals


39 Components:

We did a deep assessment with the Tiger team to identify all scenarios and components that show up in the product detail page. Here you can see the google Sheet of the elements and how we prioritized them with sticky notes.

The Google Sheet Listing all the page Components

Page Element Priority

The Before

This is how the product page looked before we started the re-design:

The Product Page Before the Redesign


The UX Process:

Data Compilations - We analyzed and studied every scenario of the product page so we truly understand how to craft a better solution.

Noting all the details!

Tiger Supplies Detail Page


Lightning Demos - In this phase, we reviewed every eCommerce site in the same industry. We've tested them all to see the good and the bad the market has to offer.

We scanned them all for our client


The Solution:

After compiling all the research and market data, our team set out to create a new solution. 

The New design was crafted with these new improvements:

  • One master template for all products
  • Choosing add-ons & accessories became super easy
  • The visual hierarchy became clear
  • Every element got their respective spot on the page


We wire-framed and sketched many ideas. With the tight collaboration of Tiger's internal team we have developed a viable and balanced solution!

Here are some screenshots of the raw low-fidelity wire-frames:

The New Master Template

Tiger Medical Master Template -Low Fidelity Design


The Polish:

After ironing out the last tweaks of the UX with the team, we set out to craft a new design system, that will live liven up the Tiger websites for this product page and for the future redesign of the entire website.

Here some shots of the final product:

No items found.
Like what you see?
Get the help
More Projects
Back to All Case Studies