About The Project
We worked with Clawson Honda, a car dealership, to improve their website. There were two main focuses: update the design and improve the search functionality. As you might imagine, dealerships can have a huge amount of inventory and that inventory is varied. Providing users with a clear interface that also allows them to filter searches in granular and easy ways was very important to this client.
There’s a lot that goes into a dealership site, ranging from managing inventory, search, content, third-party services and more. For Clawson, it was important that their inventory be up to date for any visitors of the site so we enabled daily updates to their inventory. That way, it accurately reflects what is available at Clawson on a daily basis, which means their team is better able to connect with customers about the cars they’re looking for.
In addition, we built a new feature that allowed them to add and feature special deals on their cars. This had to be coordinated appropriately with their inventory. Overall, implementing a more user friendly search page has been a huge success.
We implemented search filters to improve the UI/UX. We have filters in categorized dropdowns that are easy to find, are concise, and ultimately help users find their perfect car quickly. With this particular feature, our goal was to make it mobile-friendly as well. It’s easy for a filtered search to get overly burdened on a mobile screen, but by keeping the filters in the sidebar, we were able to maintain a mobile friendly way to use the search with filters without overwhelming the user.
In addition, we have added a preview view of the car interior and exterior at a glance on the SRP. We have converted the name of the color, for example, Metallic Gunmetal Gray, into displaying the color in the description of the vehicle. As fun as these color names are, it’s much more helpful for the user to be able to see the color rather than the name.
The technology stack was Vue with a Django Template, a hybrid front-end and implementing Wagtail CMS. Wagtail is a content manager we have implemented on many projects and it has a robust set of features that are easy for our clients to use.
APIs and other Integrations
Algolia is the main API we used in this project. We pull inventory data that is indexed on Algolia. It is used to refine the search results. When buyers want to filter for color, brand, features, and more, that data is driven by the Algolia API. It is used on top of the Vue front-end and not only allows filterable searches, but also saves the stat of the filter facets so users can share or bookmark their results.