PistonHeads - Design System

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.

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.

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. 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.