Iterating the Kit Car Design System

An example of my work expanding and enhancing a design system.

Introduction

A property and casualty insurance company's design system named “Kit Car” provides components that are assembled by the designer or developer to build front-end user interfaces. Initial work in 2018 created a user interface kit in Adobe XD and a developer site using BootstrapVue. The user interface kit continued to receive some updates over time but was not maintained sufficiently. Eventually it was not robust enough to support all the design work for the new platform. I proposed that we start a second version that would support multiple designers in conducting the design work for the platform.

Methods

Four steps were be conducted to complete the work:

  1. Reorganize the design assets file to match the developer site
  2. Rebuild the design assets using the best practices for the Figma software
  3. Expand the available variants for each component
  4. Align the content and language in the design assets with the developer resources

Design

The design work can not be shared online at this time.

Results

Though completing the work, the design assets have been rebuilt using the using the best practices for Figma software. The design assets have also been expanded to provide more variants to designers. The design file has been reorganized to make it easier to navigate for designers, developers, and stakeholders. The design system team is currently working on step 4, which is to align the language in the design assets with the developer resources.

Discussion

Version 2 of the design system improves the design and development work on the platform by providing designers with more component variants and developers more accurate UI information in dev mode.