Overview

SKF is one of the world's largest automobile parts manufacturers — a multi-billion dollar corporation which sells products of the highest quality.

Challenge: To redesign their Vehicle Aftermarket e-commerce website, in a way that helps them enter the DIY market, and which communicates their brand effectively.

Timeframe: This was an 8-week contract.

My Role: I did all of the UX research and designs on this project.

My Team: A project manager was present for the first 3 weeks of the project; another designer was periodically available for design feedback when I felt it was needed.

Tools: Procreate (for sketching), Whimsical (for wireframes), and Figma (for high-fidelity designs & prototype)

Unexpected Findings

There were two noteworthy findings that emerged from the stakeholder interviews. First, SKF has a network of distinct websites, which include (but are not limited to):

Second, despite the fact that around 90% of SKF's customers are distributors, their long-term strategy was actually to enter the DIY market, and this website was specifically intended to help set that process in motion. However, they had no data on these customers, or any information on how to reach them. Therefore, I needed to research DIY users from scratch.

Project Goals

The stakeholder interviews revealed 3 main goals for this project:

One important aspect of goal #3 was to make this website more than just an e-commerce site. They wanted it to become a resource for people to learn more about all of their products as well.

User Survey

Just before the project began, the client had administered a survey — the Professional Technician and Shop Hub Participation Survey — completed by 166 respondents. I analyzed the data and contextualized it to create Theo, the secondary user persona.

Desk Research & User Interview

Since there was no information on – or access to – a potential DIY user, I conducted secondary research. This included: industry reports, research articles, news stories, and even blogs by car restorers & enthusiasts. The data was enough for me to create two distinct user personas for DIYers, one of whom became the primary persona.

In the third week of the project, someone within the company who strongly resonated with the primary persona was identified, and a few lengthy interviews enabled me to validate this persona.

Design Validation & Iteration

After having fully fleshed out the mobile wireframes, I did UX walkthroughs with the client and the individual who helped validate the primary user persona. Some iterations were made based on feedback.

Goal #1: Improving Usability

Problem

The most problematic usability issues were from the Search Page. Unlike most e-commerce sites, users must select their vehicle(s) to ensure the compatibility of the products they want to buy. However, the previous design confused and frustrated users with its unintuitive UI. Other smaller issues were also identified elsewhere.

Solutions

Search Page

• Made the numbers of products in the search page make sense

• Vehicle selection made substantially quicker & more intuitive

• Simplified the information previewed on the products, making it take significantly less space on the screen

Products Catalog

• Added an extra screen in order to ask users if they are looking for "automotive" or "heavy duty" parts, rather than pointlessly showing everything at once

• Eliminated descriptions to reduce the space wasted on the screen

Products Pages & Category Pages

• Made the content look much more like an article, thereby making it easier to scan and read, and wasting less space

• Fixed the left side of the screen, and added a section for quick navigation

Goal #2: Positioning Brand as Premium

Problem

While SKF products are justifiably expensive, due to their superior quality, communicating this effectively is a challenge. They did not know how to go about improving the UI while retaining the intended brand look and feel (e.g., brand colours).

Solutions

Home Page

• Made the Hero more minimalistic, making the call-to-action significantly clearer

• Used the main brand colour (blue) instead of the multi-coloured aesthetic

• Wrote copy such as "Learn from the Experts" for their online training course, which implies that SKF knows what they are doing, since they are run by experts

• Added "What's New" section, which should be updated twice a month with relevant, interesting, and recent information (previously, they were very outdated and irrelevant announcements)

Other Pages/NavBar

• Made all of the informational pages look like well-crafted articles

• Used copy like "employee pricing" instead of "discount," and simplified button text (previously, some buttons had additional text for branding)

• Made popup-toasts (and the NavBar) show a bit of red & blue, as a nod to their packaging, to reinforce the brand across digital and physical products

Goal #3: Design for Entering the DIY market

Problem

The client did not know how to appeal to DIY'ers, or how to ensure that entering the market would be a smooth process; but they knew they wanted to make the website a learning resource for DIY'ers.

Solutions

Educational Resources

• Made Product Pages display educational content below the purchase experience of a standard e-commerce site

• Product Previews (in the Search Page) show what type of educational content exists for each product, so the DIY user knows what they'll find before clicking

• Utilized the SKF Parts Info affiliate site to populate the Product Pages with educational content, rather than requiring additional content to be created

Personalized Experiences

• Created a personalized experience for returning users by showing content (e.g., special deals) specifically relevant to them, based on user data

• The Featured Categories on the homepage can rotate randomly to create a natural A/B test to learn more about users and what they want; or show categories based on what they are likely to interact with

Favouriting

• Users can "favourite" products to save them for later, or even favouriting specific educational content (e.g., a useful video) so they can access it faster later

• Favouriting will enable SKF to identify trends/patterns in data across users, and provide more meaningful data in order to personalize the experience for users

Comparing the Old Version

Here are screenshots of the previous version of the site, for comparison:

Homepage, Search Page, Product Assortment, Category Page, Product Page, About, FAQ

Homepage

When using the homepage for the first time, there will be no "Recommended" section; but personalizing the UX for individual users was a major aspect of this redesign.

Other Screens

The main screens are shown below. You can scroll down any page you hover over.

Impact & Validation

After developing an interactive prototype, I had run usability tests with three participants to identify weaknesses in the UI; and received feedback from the client after they tested it internally. Notable feedback from these results were:

• The highly-problematic UX regarding selecting your vehicle (and then deselecting it to select a different vehicle) was 6x faster in the redesign

• Users were substantially less frustrated with the new search experience

• The client was extremely satisfied with the way the brand is positioned as premium in the new UI, and they loved the improved aesthetic

• The client felt much more confident with entering the DIY market as a result of the research (e.g., user personas) and solutions designed (e.g., favouriting, personalization, etc.) in this new version of their web app

What I Learnt

Talk to the decision-maker as early as possible

The client interviews within the first week left me with the impression that the website was for their distributors. But after speaking to the president at the end of the second week, it was clear that the website was to cater towards DIY'ers, not distributors. Had I known this upfront, I would have spent less time researching distributors first.

Understanding problem-solving is more important than industry knowledge

I had virtually no knowledge about the automobile industry prior to this project; and the client was unable to provide any information about the DIY market. However, by speaking with various people on the subject, and by researching a variety of sources, I was able to conceptualize my understanding and create three detailed user personas.