Building a Design System: Speed, Scale, Collaboration, and Innovation
The number of interactions between brands and their customers is exploding as experiences go digital. Maintaining personal relationships when there are so many ways to connect is a growing challenge. But products and services can be efficiently created — and all of this easily managed — if a solid design system is at the foundation.
A design system will help your marketers, designers, engineers, and data analysts collaborate to quickly produce the experiences your customers want, while maintaining the consistency your brand needs.
On the other hand, attempting to manage this process ad hoc quickly results in creative chaos. Global brands and agencies require end-to-end advanced design systems to efficiently manage tools, brand assets, component libraries, documentation, and workflows according to their unique design truth.
At minimum, a design system is a collection of reusable design elements, UI components, and standards that guide their use. An advanced design system needs to encompass the entire design platform — design tools; brand identity including color, typography, voice, and photography; UI and app components; code libraries; content libraries; data analytics; documentation; workflow; and more.
Design system allows team members to stay in sync. Whenever a team member introduces a change in the design system, for example, adds a new component or changes a color in a product’s color palette, all other team members should be automatically notified about this change. Design system also takes the burden of updating design specs off designers because design specification is updated automatically. Design specifications also become a live document that team members use daily. Ultimately, this will give designers more information to make better design decisions.
“Building design systems help with the overall organization and communication across internal and external teams and, more importantly, brings a unified experience to our readers,” says Jan-Jan Tayson, digital creative director of New York Post.
Here are some foundational ideas you’ll want to include as you build and iterate an advanced design system which establish a better experience across your organization and help you create powerful experiences for your customers.
Designing for speed
Time to market is a period of time between the first ideas around a product and its eventual availability on markets. Most product teams strive to establish a process that will allow them to minimize this period. And this is where design systems shine. With a design system, you can quickly develop new tools and content without having to reinvent the design/UI wheel every time — and your results will look and work consistently, and most importantly, provide an excellent customer experience.
One way to ensure speed is to use integrated products and workflows that support collaboration. This will help your team work at a faster pace when iterating. For example, if you are able to collect all feedback in one place, then UX teams can quickly revise and publish new versions. Similarly, being able to switch easily from design to prototype makes it simple to demonstrate multi-screen experiences to colleagues or share prototypes with teammates via the web.
Another way to speed up the process, while remaining true to your advanced design system, is with features that allow designers to automatically update shared elements in a design after updating just one of those elements. Not only is this infinitely faster than updating elements and styles individually, or cutting and pasting new specs, but it also eliminates errors that can creep in with a manual process.
UX designers regularly face the challenge of designing for multiple screen sizes. Having the technology to customize for any screen size and be able to adjust without losing the placement or integrity of design elements, is critical for maintaining speed in your design process.
Design at scale
To work at scale, you need access to a single source of design truth. That means confidence that you’re accessing the latest assets across all guidelines, documentation, and asset libraries.
Make sure your design software is integrated into your creative asset and code libraries to avoid the inconsistencies that happen when design concepts fail to match real-world application.
For example, when designing a new website, your design concepts need to be implemented by a developer. A small design tweak for a designer could be seen as a huge tweak — or even a wholly new component — to a developer looking at static design files. However, if I can hand my developer a much more descriptive and rich view of my design components, we can connect those dots a little more seamlessly in the planning process, which equates to less room for error.
“Design systems have helped us close the gap between designers and developers,” says Tor Gundersen, executive creative director of Perficient Digital. “It gives them both a common language to work from and a single source of truth that defines interactions.”
You’ll also want seamless connectivity between design assets and code components so that designs both look and behave consistently when implemented across different devices, browsers, operating systems, and other channels. These design assets could include colors, symbols, linear gradients, typefaces, character styles, and imagery — whether stock, original designs, or original photography.
Design is a team sport. And this sport becomes an Olympic game when it comes to designing at the enterprise level. Designing at that level means designing across large, multi-functional teams both within the brand and with the agency partners. When teams can work effectively together, with positive command and control, they get to market faster. This is important because real-world teams don’t have the luxury to work three to six months out. They have to react quickly to competition, market events, customer feedback, and real-time data.
With most advanced design systems, design is connected to a code framework and a set of brand guidelines. Design and engineering components are used as building blocks. All of this helps ensure consistency.
“Building a design system gives us a recipe for extending solutions. It means we don’t have to create a design for every screen. With an established look and feel and a design language of reusable styles, components, and patterns, a development team can assemble new pages using just wireframes for reference. No further design required,” Tor says.
But remember that design is not a one-size-fits-all endeavor. If the design system is too rigid, it can stifle creativity and innovation. You still need the ability to adapt in a way that leads to consistent communication and more accurate implementation.
Consistency is not the only goal
Ultimately, any design system will provide consistency, but the advanced design systems will do more. When you have a comprehensive design system and the tools to integrate it across your enterprise without slowing down the process, you can create great digital experiences within your brand framework, at scale.