Project Overview

iTec Tuning is a “car tuning and performance parts” company based in London. Established in 2015 along with a basic e-commerce website and selling online via various market places, the decision was made to take their web presence to another level. The website was always beautiful but not always functional. Mainly due to the type of products sold, complexities involved in categorising and navigation and stakeholders lack of knowledge/belief in the benefits of UX.

‍

User Interviews

I conducted various interviews both personal and remote with various groups of users.
‍
1. Existing customers.
2. New customers.
3. Users who have never used the website before.
4. Users who have never bought car parts online before.

I believed user group 4 would give us the best insight into the design of this website. If we got that right, the rest would have a superb user experience. After analysing results, one thing was clear, navigation was truly awful. Users were getting confused at every stage including navigating from the home page and using the top menu.

Due to a limitation of the website, every time a user selects a product group (I.e. Alloy wheels) then selects their vehicle, if they then decided to look at a different product group (I.e. Suspension) they would have to reselect their vehicle, over 90% of those interviewed did not like this and some admitted they would leave the site in a real world scenario.

The cart process was a standard 5 step procedure (1 page per step) Although it was simple, clean and intuitive users found the process long compared to todays standards.

The responsive mobile site also received many complaints due to the poor use of screen space, poor navigation and many of the import features being off screen (below the fold) again causing confusion.

‍

Data Analysis

Using mountains of data built up over a year of daily recording. I pulled the following data which gave me an average of various stats such as time on site, bounce rate, conversions etc…. To see if the redesign worked, I compared 2 weeks of analytics post design update to 2 weeks prior to update.

‍

‍

User Flow Diagrams

The following two user flow diagrams are designed specifically for product navigation. The following will show the changes from the original navigation route to the updated, simplified and branched design. The primary route simplifies navigation significantly.

‍

‍

‍

‍

Wireframes

Wireframes are a great way to lay down a new design for testing purposes before committing time and resources to a hi-fidelity mockup. I used data acquired from the initial user interviews to create an improved (user focused) design layout which displays the most important elements above the fold.

‍

‍

‍

Usability Test On High-Fidelity Prototype

Usability tests were conducted on the updated wireframes to ensure logical placement of elements and confirm the new navigation was efficient and intuitive as required by the users.

‍

‍

Final Prototype

The Masterpiece.

‍

‍

‍

‍

2nd Round Of User Interviews

Due to the complexity of this project and its navigations, it was extremely difficult to display an accurate and true representation of the navigation via wireframes and mockups. After the website was modified with the new designs based on all the previous research, I conducted the same user interviews as I did at the beginning of this project and all the results were improved significantly.

1. Confusion with navigation was down to 27% of users (Still room for improvement)
2. The new “one page” cart system received a great response.
3. The responsive website was found by 70% of users to be much easier to navigate and purchase from.

‍