Sample of notes from virtual stakeholder meetings
Designing a premium experience for the vehicle aftermarket
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)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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
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
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).
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)
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
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.
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
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
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
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.
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.