Introduction
Before and After
Redesign Prototype
The homepage was redesigned to create a strong first impression and communicate professionalism immediately. A large hero banner with the statement “Building Smarter, Greener, and Safer Systems” is used to establish trust and clearly position the company’s values.
Clear call-to-action buttons such as “See How,” “Explore Services,” and “Request a Quote” guide users toward key interactions, improving usability and engagement. The layout introduces a clear visual hierarchy, allowing users to quickly understand the company’s offerings. A company overview section highlights core values—Experience, Expertise, and Efficiency—supported by visual icons to improve readability. Supporting statistics (e.g., “20+ Years Experience,” “350+ Projects,” and “$38.4M Sales”) are included to reinforce credibility and professionalism.
The Services page focuses on clarity and accessibility of information. Instead of dense paragraphs, services are presented in structured content blocks with images and short descriptions.
Each service category—such as HVAC System Design, Energy Optimization, and Sustainable Solutions—is clearly separated, making it easier for users to scan and understand offerings. This layout improves both readability and user experience while maintaining a consistent visual style across the site.
The original homepage was text-heavy and lacked visual hierarchy, making it difficult to navigate. The redesigned version introduces a cleaner layout, stronger visual hierarchy, and clearer calls-to-action to improve usability and professionalism.
The original services page was dense and text-heavy, making it difficult to scan key information. The redesigned version introduces visual grouping, clearer hierarchy, and imagery to improve readability and user engagement.
The original projects page lacked visual structure and made it difficult to quickly understand the company’s work. The redesigned version introduces clear sections, featured projects, and case studies to improve organization, readability, and user engagement.
The original contact page lacked structure and clear guidance for users. The redesigned version introduces a clean layout with an inquiry form, contact details, and a map to improve usability and accessibility.
The Projects page was designed to build trust through real-world application. It showcases featured projects along with case studies that outline the client challenge, the company’s solution, and measurable results.
This structure helps communicate not only what the company does, but how it solves problems. By including outcomes such as energy reduction and improved air quality, the design strengthens the company’s credibility and demonstrates expertise in a tangible way.
The Contact page prioritizes usability and accessibility. A clear inquiry form allows users to easily reach out for consultations, while company details such as address, phone number, and email are presented in a clean and organized layout.
The addition of a map preview further supports user convenience by providing spatial context. Overall, the page is designed to reduce friction and encourage communication between the company and potential clients.
Summary
Through this website redesign project, I focused on improving visual hierarchy, consistency, and overall user experience. The redesigned version uses a more cohesive color scheme and refined typography to create a more readable and professional interface. These changes help enhance clarity while also building a stronger sense of trust with users.
Throughout the process, I learned how to design for professionalism and credibility in web design. This included understanding how elements such as layout, color consistency, and content organization contribute to a trustworthy user experience. I also explored how adding supporting elements like data and case studies can strengthen a company’s image and make the website feel more reliable and informative.
One of the biggest challenges was designing an effective layout that would not overwhelm users or discourage them from reading. Ensuring that information was both accessible and visually engaging required careful structuring and iteration. To address this, I analyzed websites from established companies to better understand professional design standards and applied those insights to my own work. By organizing content into clearer sections and refining the visual hierarchy, I was able to create a more comfortable and engaging reading experience.
If I were to revisit this project, I would further refine the typography to improve readability and explore additional enhancements to make the overall experience even more user-friendly. This project reinforced the importance of thoughtful layout design and consistency in creating professional and trustworthy digital experiences.
Old Home Page
Old Service Page
Old Project Page
Old Contact Page
New Contact Page
New Home Page
New Service Page
New Project Page
I selected a local Canadian engineering firm, HVAC Engineering Inc., and redesigned its website after identifying key usability and design issues. The original site appeared outdated, with weak visual hierarchy, inconsistent typography, and limited use of color, resulting in a less professional and less engaging user experience.