Corporate · B2B · 2020
Corporate Website Redesign
Streamlined an HVAC manufacturer's site around product discovery and quotes, cutting bounce rate.
The same HVAC manufacturer behind the controller app had a website working against it. The brief was to redesign how customers browse the product catalogue, choose the right product, and request a quote, and to lift engagement along the way.
Understanding the existing interface
The old site fought its visitors. An autoplaying slideshow led the page. The menu had a boxed layout that wrapped and pushed the page down, the top navigation was redundant and duplicated, and important items were buried in dropdowns. UI elements were cramped, the content was written for SEO rather than people, and the main calls to action assumed you were already a technical buyer who knew the catalogue.
Design process
Before designing, I aligned with stakeholders so we agreed on goals, scope, and the target user. I set up interviews with product owners, engineers, and marketing, then mapped the customer journey to find the opportunity areas. Four questions framed it: what the site needs to accomplish, who it is for, what references it should learn from, and what rules and limitations apply.
Research
To understand how visitors navigate and what drives their decisions, I ran face-to-face interviews and Zoom sessions, giving people tasks and asking them to think aloud as they used the site.
Persona
I created proto-personas, grounded in industry knowledge and research, as a starting point for reasoning about user needs and the problems the information architecture had to solve.
Customer journey map
From the research, I built a detailed customer journey map covering each touchpoint: what users do, their goals, expectations, and emotions. It made the pain points impossible to ignore and pointed directly at what to improve.
Information architecture
I built the information architecture to map every path a visitor can take through the site, well beyond a sitemap showing which page leads where.
Wireframing and prototyping
I worked entirely in Figma for wireframes and high-fidelity interactive prototypes. Wireframes set the structural framework first, prioritising logical flow and intuitive navigation. The interactive prototypes then brought those frames to life for stakeholders, who could try the design directly and give immediate, actionable feedback, which kept iterations fast and grounded in research.
Style guide
A documented style guide kept the visual language consistent as it scaled across the site.
Results and takeaways
Since launch, behaviour analysis showed a significant drop in bounce rate. Users called out the streamlined navigation and better content scannability, which made product searches faster and saved them time, and several said the site simply looks and feels more polished.
