Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Design Systems!
You have completed Introduction to Design Systems!
Preview
Design system voice documentation exists to help copywriters understand a brand’s personality, while design system tone documentation exists to help copywriters approach individual situations with empathy.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Mailchimp, an email marketing company
takes voice and tone seriously.
0:00
In fact, they separate voice and tone
from their visual design documentation.
0:06
It makes sense that Mailchimp would
consider voice and tone carefully.
0:12
Managing an email campaign
isn't a one step process like
0:17
using a search bar or posting a photo.
0:22
As users complete complex steps
like establishing a mailing list,
0:25
drafting messages, and
scheduling email blasts,
0:30
Mailchimp provides frequent reassurance.
0:34
High five, rock on, way to move one
step closer to your goal.
0:37
Although it's buried here at
the bottom of the sidebar,
0:44
Mailchimp has provided a TLDR, or
"too long, don't read" version of their
0:49
guidelines with a useful summary of
the principles of writing for Mailchimp.
0:54
More in-depth documentation is available
to guide specific tasks like writing for
0:59
social media or writing technical content.
1:05
Here's a bulleted list describing
Mailchimp's voice as human,
1:08
familiar, friendly, and straightforward.
1:14
If you're tasked with writing for a brand,
1:19
a useful first step is to locate this
list of emotional voice principles–
1:22
there's usually three to five–and
1:27
post each one on a sticky
note by your workstation.
1:29
Here's a few samples.
1:33
Adobe Spectrum is rational,
human, and focused.
1:35
Sprout Social is smart,
confident, and compassionate.
1:40
Shopify Polaris is confident not arrogant,
1:45
empathetic not over protective,
and transparent not blunt.
1:49
While Firefox Photon values people,
not profit,
1:55
cares about performance,
values user privacy,
1:59
and allows meaningful user
control over browsing.
2:04
If, for example, you were introducing
a new feature for Firefox and
2:08
failed to emphasize user privacy and
control over browsing,
2:14
your writing is likely inconsistent
with Firefox's brand voice.
2:19
Returning to Mailchimp's content
style guide, there are guidelines for
2:25
writing about people, plus a link to a
site called the conscious style guide for
2:30
further tips on addressing
your audience inclusively.
2:35
For grammar and mechanics, the TLDR
page provides only a brief overview.
2:39
Clicking the sidebar link
gives specific examples.
2:46
And it's important to note there's
no universal set of rules.
2:49
For example,
Mailchimp encourages contractions,
2:54
but a brand with a more formal
voice might discourage them.
2:58
Next comes labeling interface elements.
3:02
Some design systems might group this
information into the component library.
3:05
But Mailchimp's component library covers
only visual style and coding snippets.
3:11
For accessibility rules,
3:16
let's once again look at the more detailed
guidelines by clicking the sidebar link.
3:18
Designers sometimes get the impression
that accessibility is purely
3:24
the responsibility of
the development team.
3:29
But this list of considerations
suggests that an accessible product
3:31
requires designers, developers, and
copy writers working in tandem.
3:37
Mailchimp insists, all body copy
must be easy to scan visually,
3:43
limited in technical jargon,
mobile friendly, and
3:48
understood even when colors,
images, and videos can't be seen.
3:53
And no matter how technical or
complex your product,
3:59
these are good rules to follow.
4:03
Website and app content needs to be
available to the widest possible audience,
4:05
regardless of technical background
knowledge or physical ability.
4:11
That concludes our look at design systems.
4:16
As devices and platforms for
4:19
interacting with the web continue
to evolve, so we'll design systems.
4:21
But the information you've learned
in this course should prepare you to
4:26
understand and
apply design system documentation, and
4:30
to design products that are consistent,
predictable, and accessible.
4:34
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up