A review of Michal Levin's book by the same title, published in January 2014 by O'Reilly Media. The presentation explains the basic ideas of her book with some new examples. Also included: Examples of single-device scenarios as well as multi-device scenarios for Apple Watch. The presentation was first held on April 21st, 2015 at Usability-Stammtisch Berlin (works best with audio, though). Oh, and the book is highly recommended – buy her book!

1. Designing Multi-
Device ExperiencesBook review
b Creative Commons license for this presentation. Copyright and licenses for included images differ.

2. Photo: Stefan Freimark

3. @freimark
Photo: flickr.com/photos/j_benson/7296569144

4. slideshare.net/sfreimark
Photo: flickr.com/photos/114382574@N05/12221680395

5. Michal Levin
O’Reilly, 2014

6. Michal Levin
Senior UX Designer
Google, Palo Alto
@michall79
Photo used with permission

7. 7
Topics
An ecosystem of connected devices
Three approaches for multi-device design
Beyond the core devices
How to
01
02
03
04

8. An ecosystem of
connected devices

9. Photo: flickr.com/photos/gabrielap93/6074460669

10. Photo: shutterstock.com/pic-154488353

11. Photo: shutterstock.com/pic-173451509

12. Photo: flickr.com/photos/poolie/2433764292

13. Photo: shutterstock.com/pic-135544436

14. Photo: shutterstock.com/pic-251428303

15. Photo: Stefan Freimark

16. Photo: flickr.com/photos/robgreen/11211153914

17. Photo: flickr.com/photos/smoothgroover22/13145117175

18. Photo: flickr.com/photos/smoothgroover22/13145117175
7G
Amount of connected devices in 2013
Cisco Visual Networking Index: Global Media Data
Traffic Forecast

19. Photo: flickr.com/photos/smoothgroover22/13145117175
24G
Amount of connected devices in 2020
(estimation)
Cisco Visual Networking Index: Global Media Data
Traffic Forecast

20. Photo: shutterstock.com/pic-206326831
90%
of 1,611 respondents use more than
one device for getting a task done
The New Multi-screen World: Understanding Cross-
platform Consumer Behavior
Google, August 2012
http://services.google.com/fh/files/misc/
multiscreenworld_final.pdf

21. Single-device design is history.
And: With new possibilities,
expectations rise.

22. Three approaches for
multi-device design

23. 23
Three approaches for multi-device design
Consistent ComplementaryContinuous

24. Consistent

25. Consistent means: The same
content and features are
available on multiple devices.

26. Full-responsive website
26
Asklepios Kliniken

27. Account section
27
Miles & More

28. Cross-platform app
28
Trello

29. Consistent doesn‘t mean
identical.

30. Some examples for device differences:
§ display size
§ interaction model (physical buttons, gestures, voice recognition...)
§ availability or non-availability of sensors (GPS, gyrometer,
accelerometer...)
30
Differences between devices require design
optimizations

31. 31
Adjust for device differences
Optimize for layout Grid, dimensions of images and buttons, font size,
spacing between elements
Optimize for
gestures
Larger tap targets and gaps between linked areas,
swipeable sliders, avoiding hover interactions
Optimize for device
characteristics
<a href=“tel:12345“>
<input type=“tel“>
<input type=“email“>

32. Photo: flickr.com/photos/quinnanya/5892760393
Optimization for devices
vs.
consistent ecosystem

33. 33
The core experience should remain consistent
across devices.
Consistent core
functionality
The MVP should be identical across devices.
Feature parity: Features should be available as much
as possible and work as similar as possible.
Consistent
content
Content parity: All content is available of all devices.
The IA should be identical (as much as possible).
Consistent “Look
& Feel“
A common visual language supports recognition and
orientation across devices.

34. Continuous

35. Continuous design addresses
a user flow that runs along a
set of contexts, during which
devices “pass the baton” to
one another.

36. Single Activity
Photo: flickr.com/photos/toffee_maky/7928636400

37. Single Activity Sequenced Activity
Photo: flickr.com/photos/toffee_maky/7928636400 Photo: Stefan Freimark

38. Photo: flickr.com/photos/toffee_maky/7928636400
Single Activity

39. Single Activity
Photo: flickr.com/photos/toffee_maky/7928636400
Examples include reading a book,
watching a movie or writing a
document.
These activities typically span a
longer time period and might occur in
different contexts – the activity itself
doesn‘t change, though.

40. Amazon Kindle
SingleActivity: Reading
Photo: Stefan Freimark

41. Handoff/Continuity on OS X and iOS
SingleActivity, e.g. Reading
Photo: Stefan Freimark

42. Single Activity: Drawing a diagram
42
OmniGraffle (and syncing with OmniPresence)
Photo: omnigroup.com/omnigraffle
© The Omni Group. Reproduced by permission of the Omni Group.

43. Continuous
vs. Consistent?

44. Sequenced Activity
Photo: Stefan Freimark

45. Sequenced Activity
Photo: Stefan Freimark
Some activities consist of multiple
tasks (sequences).
The lengthier the activity, the more
likely it is that...
§ it won’t be completed in a single
engagement (=multiple sessions)
§ the contextual environment will
change (=shifting contexts)
§ it can be broken down into a set of
granular subtasks

46. Eventbrite
Continuous (Sequenced activity flow)

47. Continuous design enables
us to rethink user flows we
might have taken for granted.

48. How can we expand the
Eventbrite example? Which
features support user needs,
while users progress through
time?

49. 49
pre-
event
Finding events
Exploring
event info
Registering for
an event
Choosing sessions
Agenda-
centered
People-
centered
Sharing event
with peers
Reviewing
attendee list
Noting people
to meet

50. Arriving
at the
venue
Checking the
event schedule
Getting to the
event on time
§ Transportation
§ Directions
§ Parking
Checking in
Getting coffee
to start the day
Determining
who’s here
Anyone I already
know?
Any of the
people I noted?
People-centered
Agenda-centered

51. During
event
Checking event
schedule
Exploring
events info
Attending sessions
§ When, where, and how to
get there
§ Session and speaker info
People-centered
Agenda-centered
Taking breaks
§ Options (cafeterias,
roof terrace)
§ Time left until breaks
§ “break about to end” alerts
Attending social events
§ What, when, where
§ How to get there
Making new
connections
§ Meeting new people,
especially those I want to
talk with
§ Catching up with people I
already know
§ Exchanging business
cards
Attending sessions/
social events
§ Who’s going?
§ Conversation starters
(e.g. common interests,
background, recent articles
published)

52. post-
eventPeople-centered
Agenda-centered
Organizing event
materials
§ Slides
§ Videos
§ Books
Posting photos/videos
from the event
Preparing a review
for colleagues
Following up with
people

53. The trained eye recognizes a
customer journey. :-)

54. Complementary

55. Different devices complement
each other – either by collab-
orating as a connected group,
or controlling one another.

56. 56
Collaboration
Devices work as a
connected group
Control
A device controlling
another device
Must have Scrabble Party Play Hexler TouchOSC
Nice to have Companion apps for
second screen
Companion apps
for digital cameras
Different devices complement one another – as
a connected group or controlling one another.
Participating devices are
an integral part of the
experience.
An added device can
deepen the UX, but isn’t
essential to accomplish
the fundamental task.

57. Scrabble Party Play
Collaboration (must have)
Photo: flickr.com/photos/lokesh/4649807115

58. Companion apps for second screen usage
Collaboration (nice to have)
Photo: de.wikipedia.org/wiki/Datei:Secondscreen_wettendass_Ipad-app.jpg

59. Hexler TouchOSC
Control (must have)
Video: youtube.com/watch?v=4v_Eb2j0vZ8

60. Companion apps for digital cameras
Control (nice to have)
60Photo: Wolfgang Freimark

61. 61
Collaboration
Devices work as a connected
group
Control
A device controlling another device
Must have Scrabble Party Play
Complementary to own software
Hexler TouchOSC
Complementary to products by other
vendors
Nice to have Companion apps for second screen
Complementary to own service
Companion apps for digital cameras
Complementary to own hardware
Different devices complement one another – as
a connected group or controlling one another.

62. Beyond the core
devices

63. Photo: shutterstock.com/pic-257990591

64. „It feels like a watch in the
physical sense.
However it does not feel like
a watch conceptually.
Horace Dediu
asymco.com/2015/04/14/the-watch/

65. „The question is whether the
Watch will quickly leave
behind its timekeeping
anchor and move into being
something completely
different.
Horace Dediu
asymco.com/2015/04/14/the-watch/

66. Photo: shutterstock.com/pic-257990591
Single-device scenarios
§ Information access
o location-unaware
o location-based
§ Notifications
o „FYI“, e.g. time-based reminders
o actionable
§ Getting physical access
§ Navigation
§ Special use cases
o Cab hailing
o ...
Multi-device scenarios
§ Consistent
§ Continuous
o Single Activity Flow
o Sequenced Activity Flow
§ Complementary
o Collaboration
o Control

67. Single-device scenarios
WebMD YelpKomoot

68. Babbel OmniFocus
Multi-device scenarios
Consistent
68Yelp

69. Multi-device scenarios
Yelp
Continuous (Single activity flow)

70. Multi-device scenarios
Airberlin
Continuous (Sequenced activity flow)

71. Multi-device scenarios
Complementary (Control)
Photo: flickr.com/photos/mycutelife/4734441769

72. Photo: shutterstock.com/pic-257990591
Single-device scenarios
§ Information access
o location-unaware
o location-based
§ Notifications
o „FYI“, e.g. time-based reminders
o actionable
§ Getting physical access
§ Navigation
§ Special use cases
o Cab hailing
o ...
Multi-device scenarios
§ Consistent
§ Continuous
o Single Activity Flow
o Sequenced Activity Flow
§ Complementary
o Collaboration
o Control

73. Cooperations enable
integration of services with
„new“ devices (like cars).
Or services among each other.

74. Volvo + Spotify
Photo: media.volvocars.com/global/en-gb/media/photos/48255
© Volvo Car Group, Public Affairs, SE-405 31 Gothenburg. Used with permission.

75. Uber + Spotify
75
Bei der Vernetzung von Services spielen
die Geräte eine Nebenrolle.
Photo: flickr.com/photos/cote/15788947118

76. All devices able to connect
(via Bluetooth, WiFi, LTE,
NFC...) can be part of the
Internet of Things.

77. Smart Keys
77Photo: flickr.com/photos/walkn/3041590472
Bluetooth tags enable findability, e.g. by Elgato or Tile

78. August Smart Lock
Photo: august.com/press.html
© August Home, Inc. Used with permission.

79. Zepp
Photo: flickr.com/photos/trysil/5865597031

80. Deutsche Telekom + Canyon
Photo: flickr.com/photos/kevinshine/10082788546

81. 81

82. How to

83. Don‘t start by asking questions like...
§ How can our brand be present on device XYZ?
§ Responsive Webdesign or Adaptive Templates?
§ Mobile first?
§ What‘s technically feasible?
§ Consistent, Continuous, Complementary?
83

84. These questions have a place
in the design process, but they
shouldn‘t be the ones driving
the decision making.

85. Start by asking basic questions
§ What are the user‘s needs and goals that this product ecosystem
tries to address?
§ What are the main flows and use contexts?
Then: Which experience approaches can best accomodate these
needs within each flow?
85

86. 86

87. Think customer journey.
87
pre-
event
Arriving
at the
venue
During
event
post-
event

88. „The best multi-device
experiences are those that
first look at people and what
they need rather than
focusing on technology and
what it can do.
Michal Levin

89. Do what makes sense.
Nobody needs Nike+ on a
washing machine.

90. Conclusion

91. 91
Overview of Michal Levin‘s 3C framework
Consistent Continuous Complementary
The same content and features are
available on multiple devices.
Continuous design addresses a user
flow that runs along a set of con texts,
during which devices “pass the baton” to
one another.
Different devices complement one
another – either by collaborating as a
connected group, controlling one
another, or both.
§ Single Activity Flow
§ Sequenced Activity Flow
Event example:
o Agenda-centered
o People-centered
§ Collaboration
o Must have
o Nice to have
§ Control
o Must have
o Nice to have

92. § Single-device design is history
§ There‘s more than one way to approach multi-device experiences
§ Start with user needs
o Do your research
o Think in customer journeys
o Think in use cases
§ Know the capabilities and limitations of each device class and
platform – both technically and conceptually
92
Take away points

93. Michal Levin
O’Reilly, 2014

94. Two more chapters cover additional topics.
§ Multi-Device Analytics
§ Transforming Challenges
94

95. The book contains food for thought throughout.
21 Design Lessons, e.g.:
§ Continuous experience can start
offline
§ QR supports continuity; AR provides
a complementary experience
§ The complexity and trade-offs
behind the freedom “to do anything”
14 Discussions, e.g.:
§ Educating for Continuity
§ Designing for Beginner vs.
Advanced Users
§ The Battery-Life Challenge
§ Multi-Device Experiences in the
Service of Health
95

96. Further reading
96
November 2014 May 2015December 2014

97. Buy Michal‘s book!
Read her book!
Start with user needs!

98. :-)
Stefan Freimark Senior UX Consultant
E-Mail stefan.freimark@aperto.de
Slideshare slideshare.net/sfreimark
Twitter @freimark
Aperto AG – In der Pianofabrik
Chausseestr. 5
10115 Berlin
www.aperto.de

99. Backup

100. 100
slideshare.net/sfreimark/mental-models-nur-folien slideshare.net/chrisdudeberlin/the-experience-is-the-
message-creating-unique-airline-brand-experiences
mappingexperiences.com
Learn more about customer journeys

101. Image credits

102. This presentation is licensed under CC BY. You may present it in its
entirety, or use parts or ideas for your own talks.
Please be aware that the copyright for the template is at Aperto AG.
Please be aware that images used within this presentation do not
inherit the CC BY license of the presentation. Although some images
are licensed under CC BY, others are licensed under CC BY-SA,
and some are copyrighted and not free to use.
102
Licenses

103. Book covers
103
© O’Reilly Media, Inc.
Cover designer: Randy Comer
oreilly.com/catalog/9781449371241
Cover designer: Ellie Volckhausen
oreilly.com/catalog/0636920030676
Cover designer: Ellie Volkhausen
oreilly.com/catalog/0636920024651
Cover designer: (unknown)
oreilly.com/catalog/0636920031109

104. Shutterstock pictures
104
© by Shutterstock photographers
Dean Drobot
www.shutterstock.com/pic-154488353
Licensed by Stefan Freimark
Eugenio Marongiu
www.shutterstock.com/pic-173451509
Licensed by Stefan Freimark
guteksk7
www.shutterstock.com/pic-257990591
Licensed by Stefan Freimark
manaemedia
www.shutterstock.com/pic-135544436
Licensed by Stefan Freimark
nexus 7
www.shutterstock.com/pic-251428303
Licensed by Stefan Freimark
Twin Design
www.shutterstock.com/pic-206326831
Licensed by Stefan Freimark

105. Flickr images
105
b
Perin J-C
www.flickr.com/photos/
114382574@N05/12221680395
BY 2.0
John Benson
www.flickr.com/photos/j_benson/7296569144
BY 2.0
Gabriela Pinto
www.flickr.com/photos/
gabrielap93/6074460669
BY 2.0
Alexander Kaiser
www.flickr.com/photos/poolie/2433764292
BY 2.0
Lokesh Dhakar
www.flickr.com/photos/lokesh/4649807115
BY 2.0
Elmo Love
www.flickr.com/photos/mycutelife/4734441769
BY 2.0
License information: www.creativecommons.org/licenses/by/2.0

106. Flickr images
106
b
Michael Coté
Screenshot of Uber app
www.flickr.com/photos/cote/15788947118
BY 2.0
walknboston
www.flickr.com/photos/walkn/3041590472
BY 2.0
Trysil
www.flickr.com/photos/trysil/5865597031
BY 2.0
kev-shine
flickr.com/photos/kevinshine/10082788546
BY 2.0
License information: www.creativecommons.org/licenses/by/2.0

107. Flickr images
107
ba
smoothgroover22
www.flickr.com/photos/
smoothgroover22/13145117175
BY-SA 2.0
Robert Basic
www.flickr.com/photos/robgreen/11211153914
BY-SA 2.0
Quinn Dombrowski
www.flickr.com/photos/quinnanya/
5892760393
BY-SA 2.0
Marketa
www.flickr.com/photos/toffee_maky/
7928636400
BY-SA 2.0
pr_ip Primus Inter Pares
http://de.wikipedia.org/wiki/
Datei:Secondscreen_wettendass_Ipad-
app.jpg
BY-SA 2.0
License information: www.creativecommons.org/licenses/by-sa/2.0

108. Press images and miscellaneous images
108
© Miscellaneous photographers/artists
Unknown photographer
Image of Michal Levin provided by
Michal Levin. Used with permission.
Volvo Car Group, Public Affairs, SE-405 31
Gothenburg
media.volvocars.com/global/en-gb/media/
photos/48255
Used with permission.
August Home, Inc.
www.august.com/press.html
Used with permission.
Jesse James Garrett
www.jjg.net/elements/pdf/elements.pdf

109. Screenshots
109
Screenshots made by Stefan Freimark, © by respective rights holders
Miles & More GmbH
www.miles-and-more.com
Asklepios Kliniken GmbH
www.asklepios.de/hamburg/harburg/
Trello website and app, displaying board
of UXcamp Europe planning team
trello.com, uxcampeurope.org
Omni Development, Inc. (OmniGraffle app)
www.omnigroup.com/omnigraffle
Reproduced by permission of the Omni
Group.
Eventbrite website and app, displaying a
ticket for UXcamp Europe
eventbrite.com, uxcampeurope.org
sawrecordings1
www.youtube.com/watch?v=4v_Eb2j0vZ8
Video directed by Terry Church

110. Screenshots
110
Screenshots made by Stefan Freimark, © by respective rights holders
Olympus K.K.
Screenshot of companion app „Image share“,
made by Wolfgang Freimark
www.olympus.com
Air Berlin PLC & Co. Luftverkehrs KG
www.airberlin.com
Smart Fabrics & Wearable Technology
2015 (conference website)
www.smartfabricsconference.com

111. Screenshot of Apple Watch apps
111
Screenshots and press images © by respective rights holders
WebMD, LLC.
www.webmd.com
Publicly available press
image.
Komoot GmbH
www.komoot.de
Used with permission.
Yelp, Inc.
www.yelp.com
Used with permission.
Lesson Nine GmbH
www.babbel.com
Used with permission.
Omni Development,
Inc.
www.omnigroup.com
Used with permission.
Air Berlin PLC & Co.
Luftverkehrs KG
www.airberlin.com
Used with permission.

112. Photos by Stefan Freimark
112
© Stefan Freimark
Stefan Freimark
Aperto business card
Stefan Freimark
Apple Watch at Apple Store Kurfürstendamm
Stefan Freimark
Amazon Kindle Paperwhite
Stefan Freimark
iPad mini Retina with Instapaper app icon
Stefan Freimark
UXcamp Europe 2014, session by Jason
Mesut