Building a Design System → Part IV: New to working with a design system? Use a Get-Started-Kit!
Designers who are new to a company or fresh from the university may not be able to use the design system to its full potential right away. In “part III: How to structure a design System”, we talked about the structure, as well as what kind of content we can store within a design system. To use the design system effectively, the newcomer must review and learn the system’s contents (style guide, components, ways of working, etc.). It may take time to accomplish this, but the goal of this article is to explain how to create a “Get-Started-Kit” of the design system to accelerate this process.
The problem
The experience of joining a company with a design system and style guide can be quite stressful until you have learned all of the different standards and rules. Many companies hire external employees for a limited amount of time, so designers are familiar with this feeling. Despite designers having a relatively small impact on the product during this period, optimizing the time from onboarding to being a productive member has an enormous impact on the quality of the product. Any optimization that results in fewer mistakes, fewer reviews, more autonomy, self-support, or better decision tools will be beneficial for the organization.
The solution: Get-Started-Kit
Originally designed as a starter package for designers with limited experience with design systems, it has proven to be useful support for all kinds of designers, regardless of their level of promotion.
UI Assets
A collection of useful UI assets, such as buttons, input fields, navigation, footers, responsive layout concepts, example screens, etc. By using the “Go to main component in the library” feature of Figma, it is easier to locate elements within the design system.
Designers get navigated directly into the design system folder where the asset is stored. This allows the designer to learn the navigation structure of the design system.
Example screens
Here are examples of each product’s login page, navigation page, and settings page. There are two effects of showing example screens. First, the designer is provided with a ready-made template and needs to simply replace or reorganize elements to finish the screen. Secondly, it enables a designer to get a feel for the design without memorizing the style guide.
Structure of the kit
Presently, the kit is divided into four sections:
- UI Assets
- Design Exploration
- Design Refinement
- Handover to Engineers & Documentation
But, the sections can be enhanced arbitrarily. By using the same structure for all problem-solving processes, all designers and developers can easily understand the designer’s thinking process. This reduced the number of meetings for a handover and improved the grooming process for developers.
Signalizing status
The headers are an integral part of the structure and, besides describing the different parts of the flow, they signal the status of the screens, with In progress, Ready for review, Done, Under exploration. This allows developers to inform themselves, without contacting the designer, how far the designer is in the process. This is helpful for developers to indicate what they can groom.
Documentation
Design exploration and handover are key to a successful project. By taking the time to document designs properly, knowledge is retained and passed on, ensuring projects run smoothly. In addition, documentation makes it convenient to take over work from other designers as well as take on a challenge that got worked on in the past. Documentation can be found in both places, as it outlines the problem and potential solutions or goals, as well as how the design is meant to be implemented by engineers.
Instructions
Instructions for each section of the structure prevent designers from having to memorize each step. It serves as a checklist so that every designer is guided through the same steps in every problem-solving process.
How to build a Get-Started-Kit
The kit is an extension of the design system and includes all the materials that you can possibly need to speed up your problem-solving process.
UI Assets
Figma has an excellent tool for tracking how frequently assets in the design system are used. These assets should be part of your UI Assets selection. Icons and other small non-interactive components can be ignored while these elements are often already part of most assets. The important thing is that the elements in the kit need to be connected to the design system, otherwise there will be no educational effect on the designers learning how to navigate the design system.
Example screens
Gather information with interviews with other designers in the organization to indicate what is commonly used, which screens are already implemented, and which screen represents the brand design guidelines the best. Finally, make a selection of a few and add them to your kit.
Structure
The structure should be aligned with the design process you using in your organization. In some organizations are researchers and UX designers the same person. In this case, the kit should have an area where designer research can be conducted and stored.
Signalizing status
This element supports the structure as mentioned before. It depends on what kind of Ways of working and definitions of done you have in your organizations.
Documentation
Create templates to document the most important information about the problem-solving process. For example:
- Describe the problem!
- List user scenarios where this problem occurs!
- Is there research missing to solve this problem.
- Define a measurable Goal for this problem.
Documentation for Handover to engineers
This type of documentation includes often detailed descriptions of the functionality of your solution. If you want to create an efficient handover, it is best to speak with your engineering team about the information they need for a rapid handover or to start grooming.
Instructions
Write instructions for every section of your structure to guide the designer on what needs to be done in this section. Formalize it in short words and make eventually an example. In terms of examples, you can also provide examples inside the structure to give the designers a foundation they just need to manipulate to start. In addition, instructions can be also used as a checklist.
Get-Started-Kit in action
The screenshot below shows a design solution with seven different user scenarios in a Get-Started-Kit structure.
- Design Exploration
- Design Refinement
- Handover to engineers & Documentation
Thank you for taking the time to read! Please clap and subscribe if you enjoyed it. It would mean a lot to me and encourage me to write more stories like this.
I would appreciate it if you would leave a comment to share your thoughts and experiences with the community and me.
You can support me by becoming a member of Medium by clicking my referral link: https://medium.com/membership/@florianwachter
or buy me a Coffee ☕ 👉 https://www.buymeacoffee.com/flowr
You can learn more about Design Systems here:
