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
– Inconsistent design and experience across the product.
– Tech debt and high maintenance.
– Classified leads needed to increase to hit business goal.
Solutions
– New design language for the product.
– Designed and helped deliver a new homepage focussed on generating leads.
– Delivered a new design system that amalgamated design assets, React components and guidelines.
Outcomes
– New homepage improved leads by around 29%.
– Improved development and design time through a design system and components.
– Improved website usability and performance scores.
New PistonHeads homepage
Wheelspin Design System
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
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
Homepage 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.
