I was the sole designer working with a group of developers to make over HVAC.com's command center application for their customers. This project spanned research, IA, content, and final UI designs, as well as testing and further improvement upon the new design.
I have also done some marketing UI design for HVAC.com's main website, which involved designing several variants of a landing page for A/B testing, so I did both marketing and business app design here. This portfolio project covers only the business application redesign.
I have also done some marketing UI design for HVAC.com's main website, which involved designing several variants of a landing page for A/B testing, so I did both marketing and business app design here. This portfolio project covers only the business application redesign.
I was the lead designer on this project, and the redesign spanned several site areas that all had a lot of functionality (when they said all-in-one, they meant it). The CRM covers everything from social media management, lead generation, website management, advertising online, generating marketing materials, and much more. It's a powerful tool that is really meant to be all-in-one.
Initial Problems
1. Lack of hierarchy in navigation can be confusing (there were two nav bars initially, and some navigation was buried in buttons)
2. Copywriting that can be shortened in some places or rewritten to better describe what they're trying to get users to do
3. Visual design and style also does not convey hierarchy/urgency/importance of certain options over others. Some pages are not designed well enough to display the info on it.
Research
User base is contractors who have HVAC businesses. I did a small handful of user interviews to generate a very broad idea of the user base, and referred to HVAC's documentation for general information as well.
Main Pain Points of Customers: Contractors are very busy, often take calls outside of business hours, and have to manage many moving parts of their business that include: reliable leads, good employees, training to stay on top of the latest tech, suppliers for parts, and much more. The command center needs to gain the contractors' trust and act as an all-in-one solution for their needs. This was the goal.
Main UX takeaway: Contractors that use the app are not very tech savvy to start and usually view on desktop or their phones, not so much tablet. Their main goal was getting more trustworthy leads to generate more business, with other functions like social media, marketing materials (postcards), etc. coming second.
IA and Content Work
I drew out a sitemap and pointed out where they were having some organization/prioritization problems, and how to restructure things.
Not pictured, but the content analysis involved going through every piece of original content on the application and applying different measures of usability, importance, whether or not it was written well, and what needed to be changed/removed/kept the same. They used my expertise in content many times when coming up with CTAs, after they realized that content was my specialty.
Competitive Analysis
Not pictured but I did this at the beginning of designing a specific screen or task flow. I took a look at other CRMs that did functions such as social media posting, managing leads, onboarding via interactive tutorials, etc.
Also, websites to design postcards and business cards came in handy for the marketing materials section.
Also, websites to design postcards and business cards came in handy for the marketing materials section.
Looking at other CRMs and processes helped with the next step... task flows
6. User and Task Flows
Before designing a specific page or task, I came up with flows similar to the one below. This helped inform the UI immensely.
7. UI Design
The UI framework was already decided upon (an open source version built on bootstrap), and so my job was to create well-organized and consistent elements, consistent coloring, and the perfect copy. Below are high fidelity mockups (I have many lo fi sketches but they were just for my purposes and not shown to client)
The UI framework was already decided upon (an open source version built on bootstrap), and so my job was to create well-organized and consistent elements, consistent coloring, and the perfect copy. Below are high fidelity mockups (I have many lo fi sketches but they were just for my purposes and not shown to client)
8. Testing
As the app was being built, some tests and tweaks were done to work out user centric problems. We learned for instance that users actually would feel fearful of clicking wrong buttons to the point where they would rather not do any action at all, which is definitely not what I expected. We made adjustments along the way.
I still consult for HVAC.com on best UX and UI practices! If this story spoke to you, let's talk about your projects: www.sarahkhandesign.com or email me: khans1025@gmail.com
