As heycar continued to grow as a marketplace for discovering and purchasing used cars, the product expanded across new features, teams, and markets.
While the platform maintained a consistent customer-facing experience, the design and development processes behind the scenes were becoming increasingly fragmented. Different teams were building features independently, which led to inconsistencies across components, patterns, and interaction behaviors.
To support the platform’s growth, we set out to create a design system that would bring consistency to the product while enabling teams to work more efficiently.
The goal was not only to standardize the interface but also to establish a shared language between design and engineering.
I worked on this project alongside two other product designers and two Frontend engineers.
My responsibilities included:
Auditing the existing interface and identifying inconsistencies
Defining reusable UI components and patterns
Structuring the design system within Figma
Aligning design components with the frontend implementation
Documenting guidelines and usage principles for teams
This work required close collaboration between designers and engineers to ensure the system was both visually consistent and technically scalable.
Challenges:
As the product evolved, several challenges began to surface:
Multiple variations of the same UI components existed across the product
Design and development teams were recreating elements repeatedly
Inconsistent spacing, typography, and color usage appeared across screens
New features were difficult to implement without introducing additional inconsistencies
Without a shared design foundation, maintaining quality across the platform became increasingly difficult. The design system needed to create structure while remaining flexible enough to support future product development.
Auditing the Existing Product
We began by conducting a full UI audit across the product. This helped us identify repeated components, inconsistent styles, and areas where patterns diverged. By mapping these inconsistencies, we were able to define which components should become standardized building blocks.
Defining Core Components
From the audit, we created a set of reusable components that could support the majority of product interfaces.
These included elements such as:
Buttons and form inputs
Navigation structures
Cards and listing layouts
Modals and interaction patterns
and so many other product specific components
Each component was designed with clear states and behaviors so that it could be reused consistently.
Introducing Design Tokens
To support scalability and consistency, we introduced design tokens for key design attributes such as color, typography, and spacing.
Design tokens act as the foundational layer of a design system, allowing teams to maintain consistency across interfaces while simplifying updates across the product. This structure allowed both designers and engineers to reference the same design logic when building features.
Aligning Design and Development
A critical part of the project was aligning the design system with the frontend codebase. Working closely with the frontend engineers, we ensured that design components in Figma corresponded to reusable components in the development environment. This alignment reduced duplication and made it easier for teams to implement consistent interfaces.
Outcome
The design system created a shared foundation for building the heycar product experience. Designers were able to work more efficiently using standardized components, while developers could rely on reusable UI patterns.
This improved visual consistency across the platform and reduced the time required to design and implement new features.
More importantly, it strengthened collaboration between design and engineering teams by giving both groups a shared framework for building the product.
My Reflection
Working on the design system shifted the focus from designing individual screens to designing the infrastructure behind them.
Consistency is not only about visual polish. It is also about creating a shared language that allows teams to build and scale products together. By establishing this foundation, we made it easier for the product to evolve while maintaining clarity and coherence.
© 2026 Nasim Raeesi