Glasswin Website Redesign

Hero image of prototype on two macs

Project Outline

Website Redesign
This was a freelancing project for a website redesign of a product website (Aluminium Doors) which had lots of technical information on the website. The redesign was proposed to connect better with the audience.
My Role
As this was a freelancing project., I was the sole designer. I created the following UX deliverables for this project-
‍
Competitor analysis
Analysis of exisiting website
Persona development
user journeys
Sitemaps
Wireframes
UI design
Design System and Prototype.
Time
One Month

Goal

The main goal of the website redesign was to improve conversion rate. Here conversion is to get people to either email or build a quote on the website..
Get quote conversion goal

The Challenge

To tackle the goal, and based on the data gathered from the existing website and competitor analysis, the following two challenges will need to be addressed through the redesign.
1) The product offering had different categories depending on small technical variations. How can the product range be easily and intuitively explained to a non-technical audience?
which product to buy illustartion
2) How to present all the options intuitively to the customer while building a bespoke product on the website so that the customer is persuaded to click on the CTA?
an illustration showing options to choose from

The Audience

The audience could be segmented into three groups based on their technical understanding of the product and budgetary constraints.
audience segmentation based on budget and

The Solution

The homepage and product pages were completely redesigned so that all the persona's could be persuaded to convert to the CTA page.
animation of homepage
The product personalisation page was created to be very visual and intuitive, so that a quote could be built easily with an increase in the probability of clicking the CTA.
mock-up of product page

1/Discover

Competitor Analysis

I analysed five direct competitors' website to specifically look at -
1) The Information Architecture of the website
2) The cognitive load of the users for technical content, and
3) The user flow on the website.

Data Gathering from Existing Website

I used heatmaps and recordings to understand the  user behaviour on the existing website
heatmap of exisiting website

Key Findings

Users want to understand the range of products provided to make a choice. But from the heatmaps and recordings it looks like they are not spending enough time on the pages that would help them choose the right product.
The percentage of users getting to the build a quote page is very low and people who do are not hitting the CTA on that page.

Key Insight

Either the information is too technical or the explanation cannot be visualised by the user. In either case, there are a few valuable conversions being missed.

2/Define

Persona
Meet my three persona's based on user segmentation gleaned from the insights of the previous step.
Persona A
Meet Brenda
Brenda's User Journey
brenda's user journey
Persona B
Meet Steve
Steve's User Journey
persona b Steve's pain points and goals
persona B Steve's user journey
Persona C
Meet Fernando
Fernando's User Journey
Persona C Fernando's pain points and goals
Persona C Fernanado's USer Journey

3/Ideate

Sitemap
The sitemap was updated marginally to include more articles on the website and to reflect the updated classification of the product. This was based on the research and insights from the Discover and Define phases.
sitemap of the new website
Wireframes
All the technical information about the product was presented in the homepage and product pages to facilitate a smooth user flow for all three personas to the CTA page.
Description of the homepage as it relates to the different personas

4/Prototype

Please find a link to the final prototype by clicking on the image below.
Image linking to the final prototype

5/Testing & Further Iterations

A first round of testing was done with stakeholders. There were a few iterations in the visual configuartor to make the entire process even more quicker for the user.
The project is in the development phase and more testing and iterations will be done as the website develops.
There are plans to have A/B testing done on the configurator page to streamline and improve conversions.

Learning & Takeaways

The project provided interesting challenges faced most commonly on a website which has lots of technical information for a non technical audience.
It was interesting to adopt different methodologies depending on the need and scope of the project.
Thank You for staying with me till the end.
Get in Touch
or
See my other solutions