Design systems aren’t necessarily a new concept, but they have become evangelized in the design community in recent years. Having a solid design system is key to any digital product if you want to ensure efficiency and consistency over time. There is no doubt that there is a lot of heavy lifting upfront to get the design system set up properly, but it is just as important to maintain and evolve the design system so that it can withstand organizational changes that may come.

This is something that is often overlooked and can lead to wasted time, money, and resources. Lack of clear maintenance of a design system can result in the need for a new design system earlier than necessary. This can be prevented if a proper plan is put in place from the very start of the project.

What is the purpose of a design system?

Design systems can be a great tool to align design and development teams by simplifying processes and creating efficiency. It can also allow teams to focus on solving more complex problems.

Reasons to use a design system:

Basics of building a design system

Before you get started, it is important to define the purpose of the system you’re looking to build. This will allow for a clear understanding of where to begin and how to tailor the system for its intended purpose. There are surely many ways to think about this, but the fundamental part is figuring out the needs of the organization and product. This will help you determine the type of design system and level of sophistication needed.

Design systems can be as simple as a shared design library, sticker sheet or design management tool or as complex as a fully built-out microsite. These approaches are not one size fits all, and careful consideration must be employed on which approach is best for a particular client or product.

Values and principles

As you get started, it is important to align your brand and system values and define the principles of those values. Principles are the rules of your system’s values. Some examples of values are accessible, powerful, technical, innovative, playful, fast, authentic, honest, fluid. I recommend choosing three or four and sticking to them in perpetuity. Values and principles are a guiding light to remind your team members why they are working so hard.

Foundation and structure

Building a strong foundation and structure at the start of this process is crucial to the success of the system down the road. Think of it as the foundation of a house. You’re building a hurricane-proof house in this case. Before you start thinking about what components you will need in the toolkit, start by identifying the basic foundational elements that will be the baseline you add to. You will unlikely go back from this point, so spend the time here to get it right.

Here is a list of some basic foundational elements:

  • Voice and tone
  • Motion
  • Photography and illustration
  • Iconography
  • Accessibility standards
  • Composition
  • Units and increments
  • Responsive grid
  • Type scale
  • Color

Components

After you have built a solid foundation of basic elements and fundamentals, you’ll need to determine what components are needed for a specific product. Set up meetings with a multidisciplinary team, and whiteboard and delegate out your parts list. This kit of components will grow indefinitely over the course of your product’s lifetime, but you’ll want to start with a fairly robust list from the beginning. The most important thing to remember is that this list is fluid and ever-changing.

List of potential components:

  • Navigation
  • Buttons and links
  • Dialogs and forms
  • Feedback and alerts
  • Data display
  • Tables

Governance

Teamwork makes the dream work. Defining a clear roadmap for who maintains the evolution of the system is paramount. Your governance plan will keep the correct players in the room. Make sure that everyone understands the governance process that was decided on. Design systems will fail or be diluted if there is not an advocate or group updating and maintaining the evolution. Having a set team and chain of command will prevent partners from going rogue. Teach your team how to use and update the system. Understand that building digital design systems is a relatively new practice, and you might be creating a new way to work. Communication is key—set up a cadence to meet with your team. Define a set schedule, and incorporate time for feedback and reflection.

Collaboration

Perhaps the single most essential part of putting your design system into practice is partnering with development. Include development from the start, and create a cross-functional team. This team can learn and grow together. Design and development oftentimes need to be teachers rather than practitioners. They are their own discipline with individual learnings and best practices. Keeping the communication and collaboration open will ease conversations, allowing for productive iteration. A design system is not fully utilized until its coded out in 1:1 correlation. You will need to get buy-in with developers before they code anything out, so work together to shape and evolve. Be flexible, and understand that code and design are two different disciplines. Design is often more theoretical, so you’ll also need to be willing to compromise.

The evolution of a design system

Now that you have the basic understanding of developing a design system, I’d like to stress the importance of maintaining the system and growing it over time. I have witnessed teams struggle over the years and waste many hours of work because they did not properly maintain the system. I myself have built a great system and watched it fail purely based on miscommunication. Design systems develop with time, careful attention, and tireless collaborating. No matter the size of your team or system, you’ll need to push on to make this exercise valuable.

A system is not simply a set-it-and-forget-it design manual; it lives and breathes with its caretakers.

Rex Carrillo

Editing and auditing

A core set of components will help a product launch, but an evolving system will help a product grow into maturity. Move forward by auditing regularly and evaluating whether each puzzle piece fulfills business and user needs.

Even the largest teams struggle with editing, and a collaborative effort will ease tension as you make wide, sweeping changes. Speed is a necessary part of product design, but I encourage teams to slow down and identify where components have deviated from the system and figure what parts should be included. Be prepared to add, replace, or update assets and anticipate how that will affect the team in the end.

As you evaluate the design system over time, don’t feel handcuffed to components that cease to fulfill the needs of the product. Edit for simplicity. Version controls will allow teams to work with what’s developed and build a proof of concept to work in tandem. Be sure to eliminate overlap as you go, and realize that a system is only as good as the team or individual that is maintaining it.

Documentation

Documenting is so important as you build out your design system and continue to maintain it over time. You will be lost in a sea of writing and minutiae if you wait until the last minute to record what you’ve done. If you create a component, be sure to document that component immediately. Documentation can exist in many forms; just think about scalability when you share your design specs with the development team and how you would go about sharing them.

Changing with the times

Brands and products evolve and develop over time to keep up with our changing world. They evolve based on trends in the industry and product and business requirements. With evolution of the brand comes evolution of the design system. Whether you’re updating to a modern typeface or removing and replacing components that no longer support the product’s goal, you will need to apply those changes to the design system. As you’re doing this, think in small, incremental changes, and be sure to balance user need and accessibility. If you’ve diligently maintained your design system through thorough documentation, these bigger brand changes will be a lot less daunting and make your process much more efficient.

Conclusion

The evolution of a design system is complex but is also a very manageable process when strategically planned. Collaboration from the start is at the core of any design system. You will need to evolve and fail fast, but also understand that knowledge learned from your fumbles will make your system exceptional. And last but not least, never stop shaping and updating—that is where the evolution exists.

Key takeaways:

  • Assemble a great team
  • Create a culture of collaboration
  • Plan out the steps
  • Get the basics right
  • Execute with knowledge learned
  • Evolve, and fail fast and often
  • Repeat, and be sure to keep adding and shaping

This article was produced in partnership with Ogilvy as part of their design system series.