Writing for the web is messy and complicated. As web content managers, we must weigh user needs against stakeholder demands, tight timelines, budget constraints, and more. We’re often thrown into projects that are already underway or lack a clear strategy. Our work is constrained by organizational pressures. In this workshop, we’ll talk about aligning content with project goals, creating a strategy that puts users first, and building products that can maintain momentum and success, even after we’re gone.

1. Getting started
with user-centered
content
Emileigh Barnes + Kate Garklavs Saul

2. Introductions

3. Hopes Fears

4. Today’s agenda
1. Content and agile
2. Tools and techniques
3. Content and accessibility
4. Content labs

5. Content
and agile
Informed by theory;
flexible in practice

6. flikr | David Sui

7. The agile theory

8. Department of Interior

9. Agile in a nutshell
1. Make early, continuous delivery #1 priority
2. Welcome changing requirements, even late in the game
3. Business folk and developers work together
4. Maximize the amount of work not done
5. Reflect regularly on how to be more effective

10. Agile framework

12. Iteration can take many forms
Design Develop
- Wireframes
- Diagramming
- Visual styling
- Front-end tweaks
- Writing and microcopy
- Information architecture
- Research design
- Workshop planning
- Design studio
- Sketching
Discovery
- User interviews
- User observation
- Helpdesk call review
- Compile issues
- Content auditing
- Design inspiration
- Competitive analysis
- Design studios
- Co-design sessions
- Meeting with SMEs
- Front-end dev
- Back-end dev
- Create presentation
- Hi-fi mockup, prototype
- Create research docs
- Create CMS page
- Design pattern dev
- Documentation
Testing
- Design critique
- Stakeholder feedback
- Pre-test research plan
- Remote usability testing
- Analytics review
- Heat mapping
- Eye-tracking
- Card sorting

14. Agile framework

15. Agile in practice

16. Kanban in a nutshell
1. Visualize workflow
2. Limit your workflow
3. Measure your workflow
4. Be open and clear about your process
5. Improve things as you go

20. Kanban in a nutshell
1. Visualize workflow
2. Limit your workflow
3. Measure your workflow
4. Be open and clear about your process
5. Improve things as you go

21. flikr | Doug Waldron

25. Agile framework

26. User-centered design

28. Tools and
techniques
Practices and tools to help you
create, publish, and maintain
top-notch content.

29. The content audit

30. Some folks think content audits
are less than glamorous —
and we understand that.

35. Benefits of content
audits

36. Audits are a jumping-off point.

37. Audits provide a
high-level view of what
you have.

38. Content audits
highlight
relationships.

39. Content
audits
allow you
to make an
objective
evaluation
of content
quality.
Photo by Tnarik Innael

40. How do you do it?

42. Photo by Nick Youngson

43. Deliverables

44. Photo by martinvarsavsky

46. Personas

47. First things first:
What is a persona?

48. Benefits of personas

49. Photo by Rosenfeld Media

50. Though most personas
are well intended, many
fall flat.

51. From the MailChimp blog
MailChimp

52. www.xtensio.com

53. If everything
is important,
nothing is
important.
www.adrella.ro

54. Most personas don’t
represent users as users
would represent
themselves.

56. Crafting excellent
personas with the help of
David Foster Wallace

57. “Then he looked up, despite all best prior intentions. In four minutes, it
would be another hour; a half hour after that was the ten-minute break.
Lane Dean imagined himself running around on the break, waving his
arms and shouting gibberish and holding ten cigarettes at once in his
mouth, like a panpipe. Year after year, a face the same color as your
desk. Lord Jesus. Coffee wasn't allowed because of spills on the files,
but on the break he'd have a big cup of coffee in each hand while he
pictured himself running around the outside grounds, shouting. He knew
what he'd really do on the break was sit facing the wall clock in the
lounge and, despite prayers and effort, count the seconds tick off until
he had to come back and do this again. And again and again and again.”
David Foster Wallace, The Pale King

58. How do you do it?

59. The Pinch Hitter
This person has a design background and is very skilled in HTML and CSS; they may be familiar with JS,
but they’re not an expert.
Why they’re using the Draft Standards
They rely on the pattern library components to work out of the box, and they need explanations of any
dependencies and how to implement them.
Concerns and challenges
They are concerned about conflicts with existing frameworks because these are difficult to resolve with
their limited development experience

60. ● Give personas titles
and names
● Add a photo or image
of each persona
● Link to your research
Photo by Dave Stevens
Gail, vintner

61. Deliverables

62. Exercise!
Create a persona:
● Service: online home goods retailer
● Include needs, apprehensions, and behaviors
● Consider writing in the first person
● Add an image

63. Journey mapping

64. What it is: A visual representation
of a user interacting with a website
over time.

65. Department of Interior

66. Pinterest

67. Library of Congress

68. NASA

70. How do you do it?

71. Research
Chart the course
Find the story
Share

72. flickr | daliscar1

73. The better you define the
problem, the better the
solution
— @kateldn and @ayeshamoarif

76. Deliverables

77. Adaptive Path

78. Content principles

79. What it is: concise, specific
guidelines for creating content and
deciding whether that content is
effective

81. flickr | tiffany terry
“Named must your
fear be before banish
it you can.”
— Yoda

82. How do you do it?

83. Intuit’s design principles
1. Be simple, easy to use, and guiding
2. Design for the customer and instill
confidence
3. Establish modern and iconic ownable
moments
4. Celebrate data while respecting user and
device context

84. GOV.UK design principles
1. Start with needs
2. Do less
3. Design with data
4. Do the hard work to make it simple
5. Iterate. Then iterate again.
6. Build for inclusion
7. Understand context
8. Build digital services, not websites
9. Be consistent, not uniform
10. Make things open: it makes things better

85. Deliverables

87. Card sorting

88. What it is: A visual representation
of a user interacting with a website
over time.

89. Raspberry Squash Banana
Tomato Brussels
Sprouts
Mango
Abby Covert

90. Raspberry
Squash Banana
Tomato
Brussels
Sprouts
Mango
Abby Covert

91. Raspberry
Squash
Banana
Tomato
Brussels
Sprouts
Mango
Abby Covert

93. How do you do it?

94. flikr | mzpresto

95. flikr | mzpresto

96. Exercise!

99. 18F Design Methods
methods.18f.gov

100. Content and
accessibility Creating content that reaches the
broadest possible audience.

101. When is the best time to think
about accessibility?

106. Accessibility
techniques

107. Plain Writing Act of 2010
The Plain Writing Act of 2010 requires that
federal agencies use "clear government
communication that the public can
understand and use."
Signed into law by President Obama on October 13, 2010

108. “A communication is in plain language if the
language, structure, and design are so clear that
the intended audience can easily find what they
need, understand what they find, and use that
information.”
— PLAIN (the Plain Language Association International)

109. Plain-language
content
appeals to all
audiences.
Photo by Mike Licht

110. Plain language strategies
● Avoid jargon, legalese, and technical terms
● Use simple words whenever possible
● Avoid figurative language
● Use active voice

113. Content-presentation strategies
● Keep it short!
● Use bulleted lists, when possible (case in
point).
● Connect image titles and captions to imagery.
● Use precise, descriptive headings.
● Add descriptive link text.

114. Conscious style

115. The Conscious Style Guide is “an online
resource for kind, compassionate, and
inclusive language.”
— Karen Yin, creator of the Conscious Style Guide

116. Conscious style tips
● Use older person instead of senior or elderly.
● Default to gender-neutral language.
● Avoid writing that draws on gender bias.
● Don’t use female as a substitute for novice.

117. More conscious style tips
● Instead of able-bodied, use does not have a
disability or not living with a disability.
● Avoid using pejorative descriptions of
mental illness.
● When writing about folks with disabilities,
use has or is living with.

119. Resources to check out
● The Conscious Style Guide: http://consciousstyleguide.com/
● The Disability Language Style Guide: http://ncdj.org/style-guide/
● Guidelines for Nonhandicapping Style in APA Journals:
http://www.apastyle.org/manual/related/nonhandicapping-language.aspx
● The 18F Accessibility Guide: https://pages.18f.gov/accessibility/
● Microsoft’s Inclusive Design Toolkit:
https://www.microsoft.com/en-us/Design/inclusive
● Rob Dodson’s A11ycasts on YouTube
● WCAG: https://www.w3.org/WAI/intro/wcag

120. Exercise!

121. Content Labs Helping you make the most of your
existing content resources.

122. Need more
content
resources?

123. (The whole team)

125. What is a content
lab?

126. A content lab is a virtual writing
center where folks can get
personalized writing and
editing help from members of a
core team.

127. A content lab is a virtual writing
center where folks can get
personalized writing and
editing help from members of a
core team.

128. A content lab is a virtual writing
center where folks can get
personalized writing and
editing help from members of a
core team.

129. A content lab is a virtual writing
center where folks can get
personalized writing and
editing help from members of a
core team.

130. Lab tasks
are
free-time
tasks.
Photo by Fortepan

131. You can
create a lab,
even if you’re
a lone
ranger.

132. How do labs work?

133. Benefits of labs

134. Labs increase
content quality and
the amount of work
you can get done.

135. Labs highlight the amount of time our work takes.

136. Labs are a diagnostic tool.

137. Labs promote
better time
management.

138. Labs shed light on
others’ work.

139. Lab tasks are like
professional
palate cleansers.

140. Exercise!

141. Thank you!
@ueberkatester
@emileighoutlaw