You'll need visibility into all your software products and their complexity before creating your design system. Learn how to facilitate the component cut-up workshop in this video.
- [Tutor] Now that we've identified the list of components, how do we reprioritize them? I'm going to show you how to facilitate the component cut-up workshop. Brad Frost calls it an interface inventory, Nathan Curtis calls it a component cut-up workshop, but no matter what the name is, it's a great first step to getting the entire team involved and aligned. It gets everyone excited about creating a pattern library and it aligns groups around a common understanding of what's next. So before the workshop, you should invite anyone with non-negligible time on the project.
In addition, there's a great opportunity at the end of the workshop to pull in executive sponsors to walk through all the data captured on the walls. Also before the workshop, it's good to create categorized sections based on the component checklist, and have foam core boards already created for those sections. So some of the example categories that you may have could be something like forms and buttons, or navigation, or text and imagery, data viz and tables, or whatever your organization may need.
Next you're going to want to organize and print out hard copies of screenshots of various applications, and these would be any application that would fall underneath the design system. From the home page to search results, product pages to checkout, tabular displays to multi-page forms, choose pages that represent the entirety of the experience. Now when the actual workshop comes, you're going to want to separate into teams of three of four, and each team is assigned to one of those pre-outlined categories I mentioned before.
Then everyone physically cuts up each page into their component category. You can also create subcategories on your boards as needed. For example the text section of the board could end up having subsections for headings and titles, error or success, info and text links. If time, a great next step to seeing this information in one place would be to have the team begin to align on names for the components. Naming things is hard enough and though I may call it a dropdown, you may call it a select input.
This is a really great time to align and get some consensus on what you're going to call these things. This exercise really gives visibility into how things are done today, and their complexity. You can see where and how the experience is breaking, and where you'll need to start making these changes. The component cut-up workshop allows you to identify the design problems your teams confront over and over again, and you can identity and extract the best solution to those problems. It also allows you to remove anything that doesn't have a unique purpose.
The exercise really generates momentum, builds early consensus, and alignment. And this is really important because I don't want you to confuse a design system work with a rebrand or a text-dec overhaul. The design system's patterns should be familiar not new. The job is not to invent but to curate. Discovering components together in a workshop setting is really eye opening. Teams react with a lot of enthusiasm as the workshop demonstrates how the components can become modular, and how they can reuse aspects of their design system.
It really visualizes the need for consistency and can absolutely drive home the value of the end goal. Investing in a library requires drive, investment, and determination to stick with such a set of standards, and you'll need to communicate a scale and scope your team should expect.