Great UX design influences one video game becoming a cultural icon while another lands in the $5 bin at GameStop. So what cues can we take from these popular games—and from this technology-driven industry that so closely parallels our own? Steph is going to teach us about two: Content-first UX Design and Contextual Learning. See popular video games whose character stories form the backbone of design, and whose flow teaches players to use the game while they’re playing it. Then hear how Steph translated these two concepts to her work with Ben & Jerry’s, the Annie E. Casey Foundation, and FastCustomer.com—which resulted in fewer design iterations, more cohesive content, and higher levels of user engagement.

1. CONTENT-FIRST
UX DESIGN IS
REALLY GREAT
WHAT VIDEO GAMES TEACH US ABOUT
UX
stephanie hay * 07.29.14 * @steph_hay

6. “There is no tutorial, no
[prompt] that pops up on
screen, nobody telling
you where you’re going
or why.”

7. “The storytelling is purely
about the game
experience itself.”

8. Focus on the
hero

10. Remove all
distractions

12. Iterate until you
“win”

18. source: ibisworld.com

27. Does your
design feel like
a conversation?

28. http://www.amazon.com/Make-It-Stick-Successful-
Learning/dp/0674729013

31. Do your heroes
feel like they’re
“winning?”

32. http://www.amazon.com/Gamify-Gamification-Motivates-People-
Extraordinary/dp/1937134857/ref=sr_1_1?ie=UTF8&qid=1405204323
&sr=8-1&keywords=gamification

35. 2 KEY DESIGN
APPROACHES
FROM THE
VIDEO GAME
INDUSTRY

36. 1.
Content FirstDoes your design feel like a conversation?

42. WHAT’S GREAT
ABOUT
CONTENT-FIRST
UX DESIGN

43. It’s the lowest risk way to
design

45. It’s the lowest risk way to
design
It starts with what the hero
really needs to “win”

47. 2.
Contextual
Learning
Do your heroes feel like they’re “winning?”

51. WHAT’S
REALLY GREAT
ABOUT
CONTEXTUAL
LEARNING

52. It teaches over time—not all
at once—which improves
retention

53. BORDERLA
NDS

54. BORDERLA
NDS

55. BORDERLA
NDS

56. BORDERLA
NDS

57. BORDERLA
NDS

58. BORDERLA
NDS

59. It teaches over time—not all
at once—which improves
retention
It provides answers in the
moment when users are
most likely to have questions

60. BORDERLA
NDS

62. BORDERLA
NDS

63. BORDERLA
NDS

64. Outcomes
Lowest risk, lowest cost
Greater collaboration
Faster approvals + launches
Higher engagement

65. FLIPPING OUR
PARADIGM
FOR WEB &
MOBILE

68. http://goo.gl/HknnJT

69. CONTENT
WORKBOOK
THE LOWEST-FIDELITY
TOOL FOR PLANNING AND
DISCUSSING UX DESIGN

70. Qualitative Data

71. Quantitative Data

72. Quantitative Data

73. Key Takeaways

74. LANGUAGE
BOARDS
THE CORE MESSAGING
EACH USER SEGMENT
NEEDS TO MAKE A CHOICE
(the majority of users—not all users)

75. Language Board

76. Language Board

77. Language Board

78. Language Board

79. CONVERSATION
MAPS
THE CONVERSATION WE
WANT TO HAVE WITH
USERS ALONG EACH STEP
OF THEIR JOURNEY

80. Conversation Map

81. Conversation Map

82. Where should our hero go
next?

83. Conversation Map

85. What brought our hero to
this place?
Where should our hero go
next?

86. Conversation Map

88. CONTENT
DEFINES
STRUCTURE
NOT THE OTHER WAY AROUND

90. “I never want to work
without this again. It lets me
focus entirely on design,
which is what I do best. So I
make better designs as a
result.”

92. 1.
Content FirstDoes your design feel like a conversation?

93. 2.
Contextual
Learning
Do your heroes feel like they’re “winning?”

94. COME TO MY
WORKSHOP
OCTOBER 27
stephanie hay * Boston @ UI19 * @steph_hay
http://ui19.uie.com/workshops/content-first-ux-
design-a-lean-approach

95. Evil Clippy: http://steve-lovelace.com/wordpress/wp-content/uploads/2013/01/evil-clippy.png
Clippy Irritation Meme: http://i.huffpost.com/gen/1383038/thumbs/o-BILL-GATES-CLIPPY-570.jpg?1
Inexplicable angry Clippy: https://drawception.com/pub/panels/2013/6-21/f5FLEdR5Ok-6.png
Clippy: http://4.bp.blogspot.com/-_O8aTWfk1Oo/Tcq6OS6daMI/AAAAAAAADzg/V_jW-ZAWJFw/s1600/Clippy.jpg
Games have so much freedom: https://c2.staticflickr.com/8/7075/6866856808_0359a7d35b_z.jpg
Jenova Chen: https://c2.staticflickr.com/4/3314/3235139236_c3f17cf77d.jpg
Journey: http://en.wikipedia.org/wiki/Journey_(2012_video_game)#mediaviewer/File:Journey-PS3-Screenshot.jpg
Journey trailer: https://www.youtube.com/watch?v=_mF8KkDiIdk&feature=kp
Japanese garden: http://www.coolwallpapers.me/japanese-garden/japanese-garden-wallpaper/
Journey hero: http://static.giantbomb.com/uploads/original/0/5504/2214707-1333509735311.jpg
Mario 8-bit: http://img2.wikia.nocookie.net/__cb20130324144324/fantendo/images/7/78/8_bit_mario_by_raivcesleinadnayr-d3b6hpi.png
Atari: http://en.wikipedia.org/wiki/Atari#mediaviewer/File:Atari-2600-Wood-4Sw-Set.jpg
James VB crying: http://4.bp.blogspot.com/-MzCNjlLwFd4/U4oJsbxgMDI/AAAAAAAAKBY/UKDT3ufNk_M/s1600/James-Van-Der-Beek-Crying-On-Dawsons-Creek-Gif.gif
IBM 5150: http://history-computer.com/ModernComputer/Personal/images/IBM5150.jpg
Borderlands video: https://www.youtube.com/watch?v=jGjZHipc0h4
Animal Crossing video: https://www.youtube.com/watch?v=OPXRAKu-MyQ
Gowalla: http://antikewl.com/daily/wp-content/uploads/2009/09/gowalla.jpg
Instruction manual: http://goo.gl/9qxkov
credits
The Annie E. Casey Foundation: aecf.org
Ben & Jerry’s: benjerry.com
Happy Cog: happycog.com
FastCustomer: fastcustomer.com
thanks
UIE: uie.com
Video game stats: http://www.theesa.com/facts/pdfs/esa_ef_2013.pdf
2003-2013 growth chart: http://www.marketingcharts.com/wp/wp-content/uploads/2013/04/IBISWorld-Top-10-Fastest-Growing-US-Industries-Apr2013.png
comScore: https://dl.dropboxusercontent.com/u/7753809/comScore-Media-Placement-Strategies.pdf
Wayne’s World: http://i.imgur.com/eM8Ux9L.gif
Breaking Development + All of you awesome people