Why Have A Design System
Starting, growing, and maintaining a design system is a big task that should have some clear goals and guidelines around the intention and usage in place. Often design systems are for efficiency and consistency across multiple platforms and experiences. These are often the primary use cases. To achieve these, one must have the support from multiple teams at all levels.
Why It Is Important
Without a design system, every element has a manual component. Designers create redlines and requirements for developers to code for each use case per page. Over time, human error and roadmap priorities drive inconsistencies even with an established style guide. With a design system, every element pulls directly from a pattern library. Developers can use existing assets (components) that are designed to specifications. This creates consistent patterns across multiple pages and a familiar customer experience.
Without / With A Design System
What Is A Design System
It is a set of connected patterns and shared practices organized in a single place to aid in digital product design and development.
Developing a library of reusable coded components that can be utilized across various pages, sites, and applications can help preserve the distinct styles created by designers.
A Single Source Of Truth
This partnership across the brands, product/UX, and development bring together alignment into one centralized location with common goals and foster communication and collaboration.
A Dynamic Evergreen System
It is a living style guide, a design pattern library, that gets developed into components and templates which are used to create consistent digital experiences for all Gap Inc.
Setting Up A Design System
There are many options for setting up a design system and fundamentals to follow. One of the most popular fundamentals is following the atomic design model created by Brad Frost. What makes this idea work so well it that it breaks everything down into basic elements to allow the building blocks to have the most versatility.
Creating A Workflow
Maintaining and adopting of your design system is critical for its success, especially in a larger organization. In a supplemental case study, I will review best practices for adoption and hand off for multiple teams. After a pattern library is set up. Creating workflows and RACI (responsible, accountable, consulted, and inform) are critical.
RACI
Aligning with your team and partners on a RACI document will allow for clear governance on how to manage the roles and responsibilities of a design system.
Documenting Your System
Documenting your system is critical to keeping design patterns and usage clear for all stakeholders. There are many ways to document your design system but one of the easier tools to use is a company called Zeroheight. A more detailed review of Zeroheight will be featured soon. What makes Zeroheight so effective is the fact that it doesn’t require coding and can import from multiple tools such as Figma, XD, and Sketch. Zeroheight Example
How To Sell Your Design System
Design systems can be easy or difficult to get support depending on your organization. The key is to create a stance on how you see a design system benefitting the overall cadence of the project delivery. One of the many ways to drive its success is to look at it as a service that supports many facets of teams.
This information should start or help the conversation with your stakeholders and leadership teams. Future detailed case studies will be posted in the near future. The topics include
- How to create an effective library
- Design system onboarding and workflow
- Managing iconography
- Documentation – Zeroheight
- Native Components vs Custom