Project Specs:

Client: Stahls’ – the leader in heat transfer vinyl and heat printing technology.
Type: Ecommerce Website
Software: Adobe XD
Role:

  • Team Lead
  • Research
  • User Experience (UX)
  • User Interface (UI)
  • Prototyping
  • Design QA

Project Details:

To redesign the product page to make it more engaging for users/customers and give a better idea of what is being sold — rolls of heat transfer vinyl.

The objective here was to arrange the information that made the most sense to those accessing it. It also meant giving a better idea of what the customer was shopping for. This was done by creating a header/hero image that reflected this better and adjusted the page’s product imagery.

Product Page Pre-2020 Redesign

Here we have Stahls’ product page template before the redesign. This layout had been the same for quite a long time, with only some minor UI changes in my time there before the redesign.

CAD-CUT-Thermo-FILM-Product-Page-2018

Product Page 2020 Redesign

One of the big changes that we created for the new product page template was a “quick look” option that brought the most critical information a user would want to the front and center and decided immediately if this was the suitable material for them.

We also added a Helpful Links section that could either be generic or specific to the product. This was a way to bring helpful resources to the user’s attention without having to dig through the education section or jump into search.

In addition to those changes, we moved the videos up the page and into a tab making them more relevant. This was big as we were making a more significant push on the video front.

Product Page Template V1 Update

We also revisited Product Template V1 and made adjustments to that to create Product Template V1.5. Unfortunately, I don’t have a screenshot of the V1 template that matches the updated product page, but I have an Adobe XD template exported (see below) — along with the pre-2020 redesign screenshot above — to get an overall feel for what it looked like.

Before

sid-xd-page-starter-template

After

Heat-Transfer-Numbers-Pre-Spaced-Stahls-2021

I’m very proud of the work we did over the years — from when I first started at GroupeSTAHL at the end of 2015 until I left at the end of 2020. As you can see in the following screenshots, the evolution of the site was quite dramatic as we strived to solve user experience issues and modernize the UI too. This was not always an easy task and the challenge was a welcome one.

UI Interactions

Another big change that came out of this redesign was an update to the mobile side of things. Something, up until I started at Stahls’ in late 2015 that didn’t even exist! We made the site responsive as one of my first big projects in early 2016, but it was only done as a quick fix and not a total solution. Our redesign here was built upon that and created a better shopping experience on the product page.