Metal Masters Mobile-First Website Redesign
–2018 (this project is not complete yet)
Giving customers
quicker access to the
help they need
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.
Pic 1. This image shows the current responsive website Metal Masters has been using in both desktop and mobile form.
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.
This screen shows the "Service" page, where a sub-navigation is placed to the lower right giving users access to different topics on this page.
When the user selects the lower right hand "Service" button, a fly-up menu of page options is activated.
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.