I was introduced to chess at a young age and have been a fan ever since.
One of the best ways to learn chess when you're just getting started is to analyze the games of masters, to see how they approached a given situation. When doing so, you quickly learn that chess is a game of strategy, but that strategy rarely exists entirely within the present moment. Rather, the great players of chess have the ability to analyze and determine how decisions they make in the present will affect their situation in the future. Whether this future is one or two moves ahead, or possibly won't come into focus until much later in the game, foresight is the most valuable tool for improving at chess.
As a designer working on design systems for the web, I believe this ability of foresight can be just as valuable for constructing a solid foundation, as well as considering the lifespan of decisions you make throughout the process.
Callout: As French-American writer, painter, and chess player Marcel Duchamp once famously said, “While all artists are not chess players, all chess players are artists.”
Chess author Jacob Asgaard recommends a three-step process for analyzing your position within a game of chess. I believe that this three-step process is applicable to the analysis of a design system, as well. Essentially, it states that on a given turn, players should run through his process, analyzing each step with respect to their current position.
1. Where are the weaknesses?
2. Which is the worst-placed piece?
3. What is your opponent's idea?
1. Where are the gaps in my component library?
2. Which component is the least reusable?
3. What is the audience looking for?
We'll examine each of the three steps one by one.
1. Where Are the Gaps in My Component Library?
When starting on a design system, you should establish a common list of basic components that are typically necessary to ensure you're not missing anything. Then, balance your list against the depth of the site to determine if all these components are needed. Any website with a moderate amount of content is likely to need several basic components that are ubiquitous to presenting content on the web. A typical list might look something like:
- Image Embed
- Video Embed
- Slideshow Embed
- Pull Quote
- Person Teaser
- Web Form (including Checkboxes, Radio Buttons, Text Fields, and Dropdowns)
Your list may vary depending on the content needs of your site. However, a basic list like this can be a great starting point to the foundation of a design system. Start from here and then add additional components with a more specific purpose as you go.
2. Which Component Is the Least Reusable?
In order to get the most economy from your design system, you want to design components for function, and not for purpose. A great test of this methodology is to examine each component individually to determine if it can potentially be utilized for multiple types of content. If you can think of several different pieces of content that could fit within it, you're on the right track. It means what you've designed is flexible enough to allow for variance, and will more easily scale as your system grows. As a small caveat here — it's okay for a component to have a singular function, as long as that function is crucial to the content needs.
3. What Is the Audience Looking For?
This last question is the most important of the three. Put yourself in the perspective of the user, coming to this site for the first time, and try to determine if your components are structured and working together in a way that is beneficial to the user. Once you've landed on a full list of components for your site, before you start design work, it's a great idea to go through the exercise of creating a field map. This field map lists each of the components as well as all of the fields, both required and optional, that each contains. Writing this out will help clarify where overlap exists among your system. It's also a great way to achieve synthesis between all members of a project — designers, developers, project managers, and content specialists.
Once your field map is created, use it to identify areas of potential confusion, and examine whether other components or modifications to existing components could be utilized to solve this confusion.
- Do your components present the information in a palatable, easy-to-digest way?
- Is there a way your components can be simplified while still retaining their basic structure?
As you can see, this approach requires more effort up front, as each potential new piece of the system must be analyzed according to its needs. But if you're able to train yourself to think several moves ahead with regard to your design system, it can be built in a sustainable way to create greater combinations that support each other — leading to a whole that's greater than the sum of its parts.