The web continues to grow in complexity. Every day, people are juggling more digital information from video, text, images, and other media. With all that on people’s screens, it can be hard for nonprofit communicators to have their messages breakthrough. When there’s such a race to create and share content, organizations’ visual brands might start to suffer. Because of this, many organizations, from small start-ups, to Fortune 500 companies, and even non-profits, are turning to design systems to define how their brand, communications, and websites work effectively together, and present a consistent look and feel. But what are design systems?
Let’s take a look at what they are, and how they can help you in your day to day work.
What Are Design Systems?
You may be familiar with brand guidelines, a document that sets out specific rules on how brand elements work. These guidelines are very commonly a simple PDF or webpage that briefly lays out logos, fonts, colors, and other core visual elements. But in terms of exploring the relationships between these elements and how we’re supposed to use them, brand guidelines fall short. When it’s crunch time, and you have to create a full report or a social media campaign, it’s helpful to have more guidance than brand guidelines provide. That’s where design systems come in. They provide your team with robust guidance on using your brand assets across communications.
Technically speaking, “ a design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” And while they can be used across lots of platforms, they’re often targeted at websites and digital contexts.
Emmet Connolly, Director of Product Design at Intercom, says a design system is “… more than just a pile of reusable UI [user interface] elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.” It is that embodiment, the real-world examples, that you can use immediately to create communications material, presentations, web pages, and even full sites.
When we look at how Indiana University defines its design system, called Rivet, they describe it as “a collection of code and visual assets used to create patterns across software titles [that] makes it easier to build and maintain consistent user interfaces.”
USWDS, the design system for the US Government, calls their system “a library of code, tools, and guidance to help government teams design and build fast, accessible, mobile-friendly government websites backed by user research and modern best practices.”
In each case, their emphasis is on creating systems that prioritize consistency, efficiency, speed, and collaboration. A design system can help your organization in the same way.
How Design Systems Help Nonprofit Communications Teams
At first, talk about managing design and setting up a system like this can seem like a lot. Especially for nonprofit professionals who might not be regularly involved in the design process. But fear not, brand and design experts in every part of the industry are working to make design systems a part of their standard process.
It’s about creating a set of visual, interface, and brand standards that entire organizations can use effectively. The standards will become a structure you can rely upon without too much manual intervention or back-and-forth with your team or freelancers. Design systems solve a number of problems for those in nonprofits and foundations: they create consistency, improve your team’s efficiency, and make it easier to collaborate and work together on design projects. Let’s take a look at what this means in detail.
They Create Visual Consistency
Over time, without guidance and structure, everything we design starts showing wear and tear. In design, that means inconsistent styles, colors, and templates creep in. We’ve all been there. But this ad-hoc management means that visual consistency will be hard to achieve, and even harder to maintain. The longer this goes on, and as more content needs to be looked through to find something that can be “repurposed”, the more chaotic it will get.
If you haven’t defined a standard upfront, it becomes a big challenge to keep things organized and consistent moving forward as you design new extensions of your brand. A good design system will give you some key patterns about your brand typography. These patterns describe a problem that occurs over and over again, in this case how headers and content work together. The description on how to use the pattern also helps frame how it achieves a purpose, and advances your mission as a mission-driven organization. These are most effective when we are creating digital experiences.
Nowhere does this show up more than in how brands use (or misuse) typography. Before considering images, logo, or color, choices around content have a huge effect on your brand expression. Offering both rules and reusable, pre-made components will help get started on a path to maintaining consistent typography.
The U.S. Patent and Trademark Office User Experience Division has a Typography Pairings section, showing a full set of patterns for web typography. It gives their team guidelines on how headers and body copy should be paired on the screen, along with the ability to view the source code if necessary to communicate with a developer.
Imagine that a communications manager has just joined your team. Their first task is to put together a set of social media cards for a short report written by one of your subject matter experts. Instead of working with what they have, copying templates from older materials or looking online for something better, you send them directly to your design system for guidance.
They find the set of social media templates and the instructions on how typography and images work together. They also find images that match the topic and add one to the template. They were able to go to a single source of truth, find assets that required them to be visually consistent, and quickly accomplish their task. The brand and design system for the country of Estonia does just that, offering its users a set of curated, effective images that can be used across all communications.
Over time, this same scenario can play out with other materials and other campaigns, building are reinforcing what your comms team is doing.
They Improve Efficiency on a Limited Budget
For nonprofits, limited communications budgets can (unfortunately!) be a common fixture, but it doesn’t have to result in poor design decisions. There are some clear ways to become more efficient with your design budgets and resources. Design systems help with this and help define rules for drafting microcopy—the text we commonly see used across web pages and interfaces.
Shopify’s Polaris design system explores Voice & Tone in some detail. First, they offer the global principles (1) Confident, not Arrogant 2) Empathetic, not Overprotective 3) Transparent, not Blunt) that guide all the messages within their branded interface, and then they offer concrete examples of how positive, neutral, or negative situations will change the tone of their message.
A core set of reusable visual or content patterns for the web can be used to assemble digital experiences that are on brand and simple to create. Along with the guidelines and templates showing how they are to be used in practice, much of the guesswork is removed from your voice & tone, meaning decision-making is minimized and your budget can be preserved for other larger tasks. Each of these text components can be copy-pasted into an existing project.
Since entire pages or views can be generated with maximum consistency — and since design decisions are minimized — even people with little design background (e.g., admins or project managers) can test hypotheses with users before committing to large financial investments.
They Improve Collaboration
Another critical aspect of design systems is how they create opportunities for your team to work together. When making a decision about elements like copy or message, you want to disentangle them from conflicting styles.
Design systems improve collaboration in two ways. Often, open-ended discussions of branding and design that take precedence over your communications strategies mean there is an increased burden of negotiation and feedback on your team. Design systems can standardize the ways you communicate and collaborate internally with your team, giving you more time to focus on getting those messages and programs out. A design system also means your team speaks to your audience with a unified voice. In the case of Hubspot, their design system is very clear about the types of illustrations to be used in their digital interfaces, and why it matters.
The Hubspot Illustration guide presents very clear information about the purpose and intended use-case of their illustrations. In the Guidelines section, they state what the organization wants, what they want to avoid, and when to use certain illustrations.
Secondly, this effective collaboration also extends to how you interact with your organization’s leadership. Showing them the design system you are using, and how your team is collaborating more effectively, helps them understand how it is making the team better and more cohesive.
A Shared Vision For Your Organization
Design systems are there to help you, not make your life harder. As the world gets busier and more full of competing messages, we all need to ensure our brands are visually consistent, that budgets and time are used efficiently, and that our teams have a shared set of rules and objectives when working together. The results of incorporating design systems at your nonprofit can be transformative—both for internal efficiency and external impact.