Have you ever considered how a brand is able to keep a consistent look and feel across its many channels and platforms? Enter: design systems.
What is a design system?
Simply put, it’s a type of “visual language” specifically designed and outlined for each individual brand or company. They’re made up of a library of reusable components that can be put together in any number of combinations to help keep a brand’s communications and products looking and feeling cohesive. Not only does a design system contain all the assets—it should also specify when and how to use them. This step is important. Documentation and standards are what separate visual assets from a true design system.1
What is a design system composed of, exactly?
Design systems are typically broken up into three main categories:
- Color(s): Think about your favorite brand. A very specific set of colors probably comes to mind. That’s no accident. Each brand has a set of primary and secondary colors, of varying tints and shades, embedded in their design system to keep things looking and feeling consistent. These hex codes are documented so designers and developers can get the shade exactly right when designing new products or communications.
- Typography: Just like a defined set of colors, brands typically only use a certain number of fonts within their products and marketing. The fonts being used may also depend on the hierarchy of the messaging. For example, a brand might use Helvetica for their primary headers, but use Verdana for their body copy or paragraph styles. Again, to make things easier and more efficient for designers, each font has a set of rules that go along with it that will include the typeface, size, weight, leading, spacing, letter spacing, and any other information pertaining to the usage.
- Imagery: This is the overall visual tone set by a brand and can include photography, illustrations, and iconography. For photography, does your brand prefer more candid, lifestyle imagery, or is a staged approach more efficient? Even iconography isn’t as straightforward as one might think—factors to consider include the line weight, color fill, size, types of icons, and relevant usage.
2. Components: These are UI elements, like buttons, drop-down menus, tables, and graphs, that are standardized and used across products and communications. Let’s take a button, for example; the design system will specify the style, background color, font, spacing, border, and the usage. This includes the trigger states which define what the button looks like when it’s hovered over, clicked, or in a neutral state. Components should include code so it’s easy to maintain and reuse them.
3. Layout: Layout governs how components are configured and includes elements like a grid and breakpoints. These standards ensure a consistent, responsive experience across your brand.
Why should I use a design system?
The reasons for using a design system can be broken down into three main points:
1. It’s consistent: As specified above, all the elements of the visual language (color, imagery, layouts, etc.) are all built out and defined by the standards of usage documentation.
2. It’s reusable: The visual language elements help build the components. Those components can be used and reused in many different contexts.
3. It’s accessible: Not only does everyone on the internal team have access to all the assets, but there’s no limit to how many people can use them, and how many times they can be used. The design system can also be handed off to an external company so they can be consistent, reuse the components, and align their projects that are associated with the brand.
A design system is not only helpful with keeping branding consistent, as multiple designers and developers, internal or external, can utilize the same resources to create one coherent experience; it also creates incredible efficiency when creating new products or rapidly iterating existing ones.
In terms of value to the customer, imagine you’re navigating through a company’s website and they want you to download their app. You think, “Okay. I like this brand—let’s take it on the go.” When you open the app, however, the experience feels unfamiliar and doesn’t match their website. Perhaps they’re using different fonts, a different tone in language, and/or different colors. “Is this even the same company? Am I getting scammed?” If you’re not able to see the connection, the company may have lost some of your trust.
As humans, our personalities can be defined by our experiences, values, and traits. We tweak ourselves slightly to fit in with different types of people and situations, ideally without totally losing our unique personalities. Similarly, a brand should be able to communicate with its users through various mediums like websites, apps, emails, newsletters, etc., without fully losing the “personality” of the brand.
How are design systems incorporated in email?
At ERGO, we take a modular approach to email in tandem with utilizing design systems, further allowing for standardization and consistency. Our Content Studio uses a defined design system when creating each reusable content block, incorporating brand elements such as imagery, icons, illustrations, and brand-appropriate language and tone. Creating these libraries of modules for each client saves production time and creates a smooth development process as modules can be edited and iterated upon much more efficiently than an entire email. Likewise, flexibility in layout is a key component in the process at ERGO to optimize and further personalize emails.
Once the modules have been created, our developers then code each module based on the design system to ensure visual consistency and accuracy. We’re also responsible for meticulous quality assurance of every module, testing across email clients and in dark mode, so customers are offered the best user experience. Whether our clients have their own design system guidelines already established or they need our help to create them, we can ensure their customers will have a seamless brand experience.
By building emails using modules, our clients’ customers receive true 1:1 emails. Not to be confused with templates, design systems allow more flexibility and governance for responsive, unique layouts. Designers have the fluidity to mix and match components so layouts don’t feel stale over time. ERGO’s Personalization App monitors each module’s performance, so we can ensure your customers are receiving the most relevant content.
Design systems have changed the way we design and build applications.1 They are a living product and are always evolving as companies change and grow—which is to say they can, and should, be iterated on to stay relevant. Design systems will continue to enable teams to build better products by making design reusable, and this increase in efficiency will make way for exciting possibilities.