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

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

12.
Agile framework

13.
Agile in practice

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

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

16.
flikr | Doug Waldron

17.
Agile framework

18.
User-centered design

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

20.
The content audit

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

22.
Benefits of content
audits

23.
Audits are a jumping-off point.

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

25.
Content audits
highlight
relationships.

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

27.
How do you do it?

28.
Photo by Nick Youngson

29.
Deliverables

30.
Photo by martinvarsavsky

31.
Personas

32.
First things first:
What is a persona?

33.
Benefits of personas

34.
Photo by Rosenfeld Media

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

36.
From the MailChimp blog
MailChimp

37.
www.xtensio.com

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

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

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

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

42.
How do you do it?

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

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

45.
Deliverables

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

47.
Journey mapping

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

49.
Department of Interior

50.
Pinterest

51.
Library of Congress

52.
NASA

53.
How do you do it?

54.
Research
Chart the course
Find the story
Share

55.
flickr | daliscar1

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

57.
Deliverables

58.
Adaptive Path

59.
Content principles

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

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

62.
How do you do it?

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

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

65.
Deliverables

66.
Card sorting

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

68.
Raspberry Squash Banana
Tomato Brussels
Sprouts
Mango
Abby Covert

69.
Raspberry
Squash Banana
Tomato
Brussels
Sprouts
Mango
Abby Covert

70.
Raspberry
Squash
Banana
Tomato
Brussels
Sprouts
Mango
Abby Covert

71.
How do you do it?

72.
flikr | mzpresto

73.
flikr | mzpresto

74.
Exercise!

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

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

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

78.
Accessibility
techniques

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

80.
“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)

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

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

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

84.
Conscious style

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

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

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

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

89.
Exercise!

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

91.
Need more
content
resources?

92.
(The whole team)

93.
What is a content
lab?

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

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

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

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

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

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

100.
How do labs work?

101.
Benefits of labs

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

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

104.
Labs are a diagnostic tool.

105.
Labs promote
better time
management.

106.
Labs shed light on
others’ work.

107.
Lab tasks are like
professional
palate cleansers.

108.
Exercise!

109.
Thank you!
@ueberkatester
@emileighoutlaw