Operation: Design System
As your company’s design, engineering, and product teams continue to grow, maintaining historical knowledge and sources of truth has become a fragmented and daunting task. This has resulted in difficulties for new designers to onboard and understand the product design language. But fear not, building a robust design system can help alleviate these challenges! At Included Health, we’ve successfully implemented a design system that has streamlined team member onboarding, established consistency, and developed a universal design philosophy that fosters inclusivity and accessibility in our product.
So, if you’re ready to improve your team’s efficiency and create a more inclusive product, let’s get started. In this guide, we will cover what a design system is, the benefits of having one, and how to create guiding principles to ensure consistency across teams. We’ll also show you how to start small and gradually scale up your design system over time. By the end of this guide, you’ll have a solid foundation for building a design system that will revolutionize your product development process.
What is a design system?
A design system is a set of standards intended to manage design at scale using reusable components and patterns. — Nielsen Norman Group
As organizations expand their range of products and services, the pressure to design exceptional experiences only intensifies. However, this often leads to a situation where multiple designers, with varying levels of expertise, create numerous new screens that engineers must build within a tight timeline.
Without a design system in place, scaling your organization can result in a chaotic build-up of redundant colors, fonts, and media queries that must be constantly maintained. This can seriously undermine the user experience, leading to inconsistencies and confusion.
Collaboration can become more complex with multiple designers, stakeholders, developers, and partners from various teams. Without a comprehensive design system in place, this collaboration can lead to inconsistencies and delays in the design process.
A well-executed design system is essential to streamline the design process and maintain consistency across different teams. It frees up designers from repeatedly addressing common design problems and instead allows them to focus on innovation, resulting in better user experiences.
If you want to succeed and stay ahead of the competition, committing to a design system is smart for any growing organization. Let’s take a closer look at why a design system is so important.
Benefits of a design system
A well-designed system can offer a whole host of benefits to an organization of any size, such as:
Speed
Speeding up the design process by leveraging pre-built UI components and elements is a powerful tool. It slashes design iterations, paves the way for prompt decisions, and lets teams concentrate on member experiences instead of being bogged down in the nitty-gritty of details like spacing, color, and radius.
Consistency
A strong design system creates consistency and protects the organization against building a backlog of imperfections in the user experience, aka "design debt." An excellent article on the topic and why organizations should make design debt a priority can be found here.
Onboarding assistance
Starting a new job as a designer can be daunting, especially when it comes to learning the ropes of a new organization. On top of the typical onboarding process, designers quickly absorb the visual history and reasoning behind design decisions. This can be particularly challenging in larger organizations with complex and extensive design systems.
For instance, moving from a startup to an enterprise means encountering a more extensive color palette, component variations, and logic. However, a well-established design system can provide a welcoming environment for new hires to understand and utilize these components. It can also serve as an opportunity for team building, rapidly familiarizing new hires with the organization's visual tone, culture, and company mission.
Don’t let the size and complexity of your design system overwhelm new hires — make it an asset that can help them hit the ground running.
Guiding by principles
Product design principles (or, in short, design principles) are value statements that describe the most important goals that a product or service should deliver for users and are used to frame design decisions. — Neilson Norman Group
Creating a compelling and cohesive design direction can be challenging when working with multiple teams and designers. However, one way to swiftly align and make decisions is by establishing a set of design principles. Design principles keep essential values at the forefront of the design process and promote alignment and consistency across teams.
This results in less time debating simple tradeoffs and more time focusing on complex problems and innovative solutions. By developing strong principles, you can rapidly create a brand-consistent experience, even with minimal components. At Included Health, our Anatomy Team led a workshop to discover and compose our principles, Moving the needle forward to creating a cohesive design system.
The team then began to distill those thoughts into concise principles and 1–2 line sentences of supporting context.
After multiple rounds of iteration, the team created a set of principles that they firmly believed encompassed the ideal philosophy.
Starting small
Organizations often get stuck in the trap of overdesigning their design system, leading to decision paralysis and delaying implementation.
However, by focusing on the most commonly used elements and designing them well, the product team can quickly build enough of a design system to develop most core product experiences. This allows teams to see results and real-world applications sooner, making gaining momentum and support for the project easier. To identify core components, start by asking what elements will be needed in the current or future product.
The team can then categorize proposed components by their potential uses in the product. For example, buttons will likely be used in every experience in the product, making them a high-priority asset that should be included in the design system early on.
Taking a high-level view of the current landscape can help prevent overcommitting and avoid slowing down progress. Attempting to document all components and tokens at the outset can limit the team’s flexibility to pivot as the design system evolves.
For example, below is the core list I usually start with:
- Spacing
- Cards
- Buttons
- Typography
- Colors
Easy enough, isn’t it? The above list covers some of the fundamental components required to create a digital product. With just a handful of elements, one could almost build an entire brand’s visual identity. The next step is to publish these assets so that the design team can become familiar with the system and begin building experiences as soon as possible.
For organizations with larger design teams, it is crucial to discuss where the final assets will be stored and who will be responsible for maintaining and expanding the system. However, the primary objective of this phase is to release the system for use and testing, putting it under pressure before passing it on to the development team for implementation. We’ll delve deeper into implementation in the next article.
Conclusion
Design systems are not set in stone but are in a constant state of evolution. They should be a collaborative effort that is consistently refined and optimized. Not only do they streamline internal design and development processes, but they also ensure a consistent and superior user experience.
Regular testing and user feedback are crucial for maintaining a design system’s relevance, health, and flexibility over the long term. By establishing a solid foundation and implementing regular feedback, design systems can significantly improve the efficiency and speed with which organizations create universal products for their customers.
So, let’s get building, and I wish you the best of luck in your design system journey!
