Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Farmer and the Cowhand Should Be Friends, or How UX and Content Can (and Should) Work Together)

326 views

Published on

Let's be frank: If UX designers had their way, the only words you'd ever see on the web are lorem ipsum. And yet, words—from interfaces to microcopy to long narratives—are integral to the
usability and delight of any web product. Based on his years of UX experience and love of good content, Dylan will talk about ways to bring the two sides together to make better things on the web.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

The Farmer and the Cowhand Should Be Friends, or How UX and Content Can (and Should) Work Together)

  1. 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. 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. 3. @dylanw #lavaconDylan Wilbanks The entire talk summarized on one pithy slide you can tumble snap your face tweet:
  4. 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @dylanw #lavaconDylan Wilbanks
  5. 5. @dylanw #lavaconDylan Wilbanks https://www.smashingmagazine.com/2016/11/wireframe-perfectionist-guide/
  6. 6. @dylanw #lavaconDylan Wilbanks https://mypublicist.blogspot.com/2016/06/bet-awards-seat-check-2016.html
  7. 7. @dylanw #lavaconDylan Wilbanks
  8. 8. @dylanw #lavaconDylan Wilbanks
  9. 9. @dylanw #lavaconDylan Wilbanks
  10. 10. @dylanw #lavaconDylan Wilbanks
  11. 11. @dylanw #lavaconDylan Wilbanks Is content supposed to be a placeholder?
  12. 12. @dylanw #lavaconDylan Wilbanks
  13. 13. @dylanw #lavaconDylan Wilbanks
  14. 14. @dylanw #lavaconDylan Wilbanks Design has become independent of content
  15. 15. @dylanw #lavaconDylan Wilbanks
  16. 16. @dylanw #lavaconDylan Wilbanks Just stick with me.
  17. 17. @dylanw #lavaconDylan Wilbanks
  18. 18. @dylanw #lavaconDylan Wilbanks http://www.barberryhillfarm.com/2012/02/
  19. 19. @dylanw #lavaconDylan Wilbanks "Louie Pierre, fullblood Indian farmer.” BIA, 1914 The Farmer.
  20. 20. Clem Albers, c. 1946 || Public Domain @dylanw #lavaconDylan Wilbanks The Cowhand.
  21. 21. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/julieunplugged/2189972046/
  22. 22. @dylanw #lavaconDylan Wilbanks https://www.tapinto.net/towns/roxbury/articles/oklahoma-roars-into-town-at-the-bickford-in-mo
  23. 23. @dylanw #lavaconDylan Wilbanks The Farmer. The Cowhand.
  24. 24. https://www.flickr.com/photos/juhansonin/12140602074/ @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/curtisjbathurst/28390055/ The Writer. The Designer.
  25. 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. 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. 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. 28. @dylanw #lavaconDylan Wilbanks “It’s just words.”
  29. 29. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/soledadbrother/6254659091/
  30. 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. 31. @dylanw #lavaconDylan Wilbanks “Make it pretty, so long as it’s blue.”
  32. 32. @dylanw #lavaconDylan Wilbanks “Make it pretty, so long as it’s blue.”
  33. 33. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/joopey/10331390786/
  34. 34. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/joopey/10331390786/ Here’s my frustration.
  35. 35. @dylanw #lavaconDylan Wilbanks
  36. 36. @dylanw #lavaconDylan Wilbanks
  37. 37. @dylanw #lavaconDylan Wilbanks
  38. 38. @dylanw #lavaconDylan Wilbanks
  39. 39. @dylanw #lavaconDylan Wilbanks Overdocumented?
  40. 40. @dylanw #lavaconDylan Wilbanks Overdocumented? UNDERDESIGNED.
  41. 41. @dylanw #lavaconDylan Wilbanks User manuals, FAQs, documentation sites, tutorial videos: It’s often because of a bad design process.
  42. 42. @dylanw #lavaconDylan Wilbanks Why is this happening?
  43. 43. @dylanw #lavaconDylan Wilbanks We don’t have time.
  44. 44. @dylanw #lavaconDylan Wilbanks Tactical, transactional mindset
  45. 45. @dylanw #lavaconDylan Wilbanks McDonald’s Design: fast, cheap, not very good https://www.flickr.com/photos/jeepersmedia/14676406713/
  46. 46. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/21148228@N08/14129393429/ Role oriented organizations
  47. 47. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/21148228@N08/14129393429/
  48. 48. @dylanw #lavaconDylan Wilbanks We often come in at the end of the process https://www.flickr.com/photos/scragz/132300597/
  49. 49. @dylanw #lavaconDylan Wilbanks We share common pain
  50. 50. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/quinnanya/8572353057/ We have common values.
  51. 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. 52. @dylanw #lavaconDylan Wilbanks We care about story
  53. 53. @dylanw #lavaconDylan Wilbanks “The Pixar Story Spine” https://en.wikipedia.org/wiki/File:Pixaranimationstudios.jpg
  54. 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. 55. @dylanw #lavaconDylan Wilbanks
  56. 56. @dylanw #lavaconDylan Wilbanks The User’s Journey Donna Lichaw, 2016 http://donnalichaw.com
  57. 57. @dylanw #lavaconDylan Wilbanks
  58. 58. @dylanw #lavaconDylan Wilbanks Common values, common stories
  59. 59. @dylanw #lavaconDylan Wilbanks “Territory folks should stick together” https://www.flickr.com/photos/theatrebhs/2696296105/
  60. 60. @dylanw #lavaconDylan Wilbanks How can we stick together? https://www.flickr.com/photos/wocintechchat/25900705292/
  61. 61. @dylanw #lavaconDylan Wilbanks Communicate. https://www.flickr.com/photos/wocintechchat/25772101896/
  62. 62. @dylanw #lavaconDylan Wilbanks https://www.popchartlab.com/products/a-meticulous-metric-of-baseball-team-names-vol2
  63. 63. @dylanw #lavaconDylan Wilbanks Some people juggle geese.
  64. 64. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/litlnemo/2965988892/ Make connections.
  65. 65. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/litlnemo/2965988892/ Build bridges.
  66. 66. @dylanw #lavaconDylan Wilbanks “Always UX your UX” https://www.flickr.com/photos/teemu08/7179209157/
  67. 67. @dylanw #lavaconDylan Wilbanks Understand your audience and deliver what they need in a way they can use it.
  68. 68. @dylanw #lavaconDylan Wilbanks Start Now
  69. 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. 70. @dylanw #lavaconDylan Wilbanks Start Now New customer needs to start process Friendly voice/tone 2 lines (~ 25 words)
  71. 71. @dylanw #lavaconDylan Wilbanks Start Now New customer needs to start process Friendly voice/tone 2 lines (~ 25 words) User + Goal Requirements Limitations
  72. 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. 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. 74. @dylanw #lavaconDylan Wilbanks Team up. http://news3lv.com/news/local/gallery-indian-national-finals-rodeo-at-south-point#photo-15
  75. 75. @dylanw #lavaconDylan Wilbanks We often come in at the end of the process https://www.flickr.com/photos/scragz/132300597/
  76. 76. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/wocintechchat/25392653883/ Work to get to the start, together
  77. 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. 78. @dylanw #lavaconDylan Wilbanks Think strategically.
  79. 79. @dylanw #lavaconDylan Wilbanks
  80. 80. @dylanw #lavaconDylan Wilbanks UX Marketing Video TechDocs
  81. 81. @dylanw #lavaconDylan Wilbanks User Goal Design Content Video E-Mail
  82. 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. 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. 84. @dylanw #lavaconDylan Wilbanks
  85. 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. 86. @dylanw #lavaconDylan Wilbanks Show, don’t tell. https://www.flickr.com/photos/kwkg/8638071231/
  87. 87. @dylanw #lavaconDylan Wilbanks Controlled vocabularies https://www.flickr.com/photos/24498687@N03/2337550017/
  88. 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. 89. @dylanw #lavaconDylan Wilbanks Show the path to the top.
  90. 90. @dylanw #lavaconDylan Wilbanks This isn’t easy. https://www.flickr.com/photos/cuboctahedron/22490565168/
  91. 91. @dylanw #lavaconDylan Wilbanks What can we do together? https://upload.wikimedia.org/wikipedia/commons/e/e5/Raised_fist.jpg
  92. 92. Russell Lee, Farm Security Administration, June 1939 @dylanw #lavaconDylan Wilbanks
  93. 93. US National Archives|| https://www.flickr.com/photos/usnationalarchives/7136347785/ @dylanw #lavaconDylan Wilbanks
  94. 94. @dylanw #lavaconDylan Wilbanks Abby LePage / Berkshire Theatre Group
  95. 95. @dylanw #lavaconDylan Wilbanks
  96. 96. @dylanw #lavaconDylan Wilbanks
  97. 97. @dylanw #lavaconDylan Wilbanks We can re-unify design and content.
  98. 98. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @dylanw #lavaconDylan Wilbanks
  99. 99. @dylanw #lavaconDylan Wilbanks https://www.flickr.com/photos/dsoltesz/3953814462/ Let’s be friends.
  100. 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

×