Evolution of toolkit

A design toolkit is not a design system but, a design toolkit is one of the most essential aspects of a design system. 

The product design teams need a trustable central design repository. Also, the studio needs to develop a process of contributing back to the design ecosystem when consistency is achieved.

_
1. Power Platform Style Guide

When I joined Microsoft Cloud + A.I. studio, they had no central design toolkit. Only local toolkits existed. I created Power Platform Style Guide that is the first unified toolkit in C+A.I. I collected basic inputs and components that used across the Power platform product group in C+A.I. suite.

_
2. BAG toolkit system

After I started the Power Platform Style Guide, more product design teams began using it. It quickly got to the point that we needed to capture more components and patterns with detailed guidance.

I got a few more designers to help me build the newer version of the toolkit, the BAG toolkit system. We worked with BAF engineers who are part of C+AI’s central engineering team to create the BAG UI guide site. It has code repos of all of the components in the BAG toolkit. So the adoption of the BAG toolkit components for any C+AI products got easier.

The BAG toolkit has web and mobile versions. The system has three layers; Toolkit, Guidance files, BAG UI site.

The toolkit has components and their variants that you could easily swap. Also the guidance files have specs and variety of use cases.

_
3. Toolkit research

Over the years, the C+AI suite has been growing exponentially. The OST became part of the Digital Transformation Studio(DTS), and many new teams joined the organization. We needed to capture the latest designs from the new product teams. The Designers who are part of the newly joined teams are required to leverage the toolkit that OST manages. OST researched to figure out how to evolve the design system more tangible for a larger group.

* Detail research results can not be disclosed

_
4. DTS design system

Throughout the survey and a series of interviews with designers, engineers, and PMs, the team decided to reinforce the toolkit structure. We wanted to upgrade discoverability, design token adaptability, and onboarding for new designers.

The DTS design system has four layers.

1. Starter kit

2. DTS toolkit (Web & Mobile)

3. Guidance files

4. BAG UI guide site (Code repo)

_
The starter kit provides necessary informations that designers need to know to use the DTS design system. It also shows decision trees for FAQ.

_
The toolkit’s discoverability improved with the new structure. Designers could find components and patterns easily and go to a guidance file for more details or a code source from the component pages directly.

_
The DTS design systems guidance files and BAG UI guide site support designers with a great level of detail and code level implementation consistently.

_
A design toolkit is not a design system. However, a design system can not succeed without a good design toolkit. At the same time, the design toolkit demands constant care with a thoughtful approach. Once you can build an ecosystem that mutually feeds each other, the design system will thrive.