In this session attendees will learn: The roles content plays in design systems (editorial style guide, voice and tone guidelines, information architecture, taxonomy, and others) Building and sharing design systems and standards for global content creators Documenting interaction, visual, and other design decisions with content o. Using content to inform and support the design systems’ users

1. 1 Intuit Confidential and Proprietary
Joining forces
Content strategy in design systems

2. Michael Haggerty-Villa
Intuit
@HaggertyVilla
Joining forces
Content strategy in design systems

3. 3 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

4. 4 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

5. 5 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

6. 6 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

7. 7 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

8. 8 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

9. Getting to know you

10. 10
Apple Human Interface Guidelines
Apple Style Guide
Buttons guideline:
Title Case
Design systems rule the world

11. 11
Material Design
Material Foundation > Communication >
Writing
Buttons guideline:
ALL CAPS
Design systems rule this world too

12. 12 Intuit Confidential and Proprietary
What are we talking about?

13. A design system offers a library of visual
style and components documented and
released as reusable code for developers
and/or tool(s) for designers. A system may
also offer guidance on accessibility, page
layout, and editorial and less often
branding, data viz, UX patterns, and other
tools.
— Nathan Curtis, Defining Design Systems

14. 14 Intuit Confidential and Proprietary
Design systems
● Style guides
● Components
● Pattern libraries
● UI toolkit
● Content guidelines
What are we talking about?

15. 15 Intuit Confidential and Proprietary
What a design system looks like

16. 16 Intuit Confidential and Proprietary
What a design system looks like

17. 17 Intuit Confidential and Proprietary
What a design systems looks like

18. 18 Intuit Confidential and Proprietary
What a design system looks like

19. The cornerstones of good design systems
are style guides, which document and
organize design materials while providing
guidelines, usage, and guardrails.
— Brad Frost, Atomic Design

20. 20 Intuit Confidential and Proprietary
Style guides
We got this

21. And we got this

22. 22 Intuit Confidential and Proprietary
Source: Kristina Halvorson:
New Thinking: Brain Traffic’s
Content Strategy Quad
The new content strategy quad

23. 23 Intuit Confidential and Proprietary
● UI design
● Systems thinking
● Brand design
● Color theory
● UX research
● Accessibility
● Content design and strategy
Source: Diana Mounter, @broccolini
Some of the design systems work

24. 24 Intuit Confidential and Proprietary
● Sass
● JavaScript
● npm
● API design
● Code review
● Regex
● Content authoring and management
Source: Diana Mounter, @broccolini
Some of the design systems technology

25. 25 Intuit Confidential and Proprietary
● Prioritization
● Planning
● Hiring
● Onboarding
● Coaching
● Org design
● Content stuff
Source: Diana Mounter, @broccolini
More design systems stuff to think about

26. 26 Intuit Confidential and Proprietary
● Information architecture
● Design documentation
● Design principles
● Content-first design
● Technical writing
● Accessibility
● Communication (release notes, blogs, more)
● Adoption
● Contribution models
● Workflow
● Governance
More content contributions to design systems

27. 27 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

28. 28 Intuit Confidential and Proprietary
Voice and tone lead the way

29. 29 Intuit Confidential and Proprietary
But wait, there’s more
Five content elements in design systems
• Content
• Editorial style
• Voice and tone
• Real content in components and patterns
• Content patterns or types

30. 30 Intuit Confidential and Proprietary
An initial review of content in design systems

31. 31 Intuit Confidential and Proprietary
An audit of 62 design systems listed on Design Systems Repo
Where content stands in design systems (May)

32. 32 Intuit Confidential and Proprietary
A complete bigger review of content in design systems

33. 33 Intuit Confidential and Proprietary
An audit of 242 design systems listed on styleguides.io
Where content stands in design systems (final)

34. 34 Intuit Confidential and Proprietary

35. Opportunity
A whole lotta design
systems need content.
96%

36. 36 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

37. 37 Intuit Confidential and Proprietary
● Better user experience
● Better interaction and visual designer experience
● Better UX writer experience
● Better collaboration with outside agencies and other content creators
● Better documentation for engineers
● Faster iteration and innovation
● Faster delivery of new products and experiences
Content in design systems: Why bother?

38. FROM TO
38
How it was then
Add text, chart, or image here Add text, chart, or image here
How it is now

39. 39 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

40. 40 Intuit Confidential and Proprietary
Lessons we’ve learned
Tips for integrating content into design systems
Text block placeholder top level format AvenirNextforIntuit 26 pt
• Use indent text control for second level text style
• Avoid the temptation to tell people what to do
• Don’t go it alone. Play well with (most) others.
• Listen and evolve
• Embrace messy change
• Be nice
• Use indent text control for bullets: third level text style
• Use indent text control for bullets: fourth level text style

41. 41 Intuit Confidential and Proprietary
Style guides
● Start small and address your most frequent editorial issues
● Let your style guidelines grow as your content team does
● Be nice
Some key takeaways
Design systems
● Find and talk to your friendly design systems folks
● Ask how you can help
● Be extra nice

42. 42 Intuit Confidential and Proprietary
Lessons we’ve learned
Tips for integrating content into design systems
• Resist the temptation to tell people what to do
• Don’t go it alone. Play well with (most) others.
• Listen and evolve
• Embrace messy change
• Be nice
• The goal is communication, not correctness

43. 43 Intuit Confidential and Proprietary
What are design systems?
The current state of content in design systems
A possible future state for content in design systems
Lessons learned
Action items—requests for help
Joining forces: content in design systems

44. 44 Intuit Confidential and Proprietary
What’s next please
A favor
• Embrace systems thinking
• Talk to your design systems folks and see how you can help
• Be nice
• Button copy:
• Be Nice
• BE NICE

45. Thank you
for your style

46. Appendix
More stuff about style guides
and design systems

47. 47 Intuit Confidential and Proprietary
Useful style guide resources
Apple Style Guide
https://help.apple.com/applestyleguide/
AP Stylebook
https://www.apstylebook.com
Yahoo Style Guide (now only in print)
https://www.amazon.com/Yahoo-Style-Guide-Ultimate-
Sourcebook/dp/031256984X
MailChimp Style Guide
https://styleguide.mailchimp.com/
National Geographic (mostly a word list)
https://sites.google.com/a/ngs.org/ngs-style-manual/
Wikipedia Manual of Style
https://en.wikipedia.org/wiki/Wikipedia%3aManual_of_Style
Google Developer Documentation Style Guide
https://developers.google.com/style/
A List Apart Style Guide
https://alistapart.com/about/style-guide
Gov.uk style guide
https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style
Salesforce Voice and Tone Guide
https://www.lightningdesignsystem.com/assets/downloads/salesforce-voice-and-tone.pdf?
Google Trends
Compare search terms over time
https://trends.google.com/trends/?geo=US
Google Ngram Viewer
(compare word frequency from over 20 million books)
https://books.google.com/ngrams
Merriam-Webster dictionary
https://www.m-w.com

48. 48 Intuit Confidential and Proprietary
Useful design system resources
Adele: The repository of publicly available design systems and pattern
libraries
https://adele.uxpin.com/
Content: The Next Big Thing for Design Systems – Content
Science Review
http://bit.ly/content-designsystems
New Thinking: Brain Traffic’s Content Strategy Quad by Kristina Halvorson
http://braintraffic.com/blog/new-thinking-brain-traffics-content-
strategy-quad
Polaris Design System (Shopify)
https://polaris.shopify.com
Opattern Design System
https://ux.opower.com/opattern/
QuickBooks Design System
https://designsystem.quickbooks.com
Design Systems Repo
https://designsystemsrepo.com/
Website Style Guide Resources
http://styleguides.io/
Atomic Design by Brad Frost
https://shop.bradfrost.com/
Component Design Guidelines: Write the Words and Add the Pictures to Empower Designers by
Nathan Curtis
https://medium.com/eightshapes-llc/component-design-guidelines-eca706100e7c
Google Material Design
https://material.io/design/foundation-overview/#addition
Apple Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/
Design Systems Handbook (Invision)
https://www.designbetter.co/design-systems-handbook