In a design system, all the elements of a design language can come together: interaction and visual guidelines, accessibility, brand, code, and content. That last element—content—is often absent from design systems. In this presentation, we talk about why content should be integrated into our design systems and how we go about doing it.

1. Michael Haggerty-Villa
Intuit
@HaggertyVilla
Boosting a Design Language
with Real Language
Content strategy in
and for design systems

2. 2 Intuit Confidential and Proprietary
The horror, the horror
Definitions and examples
The mystery of the missing content
What content partners bring to systems
The art of design systems
Real language in your design language

3. Getting to know you

4. The horror

5. 5 Intuit Confidential and Proprietary
Um, awesome
The challenge of content

6. 6 Intuit Confidential and Proprietary
Um, nice try
The challenge dangers of content

7. 7 Intuit Confidential and Proprietary
Um, I really appreciate the effort
The dangers persistent problems of content

8. 8 Intuit Confidential and Proprietary
Ellipses are the three-headed symbol of failure
The persistent problems unspeakable horrors of content

9. 9 Intuit Confidential and Proprietary
Um, seriously
The unspeakable horrors living hell of content

10. What it is

11. 11 Intuit Confidential and Proprietary
The language of design systems

12. 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

13. 13
Design systems rule the world

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

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 system looks like

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

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

20. The mystery

21. 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

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

23. Nope
I surveyed ~240 design systems
How many included content?
Guess

24. 24 Intuit Confidential and Proprietary
What’s missing
Five content elements in design systems
• Content
• Editorial style
• Voice and tone
• Real content in components and patterns
• Content patterns or types

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

26. 26 Intuit Confidential and Proprietary
A June 2018 audit of 242 design systems listed on styleguides.io
Where content stands in design systems
Numbers shown are percentages.
Content
Style
Voice
Real copy
Patterns

27. Nope
I surveyed ~240 design systems
<30% included content
So what?

28. 28 Intuit Confidential and Proprietary

29. 29 Intuit Confidential and Proprietary
The mystery of the missing content
Why?
Publicly available sites only
Developer vanity sites
Early versions of design systems sites
Brand sites
Organization siloes on display

30. 30 Intuit Confidential and Proprietary
Fresh research
Who’s doing the content things?

31. No
There seems to be
an assumption that
design systems cater
only to designers
and maybe the
development team.
— Survey taker responded No
No
We have no such
position at our
company and are not
considering it right
now.
— Survey taker responded No
No
We only have two
product designers on
the team. And I
currently work on
most of the design
system as of right
now.
— Survey taker responded No

32. 32 Intuit Confidential and Proprietary
Notes from Nathan Curtis
Putting together a design systems team
Source: Nathan Curtis:
Designing a Systems Team

33. Yes
Mostly it starts with
me (Information
Architect), when I
identify something
that needs
additional help, I
reach out to our
Content Strategist.
We have both a
content Strategist
and A Copy Person.
Both needed.
— Survey taker responded Yes
Yes
While it's not widely
accepted across the
company (some
groups have
designers write the
content and others
have the technical
writers write UX
content), our group
employs UX writers
because they
recognize it as a
separate discipline.
— Survey taker responded Yes
Yes
Elements in a design
system that have
content attributes —
whether explicit or
implicit — should be
identified, managed,
and scaled by a
content strategist.
— Survey taker responded Yes

34. Opportunity

35. Opportunity!
What content design
and strategy bring to
design systems
96%

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

37. 37 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

38. 38 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

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

40. 40 Intuit Confidential and Proprietary
● Information architecture
● Taxonomy
● 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

41. 41 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?

42. 42 Intuit Confidential and Proprietary
● Quality
Accuracy, fact checking, acid testing
● Scale
Extend design and content strategy throughout the organization
● Communication
Release notes, news, recognition, adoption
Content in design systems: Why it matters

43. 43 Intuit Confidential and Proprietary
More notes from Nathan Curtis
Putting together a design systems team
Source: Nathan Curtis:
Designing a Systems Team

44. 44 Intuit Confidential and Proprietary
Lessons we’ve learned we’re learning
Thoughts about integrating content into design systems
• Let’s work together.
• Everything is beta—testing is every day.
• Embrace messy change.
• Listen, learn, evolve.

45. 45 Intuit Confidential and Proprietary
Ellipses are the three-headed symbol of failure
The persistent problems unspeakable horrors of content

46. Art

47. 47 Intuit Confidential and Proprietary

48. 48 Intuit Confidential and Proprietary
Design systems
A perspective from Art
Yvan
Marc
Yvan
Marc
Yvan
Marc
Yvan
It has something. It’s not nothing.
You’re joking.
I’m not as harsh as you. It’s a work of art, there’s a system behind it.
A system?
A system.
What system?
It’s the completion of a journey …
Source: Art by Yasmina Reza,
translated by Christopher Hampton,
Faber and Faber, 1996

49. 49 Intuit Confidential and Proprietary
Design systems
A perspective
It’s the completion of a journey …

50. 50 Intuit Confidential and Proprietary
Design systems
A persective from Art
Yvan
Marc
Yvan
Marc
Yvan
Marc
Yvan
Marc
It has something. It’s not nothing.
You’re joking.
I’m not as harsh as you. It’s a work of art, there’s a system behind it.
A system?
A system.
What system?
It’s the completion of a journey …
Ha, ha, ha! Source: Art by Yasmina Reza,
translated by Christopher Hampton,
Faber and Faber, 1996

51. Thank you
Go complete your journey

52. Appendix
More stuff about style guides
and design systems

53. FROM TO
53
How it has been
Inconsistent, sometimes incomplete
documentation for interaction and code
Separate, siloed approaches to experience
design, content, and code
Design systems resources are difficult to
navigate and use
Error-prone, occasionally incomplete quality
control processes
Design system site is not aligned with brand and
marketing goals
Consistent, comprehensive documentation for
the full design community and coders
Unified team approaches to creating and coding
digital experiences
Navigable, engaging, current design systems
sites and other resources
Clear standards documentation supports QA
engineers and other stakeholders
Design system site reflects the brand values,
standards, and design principles
How it can be

54. 54 Intuit Confidential and Proprietary
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

55. 55 Intuit Confidential and Proprietary
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