Day 65— Future of Design series 6/7: “Automating Design System”
When dealing with large amount of design deliveries across different functions across platform, a well crafted design system can be helpful for designers to focus on larger picture instead of “reworking” on components all the time. However, it’s not an easy task to get the design system right; there’s a significant amount of book of work to create and maintain it. How can we leverage automation to make our lives easier? In this article, I’ll talk about the following topics:
- What is Design System
- Automation is the Savior
- How do automate
- How we can leverage AI
What is Design System
A lot of designers are familiar with UI pattern library. What is the difference between pattern library and design system. A design system is the combination of 4things:
- Pattern Library: general guidelines around the interaction of design pattern
- Design Language (style guide): general guidelines of look & feel
- Component Library: combined the 2 above, design/dev team creates reusable components
- Creation Principles: guidelines around who/when/how to create a component
- Maintenance Principles: guidelines around who/when/how to update/remove components and related system update
A common example of a well-know, broadly adopted design system is Google’s Material System (figure below). On their webpage, it clearly lays out the goal/principle of the system, and how to adopt it in a proper way.
Why We Need a Design System
The goals of creating a Design System are usually in 3 folds:
- Consistency: to enhance branding & usability, so that users won’t get confused
- Face-Lift: After a while, companies utilize the newly created design system to make a across-the-board product/system face lift
- Efficiency/Cost-saving: save men-hour on designing/ developing components
The Good, The Bad, and The Ugly
The Good: When the design effort covers large amount of delivery on a system, design system helps reduce the “rework” and therefore achieve the goal of consistency & efficiency.
The Bad: However, the upfront investment is usually quite large in order to get it right. And when I say large, it means it’s a investment in interaction design, visual design, design management, software engineer, product management, and senior leader’s support.
The Ugly: The challenge is usually around justifying “changing-the-status-quo” with long term investment without quick wins. Also, lots of times, people get it excited around the creation stage, but the lack of experience or collaboration in “managing the system”, as we saw lots of trial-n-error ended up on the “error” side.
Design System is like The Incredible Hulk
Design System is like The Incredible Hulk. It’s massive, it’s powerful, but it’s hard to manage. It takes people with knowledge and experience, also resource to create, maintain it. Because it’s large impact level, it takes the whole village to manage it. That being said, how can we make our lives easier when dealing with Design System? Luckily, automation can be the savior.
“Design System is like The Incredible Hulk. It’s massive, it’s powerful, but it’s hard to manage.”
Automation is the Savior
When we take a careful look at the process of construct/ expand/ maintain a design system, there are a lot of areas can be automated for best optimization in regards to enhancing creativity, increasing velocity, and reducing human error. To do so, let’s start by looking at the workflow in a design system:
- Identifying Patterns
- Creating Design Languages
- Designing Components
- Coding Components
- Creating Components Library
- Communicating with Teams
- Publishing/Deploying New Components
- Maintaining Components Library
Let’s take the exiting part, “Designing Components”, as an example to explain how automation can help save time and make designers happy:
Less Manual Checking
If we look at the component creation process like what PluralSight has (figure below), there’s so much analysis works need to be done before a designer can start designing a component. Do these analysis work all need to be done manually? The answer is no. Lots of these work can be, and should be automated.
For example, in the stage of checking “Does it already exist in the Design System”? or the next stage “Does something similar exist?” If you’re in a large team with an existing system/product at hand, you know how long these stages can consume your work hours. If you’re in a global design team that across different time zone, the effort could be even bigger, and the wait time also. Lucky for us, with carefully crafted system, these tasks should be run by machine, instead of designers manually check the “catalog”.
Less Typing, More Designing
Now, if we look at the next two stages: “Requirements”, it takes designers time to properly document and circulate these requirements. Not to mention everyone might have different way/template to generate requirement; and the bigger problem is, are these requirements good enough for developers to understand it? Is there missing requirements that designers didn’t think of? How do we involve QA to make sure we capture all the acceptance criteria? A lot of these requirement related tasks/challenges can also be automated in order to let designers focus on their primary work: design.
How to Automate
If we start with the very simple process “Deploying New Component” as an example, a newly designed component can be automatically pushed to every designer’s working prototype for quick review and feedback. If there’s no concerns raised from the design team after a period of time, the system will automatically create a JIRA ticket along with the specification attach to the ticket, so that the development team can start working on it. To expand on this examples, there are some associated tasks that can also be automated:
- When a designer click on a JIRA ticket, it will automatically open Sketch or other design software and attach the user story and acceptance criteria into the wireframe or visual comps page
- When a designer is done with designing a comp, it will automatically attach the comps and spec to the JIRA
- When a interaction designer finish designing a component’s behavior, a functional spec and acceptance criteria (given, when, then) will be automatically generated and attached to a newly created JIRA ticket.
- Different interactive states of a component, hover, selected (for ADA keyboard navigation), pressed, released, clicked, error, disabled, etc., will be attached to the JIRA ticket.
Some of the functionalities I mentioned can be done with customize script, plugins, either on a machine basis or a system basis. For example, in Invision for JIRA plugin, developers can review the Invision protoype within JIRA environment.
How we can leverage AI
In the past article I wrote about AI Design, I described that in the future, some of the non-premium designer job will be gradually replaced by AI. The reason why it will be a trend is that AI is specifically good with dealing with large amount of data and finding insights and generate scalable solutions that can be broadly accepted. Therefore, some of the typical graphic design tasks like Moodboard, Style Tile, Design Trends Analysis, Competitor Analysis, Componentry, can be done by AI much faster and cheaper.
In the scope of automating design system with AI, we’re seeing that some of the tasks in “Discover” phase can be automated through AI & Machine Learning. For example, we can use AI to crawl through every component in the system to find patterns or anomaly. AI can also help facilitate the feedback gathering process to eliminate wait time and boost efficiency. Also, when the design/dev work is done, AI can help categorize the component and publish the end results to larger teams.
Conclusion
- Design system is an effort of team work that takes lots of investment and expertise to get it right, otherwise it often create more burdens than benefit.
- If we examine the processes involved in our design system, we’ll start to realize there’s a lot of ways to automate it and saves a lot of time.
- Currently we can write app-based script/plugin, or cross-app or system level scripts to automate some tasks. In the future, we can leverage AI’s help to “compare & contrast” and make smart decisions.
Do you have experience working on automating Design System? I’m curious about your thoughts.
ABC. Always be clappin’.
To see more
The opinions expressed in this article are those of the author. They do not represent current or previous client or employer views.
