Project Specs:

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

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

Project Details:

To simplify and make it easier for customers to shop the numerous products and support pages across Stahls.com. It was an ongoing project that came up all the time. So, when the time was available, it was dedicated to it.

Header Pre-2021 Redesign Evolution

I think I can safely say the one thing that probably changed the most on the website over my time at Stahls’ is the header area. With so many products available and many stakeholders’ needs and wants, this was a constantly evolving project.

Stahls.com Header 2015

Here we have what the header looked like when I started working at Stahls’. It consumed a lot of space at the top of a page with the “tabbed section” across the top. I should also note, the site was still at 1024px wide at this time.

sid-header-2015

Stahls.com Header 2016

Shortly after I started, I was a huge proponent for getting rid of the top “tabbed section” as it wasn’t adding a lot of value, and there was a significant demand to bring things up on the page. At this time, I pushed for better UI consistency and to get rid of the candy button look that was plaguing the header area mostly.

sid-header-2016

Stahls.com Header 2017

Not much changed up to this point. Mostly some UI clean-up continued and branding update with the logo. When I took over as the team leader, I started to unify the branding more and create a design system to keep things consistent going forward.
sid-header-2017

Stahls.com Header 2018

This update was the first time we saw a significant change to the header area in a long time. The goal was to simplify its overall appearance and hopefully make it more useful for users. The branding redesign started here too.

sid-header-2018

Stahls.com Header 2019

In 2019 we saw yet another big change to the header, and this time the navigation along with it. It was a major attempt to make navigating the massive site easier for users. For some, this was a welcome change, others not so much. We also changed the site’s width from 1024px to 1280px at this time. Data showed a larger screen size was being used by most of our customers, and we want to give the site more breathing room.

sid-header-2019

Stahls.com Header 2020

Not too much changed from 2019 to 2020, but we definitely tighten things up and we redesigned search to be a lot more useful for users.

sid-header-2020

Header 2021 Redesign

The latest iteration of the Stahls.com header was one of my last projects while there. This redesign launched at the end of 2020, but we’ll call it the 2021 look for history’s sake. There were stakeholder requests to add some new things in, and we have to figure out how to get a lot of it in there. We also want to simplify the overall look of the header as well.

It ended up being quite the challenge. I think we came to a solution that achieved a lot of that. We did have to make the header a little taller, and to compensate for this; we created a collapsable header section when you scrolled down the page. You can see the demo below.

sid-header-2021

This demo is using Adobe XD prototyping to show it in action. You can always visit the site to get an idea of how it works too.