Redesigning the Aeroseal website with a refined information architecture and a new branding.
Role
UX Designer
UX research
Information architecture
User Interface design
Information architecture
User Interface design
Team
Senior Director, Marketing
Vice President, Marketing
Vice President, Marketing
Collaboration
Product
Product Managers
Leadership
Leadership
Marketing
Marketing lead
Marketing manager
Digital marketing specialist
Social media specialist
Marketing manager
Digital marketing specialist
Social media specialist
Development
WordPress developer
Timeline
Phase 1
May 2023 - Jun 2023
Phase 2
Jun 2023 - Aug 2023
Tools
Figma
Miro
Adobe suite
Google analytics
Page analytics
LinkedIn
Miro
Adobe suite
Google analytics
Page analytics
What is aeroseal?
Industry-Leading Duct and Building Air Sealing Technology
In simple words, Aeroseal reduces leaks in ductwork and buildings up to 95%, resulting in energy savings, healthier air and cost reduction.
target Users
Companies
ESCO, Builders, HVAC
Individuals
Contractors, Dealers, Duct cleaners, Energy raters
Before we started I had one question: Why is the company planning to redesign the website?
"And to find answers, three rounds of meetings were held"
01: Discussion with leadership
I understood the industry background, the substantial growth of the company, and the restructuring of its business units.
02: Meeting with the product team
I learned about the new products introduced and the team's expectations for the website.
03: Conversation with the marketing team
I learned that the new branding was scheduled to be released in a month, and the management expected the website to reflect the new branding accordingly.
Redesign plan
After understanding the business requirements, we, as designers, are committed to making things happen. That's when I devised a two-phase plan to implement the new branding:
Phase 1
- Temporarily fix the homepage
- Implement the new branding
- Implement the new branding
Week 1: Research
Week 2: Design
Week 3: Development
Week 4: Buffer
Week 2: Design
Week 3: Development
Week 4: Buffer
Phase 2
- To perform UX audit
- Refine the information architecture
- Design, test and iterate
- Refine the information architecture
- Design, test and iterate
Phase 1
The first step was to understand the issues on the homepage
Issues found
Heuristic evaluation
- Inconsistent layouts
- Lack of hierarchy
- Un-clickable icons
- Lack of hierarchy
- Un-clickable icons
Behavior flow analysis
- Flow from Homepage to two main landing pages is low
- Demo conversion is low
- Demo conversion is low
Page analytics
- Bounce rate is high
- Percentage exit is high
- Percentage exit is high
Before
Finding the issues
Heuristic evaluation
Evaluation was done to systematically review the interface and find usability issues. These uncovered key issues such as inconsistent layouts, lack of hierarchy and un-clickable icons.
Behavior flow analysis
- Flow from Homepage to two main landing pages is low
- Demo conversion is low
- Demo conversion is low
Page analytics
- Bounce rate is high
- Percentage exit is high
- Percentage exit is high
LinkedIn poll study
A series of polls were conducted on LinkedIn with the aim of gaining insights from contractors, builders, and HVAC specialists.
What worked
Many respondents felt that adding the case studies section was helpful in building trust with the products of the company.
What failed
Due to less number of responses on most of the polls, no other solid decision was made based on this study.
Interface design solution
Changes implemented
The homepage underwent a transformation featuring a refreshed banner and a captivating tagline. Below this, a new section directing users to the two business units was incorporated. A dedicated space highlighted key achievements of the company through notable figures. Clickable benefits icons were introduced, seamlessly guiding users to relevant pages. Additionally, case studies were integrated, offering users tangible examples of the company's success.
View WebsiteOld homepage
New homepage
Outcome
6.6%
increase in product demo rate
3.69%
reduction in bounce rate
7%
increase in duct-sealing traffic
9.4%
increase in envelope-sealing traffic
Phase 2: Refining information architecture
Project highlights
First, I’ve got to talk about my experience!
This stands out as one of the most enriching experiences I've had in my professional career. The office environment and culture surpassed my expectations, and I found immense value in the learning opportunities presented by each individual I interacted with. One of the advantages of being part of a mid-size company is the chance to engage with individuals from diverse departments and even senior management. This exposure not only broadened my understanding of various aspects of business, marketing, and leadership but also provided valuable insights for the project.
.jpeg)
Jump right in!
Heuristic evaluationInterviewsContent auditInformation architectureWireframesDesign systemPhase 1: Highlights
Short term
changes made
- Implementation of the new branding, mainly on the homepage
- Reflection of the new business structure on the website
- Temporarily fix the homepage functionality
- Reflection of the new business structure on the website
- Temporarily fix the homepage functionality
Business need
The business requirement was to implement momentary changes to the website, particularly on the homepage, to align with the new branding since it was planned to be launched within a month.
Understanding the new company structure
RESEARCH
Secondary research was done to gain a comprehensive understanding of the company's recent restructuring efforts and the transition from old to new divisions.
Interviews
Meetings were held with multiple teams and the management to understand the business needs and determine the key solutions to highlight on the homepage of the website.
Old divisions
New divisions
Interface design solution
Changes implemented
The homepage underwent a transformation featuring a refreshed banner and a captivating tagline. Below this, a new section directing users to the two business units was incorporated. A dedicated space highlighted key achievements of the company through notable figures. Clickable benefits icons were introduced, seamlessly guiding users to relevant pages. Additionally, case studies were integrated, offering users tangible examples of the company's success.
View WebsiteOutdated banner
Old business structure
Inconsistent layouts
Lack of hierarchy
Un-clickable icons
Old
New
Updated banner
New structure
- Leading to respective landing pages
KPIs
Interactive icons
- Leading to respective benefits pages
Recognitions
Case studies
- Building trust
Phase 2
Long term
website redesign
- To make the website user-centric through UX research
- Perform a strategic analysis and change the information architecture
- To completely change the aesthetics in accordance with the company and branding
- Perform a strategic analysis and change the information architecture
- To completely change the aesthetics in accordance with the company and branding
Research
Interviews
To understand the different business segments and their goals
- Understanding of different user profiles
- Business units industry and goals
- Product information and its applications
- Business units industry and goals
- Product information and its applications
Content audit
Systematic analysis + Evaluation
The existing website was systematically examined, analyzed, and categorized to evaluate the content, hierarchy, and performance. This process helped in identifying outdated or irrelevant material that doesn’t align with the company’s goals.
Outcome
- Repetitive sections found
- Lack of hierarchy
- Lack of structure
- No connections between pages
- Dead end pages
- Lack of hierarchy
- Lack of structure
- No connections between pages
- Dead end pages
Page analytics data
- CTA’s missing in many sections
- Click rate is low on few pages
- Text heavy pages found
- Click rate is low on few pages
- Text heavy pages found
Affinity mapping
Clustering and connecting existing data
We employed affinity mapping techniques to analyze data clusters, eliminating redundant and repetitive information. This process was pivotal in refining the information architecture, ensuring a streamlined and efficient user experience.
Competitive analysis
Best practices and HVAC industry standards
We conducted a thorough analysis into the business aspects of critical elements such as partner signup and login buttons. By scrutinizing industry leaders and market trends, we gained valuable insights into best practices and user expectations.
Mind mapping
Organizing data
Mind mapping was used as a strategic tool to visually organize data, identify key relationships, and uncover patterns, serving as a foundation for streamlined decision-making and informed design choices.
Information Architecture
Card sorting
Both open and closed card sorting was done to derive the top navigation structure, that ensured the industry expectations were met.
Site map
The navigation and the new business structure drove the sitemap leading users from the homepage to respective product pages, ensuring structure, hierarchy and a logical flow.
Framework within pages
A pre-wireframe step was introduced to establish a clear understanding of the hierarchy of sections and prioritize information. This initial phase aimed to lay the foundation for the subsequent wireframing process by defining the structural organization and importance of content elements.
Wireframe
This essential step allowed me to create a blueprint of the application's layout, hierarchy, and navigation. I was able to focus on the core functionality and structure of the application without being distracted by aesthetics, iterate quickly and efficiently, experimenting with different layout options and refining the user flow.
Wireframe link
Design system
The implementation of a design system was an essential step to ensuring a consistent visual identity across the website and maintaining the branding. This incorporated standardized design principles, UI components, typography, color schemes, and interaction patterns.
Prototype
The concluding phase involved presenting a conceptual overview to the leadership, offering insight into the potential aesthetics and the overall ambiance the website might embody.
Feedback
Leadership review
Presenting ideas and getting feedback
The initial feedback phase involved engaging with leadership, including product owners and business leads from each division.This ensured alignment with their expectations and the specific business goals established. The session proved highly productive with positive responses and valuable suggestions.
With these insightful feedback, my internship concluded, and the next phase involved iterating, testing further, and implementing the design.
With these insightful feedback, my internship concluded, and the next phase involved iterating, testing further, and implementing the design.
Feedback
- Addition of industry wise page hierarchy
- Prioritize case studies in product pages
- Group case studies based on products as well
- Prioritize product applications than products features
- Ability to find installers in product pages
- Prioritize case studies in product pages
- Group case studies based on products as well
- Prioritize product applications than products features
- Ability to find installers in product pages
