Overview

Heycar is an online marketplace for new and used cars, with a mission to make the the car-buying process as easy and enjoyable as possible. Having an online only process allows users to buy their dream car without leaving their living room. Within my first few months at the company, I worked to define and implement a mobile-first global design system.

Process

In the early stages of migrating to Figma, we took the opportunity to create peace and order within the design files. With a growing team and an array of new features on the horizon, it was now or never. We had a total of 6 weeks to take this from concept to completion. We broke the work down into weekly milestones.

For week 1, the goal was to understand whats currently in place. We started out by reviewing the pre-existing semi set of guidelines in Sketch, stripping the fat and noting the outdated. Deciding on core journeys, key elements and spotting opportunities along the way.

Week 2 was all about getting the fundamentals in place. It was time to decide the approach, process and standards. After much research, we chose to base the design system around the Atomic Methodology by Brad Frost. Here we focused on typography, colours, grids, spacing and buttons.

The focus for weeks 3 and 4 was solely on components. Ensuring a mobile-first approach, we needed to carefully consider how we were going to not only make the design process faster, but allow each and every component to scale with ease. Auto layout was key in our success.

For week 5, we needed to rebuild our core pages into templates using the new and improved components. This would serve us well later on down the line. We also took the opportunity to rebuild a ton of legacy files where we could as further iteration would be made to these pages in the future.

Finally week 6 was used to help improve collaboration with other teams. Documenting handover for product and engineering to check before releasing a feature or product. It covered fundamentals such as how and when to use components, states and types. I also ran workshops with the teams to explain how to work with Figma and our new design system.

Outcome

Ultimately the design system was a success, but by no means perfect. It did however allow us to seamlessly scale from 3 designers to 11. Documentation was continued after every new introduction to the system and was eventually used as the standard for our other team in Germany.