Slides from my talk at IoT Meetup Stockholm about the book Designing Connected Products - UX for the consumer Internet of Thigns. This talk discussed how design is different when it comes to connected products. Thanks to Claire Rowland, this talk builds on her recent talks and chapters in the book.

1. How is design for IoT different?
October 2015
Designing Connected Products
Thanks to: Claire Rowland

2. 2
I’m Martin.
I’m a freelance designer,
co-author and co-founder.
marcharlier ltd.

3. 3
Superflux / IoT Academy
A platform for
IoT community
projects

4. 4rain cloud

5. 5
Some of the contents…
What’s different about UX for IoT?
Technology of connectivity
Product & service definition & strategy
Design methods for connected products
Industrial design & Interface types
Prototyping
Cross-device interactions
Responsible IoT design
Designing with data

6. 6
It’s not just UI and ID
There are many
areas design needs
to address when it
comes to connected
products.

7. Value
proposition
Conceptual
model
Interaction
model
7
From value prop to interaction model
What does it do? How does it work? How do I use it?
Images: Instructables, How It Works Daily

8. 8
Productisation
What does it do?
Why would I want it?

9. 9
What is your product doing better?
Electricity
as enhancement.

10. 10
What is your product doing better?
Connectedness
as enhancement.

11. 11
Are you building a product or a tool?
Product Tool

12. 12
A products solves a specific problem.
Nest don’t talk
about connectivity,
just about how it is
a better smoke
alarm.

13. 13
A tool puts the onus on the user
A connected socket
requires the user to
solve their own
problem.

14. 14
A niche example from Belkin Wemo
This is a product.
- Clear benefit
- Focussed context

15. 15
Design methods
Design can help
develop and focus
the value proposition
early on.

16. 16
Newspaper article
Credit: Dan Hill
Press release Sketch-the-box /
sketch an advert
• Can this service, idea or
product be plausibly
conveyed?
• Are we able to convey the
idea in simple terms?
• Forces you to clearly and
simply convey the value and
why anyone should care.
• Can be iterated quickly.
• Why should people care?
• How do you persuade them?
• How can you proof your
claims?

17. 17
Conceptual model
How does it work?

18. 18
Non-connected products are conceptually quite simple.
Image: Rebecca Demarest

19. 19
Connected products are more complex.
Image: Rebecca Demarest

20. 20
Connected products are more complex.
Connectedness
means users have
to think about
system models.
Images: Rebecca Demarest

21. 21
Extra stuff to think about
Connects via your WiFi
No hub
Connects via ZigBee
Comes with a hub
Connects via ZigBee
Requires a hub, but
doesn’t come with one

22. 22
Explaining the system model
Images: Lowes, Apple
You might need
to explain your
system model.

23. 23
Explaining the system model
Or develop a
really good way
to simplify it.

24. 24
Interaction model
How do I use it?

25. 25
Interusability
Cross-Platform Service User Experience: A Field Study and an Initial Framework. Minna Wäljas, Katarina Segerståhl, Kaisa
Väänänen-Vainio-Mattila, Harri Oinas-Kukkonen MobileHCI’10: http://bugi.oulu.fi/~ksegerst/publications/p219-waljas.pdf

26. 26
Interusability
Composition
Consistency
Continuity

27. 27
A tale of two thermostats…
Images: Tado, British Gas
Subset of functions on device, full set in app. Mirrored functions across device & app.

28. 28
A tale of two thermostats…
Images: Tado, British Gas
Subset of functions on device, full set in app. Mirrored functions across device & app.
Hardware Simpler & cheaper to design & make. More expensive due to UI.
Iteration &
updates
Quick and easy to iterate the product,
app stores, developer community.
Can be tricky. Firmware updates,
physical controls.
User identity Smartphone can act as proxy for user
identification - analytics.
Everyone can use the thermostat, but
less easy to learn about users.
Smartphone Requires charged & connected
smartphone.
Works independent from smartphone.

29. 29
Interusability
Composition
Consistency
Continuity

30. 30
Consistency is a two-way street.
One one hand:
Platform conventions
On the other:
System consistency
Android: Contextual menu
iOS: Separate screen

31. 31
Top priority: terminology
However different the UIs,
identical functions or
settings must have the
same name.
Consistent use
of terminology

32. 32
Consistency
Secondary colour
Typeface,
terminology,
accent colour
Accent colour
CMF
Paper insert as a means to
delay decision making.
This is hard across physical/digital
development timelines.

33. 33
Consistency is a two-way street.
Platform
conventions
vs.
System
consistency
Rotate bezelTap up/down arrows
“Click”

34. 34
Interusability
Composition
Consistency
Continuity

35. Image: Kei Noguchi via CC licence 35
Continuity
Coherent flow of
interactions and
data across
devices.

36. 36
Hard because:
1. Latency and reliability of the
network.
2. Battery powered devices that
only connect intermittently.

37. 37
Hard because:
1. Latency and reliability of the
network.
2. Battery powered devices that
only connect intermittently.

38. 38
Reliability
‘It’s a bit glitchy but it’s OK, you
just have to be in the room at
the same time’.
Actual review of a connected home system

39. 39
Has my action been executed?
Delays &
interruptions
mean there is
a third state
between on
and off.
Image: Rebecca Demarest

40. 40
Option 1
A little white lie to
make it feel
smooth.
Showing the action as executed
before it really has.

41. 41
Option 2
Transparency at
the expense of a
more complex UI
flow.
Communicating what is actually
happening.
On
In progress
Off

42. 42
Option 2
Transparency at
the expense of a
more complex UI
flow.
Communicating what is actually
happening.
Connected
In progress
Done

43. 43
Hard because:
1. Latency and reliability of the
network.
2. Battery powered devices that
only connect intermittently.

44. 44
Intermittent connectivity
19
2 min delay
21
UIs might need
timestamped
data because
they may be
out-of-sync.

45. 45
Prototyping
Low Fi prototyping

46. 46
Experience prototyping
Video is a great tool
to prototype and
explore connected
products.
Useful prototyping techniques:
Media from the future
Storyboards
Physical props
Wizard of Oz
Video prototyping

47. 47
These are NOT video prototypes.
(These are concept videos…)

48. 48
30 minute prototype for a connected herb garden sensor.

49. 49
Sketch-A-Move: Slightly more elaborate. Both a demonstration and an exploration.
http://www.superflux.in/work/sketch-move

50. 50
Sketch-A-Move: Behind the scenes
http://www.superflux.in/work/sketch-move
Capture imagination and inspire the team
Matthias Kranz, et. al http://www.eislab.fim.uni-passau.de/files/
publications/2006/SketchAMove_preprint.pdf

51. 51
Stills compositions with narration
More info: http://www.cooper.com/journal/2008/12/economizer

52. 52
A storyboard or video prototype can guide the tech requirements
More info: http://www.cooper.com/journal/2008/12/economizer
Technology
requirements
Technology
requirements
Technology
requirements
Technology
requirements

53. 53
Complex systems
It gets complex very quickly.

54. 54
Interoperability
Every connected
device will connect
to multiple systems
and services.
New connected light
bulb.
Connect to:
• Lighting system?
• Security system?
• Both?

55. 55
Interoperability
alarm video
lighting heating
temp.schedule
security
Image: Claire Rowland

56. 56
Interoperability
alarm videotemp.schedule
schedule
security
controls
lighting baby appliancessafety
energy
smoke medicine
controls
heating
Image: Claire Rowland

57. 57
Interoperability
Designers will
need to help users
(and the industry)
make sense of
complex systems.
Services
Devices
Device groups
Locations
Time
User location & activities
…

58. 58
A word of caution

59. 59
Error proof power tools

60. 60
“Guided cooking for guaranteed success”

61. 61
Reducing “time to destination”

62. 62
Smart vending machine

63. 63
Design responsibility
Connected products will reach
far deeper into our everyday
lives than anything before.
We should be careful what
values drive them.

64. 64
Thank you!
@marcharlier
m@marcharlier.com
www.designingconnectedproducts.com
Use code AUTHD for 50% off ebook/
40% off print at shop.oreilly.com