Ryo
Product Designer

Designing a premium experience for the vehicle aftermarket

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)

Defining the Problem
Sample of notes from virtual stakeholder meetings

Sample of notes from virtual stakeholder meetings

Stakeholder Interviews

In order to understand why they felt the website needed to be overhauled, I spoke with the sales, marketing, and customer service teams for their input. I also asked the president what his vision for the website was, and how it fits into their larger business strategy.

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.

RESEARCH
Sample of competitors' homepages

Sample of competitors' homepages

Competitive Analysis

My first research activity was a comparative analysis on 5 competitors’ websites. I analyzed their usability and how they communicated their brand through a series of behavioural assessments, such as how easy it was to purchase ball bearings, and what was the first thing they wanted users to see on their website.

Data Analytics

I analyzed data from Google Analytics, which helped to provide context for some of the user research I conducted. I also looked into the top Google search results that brought traffic to the website.

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.

User Personas

Three personas emerged from the user research.

Reese (primary persona) and Emanuel are the DIY users. Theo represents a technician who already likes the SKF brand and already purchases their products; and Emanuel is not very likely to purchase SKF parts for cars that are meant to be "authentic restorations."

Reese was validated through a user interview with someone who largely identified with him. This was very helpful in understanding his goals & needs.

User Journey

Purchasing Products

I created a user journey map to communicate the process the primary persona takes on the way to purchasing something online.

Learning About Products

I wanted the user journey for education and purchasing to be as similar as possible, to keep things simple for users. Therefore, I designed the product pages to be the destination for both user journeys.

IDEATION
Sample of early UI sketches

Sample of early UI sketches

Sketches

I came up with various concepts for the major parts of the website using Procreate. Once I started repeating myself, I moved on to creating Wireframes in Whimsical.

Sample of web wireframes

Sample of web wireframes

Wireframes

Due to the short timeframe, I used a mobile-first approach, which took around 2 weeks to complete. This made it significantly easier to make web wireframes afterwards.

Sample of mobile wireframes

Sample of mobile wireframes

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.

Designing Solutions

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

Search (left), Product Catalog (middle), Product Page (top-right), Category Page (bottom-right)

Search (left), Product Catalog (middle), Product Page (top-right), Category Page (bottom-right)

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

Homepage (left); About (top-right), FAQ (middle-right), Add-to-cart Toast (bottom-right)

Homepage (left); About (top-right), FAQ (middle-right), Add-to-cart Toast (bottom-right)

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

Product Page's educational content (left), favouriting content (middle), Product Previews (right)

Product Page's educational content (left), favouriting content (middle), Product Previews (right)

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

FINAL DESIGNS

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.

SKF

Other Screens

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

TAKEAWAYS

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.