Role: UI/UX Designer
Company: Inchcape Digital
Platform: Automotive Parts E-Commerce

The Problem

Our platform was initially built like a traditional e-commerce site, where users browsed through a standard list of products. Over time, as the catalog grew, users faced increasing difficulties in finding the right automotive parts. The complexity of part relationships and supersessions led to a frustrating shopping experience.

The Goal

Enhancing the shopping experience for automotive parts

I was tasked with designing a user experience for an Electronic Parts Catalog (EPC) that would enable users to search, filter, and verify parts efficiently, aligned with our existing vehicle selection.

Discovery

Data Management

The EPC database for Subaru contains over 200,000 automotive parts, including supersessions, compatibility details, and illustrations. The data team preprocessed and provided the data to ensure accuracy and consistency. My role was to structure this information into a user-friendly experience.

Identifying Fields and Information to Display I was provided with an API request retrieving part details to reference the fields that needed to be displayed to users.

A sample API Response for retrieving part details (TOYOTA):

{
  "ReturnStatus": {
    "status": "1",
    "ReturnCount": "1",
    "FailedValidation": {
      "FailedValidationCode": "",
      "FailedValidationNote": "VIN contains non-alphanumeric characters or is not 17 characters long."
    },
    "FailedError": {
      "FailedErrorCode": "1",
      "FailedErrorNote": "VIN not found"
    }
  },
  "ReturnResult": {
    "Drawing": {
      "DrawingIdentifier": "090604A",
      "ImageURL": "https://azaueausadevdpp02.blob.core.windows.net/dpp/epctov/03_images/_toyota/090/090604A.png",
      "Stri": "ILLUST NO. 1 OF 2",
      "Height": 1080,
      "Width": 1920
    },
    "PNCReferenceType": "T",
    "PNCName": "JACK ASSY",
    "Part": [
      {
        "PartNo": "0911106151",
        "Compatibility": "ASV50",
        "Footnote": "LUXURY PACKAGE & COLD AREA SPEC"
      },
      {
        "PartNo": "0911106151",
        "Compatibility": "ASV50",
        "Footnote": "LUXURY PACKAGE & COLD AREA"
      }
    ]
  }
}

We have identified the following data fields:

• • Part Number (PNC & OEM Number)
• • Part Name & Description
• • Fitment Note
• • Period
• • Illustrations & Diagram
• • Stock Availability & Pricing

User Flow

I collaborated with our Business Analyst to map out the user journey from vehicle selection to purchase. Given the extensive amount of data in the Electronic Parts Catalog (EPC), we concluded that requiring users to select their vehicle first is essential. This approach helps filter the data early on, resulting in better performance and faster API responses.

Solution

High-Fidelity Design

After multiple iterations and refinements, here is the final design:

Simplified UI: I aimed for a simple linear interface as the primary users are older professionals (parts interpreters, mechanics), requiring a simple, easy-to-navigate interface.

VIN Search

VIN Results

EPC Landing Page

EPC Schema Page

EPC Diagram

Product Details Page