Kanban boards: How to use kanban to manage a UX design system

What is Kanban?

“Kanban” is the Japanese word for “visual signal.” If you work in services or technology, your work is often times invisible and intangible. A kanban board helps make your work visible so you can show it to others and keep everyone on the same page.

-Atlassian, https://www.atlassian.com/agile/kanban/boards

Kanban originated in the world of automotive manufacturing at Toyota, by way of Japanese industrial engineer Taiichi Ohno. Over time, many great technologists have shaped the Kanban method to be an effective tool for agile software development.

A Kanban board can be summarized simply by three main features: columns, cards, and continuous improvement. These features provide clarity and quick visualizations of progress for everyone involved in making great products. The beauty of the Kanban method is that it provides consistent guidelines for efficiency paired with the flexibility to adapt it for your specific team members and structure. I’ll dive into more detail on the guidelines and flexibility later on in the post.

Using Kanban to Manage a UX Design System

Recently, we used Trello, a digital Kanban-style tool, to provide clarity and awareness into the process of creating a design system from the ground up. There are many tools and interpretations for using the Kanban method for design system management. Trello is one in particular that added an extra layer of joy to co-creating a design system with our client.

Here are a few reasons why we loved using Trello:

• Availability of Trello card templates, which can provide a consistent, guided process to follow for moving tasks through the workflow
• Ease of sharing and visibility between client and project team
• High-level view of progress/blockers
• Labels for a quick glance at the specifics for a Process or UI object
• Stickers and Power-ups!
• Custom image backgrounds

How to Use the Kanban Card Template

The structure for the Kanban board we used to create a design system is straightforward. Each column represents an activity state that happens in the process of creating and maintaining the design system. By generically identifying each column as an activity, any member of a cross-functional team can manage and work on a card on the board independent from other team members. This structure eliminates the inflexible process known as “waterfall,” where the ability for one team member to start work is dependent on another team member’s full completion of a task.

The columns contain cards that represent a task or item for team members to work on or review. For this template, those columns are:

• To Do: A backlog for all new work that needs to be done
• Up Next: Items ready to be assigned and worked on
• In Progress: Items that a team member is actively working on
• In Review: After the checklist for an item is complete it can be reviewed by the team
• Ready for Storefront Publishing: Once reviewed, the documentation or code for the item can be added to the chosen storefront
• Done: The design system just got that much better thanks to you!

The cards populated in each column can be created from two templates, “Process” and “UI Object.” These template cards can be added via the bottom right corner of each column and renamed appropriately for the task at hand. Each template card comes with the preset sections below built in:

• Process (for Design System Operations and Governance)
  • Overview: A short description of the process
  • Resources: Links to any relevant resources that are helpful while working on this. Could be blog posts, videos, internal documentation, etc.
  • Checklist: Steps to take to complete the creation of a process and documentation

• UI Object (for Design System UI Library)
  • Overview: A short description of the UI objects
  • Abstract Branch: Link to design for visual reference
  • Resources: Links to any relevant resources that are helpful while working on this, like blog posts, videos, or internal documentation, for example.
  • Checklist: Steps to take to complete the creation of a UI object and it’s documentation

To help with creation and management of a design system, we’re providing the Kanban board template as explained above for your team to use! This template allowed us to keep track of all the moving parts that went into creating a design system and ensure alignment between all members of the team.

Make a copy of the template and start managing your design system.

Making a copy of the template

Once you’ve opened the template and are logged in to Trello, use the “Create Board from Template” button to open the dialog and make sure that “Keep Cards” and “Keep Template Cards” are checked.

Now you should have your own fresh board to work with!

When to Adopt Kanban to Manage Your UX Design System

When to adopt Kanban to help manage your design system

• Early stage: You can implement this board after modeling the design system MVP, or when full scope is defined. This chapter of the Design Systems Handbook by InVision has a wealth of information on starting a system from the ground up.
• In-flight stage: You can use a Kanban board when the team is losing track of tasks that are outstanding for a design system, when there is confusion around roles and responsibilities, or for maintenance of an existing system.
• Repair stage: Implement a board like this when a design system exists, but needs to be overhauled.

Tips for Team Communication

Because you are creating the design system, your team will need to decide which members will benefit from information in the Kanban board based on the structure of the project. Regardless of the project structure, it is important to have regular touchpoints with all members of the team to ensure everyone is on the same page.

As we were creating the design system with our client, we used the digital Kanban board to support weekly conversations about the work. The board is not meant to replace live conversations amongst the team.

Here are a few suggestions for people you can invite to contribute to the Kanban board:

• Systems designers and UI/UX designers
• Content strategists
• Developers
• Project leads
• Project managers
• Product owners
• Appropriate client team members

Using Kanban to Manage UX Design Processes

Managing a design system is an ongoing process that can quickly become unwieldy if tasks are being tracked individually in each team member’s mind. Having a Kanban board gets the whole team aligned and rallied behind the singular effort of creating a great design system. In partnering with our client to create a brand new design system, we found the Kanban method empowered all members of the team to collaborate efficiently and cross-functionally.