Design Systems - What are they: A breakdown of & chapter two of our e-book
Design systems are not just a recent fad. In fact, they grew out of early design style guides that companies relied on to ensure a consistent visual identity.
A design system is a collection of rules and constraints that connect three primary functions of a brand experience - Design, Technology, and Content. Design systems, and related disciplines in design and systems thinking, make sure all produced brand assets (e.g. a coded website button) mesh well with a standard set of design principles. Design systems might be better thought of as a system of interconnected designs than a style guide for the 21st century. At least that is how programmers and designers look at it — a consistent set of design and coding rules that keep complex systems from imploding.
To some, design systems may still sound like a style guide, but due to the reasons outlined below, they should not be treated as being the same.
Many designers have developed, updated, and sometimes rebelled against style guides over the years. Style guides, as rigid as they can be, are essential to maintaining a consistent brand experience. The main challenge is that design style guides become a process bottleneck, or worse, become outdated within months because they were rarely updated with new technologies in mind. Not to mention no one wanted to update a style guide — it’s one of the most thankless jobs in marketing.
Another noted challenge with the use of style guides is that they rarely involve technology teams. Quite often, this means that when making modifications to design elements in a digital experience, developers have to work from scratch, which can be time consuming and risky.
Style guides often ignore content producers as well. While some style guides will contain guidelines for messaging themes and the like, other facets of content strategy are rarely addressed. For example, it is incredibly rare to see design and content linked together (e.g. how a product’s benefit statements should look and feel) or website taxonomy addressed within a style guide.
Having said that, a style guide still plays an important role in formulating a design system — after all, the establishment of a consistent visual identity (e.g. fonts, colours) is a key factor in creating a successful design system. So, if you do have a brand style guide, do not throw it away if you are wanting to take the next step into design systems — its role is critical!
A design system is made up of components — reusable assets that produce an overall design scheme. As a very simple example of a component, consider a call-to-action button that says “Learn More” that is found on multiple pages within a website.
Within a design system, that call-to-action button would have a specific colour and font type associated with it, be coded in particular manner so that it could be reused easily when necessary, as well as have rules that surround it (e.g. all Learn More CTAs need to have a benefit statement above them when used).
Of course, you may have multiple types of call-to-action buttons in a website (e.g. ‘Download Now’, ‘Read More’), all of which would have their own look, reusable code, and usage rules and constraints.
Naturally, calls to action are relatively small components of an overall design system. It is the totality of all components that become the design system — all need to be interconnected in order to create an experience that will appeal to all important stakeholders (e.g. customers, prospects, employees).
While much of the literature around design systems, thus far, has focused on websites and applications, the concept should be extended to all facets of an organization. After all, effective design systems make things simpler for prospects, customers and employees, which helps to create positive brand experiences.
It is also fair to say that design systems will mean different things to different people within your organization. To a designer, they may see a design system as relating to a pattern library (e.g. a user interface), while to a developer, a design system could be viewed as reusable blocks of code like LEGO bricks that can be used to build a simple house or the Millennium Falcon.
We like to take a more holistic approach when discussing design systems - that they can impact any facet of an organization.
In fact, anytime there is a disconnect between what a customer sees and what your employees see, there is an opportunity for design systems. An experience at depositing a cheque at an ATM should be in line with what the user can do on the mobile app, which should be consistent to what they experience when interacting directly with a teller that uses the consistent tone of the brand voice. Same options, same tone, same tool sets.
“Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.” – Chris Messina, tech evangelist and former Developer Experience Lead at Uber
An effective approach to utilizing design systems is to look at the big picture, seeing something that makes a job harder, and asking, “Why?”. Don't stop asking “why” in the face of “we’ve always done it that way” until simpler solutions are developed. Making one thing simple, shouldn’t make another thing harder. If changing an order entry system causes problems for shipping or accounts payable and receivable, that is not making things simpler. It is just passing the pain down to someone else.
In other words, design systems are not just a concept that involves digital teams — they are something that could affect multiple relevant stakeholders. When this holistic perspective is adopted, that is when companies really start to realize the benefits.
Better digital experiences produce better outcomes. At POWERSHiFTER, we deliver brilliant digital solutions that put people first. Partner with us on your next digital project.
Send us a note or a call us at +1 (604) 227-9952.