Revamping a Design System to Support New Platform Development

Introduction

A property and casualty insurance company’s design system serves as a crucial resource for both designers and developers to create consistent, user-friendly front-end interfaces. The initial version of the system, developed in 2018, included a user interface (UI) kit in Adobe XD and a developer site built using BootstrapVue. Over time, while the kit received some updates, it lacked sufficient maintenance and eventually failed to meet the evolving needs of the new platform. As a result, I proposed an overhaul to create a more robust and scalable version of the design system to better support the design of the platform.

Methods

To address the gaps in the existing design system and improve its functionality for both designers and developers, I followed a four-step process:

1. Reorganize the Design Assets: I began by restructuring the design assets file to better align with the developer site, ensuring consistency and improving usability for all stakeholders.
2. Rebuild Using Figma Best Practices: The original design assets were rebuilt using Figma, a more flexible and modern tool for design collaboration. Figma's real-time collaboration and scalability offered more efficient workflows compared to Adobe XD, which is important for teams working on large projects.
3. Expand Component Variants: I increased the number of component variants to accommodate the full range of platform functionality. This helped ensure that the design system could support a broader set of use cases and better meet the needs of the new platform.
4. Align with Developer Resources: The final step focused on aligning the language and content in the design system with the developer resources, ensuring that both design and development teams used the same terminology and standards.

Design

At this stage, the design assets and components have been rebuilt and expanded in Figma, following industry best practices for design systems. The new system now offers more functionality and is organized for easier navigation, making it accessible for both designers and developers. This allows for a more efficient design-to-development workflow and clearer communication between cross-functional teams. Note that the design assets cannot be shared publicly at this time.

Results

The redesigned design assets were successfully rebuilt and expanded using Figma’s best practices. The new assets now better represent the core functionality of the platform, with a greater variety of components to support all possible design needs. Additionally, the reorganized design file is now more navigable, enabling designers, developers, and stakeholders to find what they need more efficiently.

The design system team is currently working on the final step: aligning the language and content in the design system with developer resources. This final stage will help ensure that both teams work from a shared understanding, improving the efficiency and accuracy of the development process.

Discussion

The new version of the design system is enabling more efficient and scalable design and development work on the platform. By providing designers with more component variants and giving developers clearer, more accurate UI information, the system supports smoother handoffs and faster development cycles. The work completed so far has laid a strong foundation for a more robust, adaptable design system that will continue to evolve alongside the platform’s development needs. Looking forward, further refinement and alignment between design and development resources will ensure that the system remains a reliable and effective tool for the team as the platform grows.