We spend a lot of time trying to solve communication problems through design. We design first, write later, and end up iterating endlessly, only to start the process over again — design first, words last. What would happen if we wrote the words first — agnostic of technology or channel — and then designed an experience to bring those words to life? That’s what the video game industry does, and maybe we should take a cue from their results — equal parts men and women spending hours on end (and billions annually) to play video games on every device imaginable. Steph Hay will show us Content-First techniques and artifacts she adapted from video-game-design processes, then used to design web and mobile experiences for Ben & Jerry’s, Annie E. Casey, and FastCustomer.com. All resulted in faster learning, fewer iterations, a more cohesive voice and tone, and higher engagement. Presentation by Stephanie Hay

1. CONTENT-FIRST
DESIGN SECRETS
PRACTICED BY THE VIDEO GAME INDUSTRY
stephanie hay * @steph_hay

3. 2 KEY DESIGN
APPROACHES
FROM THE
VIDEO GAME
INDUSTRY

4. 1.!
Nail the
story first!
Does your design feel like a conversation?

6. It’s the lowest risk way to
design

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

10. 2. Design for
discovery
Do your heroes feel like they’re “winning?”

11. http://goo.gl/O6CKDK

12. Teaching over time—not all
at once—improves
retention

13. BORDERLA
NDS

14. BORDERLA
NDS

15. BORDERLA
NDS

16. BORDERLA
NDS

17. BORDERLA
NDS

18. Provide answers in the
moment when users are
most likely to have questions
Teaching over time—not all
at once—improves
retention

19. BORDERLA
NDS

21. BORDERLA
NDS

22. BORDERLA
NDS

23. CONTENT
DEFINES
STRUCTURE
NOT THE OTHER WAY AROUND

24. Outcomes of !
content-first design
Lowest risk, lowest cost!
More collaborative design!
Faster approvals + launches!
Higher engagement

25. BE BRAVE
ENOUGH TO
CHANGE HOW
YOU WORK

26. the content!

28. CONTENT
PROTOTYPES
Write the conversation we
want to have with users along
each step of their journey

32. “Having real content up-front
meant I could focus on
designing a real experience
right from the start. I wish
we’d always worked this
way.” — CeCe Chang

33. CONTENT
DEFINES
STRUCTURE
NOT THE OTHER WAY AROUND

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

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

39. 1.!
Nail the
story first!
Does your design feel like a conversation?

40. 2. Design for
discovery
Do your heroes feel like they’re “winning?”

42. stephanie.hay@
capitalone.com
Thanks, Dawson.

43. 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
James VB crying: http://4.bp.blogspot.com/-MzCNjlLwFd4/U4oJsbxgMDI/AAAAAAAAKBY/UKDT3ufNk_M/s1600/James-Van-Der-Beek-Crying-On-Dawsons-Creek-Gif.gif
Animal Crossing video: https://www.youtube.com/watch?v=OPXRAKu-MyQ
credits
Ben & Jerry’s: benjerry.com
Happy Cog: happycog.com
FastCustomer: fastcustomer.com
thanks
MoDevUX + Capital One