Custom eCommerce Website

‍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!

‍

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

‍

‍

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

‍

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 Before

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

‍

‍

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.

‍

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.

‍

‍

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 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:‍