Project Objective

The Phil Gilbert Motor Group was in the market for the build of four websites that would segment and sell motor vehicle parts. The websites proposed were: 

The main aim of the builds was to allow users to easily find vehicle parts for their car, using a system that filters parts according to the user’s car make and model. 

This functionality was to be made possible by a system integration with PIM solution Comestri, and PARts DB, a comprehensive vehicle parts database. 

Key Performance Indicators: 

  • Launch four new websites using the BigCommerce platform
  • Execute front-end design adhering to brand guidelines for Toyota, Hyundai, Kia, and Phil Gilbert Motor Group
  • Integrate each website with Comestri
  • Integrate with vehicle registration APIs to provide information on a ‘make/model/year’ which can be used to filter products based on data

 

Discovery

The online automotive parts and accessories sales industry has grown significantly over the past five years. Strong consumer uptake of online shopping has benefited online automotive parts retailers, particularly as consumers generally view industry operations as having better value for money than bricks-and-mortar outlets. 

While consumers typically do not need to try out automotive parts and accessories before purchasing, these items must fit exact specifications that can be outlined in the purchase process. The rising popularity of shopping online has driven industry growth, with revenue expected to rise at an annualised 8.1% over the five years through 2018-19.

 

product-filter

Strategy

In order to provide a pioneering online shopping experience for customers shopping automotive parts, BigCommerce was the platform of choice. Matter deemed the Brixton Theme to be a useful starting point. The theme was customised to suit both the styling guides and functionality requirements across the four websites. 

The Matter development team worked closely with Comestri to carefully scope out the systems integration between external databases and BigCommerce. 

For our team, this project was an excellent example of collaboration. We had our full-stack developers working on the PARts DB API and BigCommerce data handling. Our front-end developers simultaneously worked on theme development using CSS, SCSS, Handlebar.js, JSON & HTML. 

“Each one of us could work on things we enjoyed and specialised in, improving the overall efficiency of this project” – Jeremy, Front-end Developer

Creativity

Our team of UX/UI designers altered the Brixton Theme to meet the branding guidelines of Toyota, Hyundai, Kia, and Phil Gilbert Motor Group. The key consideration in the design was the ability for the user to access the product filter. This was strategically placed in the left-hand sidebar, visible across all pages so the user could change their input any time. 

Our mobile-first design strategy meant that the product filter was customised to provide a seamless user experience on a mobile device – clearly visible and accessible at all times in the main navigation. 

We decided to use CSS animation for most of the element transitions. It gives the user more visualisation when functions are in transition. CSS animations also present better performance results over javascript animations, improving the site speed and overall user experience. 

Technology

product-filter

A product filter driven by API calls

With thousands of products available on the market, Phil Gilbert Motor Group needed a way for users to segment products based on the make and model of their car.

Through API calls between BigCommerce, Node APP, Comestri and PARts DB Matter were able to produce an efficient functionality that gives the user fast access to relevant information. Here’s how:

Systems Integration

Comestri acts as the main Product Information Management (PIM) solution for the website. Information is uploaded via a CSV file to Comestri and an API call is run daily between BigCommerce and Comestri to ensure data is always current. This connection provides a regular feed of up to date product information and allows for commerce order information to be pushed into the Commerce Connect system.

Node APP acts as a filter between PARts DB and BigCommerce. Matter customised the API call to filter out irrelevant data between the two systems, due to the extensive catalogue of information housed in PARts DB.

For example, the Toyota website would not benefit from filtering through Hyundai and Kia parts. This would only create a longer load time and ultimately affect the website speed. 

The Node APP sends the filtered data to BigCommerce so that products can display according to the user’s input. Users can choose to input their car registration number, VIN number or select their car make and model from a drop-down list. The system then makes the relevant API calls and displays car parts in less than 2 seconds. Users will then go on to complete their transaction through the BigCommerce checkout.