1.
The Farmer and the
Cowhand Should Be Friends.
How UX and Content
Can (and Should)
Work Together
Photo: Diane Sobolewski
Dylan Wilbanks
November 2017

2.
Required Bona Fides
18 years working on the web
Stops at:
• University of Washington
• Apptio
• EnergySavvy
• HP
Founded Hêtre in 2017 to help
organizations with user
experience strategy
@dylanw #lavaconDylan Wilbanks

3.
@dylanw #lavaconDylan Wilbanks
The entire talk summarized
on one pithy slide you can
tumble snap your face tweet:

4.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua.
@dylanw #lavaconDylan Wilbanks

5.
@dylanw #lavaconDylan Wilbanks
https://www.smashingmagazine.com/2016/11/wireframe-perfectionist-guide/

6.
@dylanw #lavaconDylan Wilbanks
https://mypublicist.blogspot.com/2016/06/bet-awards-seat-check-2016.html

7.
@dylanw #lavaconDylan Wilbanks

8.
@dylanw #lavaconDylan Wilbanks

9.
@dylanw #lavaconDylan Wilbanks

10.
@dylanw #lavaconDylan Wilbanks

11.
@dylanw #lavaconDylan Wilbanks
Is content supposed to be a
placeholder?

12.
@dylanw #lavaconDylan Wilbanks

13.
@dylanw #lavaconDylan Wilbanks

14.
@dylanw #lavaconDylan Wilbanks
Design has become
independent of content

15.
@dylanw #lavaconDylan Wilbanks

16.
@dylanw #lavaconDylan Wilbanks
Just stick with me.

17.
@dylanw #lavaconDylan Wilbanks

18.
@dylanw #lavaconDylan Wilbanks
http://www.barberryhillfarm.com/2012/02/

19.
@dylanw #lavaconDylan Wilbanks
"Louie Pierre, fullblood Indian farmer.” BIA, 1914
The Farmer.

20.
Clem Albers, c. 1946 || Public Domain
@dylanw #lavaconDylan Wilbanks
The Cowhand.

21.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/julieunplugged/2189972046/

22.
@dylanw #lavaconDylan Wilbanks
https://www.tapinto.net/towns/roxbury/articles/oklahoma-roars-into-town-at-the-bickford-in-mo

23.
@dylanw #lavaconDylan Wilbanks
The Farmer. The Cowhand.

24.
https://www.flickr.com/photos/juhansonin/12140602074/
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/curtisjbathurst/28390055/
The Writer. The Designer.

25.
https://www.flickr.com/photos/juhansonin/12140602074/
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/curtisjbathurst/28390055/
The Writer. The Designer.
Where are we?

26.
@dylanw #lavaconDylan Wilbanks
Life of a tech writer
• Document the product
• Rewrite every time
there’s a change
• Not get told there are
changes
• Rewrite
• Burn out
• Drink coffee
• Repeat
The Writer.

27.
@dylanw #lavaconDylan Wilbanks
The Writer.
Life of a content strategist
• Define content
• Push for governance
• Fight silos
• Fight politics
• Fight some more
• Rewrite
• Burn out
• Drink coffee
• Repeat

28.
@dylanw #lavaconDylan Wilbanks
“It’s just words.”

29.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/soledadbrother/6254659091/

30.
@dylanw #lavaconDylan Wilbanks
Life of a Designer
• Focus on users
• Fight for good design
• But:
• Engineering wants to ship
• Sales wants to sell
• Etc. etc. etc.
• “Just make it pretty!”
• Burn out
• Drink coffee
• Repeat The Designer.

31.
@dylanw #lavaconDylan Wilbanks
“Make it pretty,
so long as it’s blue.”

32.
@dylanw #lavaconDylan Wilbanks
“Make it pretty,
so long as it’s blue.”

33.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/joopey/10331390786/

34.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/joopey/10331390786/
Here’s my frustration.

35.
@dylanw #lavaconDylan Wilbanks

36.
@dylanw #lavaconDylan Wilbanks

37.
@dylanw #lavaconDylan Wilbanks

38.
@dylanw #lavaconDylan Wilbanks

39.
@dylanw #lavaconDylan Wilbanks
Overdocumented?

40.
@dylanw #lavaconDylan Wilbanks
Overdocumented?
UNDERDESIGNED.

41.
@dylanw #lavaconDylan Wilbanks
User manuals, FAQs,
documentation sites, tutorial
videos: It’s often because of a
bad design process.

42.
@dylanw #lavaconDylan Wilbanks
Why is this happening?

43.
@dylanw #lavaconDylan Wilbanks
We don’t have time.

44.
@dylanw #lavaconDylan Wilbanks
Tactical, transactional mindset

45.
@dylanw #lavaconDylan Wilbanks
McDonald’s Design: fast,
cheap, not very good
https://www.flickr.com/photos/jeepersmedia/14676406713/

46.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/21148228@N08/14129393429/
Role oriented organizations

47.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/21148228@N08/14129393429/

48.
@dylanw #lavaconDylan Wilbanks
We often come in at
the end of the process
https://www.flickr.com/photos/scragz/132300597/

49.
@dylanw #lavaconDylan Wilbanks
We share common pain

50.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/quinnanya/8572353057/
We have common values.

51.
@dylanw #lavaconDylan Wilbanks
“[content strategy is] Planning for
the creation, aggregation,
delivery, and useful governance of
useful, usable, and appropriate
content in an experience.”
Margot Bloomstein
(tweet @mbloomstein and say I said hi)

52.
@dylanw #lavaconDylan Wilbanks
We care about story

53.
@dylanw #lavaconDylan Wilbanks
“The Pixar Story Spine”
https://en.wikipedia.org/wiki/File:Pixaranimationstudios.jpg

54.
Once upon a time there was ______.
Every day, ______.
One day, ______.
And because of this, ______.
And because of this, ______.
Until finally ______.
And ever since that day, ______.
@dylanw #lavaconDylan Wilbanks
Brian McDonald, Invisible Ink: A Practical Guide to Building Stories that Resonate

55.
@dylanw #lavaconDylan Wilbanks

56.
@dylanw #lavaconDylan Wilbanks
The User’s Journey
Donna Lichaw, 2016
http://donnalichaw.com

57.
@dylanw #lavaconDylan Wilbanks

58.
@dylanw #lavaconDylan Wilbanks
Common values, common stories

59.
@dylanw #lavaconDylan Wilbanks
“Territory folks should stick together”
https://www.flickr.com/photos/theatrebhs/2696296105/

60.
@dylanw #lavaconDylan Wilbanks
How can we stick together?
https://www.flickr.com/photos/wocintechchat/25900705292/

61.
@dylanw #lavaconDylan Wilbanks
Communicate.
https://www.flickr.com/photos/wocintechchat/25772101896/

62.
@dylanw #lavaconDylan Wilbanks
https://www.popchartlab.com/products/a-meticulous-metric-of-baseball-team-names-vol2

63.
@dylanw #lavaconDylan Wilbanks
Some people juggle geese.

64.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/litlnemo/2965988892/
Make connections.

65.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/litlnemo/2965988892/
Build bridges.

66.
@dylanw #lavaconDylan Wilbanks
“Always UX your UX”
https://www.flickr.com/photos/teemu08/7179209157/

67.
@dylanw #lavaconDylan Wilbanks
Understand your audience and deliver
what they need in a way they can use it.

68.
@dylanw #lavaconDylan Wilbanks
Start Now

69.
@dylanw #lavaconDylan Wilbanks
Start Now
“Put some words here. Something about
onboarding? You’re a word person.”
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt

70.
@dylanw #lavaconDylan Wilbanks
Start Now
New customer needs to start process
Friendly voice/tone
2 lines (~ 25 words)

71.
@dylanw #lavaconDylan Wilbanks
Start Now
New customer needs to start process
Friendly voice/tone
2 lines (~ 25 words)
User + Goal
Requirements
Limitations

72.
@dylanw #lavaconDylan Wilbanks
“The value that technical communicators
deliver is twofold: They make information
more useable and accessible to those who
need that information, and in doing so, they
advance the goals of the companies or
organizations that employ them.”
“Defining Technical Communication,” STC
https://www.stc.org/about-stc/defining-technical-communication/

73.
Communication is everything
•Make connections and build bridges
•Understand how they think and talk and work
•Educate them on how you think and talk and
work
•Create a common vernacular for your work
•Always assume good intentions
@dylanw #lavaconDylan Wilbanks

74.
@dylanw #lavaconDylan Wilbanks
Team up.
http://news3lv.com/news/local/gallery-indian-national-finals-rodeo-at-south-point#photo-15

75.
@dylanw #lavaconDylan Wilbanks
We often come in at
the end of the process
https://www.flickr.com/photos/scragz/132300597/

76.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/wocintechchat/25392653883/
Work to get to the start, together

77.
Team up.
•Identify commonalities in goals, KPIs, OKRs
•Find the user pain and collaborate on solutions
•Build a business case for a unified design +
content strategy
•Always, always be proactive
@dylanw #lavaconDylan Wilbanks

78.
@dylanw #lavaconDylan Wilbanks
Think strategically.

79.
@dylanw #lavaconDylan Wilbanks

80.
@dylanw #lavaconDylan Wilbanks
UX
Marketing Video
TechDocs

81.
@dylanw #lavaconDylan Wilbanks
User Goal Design Content Video E-Mail

82.
@dylanw #lavaconDylan Wilbanks
User Goal Design Content Video E-Mail
(who’s
our user?)
(what are we
trying to help
them
accomplish?)
(how the
design will
do to help
the user
succeed)
(how the
content team
will help the
user succeed)
(how the
video team
will do to
help the
user
succeed)
(how the e-
mail
cadence will
help the
user
succeed)

83.
@dylanw #lavaconDylan Wilbanks
User Goal Design Content Video E-Mail
New
Customer
Understand
our new
offerings
Clearly
show the
three
options
Short, clear
explanations
of the
offerings
Three
videos, 30
secs apiece,
explaining
each of the
offerings
Use Content
with a focus
on calls to
action to
the site and
the videos

84.
@dylanw #lavaconDylan Wilbanks

85.
The crucial questions
1. Who is the user (human with the problem?)
2. What’s the user’s goal? (What does success look
like?)
3. What’s the problem?
4. How does the solution solve the problem for the
user?
5. How will we know it worked?
@dylanw #lavaconDylan Wilbanks

86.
@dylanw #lavaconDylan Wilbanks
Show, don’t tell.
https://www.flickr.com/photos/kwkg/8638071231/

87.
@dylanw #lavaconDylan Wilbanks
Controlled vocabularies
https://www.flickr.com/photos/24498687@N03/2337550017/

88.
Demonstrate the value.
•Controlled terminology/vocabulary
•Refactor the design workflow to engage
content and docs in early, then show results
•Close the feedback loop with analytics that
cuts across design and content
•Show an optimistic way of working together
@dylanw #lavaconDylan Wilbanks

89.
@dylanw #lavaconDylan Wilbanks
Show the path to the top.

90.
@dylanw #lavaconDylan Wilbanks
This isn’t easy.
https://www.flickr.com/photos/cuboctahedron/22490565168/

91.
@dylanw #lavaconDylan Wilbanks
What can we do together?
https://upload.wikimedia.org/wikipedia/commons/e/e5/Raised_fist.jpg

92.
Russell Lee, Farm Security Administration, June 1939
@dylanw #lavaconDylan Wilbanks

93.
US National Archives|| https://www.flickr.com/photos/usnationalarchives/7136347785/
@dylanw #lavaconDylan Wilbanks

94.
@dylanw #lavaconDylan Wilbanks
Abby LePage / Berkshire Theatre Group

95.
@dylanw #lavaconDylan Wilbanks

96.
@dylanw #lavaconDylan Wilbanks

97.
@dylanw #lavaconDylan Wilbanks
We can re-unify design and content.

98.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua.
@dylanw #lavaconDylan Wilbanks

99.
@dylanw #lavaconDylan Wilbanks
https://www.flickr.com/photos/dsoltesz/3953814462/
Let’s be friends.

100.
Thank you!
Twitter: @dylanw
LinkedIn: linkedin.com/in/dylanwilbanks/
Learn more about Hêtre at http://hetre.design
(it’s French for “beech tree.”)
@dylanw #lavaconDylan Wilbanks