‍

I joined the Ford EU Design Project in Jan 2021, following the completion of a site audit. I had been tasked with redesigning the Homepage, Menu and Product Page as part of Staged UX recommendations and designs for a website experience overhaul project. The site is currently live here.

My role involved creating a simpler experience for users based on the audit and stakeholder documents, that allowed for more usable navigation and discoverability.

How might we utilise the audit data and findings to improve the current customer experience?

Due to time constraints of the project, I had to make an immediate start following the receipt of the documents. This is an ongoing project where templates are constantly being updated due to new data and stakeholder requirements. The work I did for the project served as the basis for the templates.

‍

The Process

‍

Defining the problems

‍

From the audit, we created the following personas to help to mould the thinking behind the redesign. Along with the personas, I had a detailed scope from the stakeholders to also help guide the design process. After going through the documents the main problem was found:

How might we ensure that the 3 personas can have equally intuitive and simple customer journeys on the site?

‍

What are the goals?

‍

When starting the project I had the following goals in mind:

• How can we accommodate the use cases for parts and accessories? (The stakeholder wanted the accessories journey to replicate the lifestyle aspect, and the parts journey to represent the disruptive and technical aspect.)
• How can we communicate to users that some parts are for specific car models?
• What can we do to reduce the number of returns and negative experiences due to ill-fitting parts?
• What can we do to design for scalability and the future of Ford Store EU?

‍

‍

The Solution

‍

Homepage

As with many e-commerce experiences, we focused on making the path to the product page as simple as possible. The homepage balances the VIN/ Model Type dropdown with product category up-sells, a shop-by-model selector region and reviews for social proof. The homepage now feels more usable, sparks interest and is a lot clearer in displaying key messages and helping the customer to navigate the site. My task with the homepage templates was to create building blocks that would form the basis for the HP Landing, Accessories Hub and Performance Parts pages.

‍

Template 1 features more of the 'disruptive' experience that the client was looking for in the Parts journey. I tried to find a way to showcase the categories in a light that felt different to the the rest of the style of the site. The slightly diagonal cards draw attention to area, with the intent to direct users to the specified categories. This template also showcases a larger search-by-model region. The region is a lot bigger and takes up more of the viewport real estate as a way to encourage the search by model.

‍

Template 2 uses larger visual imagery as a way to highlight the use of the products in that category. This is more geared towards the lifestyle use case from the stakeholder. Users can see how the product is used and imagine it in their own lives. The search by model region has been reworked to feature more visual category up-sells to make a more direct journey for that scenario.

Please note the navigation header was designed by the UX Lead and I was responsible for the footer elements.

‍

‍

‍

Homepage Mobile

Following the creation of the desktop templates, the same experience was replicated for mobile screens. Template 1 features more categories that direct users to the more technical type of products, while Template 2 focuses more on lifestyle use products.

‍

‍

Menu

When redesigning the mega menu, my main focus was reducing cognitive load. The original menu was very text heavy and showed many categories at once, which may overwhelm or cause cognitive load within users. I immediately knew that I wanted to create a solution that broke the text up and added visual and product elements.

‍

The solution I designed reworked the hierarchy to showcase a menu landing when the user hovers over a category. I added a product grid onto the landing page to showcase the best sellers in that category and help users get to product pages quicker. When a user hovers over a subcategory, for example, the links for that subcategory is shown or another product grid depending on the needs of the stakeholder.

‍

‍

Product Page

With the product pages, I was working from a detailed specification from the stakeholder which informed me of the functionality that would be required in the designs. I went about the design process considering the multiple states and use cases that may be needed.

‍

The product page starts with the product gallery and information region, this region contains key details such as:

• Product Part Number.
• Product Description.
• Dispatch Messaging.
• Compatibility Modal.
• Price.
• Fitting Add-On.
• Quantity Selector.
• Main CTA.
• Klarna messaging.
• Product Information Accordion.

As with any any product page design, it is crucial to follow the best UX practices, such as keeping messaging clear and easy to understand, and ensuring that information in the first viewport benefits the purchase journey and works to make the best use of the real estate.

‍

I ended up creating 11 variations of the product page for both desktop and mobile to account for all scenarios and use cases. Some states include:

• UnAuth - Pushing the user to check vehicle compatibility.
• Auth - Communicating compatibility with the authenticated user.
• Auth Incompatible - Communicating incompatibility with the authenticated user.

Product Page Mobile

Below are some of the product page designs for the mobile view. It was important to redesign based on the smaller viewport in order to make the best use of real estate, particularly to keep as much important information above the fold as possible.

‍

Learnings

This project just went live, and it is really beautiful to see your work out and available for the intended users to utilise. I hope to be able to gather data on the impact of the design in the near future.

‍

It's not always about reinventing the wheel

When creating a solution that needs to be different, you don't have to re-invent the wheel - small and unique changes can have the same impact.

‍

Don't lose sight of the why

It's easy to get caught up with other factors of the project and forget about the why. Taking time every now and then to re-centre helped me to remain focused on the project as a whole.