Responsive Website Design
Nash Mechanical Contractors, Inc., a Houston Heating, Ventilating, and Air Conditioning (HVAC) repair company had a website and logo from the 1990s. While this classic company stood the test of time, they were ready to make a shift to a new online presence and refresh their logo. This would in turn increase their business and complement their current customers. Check out the redesign and process!
Looking at Competitors, I researched Houston's local HVAC repair companies. After assessing their strengths and weaknesses, I could understand what might make my responsive website successful and comparable.
In addition to my competitor research, I sent out a 10-question online survey to a group of 10 people with varying ages and genders. I asked questions relating to common current business inquiries. This Questionnaire was incredibly useful.
After interpreting all of the information from the Questionnaire, I summarized the questions and answers in a Summary of Research Findings document. This helped to form the outline of what would exist on my website.
Based on my research, I created broad generalized User Personas to understand the demographic. These people are men and women between ages 25-45 and 45+. They either rent or own their home.
After asking questions like, “If you were on a website for an AC repair company, and you need a repair, what’s the most important feature you would look for?” and “What will make you choose a particular company?,” I gained incredible insight. People wanted to book appointments online. They also placed heavy importance on company reviews to choose them. This tailored the User Flow, Task Flow, and Sitemap. In the case of a HVAC repair company website, most of its users would be arriving in need of repair and wanting to browse the company’s services, background, and reviews. However, the entire goal of their visit would to be to schedule an appointment with the company. This brings business to Nash Heating & Air and makes it easy for the user to schedule without having to call or make extra effort. My research showed that people want to be able to schedule an appointment online.
.png)
After getting an idea of the user experience pathway through the website, I began to sketch possible designs with some of the most helpful features. I combined all of the assets I thought were essential to the homepage and menus. My goal was to have a seamless easy experience for the user. After hand-drawing the sketches, I chose the best out of 3 and created low-fidelity design frames for those.For the homepage, there were several key elements I wanted to include. I really liked an embedded map of the general location to be visible, since customers frequently know the area and can easily see the company location. I also wanted to have a simple quick-form on the homepage that could invite users to submit a request instead of the schedule appointment button. Lastly, I knew I wanted to have a section offering to read the companies reviews from Google. In addition to these features, Nash likes to designate between commercial and residential services, so I knew I’d be including those buttons as well. After the homepage, the Schedule Appointment page was next of importance. Most users would be funneling through that page, so it was high priority to ensure its efficient design.
Designing for Nash was a ton of fun. I started by changing the name to make it something that people understand and identify with. The original name Nash Mechanical Contractors was confusing and customers weren’t always sure of what work they did. I decided to go with Nash Heating & Air because it was short, direct, and easy to read.
For the logo, I knew something totally different was in store. I ended up going with a modern thermostat-inspired look. I added red and blue colors in the range to help enforce the idea that it’s a thermostat. I placed an “N” in the center to stand for Nash and create the Nash brand. The thermostat alone would serve well to use in smaller versions of the site. For the word mark, I chose a smooth and modern font, Comfortaa. I added the red and blue colors again to encourage consistency and the clarity of heating and air conditioning company.
The style tile came together with the same red and blue colors signifying heating and cooling. I did not have the use of any imaging from the company and so I used stock illustrations and images. The font choice was intended to complement the logo and maintain a professional tone. I chose round buttons and rounded corners on images and boxes. This seemed to keep a simple, easy feel of the site and kept it cheerful and user-friendly. The site needed to have an overall friendly and helpful tone to encourage the users to choose Nash for their HVAC needs.
I brought the low fidelity design to life combining all design elements. I created many frames in high fidelity so that the whole website would function in prototype style. I kept a clean, simple layout and made use of white space. This is hopeful to promote a streamlined experience for the user to schedule an appointment for HVAC repair.
Using the text that was given to me by the company, I combined it with complementary images keeping the feel minimal. The primary page is the Schedule Appointment page since that is the lifeline of the company - to make appointments to schedule jobs. In this section, I created a step-by-step form that was simple and easy in 3 steps. I also included a process bar so the user knows how far and how long the form is. The information needed is selectable and can be quickly clicked by dropdown. I also included bubble selections for fast selection. Lastly, it’s important to know when the user has completed the form that it was officially submitted and went through. So the last section contains the green check mark icon to confirm submission. I also included a subheader informing that a copy would go to the user’s email. This helps them have official copies, confirm transaction, and keep contact with Nash.
After recruiting participants to test my prototype, I created an affinity map to document their feedback. After that, I made revisions and reiterated on the final frames.
Click here to view the Prototype.
This project was a privilege to work on and learn from. I wanted to respect Nash Heating & Air and maintain their values, but also enhance the company with modern design techniques. This project gave me so much insight in how to do that. I am really proud of the style tile and branding part of this project. It was also my favorite to work on. I realize how much time I can spend on certain design elements and that I need to time-box certain steps so that I keep moving forward. It was a challenge to have no new imagery from the company, but it gave a freedom to use what I could find. I really enjoyed getting results from my questionnaire research in this project. Seeing real life feedback and being able to incorporate that into the site design is extremely satisfying and feels so good. I imagine and hope that these designs truly help people and make life issues like broken air conditioning convenient and fun to use.
