@components

Picking Parts, Products and People

A Team Activity to Start a Design System

Masthead

Teams can be awed by the scale and spread visible in finished systems like Material Design or Lightning Design System. Systems can be both incredibly broad and deep once fully formed, if they ever get that far. Faced with such scale, getting started can be quite daunting or avoided altogether.

I’ve had success leading small teams through a quick, two-stage activity that, over ~60 minutes, bridges from exploring the myriad Parts of a system to considering People involved and Products it’ll impact. The activity is grounded by participants completing and sharing work of a two-page worksheet (download the PDF or INDD source).

Screenshot of picking parts worksheet
Two page worksheet, starting with Parts before proceeding to prioritizing Parts, Products and People

The moderator — often, a design system lead — walks away with well-structure data to inform system strategy and priorities.

Equally important, however, is how the activity effectively reveals a lack of alignment and personal biases across a team. By recognizing these gaps and discontinuities early, a team can draw boundaries around and break barriers of what the system can become sooner and later.

Here’s how the activity works.


Stage 1: Pick the Parts

The first stage orients the group around tangible parts. Each person identifies what matters—and doesn’t matter—to them.

The Protocol

Distribute the first page and briefly introduce the categories and kinds of parts they’ll see (visual language, elements, components, etc). Then instruct participants to:

  1. Draw a thick line or X through irrelevant categories.
  2. Circle the labels of up to the 5 most-important categories (such as Design Language, Patterns, or Editorial) for your system.
  3. Check up to 25 important parts for your system. Each item (Typography) and sub-item (Web Fonts) is a separate check, and checking an item does not imply all subitems are checked.
  4. Of the 25 checked, circle labels of up to the 10 most-important parts.
Photograph of completed worksheets
Parts worksheets, by participant, arranged to compare and discuss

As participants finish, arrange all worksheets on a table. Let them scan the results and hunt for patterns, and then begin the discussion.

The Discussion

Foster conversation on:


Stage 2: Prioritize the System

The system’s tangible Parts are familiar to beginners and experts alike. Using a second worksheet, you can bridge their appreciation of these parts to equally important and complicated concerns prioritization, Products to which the system applies and People that may be involved.

Column 1: Prioritized Parts

  1. Transcribe the 10 most-important parts to the second worksheet, listing them in a rough prioritized order in the first column.
  2. Asking “How much should we work on each important part?”, prioritize effort per part using no more than 25 tally marks, commensurate with the effort you’d expend on each of the 10 transcribed parts.
Photograph of priortized parts
Parts transcribed from the first sheet, with tally marks revealing proportional effort to invest

Column 2: Products

  1. Freelist as many products by name in your organization’s portfolio that you’ll apply the system. Time permitting, also identify a product’s type (WA: Web App, WS: Web Site, iOS, etc).
  2. Asking “What are our most important products?”, prioritize products by tier up to 4 “Flagship” (most important) and 4 “Secondary” (next most important), marking them with an F or S, respectively.
Photograph of listed products
Products, prioritized into tiers (like F = Flagship) and grouped by platform (like WS = Web Site)

Column 3: People

  1. Name centralized team members who already have or will have nontrivial allocated time dedicated to the effort, and designate their primary discipline (such as UX, FED: Front End Development, or PdM: Product Management).
  2. Identify federated influencers , often the talented designers and front-end developers from top products, that will play a key role in decision-making and creating things.
  3. Include more distant leaders to align with, such as a director in Brand/Marketing, portfolio manager in Product Management, or similar systems experts in the enterprise.
Photograph of proposed people
People by discipline

Discussion

Generally, it’s good to provoke discussion after each column (Parts then Products then People) but that can elongate the session and limit discussion on Products and especially People.

For each column, highlight:

Closing the Activity

End with “Closing Standup,” where each person articulates the 1 or 2 key themes or impressions one-by-one, around the circle. This should take no more than 3 to 5 minutes, give each participant a (last) voice, and enable a moderator to conclude with final thoughts and next steps.


What’s Next After the Activity?

After the activity, the moderator can:

Best of luck getting your system off the ground!

Need help with your system?

EightShapes can energize your efforts to coach, workshop, assess or partner with you to design, code, document and manage a system.