How and why to build a design system that delivers results faster.

Brands have for the longest time had Corporate Identity manuals, also known as CI manuals, or for those on the inside, brand bibles. This analogue corpus took the form of an oversized book, dog-eared and dusty – like an artifact from the last century, which it was! And then, with the evolution of the internet and websites, came the need for something bigger, better, and harder working.

Enter the Design System

As more and more brands began to live online, or at the very least, began to exist in a way that the demarcation of online and offline became less visible, the more the need arose for some kind of CI manual that a) existed in the same medium for which they were created – namely, the ‘digisphere,’ and b) a CI manual that could actually contain guidelines that digitally-challenged, paper-based CI manuals could not, such as snippets of code.

And thus was born the Design System, a collection of everything pertaining to a brand’s life online, including the obvious (design guidelines, color palettes, typography guidelines, illustrations, icons, an image bank, etc.), but also other elements that never existed before in so-called brand bibles simply because they were not able to, things like code snippets, audio samples, screenshots, taxonomies, templates, and a whole host of other digital assets like the digital components that make up an app. Also included in the mix, for the first time, are things like documents, articles, examples, and philosophies.

Best of all, the newly-emerged Design System, unlike its clunky CI manual counterpart, can now live where it can actually be of use to designers – hosted online as a website (either public or internal). One can safely see a Design System is a compendium of knowledge that is part UI kit, part instruction manual, and part coding guideline.

How Does it Work?

Let’s say, for example, a coder needs to repeat a snippet of code on a new page, the reusable component is right there for them to use through the simple act of copying and pasting. Similarly, if a designer needs to design a new landing page, all the pre-designed UI symbol elements are ready to drop for easy non-destructible editing. On the marketing front, should a marketer need to send out a newsletter, he or she can have immediate access to the tone the copy should be written in, or, for example, the preferred header image style. And so on.

Whose Role is it Anyway?

At Tactis, Design Systems are created in collaboration with the entire design and product teams. Here we include engineers, programmers, designers, art directors, copywriters, content strategists, and so on. On the client side, we include product and marketing managers, all the way up to the C-Suite. Ideally, the process starts off with an inventory of all current digital product assets (colors, logos, headers, footers, forms, code, etc.) and through consensus, an agreement is arrived at about how things ought to be designed, coded, presented and talked about. Once achieved, and set out in digital stone, it becomes the holy grail for any brand design endeavor, the source of all brand truth, and a litmus test to make sure that each person who works on their product digitally, is always on the same page, consistent, and designing or coding in accordance with how it should be done.

Delivering Results Faster

Removing ourselves from a page-by-page design approach eliminates the need to follow a waterfall approach and assign development after each unique page design is created. This method also allows for greater ease of use with changing development and design teams since components are already created and live within the design ecosystem. While the Design System allows for design at scale, it also allows for rapid development and provides detailed documentation regarding product processes and interactions. In the past, clients have benefitted from this approach for better communicating intended outcomes of product functionality and features. This system eliminates the guesswork in developing and designing a suite of experiences within the same brand and creates a streamlined narrative around the stakeholders’ decisions and goals. More importantly, it also allows us to quickly improve the user experience.

Drupal Style Guides

For leaner websites and products, Drupal Style Guides serve the purpose as a Design System. These style guides are built into the dev site as standalone pages that outline the voice, brand, and styling of each website component. Elements can include dropdowns, pagination, active/error states, etc. For more complex products, programs such as Sketch, InVision, Zeroheight, Frontify, and Figma are used to create component libraries, branding, user-specific topics, templates, and content guidelines. The Tactis creative team maintains these systems and libraries as business, user, and stakeholder needs change design and development directions – the Design System changes as the product changes.

Best Practices

Be it complete Design System or simply a Drupal Style Guide, Tactis adheres to the following guidelines:

• Keep it simple
• Build for scale
• It will change; make sure changes are documented
• Take advantage of tools like Sketch to create a library of symbols, components, and templates that are easy to update
• Create a process to update and maintain the design system

For more information on how Tactis can help develop a Design System for your brand, contact us today.

About Tactis

Tactis is a full lifecycle customer experience agency working for organizations across all points of communication, combining human touch with digital expertise to create outcomes that matter. By delivering high-touch solutions that span marketing, technology, and human interactions – through leveraging data and embracing technology – Tactis generates transformational customer experiences that ensure companies own the high-expectation, high-attention moments from which truly human experiences can emerge. For more information visit www.tactis.com.