Design Systems: Crafting the DNA of Digital Products
February 14, 2021
A design system is not a product that is delivered to the market, however, it is a utility consumed by all other products at a company to ensure a consistent brand personality across all mediums.
Design Systems could be seen as the application of systems theory to product development.
"A design system is a collection of reusable elements and components, guided by clear standards, that can be gathered together to build any number of applications." - InVision
It's the process of defining the architecture, modules, interfaces, and data for a system to satisfy specified requirements.
In other words, it serves as the single source of truth that groups all elements that will allow a team to design, realize and develop a software product or application.
A design system is not a product that is delivered to the market, however, it is a utility consumed by all other products at a company to ensure a consistent brand personality across all mediums.
Think of it as the company's digital business plan.
By utilizing a collection of reusable components and a set of standards guiding the use of those digital components, your company will be able to change the pace of creation and innovation within your organization.
"Design systems are always evolving, and the way you share and encourage adoption of new iterations will evolve along the way as well." – Diana Mounter, Design Systems Manager at GitHub
Why a Design System is Important
Creating a design system takes a lot of focus, effort, and organizational management.
Using agile methodologies, product owners get involved and take ownership of certain pieces of the design guidelines.
The outcome is a consistent brand message, clearly defined documentation, and UI components that create a repeatable design to be used across all digital platforms.
Reduces Design Debt
The more a company and its products grow, the more features get added to the original design, and old features become outdated.
Design teams also get to grow, and some projects are sometimes even delivered by outside agencies.
Without a design system, a product can lose its identity and start looking like a patchwork, creating a disjointed user experience as said before.
Eliminates Inconsistencies
The first task before building a design system is classifying all the visual components within the product.
This will highlight where the biggest inconsistencies within the product are and will help the team to pick the most important and most used elements and components of the product. It also serves your customers and makes their lives easier.
When you create a consistent experience you reduce the cognitive load that exists when the user switches from a mobile product to its desktop version.
Saves Time
When a team designs something it is to serve the user. As a young designer, I thought the user was only the customer buying the product. But in this case, it’s also the people within the organization.
Indeed, you might also work on internal products, that are used by different product teams within the company, in order to serve the customer.
When you build a design system, you will speed up the design process while also building links amongst teams.
The more people are on the same page, the fastest the process is.
Creating User-Centered Design Principles
What are the key steps and benefits of building a design system?
1. Conduct a visual audit
The first step in building a design system is to do a visual audit of your current design, whether that’s the design of an app, a website, or some other digital product.
Taking inventory of the CSS you’re using and the visual qualities of the elements can help you gauge how much of an undertaking this process might be.
2. Create a visual design language
The visual design language is the core of a design system. It’s made up of the discernible components that you’ll use to construct your digital product.
Your visual design language is made up of four main categories, and you should consider the role each of these design elements plays in every component on the screen.
Color
Common colors in a design system include 1–3 primaries that represent your brand guidelines.
You may want to include a range of:
Tints, a specific color mixed with white.
Shades, a specific color mixed with black to give your designers a few more options.
Typography
Most design systems include just 2 fonts: 1 font for both headings and body copy, and a monospace font for code. Keep design patterns simple to avoid overloading and confusing your user.
Also, keep the number of fonts low; it’s not only a best practice of typographic design, but it also prevents performance issues caused by excessive use of web fonts.
Sizing and Spacing
The system you use for spacing and sizing looks best when you have rhythm and balance.
A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.
Imagery
The key to success with imagery in your visual design language is having a plan or style guide and sticking to it.
Set guidelines for illustrations and icons, and use the best image format for the situation.
3. Create a UI/pattern library
Unlike the visual audit you’ve already conducted (which looked at the visual qualities of your design elements), this step in the process looks at the actual components of your user interface (UI).
Collect all of the parts and pieces of your UI currently in production. That means every button, form, modal, and image. Merge and remove what you don’t need.
4. Document what each component is and when to use it
This step is important. Documentation and standards are what separate a pattern library from a true design system.
Who's Involved in Building a Design System?
From leadership, down to the QA associate, everyone is involved in the process.
The process is typically handled in an agile process environment with product owners responsible for their piece of the design system, while scrum masters work to keep the different design and engineering teams on task.
UI/UX designers create the visual aspect of the design system while developers take the documentation, the visual aspect, and bring the reusable components to life.
Here are all the roles typically involved in creating and building a design system:
Leadership
Product Owner
Scrum Master (or Project Manager)
UI/UX Designer
Developer
Systems Architect
Technology Used
There certainly are technology tools used to build a design system, and which tools you choose heavily weigh on the type of project team you have and which design system outcome you desire to have.
It goes without saying that using a project management tool to keep your team aligned on tasks and goals will do wonders for any digital product.
Tools like Asana, Basecamp, Trello, Workzone, ClickUp, Wrike, and ActiveCollab keep teams aligned and on task during sprints while knocking out stories and tasks to build out the design system.
Ah, the most exciting part of creating a design system is actually sitting down and designing it.
But you wouldn't embark on an in-home project without any tools, would you?
In the creating-a-design-system world, the tools most widely used are Sketch, Figma, and Adobe's Spectrum.
These tools allow for pixel-perfect designs, the creation of reusable elements called symbols or components. They allow for the smallest element design such as an icon or button and then scale up to building out large desktop applications.
Although with Figma, right alongside the designs, you can build out a prototype of how the application would function if used on an actual device by connecting clickable events to elements that lead to other elements or screens within your designed application.
The makers of InVision have expanded their offering by creating a specific software platform used to create an online design system. The system is called the Design System Manager (DSM).
Designers can sync their Sketch file, with DSM, allowing stakeholders access to the design system designs right in DSM, without having to look over the designer's shoulder.
DMS provides a very slick interface for creating different sections of your design system organized like an outline.
This makes styles, fonts, icons, and components easily accessible, allowing you to create design systems at scale.
The coded components or your design system will likely be brought into other applications by way of an NPM package.
Therefore you'll need to create an NPM account and set up your package to be published to the NPM registry.
This will serve as a single point of contact for the coded components of your design system, while all the other business applications that consume the design system simply reference the necessary design system components from within the NPM package.
For the coded components that will be developed by the engineering team, that code needs to live in a centralized code repository. A code repository will serve as an online storage space for the engineering team to pull and push code from.
That code repository can also be set up to run automated test scripts and user flows simulations, as well as auto-deploy code to a hosting solution if all quality gates have been passed.
Gitlab would be a perfect service to use if you wanted to implement continuous integration and continuous deployment features mentioned earlier. Other notable code repositories are Github and Bitbucket.
If you plan on launching a design system decoupled with other tools such as Figma or Invision, you'll certainly need to host your design system so that your team or community has ways or means of accessing it.
Cloud hosting solutions such as AWS, Microsoft Azure, Google Cloud, Netlify are all very good options.
Design System Examples
Some of the most influential brands in the world have identified the inconsistent brand messaging that all their digital products convey.
Therefore, they have taken a step back, defined a robust design system that their digital products consume, and provided them online for the community to learn more:
A design system is a set of reusable components, guidelines, and assets that ensure consistency in design across an organization. It offers numerous benefits, such as reducing design debt, improving collaboration, and speeding up the design process. To create a design system, an organization should conduct research, establish a design language, and implement a governance plan. It is essential to have a design system in place to create a cohesive and effective brand identity.
