The working deck for the workshop I ran at UXPH2018 to inspire and encourage UX designers to use story and story telling techniques to deliver more empathetic products or services.

1. Storytelling
for better product design
Mario Van der Meulen • Principal Designer
A Foolproof Singapore workshop
UXPH 2018

2. why, hello!
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

3. in the next few hours…
the problem
the practice
the mindset
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

4. you, at the end
of this workshop
story
UXPH 2018 • Storytelling for Better Product Design
(promise!)
@MarioVDMeulen

5. I work
at an experience design agency
awesome
UXPH 2018 • Storytelling for Better Product Design
foolproof.co.uk
foolproof.com.sg
@Foolproof_UX
@MarioVDMeulen

6. if anything,
we are storytellers
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

7. it’s the secret
to designing empathetic products
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

8. I like stories so much,
can someone share one?
thank you!
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

9. repeat the story you just heard
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

10. the key metric of success in
storytelling, is your audience’s
ability to repeat it
UXPH 2018 • Storytelling for Better Product Design
key learning -
@MarioVDMeulen

11. how and when
do we use story in UX?
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

12. user story
user scenario
in general -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

13. “At its core,
a user story describes something
that the user wants to accomplish
by using the software product”
UXbooth.com -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

14. “A user scenario is the fictitious
story of a user, accomplishing an
action or goal via a product”
interaction-design.org -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

15. “As a (role) I want (something) so
that (benefit)”
persona
task, action
goal, objective
both use this as a framework -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

16. per team, in 10 minutes, please make a few of these UX stories -
As a…
I want…
so that…
…[persona]
…[task]
…[goal]
exercise -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

17. For example -
As a…
I want…
so that…
…user
…to select what folders to backup
…I don’t clutter my hard disc
UXPH 2018 • Storytelling for Better Product Design
As a…
I want…
so that…
…teacher
…to screen my students quickly
…I know their skill profile
@MarioVDMeulen

18. let’s share
exercise -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

19. most of the time, user stories are
easy to repeat, and therefor easy
to remember
the advantage -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

20. job done?
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

21. too often, a user story
will focus only on the how and
the what of a product
the problem -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

22. UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen
user stories are often too specific,
too early in the design process

23. in other words, they are
mostly solutions, and
not enough about possibilities
the problem -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

24. what are signs that a user story
is not that good?
question -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

25. symptoms of a not-so-good story in UX
PRODUCT
- Scope creep
- Extended timeline
- Over budget
- Scope reduction
TEAMS
- Feature focussed
- Burn out
- Declining passion
- Growing frustration
USERS
- Confused
- Slow/hard to adopt
- No adoption
- No word of mouth
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

26. the empathy, inspiration, vision –
in other words the why of the
product is missing
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

27. WHY WHAT HOW
story/problem solution
Product Development Timeline
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

28. stories for user experience should
be method of building a shared
understanding and empathy
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

29. how to do this,
and then,
how to do it better
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

30. every empathetic story
has a structure
UXPH 2018 • Storytelling for Better Product Design
insight -
@MarioVDMeulen

31. it uses three components
a character
a context
a conflict
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

32. UXPH 2018 • Storytelling for Better Product Design
intro
increasingly
rising action
conflict
rapidly
defused tension
resolution
climax!
and maps these
on a story arc
@MarioVDMeulen

33. Pixar
Once upon a time there was…
every day, …
one day …
because of that, …
because of that, …
until finally …
rule 4 of Pixar’s 22 rules of story
UXPH 2018 • Storytelling for Better Product Design
for example -
@MarioVDMeulen

34. a structure of a story has many
similarities with a product design’s
process to problem solving
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

35. what if, instead of describing a
user requirement, we apply a
story-centered design process?
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

36. how about we turn our persona
into a character…
UXPH 2018 • Storytelling for Better Product Design
step one -
@MarioVDMeulen

37. how about we understand the
context from the experience of the
character…
UXPH 2018 • Storytelling for Better Product Design
step two -
@MarioVDMeulen

38. how are the uncertainties, or other
issues, felt and experienced
by your character?
UXPH 2018 • Storytelling for Better Product Design
step three -
@MarioVDMeulen

39. a character a context a conflict
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

40. ’in a nutshell’
UXPH 2018 • Storytelling for Better Product Design
per team, in 5 minutes: using maximum two sentences, describe a movie without
mentioning title or actors.
@MarioVDMeulen

41. what movie can we recognise?
one team member, please share your description with us
exercise -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

42. what was your
neighbour's movie one-liner?
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

43. ODD NUMBER TEAMS:
you will develop now a story for an investor,
so your new initiative gets more funding, and your product
can get developed and launched
EVEN NUMBER TEAMS:
you are now creating a story for a development team,
to clarify goals and inspire them, because you need to
improve on the product
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

44. ‘the big picture’
per team, in 15 minutes: establish the problem statement
exercise -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

45. We believe that
[doing this/having this feature/creating this experience]
for [these people/character]
will achieve [this outcome].
We will know this is true when we see
[this event/market feedback/quantitive measure/qualitative
insight/new behaviour]
model -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

46. what is your big picture?
one team member, please share your problem statement with us
exercise -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

47. “make me believe your tensions,
and I will commit to
your resolution”
key insight -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

48. the emotional side of a story
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

49. UXPH 2018 • Storytelling for Better Product Design
‘childhood hero’
per team, in 10 minutes: form a short story about a childhood hero, and convince us
why this person mattered, and what values they gave you
exercise -
@MarioVDMeulen

50. tell us about your childhood hero
one team member, please share
exercise -
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

51. user flows - product and user
experience storytelling in one
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

52. let’s go with a flow
UXPH 2018 • Storytelling for Better Product Design
per team, in 20 minutes: using paper and post its, sketch out a prospective user flow,
that visualises the problem statement and how success will look like
exercise -
@MarioVDMeulen

53. UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

54. UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

55. simulate the user experience
spot problems and questions
clarify design goals
UXPH 2018 • Storytelling for Better Product Design @MarioVDMeulen

56. supplement user stories with a
story arc, so that these can inform
more than just the utility
UXPH 2018 • Storytelling for Better Product Design
key insight -
@MarioVDMeulen

57. UXPH 2018 • Storytelling for Better Product Design
story/problem
solution
Product Development Timeline
WHAT HOWWHY
@MarioVDMeulen

58. principles for designing
experience in a story
- personas are characters- Journey mapping is a plot arc- stakeholder engagement is performance - we are all each other’s audience
UXPH 2018 • Storytelling for Better Product Design
key learning -
@MarioVDMeulen

59. Mario Van der Meulen
thank you!
• Principal Designer
Foolproof Singapore