Document your email design workflow for consistency, scalability, and collaboration
An email design system is a set of documentation, tools, and resources to help your team scale design-related processes. Using a shared workflow and assets allows your team to be more efficient and ensures your emails follow brand guidelines.
A design system helps solve the following problems:
Allows everyone to easily understand decisions made (including non-designers and developers), while having to make less of them as they can 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
Communicates expectations clearly to team members with guidelines to refer to when questions come up, reducing the potential for specs and tasks to be misunderstood or misinterpreted
As a backup for when teams change (as people come in, or leave), there’s 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, along with how to get started using your current assets and how to effectively share your design system with your organization.
How to Start - getting focused and auditing current patterns and workflows
Components - a library of design elements to use when building an email campaign
Guidelines - best practices, examples, and workflow definitions
Sharing - the best way to share and encourage use, and some examples to refer to
How to Start
Your email 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 email marketing.
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 emails based on problems it solves
Talk to people who will be using the system to find out what they need
Audit your current email 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 emails, 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. 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 - besides individual assets, screenshots are a way to show examples of components used in their proper context
To keep in mind
How well do components express your brand?
How do they compare to current brand guidelines?
Are design elements consistent?
Branding
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 outside email campaigns for other 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
The most important part of an email 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 email, to the voice and tone of the content.
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 an email
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 email mechanics (subject line, preheader, headlines, call-to-action buttons)
Reading out loud for flow and catching errors
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 that becomes part of the system 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 Also referred to as modules, of content pieces and components arranged in a specific way.
Sections Stackable full-width horizontal containers of regions, usually between the header and footer, used to create an overall layout.
Creating a new 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
Sharing
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.
Making it accessible for your team
Example documentation
Keep it centralized - make updates dynamic without creating too many versions that need to be passed around
Provide in a format that anyone can access - documentation as a web page allows sending a URL where updates are dynamic for everyone; either by building a custom HTML-based doc, or using a shareable online writing tool or wiki
Make it easy to maintain - develop a workflow for other designers, developers, and organizers to make updates to
Allow for getting feedback - a point of contact, support ticketing system, discussion forum, etc
Include a link to in other processes - new team member on-boarding, company-wide demos and emails, etc
Make people feel like they’re part of the process - if something is unclear, talk through and get feedback on how to improve
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
Maintaining your design system: As your system gets adapted, you'll have to go from designing and developing components to getting feedback on them and tracking usage. You'll have to be prepared to maintain updates as your email marketing evolves, along with your organization.
This guide has been put together by the Blocks Edit team. While a design system doc works as a reference point for your organization to use, Blocks Edit is a visual editor for your components. So your team can build emails on their own while following your design system's guidelines.
Components
Regions
Sections
