A major redesign for VHT's official website, improved with mobile-friendliness, distinctive product display, and high-impact visuals.
VHT is a premium spray paint brand, with its original products used on NASA space vehicles. Nonetheless, their website couldn’t lift off as high. I was given a task to help them with a design overhaul. Within two months, the site was transported to the present day, giving the clients big smiles of satisfaction on their faces, and a 15% increase for page views from the year before.
What is VHT?
VHT stands for Very High Temperature. They sell automotive spray paints and coatings that can withstand temperatures of up to 2000°F. The brand was acquired by Sherwin-Williams in 2007.
Who are the main target?
Car enthusiasts of all ages and genders. Old and new users. This means keeping the industrial tonality and introducing a more gender-neutral presentation. Content navigation should be direct.
What was the site look like before the redesign?
Below is a screenshot of the old VHT site. It was a static design, not responsive. The website would release a surprising motorcycle sound effect whenever your mouse cursor hovered over the flaming VHT logo. There were no product images nor an introduction to VHT presented until you clicked one of the links. The design could be reminded of the 90's era.
I had a chance to work with a freelance UX designer from the start of the project. While he managed the wireframes production, we had discussions along the way to solve problems.
The Hero Introduction
Initially, the UX designer placed a small paragraph that introduced the user to VHT above the hero area on the homepage, and used the hero area solely for promotional content as presented in the image below. I had to call it out, because this unfamiliar positioning would cause the site to look unsettling to the user, especially since this was the landing area. I suggested combining the introduction and the promotional content within the hero area, then automate the carousel. This way, the user can still learn about both contents, while being impressed with the simplification of the design.
Accordion or Table
On VHT Flameproof™ Coating's page, there was a section called "Curing", which the UX designer first suggested to split its content into two, then hide them inside an accordion menu. I found that solution to be unnecessary for many reasons. First, the purpose of an accordion menu is to shorten the length of a vertical content/navigation that has more than two sections (UI-Patterns). Second, each section consisted of only six short bulllet point sentences. It's not that long at all. Third, it added a blank step in order to reach the content. Instead of reading this page from top to bottom without having to perform any clicks like the other pages on the site, the user had to open each accordion menu to read only six short bullet points. Fortunately, I was able to request a change for this section into a simple table before the development began.
Choosing A Color Palette
I concepted two separated versions: dark and light. This was to find a design direction from the client. The dark version looked pretty much like the final design, with a smokey dark gray background and colors that refer to heat (red) and the logo's yellow (hence why I used more yellow than red). The light version had a very light gray background that looked almost white, monochrome flame, and red links instead of yellow. As expected, the client chose the dark version.
That small icon next to the URL in your browser is actually a part of VHT's logo. I was asked to come up with a favicon design for the site. At first, it was going to be a flame icon to support the product's value. However, I soon noticed that using the logo would benefit the brand more overall. By using the "V" from the logo, the icon became a reminder of the original logo, strengtening the user's memory of the VHT brand.
I knew from the start that there would be no additional product shootings (no new product shots with sophisticated angles) due to the budget. We had to use existing assets. The main villian, however, was the flame background. I was requested by the client to incorporate this flame into the new design.
At first, I used a different flame image that looked more like typical bonfire flame. The client didn't call it out until near the end of the design phase. They wanted to use "engine flame" not bonfire flame, and suggested us to use the flame image on their old site instead. As surprising as it might seem, I figured it was a pretty nice way to keep the brand identity. The real challenge was how to "tastefully" (according to one of our account executives) incorporate it into the design.
Usually, a tasteful design is referred to a design that is in harmony throughout the piece. It is stable. It might be loud, or quiet, but its elements must work well together to produce singularity. Looking at my VHT design and the old site's flame, I noticed a difference. "They are not in harmony with each other." My design was uniformly of a dark tone, while the flame was very bright. I went ahead to replace the bonfire flame with this engine flame, then dropped its brightness by adding a translucent black filter and a grainy texture. The result was a dimmed version of the engine flame that still remained itself, while blending well with the dark background and the rest of the site. The client was very impressed, and signed off the design right away during the meeting.
View hi-res screenshots in PDF: desktop