The Current Site

Metal Masters, an HVAC company in Oregon, has had a responsive website—which I designed—for the past 2 years (see Pic 1). It was designed for the desktop first and then adapted to be responsive. Certain features were built with haste in this version, until I would have time to redesign the entire site using a mobile-first design.

Solving for User's Needs
When people call the company, they are typically looking for quick help with one of three things: a service call for their home, an estimate for new equipment, or help with a commercial HVAC system. The design of this site reflects those priorities, as users are presented online scheduling links on the homepage for these three options.

For the next iteration of this site, I wanted to clean up the visual design, make these call-to-actions simpler to understand, and brighten up the overall feel of the site.

Mobile-First Website Redesign

As the website's current analytics reveal, the majority of users on the site are accessing it via a mobile device. So, the decision was made to start the redesign with the mobile experience first. The following images show mobile screens from the redesign as it is now.

The homepage of the mobile experience puts an emphasis on scheduling an appointment easily—by scrolling down a little to select the needed option, or with phone numbers that can be accessed quickly in the header.

I broke out "service call" into "trouble calls" and "maintenance calls", as these are two very different needs from a user perspective. This made for four different scheduling options. I also used conversational language for the each button.

Taking a cue from mobile app designs, I moved the sticky navigation to the bottom of the screen for easy thumb access. After researching about the weaknesses of using a hamburger menu icon only, I also decided to add the word "menu" to the icon.

Because most mobile websites do not currently use a sticky navigation on the bottom of the screen, I plan to test this with users before committing and taking the site live.

Desktop Screens

The following images show the desktop screens designed to help users accomplish the same goals as with the mobile experience.

All of the navigation elements were moved to a sticky header. The same four scheduling options are given a strong visual weight to call attention to them.

Instead of simply building a site that would work as an online marketing brochure for the business, all of the decisions and solutions were arrived at to provide users with a tool to quickly and easily schedule HVAC service or maintenance—in the midst of an otherwise busy schedule.

Popdock onboarding and usability improvements for increased conversion.

Providing facility managers an intuitive tool for controlling HVAC operations.

Providing users an intuitive alternative for sharing content.