Workshop on designing for consumer IoT, covering value, designing the system UX/interusability, and handling network issues such as latency/reliability and intermittent connections.

1. Designing Connected Products
Value, system UX and interusability
UXLX 2015
Claire Rowland - @clurr
(with thanks to Martin Charlier and Liz Goodman) Image: Disney Movie Year

2. Hello :)

3. My grandfather could probably have told you how many electric
motors he owned. There was one in the car, one in the fridge, one
in his drill and so on.
My father, when I was a child, might have struggled to list all the
motors he owned (how many, exactly, are in a car?) but could have
told you how many devices were in the house that had a chip in.
Today, I have no idea how many devices I own with a chip, but I
could tell you how many have a network connection. And I doubt
my children will know that, in their turn.
Benedict Evans
http://ben-evans.com/benedictevans/2014/5/26/the-internet-of-things

4. What examples spring
to mind when you think
of connected products?
?

5. Images: Withings, Made by Many, ecobee, Pod, Philips, Streetline, Evrythng/Diageo, Lockitron, Proteus
Consumer

6. Images: Emmett Tullos, Bigbelly, Smart Structures,Wikicommons, PowerOasis, OnFarm, GROUND Lab
Industrial

7. Visions of IoT often look like this
http://www.digitaltrends.com/home/heck-internet-things-dont-yet/

8. …but the reality can be more like this
‘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

9. It’s not just UI and industrial design

10. Facets of IoT UX

11. Image: Nissim Farim
We don’t (yet)
expect Things to
behave like the
Internet
The average consumer is
going to find it very strange
when objects take time to
respond, or lose instructions.

12. IoT is a big topic
- Non-consumer products
- Hardware prototyping
- Industrial design
- Technology issues
- Interoperability
- Responsible design
- Service design
- Designing with data
- Complex systems…
Many things we haven’t time to
cover:
Michael Dumontier & Neil Farber, Inc. Everything All At The Same Time, 2014, via richardhellergallery.com

13. Today is about getting a flavour of
some of the challenges closest to
UX
- Focus on value and system UX
- Explore a couple of low-fi UX
prototyping methods for
cross-platform/system design

14. Value propositions, or solving a tangible problem:
What does it do?

15. 3 part diagram:
Value
proposition
Conceptual
model
Interaction
model
What does it do? How does it work? How do I use it?
Image: Instructables Image: How It Works Daily

16. Mass market
products should
- Solve a real problem people
have (value)
- Offer a good solution
(desirable, usable)
- Come at a cost (financial,
effort) that feels in proportion
to the value

17. Are we connecting
some things just
because we can?
Image: Vessyl

18. Product Tool
In areas where they don’t have expert knowledge or are short on time
consumers need products, not tools

19. Nest do productisation really well

20. Belkin’s mobile app is good, but
a connected socket is a tool
that requires users to solve
their own problems

21. This is a product

22. Prototyping method: Media from the Future
Exploring why, what and how

23. e.g. Newspaper article
Questions
- Can this service, idea or
product be plausibly conveyed?
- Are we able to convey the idea
in simple terms?
Credit: Dan Hill

24. e.g. Press release
- Forces you to clearly and
simply convey the value and
why anyone should care.
- Can be iterated quickly.
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/

25. E.g. design the box/advert
http://www.gamestorming.com/games-for-design/design-the-box/
The Brand Gap - http://www.slideshare.net/OrlandoKen/the-brand-gap-by-marty

26. Design the box:
The WiFi connected oven
Discuss:
-What’s the value in connecting an oven?
-Who’s it for? (it doesn’t have to be for everybody)
-What do they need?
-What’s the context of use?
-What should the value proposition be?
-Identify 2 killer features/scenarios
Then design the box!
20 mins!
Image: Frog Design

27. Conceptual model and composition
How does it work? Which bit does
what?

28. Composition:
Distribute functionality to suit the context of use
(Nearly) all interactions via phone app Interactions mirrored on phone and
thermostat
Image: Tado Images: British Gas

29. App vs device?
Product images: BlueSpray, skydrop

30. Device UIs
Images: Martin Charlier, Dacor, Amazon, MIT, Nest, Ambient Devices

31. On-device controls
- Users may expect on-
device controls
- Hard to modify later
- More expensive
- Physical controls are more
accessible than smooth
touchscreens
- Easier to iterate
- Cheaper to develop
- Phone/web UI enables
use of accessibility tools
- User may not always have
phone/web access
Web/app controls

32. Connectivity is a factor in determining
where functions ‘run’
What will still work, or
stop working, if the
internet connection
goes down?

33. Prototyping method: Storyboards
How the system works in context

34. Storyboards
Credit: Deb Aoki Credit: Robert André

35. Storyboard: your two killer features,
in use
Discuss:
-Which things will the user do on the phone?
-Which will they do on the oven?
-Which will they do on both?
Storyboard your two key interactions to show your two
killer features being used, in context
20 mins!

36. Interusability
Designing for multiple UIs
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

37. “Users should not have to worry
whether different words,
situations or actions mean the
same thing. Follow platform
conventions.”
- Words, data and actions
- Aesthetic/visual design
- Interaction architecture: how
functionality is organised
- Interaction logic: how tasks
are structured, the types of
control used
http://www.nngroup.com/articles/ten-usability-heuristics/
Consistency

38. Consistency != making everything the
same
This:
“Users should not have to worry
whether different words,
situations or actions mean the
same thing.“
…may be in tension with
this:
“Follow platform conventions.” Image: Made by Many

39. Top priority: terminology
However different the UIs, identical
functions must have the same name
Images: British Gas

40. Follow device platform conventions…
- …
Android contextual menu iOS separate screen
Images: Spotify

41. - e.g. Nest
A touchscreen does not need
a fake bezel
A thermostat does not have to
pretend to be an iPhone
Images: Nest
…be true to the device

42. Aesthetic styling
“Click”
Nest use visual and audio cues to tie the thermostat and phone app
together
Images: Nest

43. Interaction architecture need not be the
same
- The logical structure of UI
features and controls is
likely to be platform
dependent
- Different features may be
prioritised on different
devices
- Devices with limited UIs
may need deeper
hierarchies Legacy hardware UIs may be less than ideal
(e.g. confusing modes) but that need not
restrict other device UIs

44. Prototyping method: Experience prototyping
How the system works in context

45. Paper prototypes and enactment
Credit: D-LABS
- Not just functionality… but
what is it like to use the
product?
- Act out interactivity…
someone can be the
devices/products

46. Wizard of Oz
- Not just functionality… but
what is it like to use the
product?
Credit: Ericsson Labs, Marcus Nyberg
- A (hidden) human plays the role of the system or technology.
- The user can experience and react to a product concept even
though its technology is unproven.
User experiencing the prototype. Behind the scenes triggering based
on user action.

47. Prototype: the oven and app UIs
Split team into two
- Half are responsible for the app design
- Half are responsible for the oven controls
- How you collaborate is up to you
Prototype the UIs to support your key interactions.
- Think about consistency across the UIs… what should/
should not be consistent?
- Don’t just draw UIs… act out interactions
30 mins!Image: Alfred Lui

48. Continuity
Designing for the spaces between
devices

49. Continuity
- The flow of interactions and
data in a coherent sequence
across devices
- Continuity helps the user feel as
if they are interacting with the
service, not a bunch of separate
devices
Image: Kei Noguchi via CC licence

50. Continuity is not always about
seamlessness… it often means handling
interstitial states gracefully
Some technical context:
- Some IoT devices have batteries and only connect intermittently
to conserve power. In conventional UX we assume devices are
mostly connected, but many IoT devices may spend more time
offline
- Networks are subject to latency (esp. the internet) and reliability
issues. People have mental models that help them understand
this online, but delays and failures might feel strange in physical
objects
Image: New Wave DV

51. Latency and reliability
BERG Cloudwash prototype
Interactions won’t always be smooth and immediate

52. We expect
switches to work
like this
- The switch both confirms the
user action and shows the
state of the lamp
- But in reality, latency and
reliability issues mean this
can’t be guaranteed over a
network
- The user can’t tell whether
their action has been
executed or whether it’s in
progress

53. Option 1:
the white lie
Confirm action, backpedal if
something goes wrong

54. Instagram do this
The photo is already shown as
‘liked’, even though the
instruction is still being sent

55. Option 2:
be transparent
- Acknowledge action, show
that it is in progress
- Confirm only once it’s done

56. WeMo Switch does this subtly

57. Lowes Iris is more explicit
Images: Lowes

58. And here’s another challenge…
If you’ve used physical controls that represent state, how do they
reflect changes made via the digital UI?

59. You may need to use different types of
physical control
Conventional dimmer Connected dimmer
…ones that don’t reflect state, or can
be updated digitally with motors or
displays

60. Intermittent connections can be an issue
19
2 min delay
21
When some devices that only check into the network occasionally,
there may be conflicting information about the status of the
system. Data/actions may need to be timestamped.

61. Safety critical/urgent
Messages must get through quickly
Status information needs to be updated
frequently, and clearly indicate how old it
is
Need to know when instructions have
been received and acted upon
Low touch/non-critical:
Assume it’s working unless notified of
a problem
OK if data or instructions take time to
get through (as long as they are
timestamped)
Senior safety/intruder alarm
Energy monitorLightingBaby monitor
The ‘right’ approach depends on context
Images: MyLively, Efergy

62. Prototyping method: Experience prototyping
Designing for continuity

63. - Your oven has mains power, so it can connect over WiFi
Let’s assume…
- There will still be times when the home internet is
temporarily down, or the user’s phone loses connectivity.
- Instructions may sometimes take a few seconds to get
through, or occasionally go missing
…but…

64. Exercise
Discuss:
- What’s the impact of losing connectivity? Is it merely frustrating
for the user, or might there be other problems (e.g. safety)?
- How will you handle minor delays and failures?
- Do the physical controls you have chosen still work when the user
changes something on the phone UI?
Revisit your prototype and make any design changes needed to
improve the experience of continuity
20 mins!Image: Matt Biddulph

65. 2 mins per team
Share your concepts

66. Thank you
@clurr
claire@clairerowland.com
www.designingconnectedproducts.com