AW_cover.jpg

Auto Windscreens


Project: website redesign
Role: UX researcher / DESIGNER
Tools used: sketch app, invision, TRELLO


autowindscreens_homepage
 

Problem definition:

The biggest problem in this project was that there was a massive drop out in the windscreen repair/replacement booking process on Auto Windscreens website (particularly in the Insurance Policy details section).  Auto Windscreens tasked us with redesigning their website, while focusing on improving their booking process. The target audience for their customers was very wide, ranging between 17 to 60+ years old.

 

The process

  • Discovery (UX expert review on the existing website)

  • User testing on the existing website

  • User journeys & Sitemap

  • Wireframes

  • Visual design (handled by the creative team)

  • Quality assurance


1. Discovery

A UX expert review was conducted to identify usability issues on the existing website. During the expert review I produced the sitemap of the existing site, as well as the user journeys for the booking process, in order to get a better understanding of the website’s structure and functionalities.


2. Usability testing

We conducted user testing on the existing website to validate or reject our findings from the expert review and come up with some recommendations.


3. User journeys & Sitemap

After analysing our findings from the expert review and the user testing, we started creating user journeys, which lead to the sitemap for the new website.

Sitemap for the new website


4. Wireframes

Low fidelity wireframes that led to high fidelity wireframes for the new website. Given that we wanted to ensure that the user experience would be good in across all screen sizes, we created wireframes for desktop, tablet and mobile views. An interactive prototype in invision was also created at the end, to present to the client.

Sketches for the hub/mobile job section

Sketches for the hub/mobile job section

Sketches for the calendar/appointment section

Sketches for the calendar/appointment section


'Choose appointment' desktop wireframes - 2 different states of the same page

'Choose appointment' desktop wireframes - 2 different states of the same page


'Choose appointment' mobile wireframes - 2 different states of the same page

'Choose appointment' mobile wireframes - 2 different states of the same page


5. Visual design (handled by the creative team)

During the visual design development, I worked closely with the Design team to ensure the produced designs were aligned with the wireframes and the proposed UX in general. 


6. Quality Assurance (QA)

We conducted QA before launching the website, to ensure that everything was working as intended. As happens with most projects, there is always some challenges that can’t really be predicted at the early stages of the project. These usually involve technical challenges that the tech team can’t overcome in the given timeline. As a solution we worked really closely with the tech team to prioritise these challenges. Some of them were really crucial to ensure a good experience for our users, which we couldn’t compromise. So we had to find some quick solutions for the interim period, which would be improved during the 2nd phase of the project (after the launch). There were also other challenges of less importance (comparing to the crucial challenges), that was decided to be implemented in phase 2.

 

What could have been done better UX-wise?

Usability testing on the prototype to validate or reject our assumptions, before we even proceed to development. At this stage it’s way easier to make amends to the proposed solution and then proceed with, either another rapid usability testing on the new prototype, or with be even more confident on the proposed UX.

 

What we would like to do next?

1. Usability testing on the new website

2. Re-iterate and optimise the user experience based on the findings of the usability testing. New user journeys, wireframes and designs might be needed, but hopefully not or not much ;-)