Implementing a User-Friendly Search Feature for the Car Tires Magento Store

Challenges

Suhail Abbas, our client, already had the idea for the search feature that allows customers to look for tires if they know the exact size or if they only know their car model. Together we developed it further, worked on the designs and in the end created a nice-looking and easy-to-use Magento site.

Development

Since the main function on the site is the search, a lot of time was spent to design a beautiful and understandable workflow for the user. On the homepage, without any further ado, the customer can start looking for the tires they need right away. We offer them two options: searching by size (if they know exactly the size they need) or searching by car.

Search by size allows selecting different front and rear tire sizes in case you’ve got such a car, and the graphic element of the design gives a hint to the customer so that they know which parameter should be selected in which drop-down list.

Search by car is more complicated than search by size and provides one more layer of interaction with the customer. After the car, model and year have been selected, the system displays tire sizes recommended by the manufacturer for this specific car.

Here the customer can either select the combination of the tires they think suits them, or click “Don’t see your tire size?” which opens a search widget under the main menu:

If the suggested tire size is OK, the customer will be taken to the search results page with tire combinations by different brands. The same page is shown for ‘Search by size” search results. Tires are paired in sets of 4 for same front/rear sizes or in sets of 2+2 for different rear/front size. The customer can choose if they want a set of 4 or just one of each size.

After the product has been added to the cart, the customer can checkout and select their preferred shipping method. Tirestreets offer complimentary service for tire installation and customers can select this on checkout. After they specify their city, the system will show them a list of installation centers available with short details. Upon selecting an installer the customer will have to pick the date and specify which car they have so that people at the installation center can get ready. When the order is placed, the installation center will receive a notification from the store with information about the person and the car. Tirestreets will send the tires directly to the installation center, so the only thing the customer needs to do is to come to the center.

Magento community already has some extensions developed for this particular niche – car parts/tires search. After carefully considering a few extensions we decided to go with a custom solution since none of the extensions satisfied the requirements of the functionality we aimed for.

Since we are offering a search of tires by car we had to create a dependency table between the car/model/year and a tire size which would come up in the suggested tire sizes page.

Tire sets are set up as bundle products which we customized a lot to have better usability in the frontend. On the shopping cart page, the customer can easily change the number of the tires and see a detailed price breakdown.

The shipping method to a recommended installation center was implemented using a Store Pickup extension by Magestore with some customization done to introduce our specific features. The module is very flexible and has a lot of settings in the backend.

Lastly, instead of going with the popular one-step checkout, we decided to try a three-step checkout workflow which guides the customer through the whole checkout process and doesn’t scare them with the abundance of fields to fill in.