Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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