User Experience is not only about web sites and creating wireframes of User Interfaces. What is User Experience design and how to do it? (Conversion Meetup 2013, Bratislava)

1. Designing User Experience
Not User Interface
Petr Kosnar
IamPetr.com
@faxecz
Image ref. 1

2. User Experience... Omnipresent buzzword. Everybody asks for it, and
so few people can actually clearly say what it is. In fact, it is pretty selfexplanatory – just look at the two words and their meaning.

3. User?
Users are not only a subject in our user tests, they are real humans.
The most important objects of our interest. Because they interact with
your system. And this interaction evokes experiences in them. Image ref. 2

4. Experience?
Effect on the user‘s feelings, emotions (do they feel happy, annoyed,
frustrated, excited, afraid, bored, relaxed, satisfied, tired... ?), memory,
building opinion, tackling users‘ psychological needs!
Image ref. 3

5. Psychological needs
1.
Autonomy — Independence
2.
Competence — Effectance
3.
Relatedness — Belongingness
4.
Self-actualizing — Meaning
5.
Security — Control
6.
Money — Luxury
7.
Influence — Popularity
8.
Physical thriving — Bodily
9.
Self-esteem — Self-respect
10. Pleasure — Stimulation
(Hassenzahl, M. (2010). Experience Design: Technology for all the right reasons.)

6. Psychological needs
1.
Autonomy — Independence
2.
Competence — Effectance
3.
Relatedness — Belongingness
4.
Self-actualizing — Meaning
5.
Security — Control
6.
Money — Luxury
7.
Influence — Popularity
8.
Physical thriving — Bodily
9.
Self-esteem — Self-respect
UX designer isPleasure — these needs through the product he is
10. addressing Stimulation
designing – that is one of the main abilities of a good UX designer!
There are (Hassenzahl, M. (2010). Experience designers mustfor all the right reasons.)
several aspects of UX that Design: Technology keep in minds...

7. UX is individual. Looking at the emotions and experience, the child on
the left is apparently enjoying the moment slightly more than the child
on the right. Even though they are both in the same situation.
UX is individual,
Image ref. 4

8. dynamic,
UX typically changes over time.
Anticipaded UX refers to the
expectations built before you start
using the product (in a specific
situation), Momentary UX refers
to each specific moment of
interaction with the product,
Episodic UX refers to each usage
episode, Cumulative UX refers to
the whole experience with the
product after having used it for a
while.
(www.allaboutux.org/uxwhitepaper)

9. dynamic,
(www.allaboutux.org/uxwhitepaper)

10. context-dependent
Physical
(time of a day, month, season, location, ...)
Emotional
(feelings at the moment of experience)
Sensory (seeing, hearing, smelling, tasting and touching)
Historical (UX at a particular time and place in history)
Memory (personal connections to the past)
(Quesenbery, W. and Brooks, K. (2010) Storytelling for user experience: Crafting stories for
better design.)

11. UX designer‘s goal
„User feels good before,
during, and after using
our product.“
See? So far I haven‘t mentioned User Interface at all... Because it is
about more than just designing a website, interface, or a product. It is
about developing the whole concept of use with respect to the user‘s
needs, feelings and emotions. Let‘s see how to do that...

12. How to design UX?
Asking „How to design UX?“ is actually not correct... You cannot design
UX. You can only design to enable certain UX. UX designers shape
emotions through affecting the purchasing, owning, and using the
product. We must achieve empathy and understand the complete
context. We have many tools and methods for that. For example...

13. Storify
Storyboarding
Video Prototyping
I am going to describe one UX-driven project where we used these
three methods that helped us to empathise with the users, envision
UX we wanted to design for, and specify and communicate the design.

14. UX brief
Brief: Identify a niche user group and their user need(s) that can be
addressed by the hue lamps. Then explore what would the app be like,
what functionality it will have, how user will interact with it, what
lighting effects it would create? The overall goal is to use to lamp to
enable new, unique user experience.

15. Storify (currently being developed as Storyply) is a Storytelling
technique using dramaturgical techniques from film and sequential
art. This method is helpful for clarifying the context, identifying
involved stakeholders, their needs and emotions, and envisioning the
UX we want to design for. Consists of eight steps...
Storify
(Atasoy, B., & Martens, J. B. (2011). Crafting user experiences by incorporating dramaturgical
techniques of storytelling.)

16. Image ref. 5
1. Design Brief: Team members individually state the title, background,
and objectives of the project in order to define high-level goals. This
serves as a starting point of the UCD process.

17. Image ref. 6
2. Casting characters: Team members individually contribute to the
definition of people, places and objects in the story. These are
transformed into characters, settings and props.

18. Image ref. 7
3. Establishing setting: This step completes the context and defines the
establishing shot – the starting point of the story.

19. Image ref. 8
4. Keyframing events: Identifying the situation we want to improve...
Storyboard consisting of five frames clearly shows key moments in the
story. Here we identify the (UX) design opportunity.

20. Image ref. 9
5. Assessing experiences 1: Each frame of the story is analyzed in
terms of psychological needs and emotions. This helps us to identify
the points of tension or conflict. We can see when the user feels well
and when they feel miserable – the moment(s) we can improve.

21. Image ref. 10
6. UX vision: What experience we want to enable to the user? What do
we want to be the qualities of the experience, and how do we want
user to feel before, during, and after engaging with the experience?

22. 7. Assessing experiences 2: In this step we envision the UX we want to
design for. This is the vision of the experience in the improved
situation. And in order to improve the situation to get here, we need...

23. Image ref. 12
8. Ideas: We generate concepts for the improved UX, elaborate the
concepts, create story boards and evaluate them with designers, users,
and other stakeholders.

24. Storyboarding
Good for getting a more concrete understanding of the actual or
envisioned situation, and for describing the user process flow visually.
A storyboard helps to concretize relevant aspects of the context of
use: Who is involved, How are they involved and what are they doing
in the different episodes, Where is it all happening, When, and Why.

25. Image ref. 13

26. Video Prototyping
Storyboards are great, but we can visualize the story in even better,
richer, and more concrete way – by a video prototype. You do not
need a camera, studio nor plenty of time for preparing the scenes... If
you can draw a story board, you can make a video prototype too!
Using sketches, powerpoint, and voiceover (or subtitles). Look...

27. Image ref. 14
These are Robin and Susie. Susie is five years old and loves fairy tales
and dolls, but she hates going to bed.

28. Every evening around seven o’clock Susie needs to go to bed. Tonight
Susie doesn’t feel like going to bed and she doesn’t want to put her
pyjama on.

29. After some discussions Robin says: “if you’ll put on your pyjama like a
good girl then I’ll read you a story with real lights.” That‘s what Susie
loves!

30. All of a sudden Susie behaves and puts her pyjama on, brushes her
teeth, and runs into her bed immediately.

31. She can pick her own story on mom‘s ipad.

32. She picks Hansel and Gretel with lights. Hansel and Gretel is her
favourite fairy tale.

33. Er was eens…
Her mother takes the ipad and starts to read: “Once upon a time there
was a poor woodcutter…”

34. The lights in her room slowly change colours and intensity according to
the story.

35. It’s becoming blue and sad, because the woodcutter is very poor and
the mood of the story is quite depressive. Susie gets immersed in the
story quickly.

36. When Hansel and Gretel enter the forest the room of Susie went
green. Just like the forest in the story.

37. But when her mother tells her about the witch and her big oven Susie
gets a bit frightened. The room is filled with red light just like the
inside of the oven in the story.

38. ..en ze leefden nog
lang en gelukkig…
Luckily the story ends happily. Hansel and Gretel got home safe, and
are now playing outside on the sun. “and they lived happily ever after.”
The light is a warm yellow and Robin gives Susie a goodnight kiss.

39. Susie’s room slowly turns darker and darker, and Susie falls asleep...

41. ...dreaming about playing with Hansel and Gretel on the sun in front of
the house...

43. Creating such a video takes few hours, does not require any studio,
actors, costumes nor special effects, and still demonstrates the
situation with its UX in a rich way.

44. What I want you to remember about User Experience Design...

45. Recap
1.
UX design addresses
emotions & psychological needs

46. Recap
2.
UX is individual, dynamic
& context-dependent

47. Recap
3.
You need complete context
to empathise with users

48. Recap
4.
You can design only for UX

49. Recap
5.
Envision desired UX first,
then design, then evaluate

50. Recap
6.
UX ≠ UI

51. Thank you!
Petr Kosnar
IamPetr.com
@faxecz

52. Image references
1. http://www.flickr.com/photos/33797554@N00/2514177136/
2. http://www.flickr.com/photos/20158323@N04/3091394494/
3. http://www.flickr.com/photos/31028309@N00/4623964759/
4. http://www.flickr.com/photos/30481751@N04/3114215756/
5. -12. Photo by Berke Atasoy
13., 14. Illustrations by Eveline Brink