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 collaboratively
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.
Innovate consistently
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 a wireframe tool 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.