Iterating the Kit Car 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 the design team in conducting the design work for the platform.

Methods

Four steps were 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 to provide platform functionality
4. Align the content and language in the design assets with the developer resources

Design

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

Results

Though completing the work, the design assets have been rebuilt using the best practices for Figma software. The assets have been expanded to represent the core functionality of the platform. And 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 new platform by providing designers with more component variants and developers more accurate UI information in dev mode.