The challenges and opportunities of multi-tasked, multi-device and connected users is be explored when designing digital products. An end-to-end methodology based on Contextual Design that addresses the challenges above is presented along with practical examples.

1. MULTI-DEVICE DIGITAL
PRODUCT DESIGN
athens - may 2017 - giorgos gavriil

2. chapter 1:
a brief intro

3. who i am
Working in Digital & UX for more than 12
years
Been responsible or co-designing numerous
digital products such as winbank, yellowday,
yellow, easypay kiosks + numerous websites
and apps.
Current position: UX & Context Marketing
Director @ Linakis Digital

4. but something
was amiss…

5. indications we’re doing it wrong
Our product should have this, and this,
and this, and this feature…
feature creep

6. indications we’re doing it wrong
Look at a nice feature that this company
from abroad has launched. Let’s do it
too!
COPY WITHOUT DISCRIMINATION

7. indications we’re doing it wrong
The boss says that this feature is the
most important of all
HIPPO EFFECT*
*Highest Paying Person’s Opinion

8. indications we’re doing it wrong
Sh%##t, we can’t make the launch date.
Let’s phase out the most heavy features
to implement
OVER-OPTIMISTIC ROADMAP - NO MVP

9. indications we’re doing it wrong
Chatbots are so hot right now, let’s do a
chatbot too, anything, as long as we
launch it first…
technology as an innovation cushion

10. released in 1997 for god’s shake! whole new version in 2017
enter contextual design

11. chapter 2:
DESIGN FOR LIFE
The 7 cool concepts

12. THE WHEEL OF JOY IN LIFE
Empower users to achieve
all their intents and life
work.
Design with the
expectation that the users
will be distracted, splitting
their attention across
multiple activities.
Support the unstoppable
momentum of life: help
users fill every moment of
dead time with useful or
amusing activities.
ACCOMPLISH

13. THE WHEEL OF JOY IN LIFE
Increase the intimacy and
collaboration of users’ real
relationships.
Help them make contact
easily, find things and do
things together while
pursuing their separate
lives.
Foster real connections.
CONNECTION

14. THE WHEEL OF JOY IN LIFE
Support users’ sense of
core self.
Help them express their
sense of sense.
Increase the users’ sense
of being their best selves.
IDENTITY

15. THE WHEEL OF JOY IN LIFE
Provide the user with
pleasurable moments
through color, sound,
movement and animation.
SENSATION

16. THE TRIANGLE OF JOY IN USE
Provide immediate, simple
fulfilment of core intents,
ideally instantly, “just like
magic”.
DIRECT INTO ACTION

17. THE TRIANGLE OF JOY IN USE
Remove all inconveniences,
setup, plugging in etc.
No glitches and technical
hassles
THE HASSLE FACTOR

18. THE TRIANGLE OF JOY IN USE
Reduce the time it takes to
learn the product as close
as possible to zero.
THE DELTA

19. chapter 3:
develop empathy

20. introducing the
experience models

21. a day in the life

22. identity model

23. relationship model

24. collaboration model

25. sensation model

26. contextual research
Talk with users in the context of their
lives: observe how and why they do the
activities you’re interested in all contexts
of their day-to-day lives.
immerse into their lives

27. some examples

28. shopping
Start at home, see how they do research
or buy online
Do retrospective accounts of recent
purchases
Visit store to pick an item

29. travel
Plan interviews with users at all stages of
travel
Use day-to-day retrospective accounts since
it is not a cohesive, heads-down activity.
Be creative: Try to find users vacationing
where you are located

30. let’s work a case study
together!
Let’s suppose that we are asked to design a
music listening platform. How would you
organize the contextual research?

31. how would you structure the
contextual interviews?
(when -where - what?)

32. chapter 4:
DESIGN THE PRODUCT

33. “We shape our buildings and
afterwards, our buildings
shape us”
winston churchill

34. war room

35. the wall walk
Immerse a diverse design team
to the data, own it and come
back to it again and again.
Create an environment for the
data to drive innovation
a 2-6 hrs session with a single goal

36. like a museum visit!
Each person silently walk the panels, reads the data, puts up sticky notes with
ideas, notes holes in the data and questions/themes to explore in future
interviews.

37. hot ideas examples
Make travelling planning like a game
a metaphor
Automate everything, never ask the client
for a single document
technology challenge
Put the manager’s whole job on the phone
a user experience challenge

38. from the big picture to the details
Ideate,
explore many
options,
decide on the
big picture
vision
Start
exploring in
depth,
maintaining
the customer
perspective
storyboards
Define
structure
UED

39. Creating the vision
step 1

40. The cautionary tale of the
pottery class
let’s take a break to tell you a story

41. a vision is the story of the
new world you will invent
for the user
produce 4-7 visions | 20-45 minutes/vision | like campfire stories

42. vision - an example
example

43. now it’s time to pick the
visions apart!
we scavenge them for their best elements, synthesising a new coherent vision

44. we then switch from story-
based to structural mode and
extract product concepts out
of the selected vision
in rough wireframe sketches to reveal function and automation as this
has been ideated so far

45. product concept
example

46. product concept
example

47. Creating Storyboards
step 2

48. storyboards are step-by-step
scenarios depicting actions
incl. manual steps, interactions
with multiple devices and a very
preliminary User interface
back to story mode
Make 6-8 storyboards for all the primary scenarios of use
that describe the basic product vision

49. storyboarding

50. storyboarding

51. storyboarding

52. UED and 1st version for
testing
step 3

53. user environment design
an analogy to a floor plan: details are unimportant for understanding the structure of the house

54. user environment design
each focus area must have a purpose: if you cannot write a single sentence that describes this purpose,
most possibly the product is not well structured, either because there are many different functions in
the focus area or because it does not support a coherent activity.

55. high-level interaction pattern

56. don’t get lost in design discussions.
all design work after the vision is one
the way to testing with actual users,
not implementation
the goal

57. paper prototype
notice the movable parts that will be inserted of withdrawn during the interview

58. chapter 5:
BUILDING THE PRODUCT

59. the work we have done up to now
(vision - product concept - UED) can
cater for a roadmap of 2-5 years.
a word of caution

60. “Real artists ship”
steve jobs

61. Make sure you do not water down the
core innovation: what is the one key
change in people’s practice which the
product introduces?
if you should remember one thing

62. prepare a shipping ued, test it with
users, get into detailed design and
start building…
what’s next

63. Case study continued

64. day-in-the-life

65. identity

66. spotify

67. spotify

68. spotify

69. spotify

70. spotify

71. spotify

72. THANK YOU!
Find me on Linkedin: giorgosgavriil