Develop a design system for your campaigns for consistency, scalability, and collaboration
A design system is a set of tools, and resources that help your team scale design processes. With shared workflows and assets, your team can follow brand guidelines be more efficient. It helps solve the following problems:
Everyone can easily understand decisions made (including non-designers and developers), while having to make less of them as they refer to a single source of truth for how to do things
Improves workflow, not having to reinvent the wheel each time by reusing components, keeping writing focused on defined messaging principles, and following best practices
Maintains consistency with on-brand visuals and messaging voice and tone
Fixes design and code debt with a reusable framework for increased efficiency and speed
Acts as a backup for when teams change (as people come in, or leave), with a shared repository of gathered knowledge
What to include in your design system
This guide is broken down by each of the key aspects your design system should include and how to effectively share your design system within your organization.
Getting Started - getting focused and auditing current patterns and workflows
Components - a library of design elements to use when building a campaign
Guidelines - best practices, examples, and workflow definitions
Sharing - the best way to share and encourage use, and some examples to refer to
Getting Started
Your design system can be big or small depending on the size of your organization. Only build and document aspects that you need. Start small and build up. Focus on not only building tools, but creating a shared language.
Define the goals of your design system
Design systems usually solve these four basic problems. You can pick one, two, three, or all four as your goals, but be specific on how they would apply to your organization and design process.
Scale
Increase volume and speed of content
Consistency
Improve accuracy accessibility and compliance
Efficiency
Provide greater collaboration between teams
Quality
Ensure brand and messaging governance
Align your team
Align brand values and define principles of those values to refer to
Define a purpose to follow: how will the design system help, and who is it for
Educate on value of using a design system for your campaigns based on problems it solves
Talk to people who will be using the system to find out what they need
Audit your current assets
There are two ways to rollout a design system. Incrementally, or with a large-scale redesign. Unless there's a need to redesign your campaigns, you should go with an incremental rollout.
Release small pieces of the design system at a time by first documenting design patterns from your current emails and landing pages. This allows you to test your components in a real context. You can then start with common problems, like defining consistent headline options. Start building and using an initial version of your system early as you continue to find patterns.
Organize a team that could help with gathering assets - this also helps develop a shared understanding of how to measure quality components
Start categorizing components - this will happen as you begin to find patterns of component types and helps define a language around your system
Take screenshots - screenshots are a way to show examples of components used in their proper context
Refer to your organization's current brand guidelines: a styleguide, logo requirements, etc. Any related design documentation that may be available. And any design patterns that are used for your marketing efforts.
Brand elements to include
Mission statement with values and principles
Colors and fonts to stick to including a color palette of common colors to use
Logo usage guidelines
Guidelines for using visuals — photos, illustrations, icons
Make your system expressive
In the book, Expressive Design Systems, Yesenia Perez-Cruz talks about how to keep from making your design system too generic and keep your design components as stylistically unique as your organization's brand.
Along with achieving unity and cohesion, your design system should also embody a harmony by combining all of your design system elements to produce pleasing layouts. "...brand expression is more than your visual language — it's how all of your elements come together to communicate your brand voice." she writes.
To do this successfully, your design system should include the following:
A component hierarchy and with thoughtfulness on how our brand gets expressed at each level
Focus on the most essential elements of design: typography, color, and space
Measure elements based on size: affecting how fast content is consumed; scale: the size of elements relative to each other; density: should the layout feel airy or compact; and weight: heavy or light feel
Writing
The most important part of any campaign is the message it's communicating, the text itself. Your design system should include some guidelines around how copy is written. From the mechanics of the content, to the voice and tone.
Basics of voice and tone
Use these general tips to develop the rules around your organization's writing approach:
Using a conversational tone as that is usually what's expected from your brand
Considering the type of message you're sending and whether to add more personality to it, or to get straight to the point
Writing in your own voice at first and tuning to your brand in the revision
Being creative in the mechanical elements (headlines, call-to-action buttons, etc)
Reading out loud for flow and catching errors
Composition guidelines
Meta information practices
Approach to voice and tone of content
Call-to–action language
Link tracking parameters
Components
A design system shouldn’t feel like something that stifles creativity. Don't make it too rigid, a certain level of hand-crafting is important. It should allow for greater creativity within a set of guidelines. The long-term benefit is that a designer can take greater care and give better thought to solving each solution instead of rushing to put together something that comes along.
Breaking components down
Keep this hierarchy in mind and introduce it to your team as you design and build your templates.
Components Standalone elements like buttons and titles; the building blocks of your content which should work by themselves, in a range of contexts.
Regions A grouping of content pieces and components, arranged a specific way, usually as columns.
Sections Stackable full-width horizontal containers of regions, between the header and footer, used to create an overall layout.
Creating a component
Define a component as a functional unit that has a purpose and is not part of the library already
Give it a descriptive name that everyone using the system can understand and agree on
Be sure to test accessibility — color contrast ratio, content voice-over, etc
A good component is
Purposeful - all components solve a specific problem
Reusable - components work for multiple use cases
Flexible - they work in many different contexts
Account for variation - utilize how content is placed, a component's size and structure, and style changes to offer components that have more than a single format
Responsive for mobile - be sure to have mobile versions of each component
Design tokens - use as a semantic, standard language of naming across design and code
Static components answer the how. Guidelines provide answers to: why, when, and where. "Can we?", "should we?", and "what if..." They should educate on constraints: workflows, habits, and best practices. Having this information leads to a reduced need for everyday problem-solving and decision-making.
What to include in your notes
Purpose of each component and the user experience thinking behind it
When to use a component, when not to use it, and any content limitations
Make it easy to read with bullet points instead of paragraphs of text
List as ✅ do's, ❌ dont's, and ℹ️ info worth noting
Additional considerations
Keep it simple and flexible (especially at the beginning) by not making too many rules
Use visual examples and screenshots where needed
Include a changelog/release notes of regular updates made
Use a git repo for version control for making updates
Your design system is only as strong as your relationships with the teams who use it. You need to develop trust and allow for it to evolve by encouraging participation in its development.
Make people feel like they’re part of the process
Be open to feedback - if something is unclear, talk through and get feedback on how to improve
Make it easy - provide a point of contact, support ticketing system, discussion forum, etc
Include link to docs in other processes - new team member on-boarding, company-wide demos and emails, etc
Provide good examples
Show examples of how to be creative with structure. Encourage “off-roading” to evolve system. Consider examples from other organizations to help show ways to utilize a system without feeling boxed into a boring design.
Documentation setup
Example documentation
Documentation as a web page is the best way to go when developing your design system:
Format that anyone can access - everyone can always go to the same URL
Centralized - updates are dynamic without creating too many versions that need to be passed around
Easy to maintain - designers, developers, and organizers can make updates
This guide has been put together by the Blocks Edit team. Having a design system of reusable components for your organization to use, Blocks Edit makes your components visually editable. So anyone on your team can build emails and landing pages on their own while ensuring they are following brand guidelines throughout the process.
Components
Regions
Sections
