top of page

Design System

Role: Product Design Lead

Organization: Dealer-FX (Automotive)

Type of Project: B2B/B2C

Tools: Figma, Adobe Illustrator

Overview
 

Design system is a collection of reusable components, patterns, and guidelines that helps ensure consistency, efficiency, and scalability in the design and development process. Design system includes UI components, typography, color palette, iconography, and layout grids, along with documentation on how to use them effectively.

Consistency, Clarity, and Quality
 

When I joined DFX, I was impressed by the innovative products they were working on but at the same time concerned about the lack of design consistency and clarity. After conducting a heuristic evaluation of products, I set my first goal to design a comprehensive design system to ensure consistency and coherence across all products and experiences within the organization. Additionally, I wanted to foster collaboration and alignment among different teams, leading to a more cohesive brand identity and improving the overall quality of the products and services.

​

What We Achieved
 

  • Streamlined design and development processes led to significant cost savings for the organization.

  • Implementation of the design system resulted in a reduction of project timelines, saving valuable time for the team.

  • Increased efficiency in design and development tasks translated into improved productivity and financial gains for the company.

Design components

Problem Statement
 

Users could not see a consistent user experience strategy as well as a consistent look and feel across the products; There was no concordant pattern defined for developers and designers in terms of design components (forms, buttons, colors, etc.). This contributed to lower satisfaction, low sales rate, and a lot of re-work for the team.

Planning
 

​To initiate the development of the design system, my first approach was to assess the existing styles and components. I identified several inconsistent patterns that required evaluation to determine whether they should be retained or discarded. I systematically gathered and documented screenshots depicting various styles and components, organizing them into distinct categories. These categories encompass text styles, color schemes, icons, buttons, navigation elements, headers, footers, cards, forms, lists, error scenarios, and other user interface (UI) components.

​

Once the styles and components were organized into distinct categories, it became simpler to assess our inventory and identify areas for streamlining. Redundant styles and components were eliminated, and similar ones were consolidated. Through collaborative decision-making, we determined which elements should be retained and which ones should be discarded, primarily relying on heuristic evaluation. To facilitate the transition for the development team, we mapped old, unwanted styles and components to their corresponding replacements in Google Sheets.

color pallette
chat component

Defining Global Design Guideline
 

Once we organized and streamlined our resources, the next step was to establish the groundwork for our design system.
I formulated comprehensive global style guidelines that were applicable across all platforms. These guidelines served as a blueprint for designers, enabling them to develop new components and enhance the design system seamlessly.

 

​Style guidelines often tend to be overly complicated, requiring extensive time and effort to digest (who has time for that, right?). Based on my experience, simplicity is key when crafting guidelines. If you want your product team to effectively understand and use use the guidelines, it's crucial to keep them concise for easy comprehension and recollection. Concise guidelines offer flexibility for creative expression while ensuring a reasonable level of uniformity. Below, I've provided an outline of the style guidelines.

colour palette

Colors
 

We encountered numerous colors that were very similar, leading to unnecessary confusion. I consolidated them into a smaller color palette and developed concise guidelines for their usage (as shown in the image above). From my experience, most projects only require colors for five key elements: heading text, secondary text, borders, backgrounds, and actions.
The color guidelines are as follows:

​

  • Limited Palette
    Use a limited color palette to maintain consistency and coherence across all design system elements.

     

  • Functional Colors
    Assign colors with functional purposes, such as indicating primary actions, highlighting important information, or differentiating between content types.

     

  • Accessibility
    Ensure that chosen colors meet accessibility standards, including sufficient contrast ratios for text readability and consideration for colorblindness.

     

  • Brand Alignment
    Align color choices with the brand identity, reflecting its values, personality, and visual identity.

     

  • Use Sparingly
    Avoid overwhelming designs with excessive colors; instead, opt for simplicity and clarity.

typography

Typography
 

There were multitude of text styles and fonts across various platforms. To streamline this, I significantly reduced their variety and opted for consistency by selecting Roboto as our brand font across all platforms. Typography guidelines are as follows:

​

  • Utilize only regular and medium font weights from the Roboto font family.

  • Sentence case to be used for all texts except Proper Nouns and imported texts from OEMs which cannot be changed by us.

  • Reserve the use of ALL-CAPS for specific instances and utilize it sparingly, particularly at a smaller font size.

Content Writing
 

While typography plays a crucial role, the content itself holds equal significance. Consistency in copywriting facilitates user understanding of the interface and expedites task completion. Below are a few fundamental guidelines for voice and tone:

​

  • Keep the sentences concise.

  • Employ headings and bullet points to enhance content scannability.

  • Steer clear of technical language and opt for straightforward terms.

  • Start calls to action with strong verbs that prompt action.

  • Ensure consistency in vocabulary usage.

components

Iconography
 

To streamline the process, I decided to use the established icon sets of Google Material Design. This icon set is highly regarded for several reasons like consistency, scalability, comprehensiveness, and accessibility. 

​

Here are the principles for iconography:

  1. Ensure all icons are sized at 24px x 24px with precise boundaries and no extra padding.

  2. Icons should be comprised of lines only and should not be filled unless they are hovered.

  3. Maintain a stroke weight of 2px for consistency.

  4. To maintain clarity, ensure icons are aligned to full pixels and avoid fractional pixel values.

  5. Icons displayed on light backgrounds should be colored dark gray, while those on dark backgrounds should be white.

Developing a Components Library
 

After reviewing the existing components and establishing the overarching style guidelines, the subsequent task involved crafting a component library. To simplify the process initially, we developed separate component libraries for each platform using Figma. Looking ahead, I aimed to consolidate the iOS and Android component libraries to ensure a consistent mobile experience. While this approach may spark debate among purists, I believe it's acceptable provided that we conduct usability testing to validate the designs. Depending on your team and technology stack, it can serve as an effective strategy to reduce both design and development expenses.
 

In addition to components, we began creating templates of the main screens (as shown below) to illustrate how components were organized for various use cases. This not only facilitated quicker mock-ups for designers but also showcased the grouping of components for different scenarios.

component library

Bottom Line
 

Using a design system is crucial for organizations seeking to maintain consistency, efficiency, and scalability in their design and development processes. By implementing a design system, teams can ensure that all products and platforms adhere to established visual standards, interaction patterns, and branding guidelines, enhancing brand identity and recognition. Furthermore, a design system streamlines the workflow by providing pre-designed components, styles, and guidelines, enabling teams to save time and resources while accelerating the design and development process. Additionally, a design system fosters collaboration among designers, developers, and other stakeholders, providing a common language and reference point for discussions and decision-making. Moreover, a design system promotes scalability, allowing for easy adaptation and expansion as new features or products are developed, ensuring continuity and coherence across all touchpoints. Overall, utilizing a design system promotes consistency, efficiency, collaboration, and scalability, ultimately leading to better products and user experiences.

© 2025 by Shadi Davarian. All Rights Reserved.

bottom of page