Background
PistonHeads was founded in 1998 and is known around the world for its large and devoted online motoring community, distinctive editorial tone and bustling used car marketplace. CarGurus acquired the site in 2019, with the intention to shift the business offering of PistonHeads to focus on becoming the best automotive marketplace in the UK.
Problems
PistonHeads had two problems that needed to be solved to be able to deliver on the new business goals:
1 / Inconsistent design and experience, and tech debt across the site
The company had very basic brand guidelines to guide them, which was hardly ever used or adhered to. This led to many design inconsistencies, such as different button and element styles, interaction types, and font sizes, which negatively impacted the overall experience. It also created a lot of tech debt, trying to manage multiple pages with many variations and styles of the same code - all built in a dated language and framework.
2 / Need to increase traffic and leads to classifieds
To help drive more traffic to the classifieds, it was decided that the homepage needed to be re-designed. The focus was on editorial and forums, which was important for the brand - but the new business focus needed to be reflected and more prominent with the goal being to roughly double leads by the end of the year.
Solution
We decided to solve the above problems by designing a new homepage that would focus on creating more leads and helping users find and browse the classifieds, and then using it to help create a design system to solve the design inconsistencies and help redesign the rest of the website.
New PistonHeads homepage
New PistonHeads homepage
Wheelspin Design System
Wheelspin Design System
Outcome
The new homepage launched in October 2019 after A/B testing revealed that the new experience and design language had roughly increased leads by 29%, which was a fantastic result for the business.

Google Optimize A/B test results

The foundations for a design system, named "Wheelspin",  were also launched at the same time. Wheelspin combined Sketch design assets, Storybook UI components and documentation to form a living design system and single source of truth for PistonHeads. It achieved the following:
1. Improved UI/UX consistency and quality
2. Created a shared vocabulary between the product team
3. Made the design and development process more efficient
4. Provide clear, discoverable guidance around best practices

Design Process
Kickoff
Mind mapping
Interface inventory

Design system

Wheelspin combined design, Storybook react UI components and documentation to form a single source of truth. It serves designers and developers in rapidly building consistent and usable products.
We decided to use ZeroHeight to build the design system for ease of use and due to the functionality we needed. After designing elements in Sketch, we would usually validate it through A/B testing or internal agreement. The front-end team would then create the element in React in Storyboard, after which I would link everything up in the design system with documentation. 
The goals of the system were:
1. Improve UI/UX consistency and quality
2. Create a shared vocabulary between the product team
3. Make the design and development process more efficient
4. Provide clear, discoverable guidance around best practices
Page templates

Website design
Wireframes
User testing
Visual design - mobile
Visual design - desktop
New homepage - A/B test results
We 50/50 split test the current homepage vs the new homepage against the primary goal of "Search Result Page Views" (any classifieds results page). The result was a clear win for the new homepage and design language.
Back to Top