1.
Designing
Connected
Products
With thanks to Claire Rowland

2.
2
Hello
I’m a freelance designer,
a co-author and a co-founder.
rain cloud
method.com raincloud.eu senseye.io iotacademy.org designingconnectedproducts.com

3.
3
Connected products
Things we’ll see more of

4.
4
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem

5.
5
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem

6.
6
Product evolution
Electricity
as enhancement.

7.
7
Product evolution
Connectedness
as enhancement.

8.
8
Product evolution
Connectedness
as enhancement.

9.
9
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem

10.
10
Freemium, advertising-funded, monetising user data
Advertising or data funded products.

11.
11
Pay-per-use & Micropayments
1 LATTE (GR.)
@ 3,60 3.60
1 SEAT OCCUPATION
42 MINS 0,50
Dynamic pricing

12.
12
Pay-per-use & Micropayments
Dynamic pricing

13.
13
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem

14.
14
onefinestay.com
Home rental site that
develops a connected lock

15.
15
Nespreso Zenius with cellular connectivity
Nespresso is a coffee service that
happens to make devices.

16.
16
New kinds of products
Amazon Echo
Physical context Entire home
Amazon Dash Amazon Dash Button
Kitchen Device
Conceptual context Anything Groceries & consumables Specific item
Interface Voice Voice & physical Physical

17.
17
New user experience model
Smartphone model
1. Find/pick up device
Start the computer
2.Unlock & login
3.Launch app or browser
Login
Navigate bloated website
4.Tell it what product
5.Add to basket
Connected product model
1. Find/pick up device
Start the computer
Unlock & login
Launch app or browser
Login
Navigate bloated website
2.Tell it what product
Add to basket
2000s 2010s Next
Desktop model
1. Find/pick up device
2.Start the computer
3.Unlock & login
4.Launch app or browser
5.Login
6.Navigate bloated website
7.Tell it what product
8.Add to basket

18.
18
New user experience model
Services and features will
dissolve into the environment.

19.
19
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem

20.
20
Device ecosystem plays
This is a way to make this better.
But it needs to stand on its own as well.

21.
21
Device ecosystem plays
The battery as delivery mechanism

22.
22
Design for IoT
What’s this to do with design?

23.
23
It’s not just UX and industrial design.

24.
24
Designing Connected Products
Technology of connectivity
Product & service definition & strategy
Design methods for connected products
Industrial design & Interface types
Prototyping methods
Cross-device interactions
Responsible IoT design
Designing with data

25.
Value
proposition
Conceptual
model
Interaction
model
25
Design is key in every aspect of connected products
What does it do? How does it work? How do I use it?
Images: Instructables, How It Works Daily

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

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

28.
28
Mass market consumers want products, not tools.
Product Tool

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

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

31.
31
Newspaper article
Image: Dan Hill
Press release Sketch the box /
Sketch the 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?

32.
32
Conceptual model
How does it work?

33.
33
Non-connected products are conceptually quite simple.

34.
34
Connected products are more complex.

35.
35
Connected products are more complex.
Connectedness
means users have
to think about
system models.

36.
36
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

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

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

39.
39
Amazon methodology
Press release FAQ
Amazon product development: http://www.quora.com/What-is-Amazons-approach-to-product-development-and-product-management/answer/Ian-McAllister
More on Amazon: http://brendansterne.com/2013/11/21/amazon-product-management-working-backwards/
Development

40.
40
Interaction model
How do I use it?

41.
41
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

42.
42
Interusability
Composition
Consistency
Continuity

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

44.
44
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.
Smartphone Dependent on smartphone for full
functionality.
Independent from smartphone.

45.
45
Interusability
Composition
Consistency
Continuity

46.
46
Consistency is a two-way street.
One one hand:
Platform conventions
On the other:
Consistency across
your touch points
Android: Contextual menu
iOS: Separate screen

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

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

49.
49
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.

50.
50
Interusability
Composition
Consistency
Continuity

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

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

53.
53
Has my action been executed?
Delays &
interruptions
mean there is
a third state
between on
and off.

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

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

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

57.
57
Conversational UI
An elegant solution:
Conversational UIs.

58.
58
Prototyping
Build the right product before
you build the product right.

59.
59
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

60.
60
I don’t mean
this stuff

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

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

63.
63
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

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

65.
65
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

66.
66
A closing thought
Credit: Adam Crickett

67.
67
Error proof power tools

68.
68
“Guided cooking for guaranteed success”

69.
69
Reducing “time to destination”

70.
70
Smart vending machine

71.
71
Design responsibility
The values that drive connected products
will pervade our everyday:
Our power tools, our food processors,
our elevators and our vending machines…

72.
72
Design responsibility
We need to think about what these values
are, and not forget about the whimsical,
the inefficient, the serendipitous, the
beautiful.

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