HVAC & Plumbing Website
About: Lee’s Air is a premier HVAC and plumbing company in California. While they excel in delivering exceptional in-person service, their online presence does not reflect the same confidence. Customers frequently reach out with inquiries that the website could easily address. During my tenure there, I identified this challenge while handling phone calls, which prompted me to initiate a comprehensive redesign of the landing page—the first touchpoint customers encounter with the brand.
Tools: Figma
Role: UX Researcher, UX/UI Designer
UX Research
After conducting a design audit of all 16 competitors, I synthesized the key features onto sticky notes and initiated an affinity mapping exercise. This process allowed me to categorize and identify patterns in the data, facilitating a clearer understanding of industry standards and opportunities for differentiation.
Card Sorting
I then conducted a card sorting exercise to refine the existing information architecture. This collaborative process involved two typical users of Lee’s site, allowing us to gain valuable insights into their preferences and behaviors, ultimately informing a more intuitive and user-centered structure.
Personas
I synthesized my research insights to develop two user personas that represent our target audience. These personas encapsulate key characteristics, needs, and motivations, providing a clear framework to guide design decisions and ensure alignment with user expectations.
Wireframes
Wireframes of the landing page were developed to establish the foundational building blocks of the site. These wireframes incorporated common design patterns while seamlessly integrating essential features, allowing for a clear visualization of the user experience and functionality.
The top navigation is designed to enable quick access to key areas of the site, enhancing user efficiency and flow.
The "Service Needed" feature was implemented to align with industry standards.
A review section with a "View More" option was added to give users greater control over accessing additional feedback.
Awards and recognitions were included to enhance user trust and credibility.
Concise descriptions of each service are provided, along with "Learn More" buttons for easy access to detailed information.
Featured brands are displayed to enhance transparency and build trust with users.
A membership section includes key details and a clear call-to-action, encouraging user engagement and sign-ups.
A dedicated section highlights current offers and deals, keeping users informed of exclusive opportunities.
Including an FAQ section aligns with industry standards, providing users with quick access to essential information.
An explanatory "How We Work" section has been included to enhance transparency and set clear expectations for customers.
UI Design
Here is the finalized UI for the Lee’s Homepage
The top navigation is designed based on research findings, ensuring it effectively meets user needs and enhances overall usability.
The appointment modal adheres to industry standards, featuring a "Service Needed" dropdown option and a status bar that visually indicates progress as users navigate through the modal.
A carousel showcasing awards and recognitions is included to highlight achievements and enhance credibility.
Concise descriptions of each service are provided, along with "Learn More" buttons for easy access to detailed information.
A review section with a "View More" option was added to give users greater control over accessing additional feedback.
An explanatory "How We Work" section has been included to enhance transparency and set clear expectations for customers, complemented by brand images to reinforce credibility.
The offer/deal card section features individual call-to-action buttons leading to dedicated pages, providing accurate details for each service.
Featured brands are displayed to enhance transparency and build trust with users.
A membership section includes key details and a clear call-to-action, encouraging user engagement and sign-ups
Achieving industry standards, the FAQ section includes the most frequently asked questions sourced directly from the site, ensuring relevance and user satisfaction.
Prototype
Here is the final prototype for Lee’s industry standard home page.
Key Takeaways
Throughout this project, I learned the importance of first refining industry standards before introducing innovation. It’s about striking the right balance between meeting established requirements and adding unique value.
My biggest challenge was working within the existing information architecture of the site. While it was useful to have predefined pages and a sitemap, this structure also made it difficult to reorganize the top navigation in a way that better aligns with a user-centered mental model.