Exploring Voice and Tone4:39 with Anwar Montasir
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.
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 up