PRODUCT DESIGNER
Aeroseal
SpotSearch
Fitness 21

Reduced bounce rate by 3.69% alongside rebranding the website

Heuristic evaluation
Content audit
Design system
Internship
Open case study

Overview

Redesigning the Aeroseal company website.
The internship commenced with the objective of redesigning the company website, which had not been updated since 2017 and lacked information on the new products, solutions, and services offered by the company. Given the substantial growth of the company and rebranding since the last update, the goal was also to bring the website in line with the new structure and updated branding.
Role
UI/UX Design Intern
UX research, heuristic evaluation, content audit, Google analytics, information architecture, competitive analysis, wireframing, UI design ,usability testing
Company
Aeroseal
Timeline
3 months (May 2023 – Aug 2023)
Tools
Figma, Miro, Adobe suite
Goals
- Implementation of the new branding
- Perform content audit and update the information architecture
- Update the navigation system
- Add information on the new products, solutions, and services
- Reflect the new structure of the company
Challenges
- Understanding the company and culture
- Gaining familiarity with the different business groups and departments
- Learning the HVAC terms and industry slangs
- Learning the different processes involved in duct sealing
- Designing for technologically not proficient user group
Outcome
- Reduced bounce rate by 3.69% and percentage exit by 4.78%
- Increased traffic by 9.4%
- Increased the product demo rate by 3.1%
Changes madeCompany structureHeuristic evaluationInterface designBack to top

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
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. In addition to this were the minor adjustments to the content and information, along with the integration of the new business structure to direct users to their respective divisions or products effectively.

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

Heuristic evaluation

Heuristic evaluation was done to systematically review the interface against a set of predefined usability principles or heuristics. These covered key aspects such as system status visibility, real-world alignment, user control, and consistency. By conducting this evaluation early in the process, it provided valuable insights, guiding the focus not only for immediate changes but also for long-term improvements in the interface.
Process
Nielsen’s heuristics for usability
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalistic design
Help users recognize, diagnose, and recover from errors
Help and documentation

Interface design

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.
Old homepage
Updated banner
New divisions implementation
Notable numbers added
Icons made clickable leading to respective pages
Added section leading to top case studies
New homepage
InterviewsContent auditCompetitive analysisAffinity mappingMind mappingArchitectureWireframeDesign systemPrototypeTestingBack to top

Long term
website goals

-      To make the website user-centric through UX research
-      Perform a strategic analysis and change the information architecture
-      To add information/content about the new products and HVAC solutions
-      To completely change the aesthetics in accordance with the company and branding
PROCESS
Research
Primary
Content audit
Competitive analysis
02
Synthesis
03
Design
04
Testing

Research

Interviews
Understanding the different business segments and their associated user profiles
It was crucial to ensure that the design was effectively targeted to that audience. A session was held with the chosen members of each business group to understand their goals and target audience.
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.
Analyzing content from each page
- Repetitive sections found
- Lack of hierarchy
- Lack of structure
- No connections between pages
- Lack of flow
- Dead end pages
Page analytics data
- CTA’s missing in many sections
- Click rate is low on few pages
- Scroll with no action button
- Text heavy pages found
Behavior flow from Google analytics
- Bounce rate is high
- Percentage exit is high
- Page view is low on landing pages
- Click rate is low on demo button
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.
PROCESS
01
Research
Synthesis
Affinity mapping
Mind mapping
03
Design
04
Testing

Synthesis

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.
Mind mapping
Organizing data and making decisions
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.
PROCESS
01
Research
02
Synthesis
Design
Architecture
Framework
Wireframe
Design system
UI Design
04
Testing

Design

Information Architecture
Card sorting + Sitemap
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.
Framework
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. This not only accelerated the design but also contributed to a more polished user experience across the platform.
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.
PROCESS
01
Research
02
Synthesis
03
Design
Testing
Leadership meeting

Testing

Leadership meeting
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 this insightful feedback, my internship concluded, and the next phase involved iterating, testing, and implementing the received feedback to refine the design further.

Increased traffic by 15%with new features while redesigning an AI-powered search engine

AI
Redesign
Dashboard
Open case study

Before we dive in, what is SpotSearch?

AI-powered search engine
SpotSearch is a solution designed to improve the overall search experience of the users with its unique AI-powered features. It provides on-the-spot results to users while staying in context, anywhere, and on any device.
Key features
Select and search
AI-powered suggestions
Promote content
Key sense technology
Multilingual
Real-time dashboards
Custom UI branding
Types of searches
Internal site
Documents search
External site
Multi-site
Geo-based
Directory search
Video Search

Overview

Redesign + New features
The redesign of this cutting-edge solution aims to overcome existing challenges while integrating new features for enhanced functionality. By analyzing the existing layout issues and difficulties in accessing a few categories of search results, new designs were crafted. Despite facing various constraints, multiple iterations were done, and the search engine UI was refined to make it both aesthetic and usable. Alongside, changes were made in the dashboard to accommodate and access the new features.
Role
UX Designer
Heuristic evaluation, Secondary Research, Stakeholder Interviews, UI Design, Dashboard design, Usability testing
Clients
Washington State University, Kent State University
Timeline
Mar 2021 - Jun 2021
Tools
Adobe XD, Hotjar
Process

User Centered Design (UCD)

Credits: Interaction Design Foundation (IDF)
Goals
- Resolving the search results accessibility issue
- Implementation of the complex video search feature
- Adding the custom branding for each client
- Updating the dashboard with directory search
Outcome

Increased traffic by 15- 20% on client websites (Kent State University and Washington State University)

Constraint

Fixed layout

The project posed a unique challenge as the search engine operated on client websites within fixed layout dimensions, allowing no technical flexibility for alterations. This added complexity to the project, with the new features (which included a video transcript feature) to be designed within these constraints.
Search engine

This is how we solved the issues

One at a time
Problem 1Problem 2Problem 3Problem 4Error handlingDark themeBack to top
Problem 1

Difficulty accessing all types of search results by scroll

The various types of search results were presented in a linear list format, often leading users to close the search window without scrolling down to the bottom where their expected results might be. Also, the results section lacked the distinction of a client's social media presence, causing it to blend within the general results list.
Old User Interface
Vertical scroll for result categories
Solution

Introducing horizontal tabs

In adherence to Fitts's Law, a user-friendly solution was introduced by horizontal tabs positioned at the top, enabling users to select their desired search category effortlessly. Each tab displays a list of results corresponding to that specific search type, reducing user overwhelm in line with Hick's Law.
Hover functionality was incorporated for each result item, allowing users to preview results by hovering over it, eliminating the need for additional clicks. Additionally, a "Read more" button was introduced, opening a new tab to display the entire page from which the result originated.

The AI engine prioritizes search result types and individual results, aiding users in locating the most relevant information for their search queries.
Problem 2

Difficulty reading the video transcripts

Designing the 'Video Search' feature posed the most significant challenge. With the usual results section structured into two segments (results list and description), accommodating three sets of data for video search (results list, video, and transcript) required a thoughtful approach.
Solution

Making the results section collapsible

After several iterations and overcoming a temporary creative block, an optimal practical solution emerged. The results list was made collapsible, creating space for both the video and its transcript while being played. This approach made sense, as users typically do not require simultaneous access to all three sections of data.
Problem 3

Difficulty in custom branding for each client

The Custom UI branding for each client posed a significant challenge, particularly with the growing numbers. Maintaining a custom code base for each client, tailored to their specific branding requirements, became difficult to manage.
Solution

Adding the custom UI branding option

After an intense brainstorming session lasting 30 minutes, I explored various solutions and drew inspiration from an unexpected source: my experience customizing characters in Call of Duty on my PS4. Drawing parallels, I envisioned a similar functionality to address the critical UI branding challenge. Following discussions with managers, the development team, and clients, I designed a prototype for a 'Branding' page within the SpotSearch Dashboard.

This approach streamlined the process, enabling clients to customize the search engine UI to align with their website branding. Consequently, we achieved a single universal code for the product, enabling seamless integration into any client website and customization through the Dashboard as per their unique needs.

Branding options set on client websites

Problem 4

Difficulty to update the database regularly for directory search

With the introduction of the new 'Directory Search' feature, our focus shifted to enabling client administrators to efficiently manage and update a database containing information on lecturers, professors, and staff within their respective universities.
Solution

Adding a file upload feature in the dashboard

To ensure students could access accurate information about their lecturers and professors, a centralized repository for storing and regularly updating data was necessary. This goal was achieved by implementing an upload feature within the SpotSearch Dashboard, allowing clients to upload documents and Excel files or sync data from specific links to a dedicated database. The information could then be seamlessly displayed in a dedicated tab within the results section.

The results section was transformed into a card-based layout, coupled with intuitive filters at the top, facilitating meaningful navigation, even when dealing with a substantial volume of results.
Going the extra mile

Adding the error handling

Addressing error handling is a crucial aspect of UX design. Recognizing the potential dead ends users might encounter, I focused on creating guidance mechanisms to help navigate unexpected situations effectively. By anticipating various scenarios that could lead to errors, I implemented clear error messages, actionable prompts, and intuitive navigation cues to steer users back on track.
Getting along with the trend

Designing a dark theme

In response to the rising popularity and benefits of Dark theme, I proposed its introduction as part of the redesign. Users are provided with the option to enable Dark theme through the branding page within the Dashboard.