Thermobilt

Windows & Doors Co. Role: UX and Web Developer

Problem

This was the first project I had full reign over the website structure, via a sitemap. The homepage, mobile version and landing page were also wireframed for the first time in my new role as Web Developer & UX Specialist.

The main focus of the redesign was to bring the design up to date, create SEO friendly pages that Google could crawl better, and making landing pages that convert for PPC campaigns.

Overview

The main focus of the redesign was to bring the design up to date, create SEO friendly pages that Google could crawl better, and making landing pages that convert for PPC campaigns.

Research

As my first project in my new role as Web Developer & UX Specialist, I had full reign over the website structure and some of the layout.

I first surveyed their competitors by looking at their sitemaps. There wasn’t much of a variance between other competitors’ sitemaps, as there wasn’t much wiggle room for the industry.

I kept the sitemap pretty close to the old one after much deliberation, except I kept URL structure in mind. On the old site, there were 23 landing pages per service area, which added up to 345 landing pages in total! To fix this, I created a main services page, with sub pages for each one. Bringing 345 pages down to just 16. I also threw in an FAQ, and changed the hierarchy of a couple of pages.

Prototyping

Thermobilt Wireframe

Desktop Wireframe | Mobile Wireframe The competitors were also pretty shabby, but I did appreciate the ease of a top bar with the non primary links, and then a main nav with their products and services that some of them had.

The previous iteration didn’t have a lot of visual cues, which was a weakness in terms of navigating the site. My main goal of this redesign was to take advantage of a users visual memory and let them recognize the type of window or door they want by images instead of text. As a result, windows and doors are the main focus of the site navigation. The thumbnail sized images on the drop down navigation showcase the product - allowing the user to quickly recognize what type of window they are looking for, without needing to reference the name.

Making the main goal of the website (filling in the quote form) quicker and less prone to user error. The final design and website has a number slider for the amount of windows and doors the customer needs a quote on, which was present in an earlier prototype.

Interaction Design & Heatmaps

I received the high fidelity design back from our Senior Graphic Designer and started to work on developing the website. I experimented with the AoS (animate on scroll) javascript library to draw attention to certain aspects and headlines of the site. I focused on trying to be eye catching but not cheesy, making animations useful over flashy. I also used floating labels (as featured in my blog post).

We had a temporary landing page set up, and we noticed in Crazy Egg that users were trying to click on static product images. Since we didn't want users to click away, I created a lightbox solution to show a bit more info, but drew the user back to submitting a quote.

End Result

Post the successful launch of the site, I’ve been keeping my eyes on the heatmaps and looking for opportunities to improve landing pages and the general site. One thing I've implemented post launch was a hover animation on the slider that would change the number value to red, highlighting the use of the slider.

Let's Chat!

We can talk about UX, UI or Front-end Development! Or if you want to get deeply personal I'm cool with that too (to an extent).

CONTACT ME