The document provides guidance on designing connected products and summarizes key learnings from designing IoT products. It discusses shifts from physical to digital and back again with the rise of IoT. It emphasizes the importance of user experience for IoT, which requires a different skillset than web UX. Multidisciplinary teams are needed that include experts in human factors, business, digital tech, and physical tech. Early prototyping and user testing on location is also recommended to validate assumptions before large investments are made.

1. Things we learned
Designing connected products
Koen van Niekerk, VanBerlo

2. © Henning Wagenbreth

3. Shift From physical to digital....
Physical stuff you used to
carry around gets their
Digital counterpart on your
Smartphone…

4. Shift And partly back to physical again…....
With the rise of IOT, physical
objects get a new sense of
desirability by enhancing
them with digital capabilities
…

5. You’re probably not the first
But make sure you’re better
5
Gartner Says 6.4 Billion Connected "Things" Will Be in Use in 2016, Up 30 Percent From 2015.
There’s devices for your elderly parents, your pets, your plants, your home, your health and your
love life. Don’t obsess over being the first, but make sure you’re better. And the best way to do
that is to obsess over user experience

6. 6

7. Product UX = Web UX
Goals & results, not content & conversion
7
Your web/marcom UX skills do not directly translate to the IOT. Product UX is about goals and
results, not about content and conversion. IOT requires a different skill set for UX designers.
Some examples are found on the next slide...

8. Web UX Product/service UX
Goal Sell, convert, communicate Reach a goal, do a job
Drive Content Task/goal
Involvement Before moment of sales After moment of sales
Deep knowledge Psychology of sales & conversion Daily use of product
Knowledge leverage Web standards, Frameworks, Templates Research methodology, mindset, no templates
Experience focus A good feeling about the product/service Added value (new capabilities, time saving)
Data input Quantitative, Market data Qualitative, interviews, observations
Validation Metrics, A-B testing User testing
Context Mobile or Desktop Anything (coffeemachine to car HUD)
Analogy Show the customer what´s on the menu To help a user Cook a dish
Example Corporate website, theater site, webshop TomTom, Phone operating system, self check-in system
Majority of IOT projects benefit more
from product/service UX skills

9. You don’t have a Google budget
So make sure you make it count
9
You probably heard of Lean and Agile Philosophies. Decide on an MVP, do Customer
Development, run the Build-Measure-Learn feedback loop to get Insights, improve your product
and fail fast. A very interesting and very quick variety on this is Pretotyping. And I highly
recommend watching the video by Alberto Savoia

10. Pretotyping Fake it till you make it....
www.pretotyping.org
Alberto Savoia
https://youtu.be/t4AqxNekecY
Stanford Graduate School of Business
Hilarious but also
very Insightful
http://io9.gizmodo.com/the-strange-history-of-bottled-drinks-marketed-to-dogs-1447639773

11. Multidisciplinary
On a new level
11
If you only employ webdesigners or UX designers. Or if your focus is only on software or
electronics, You will have a very hard time.
Your team should at leaest include experts on the human factor, the business factor, the digital
tech and last but not least the physical tech

12. 12
System Architecture
Connectivity design
Parts Sourcing
Insights
Observation
Interviews
Visual Design
Aestetics, Motion Design
Engineering
Injection Moulding
3D CAD
Electronic Design
Connectivity
Electronics prototyping
UX Design
Information Architecture
Interaction Design
Product Design
Industrial Design
Software Prototyping
Interaction Prototyping
Prototype software
Hardware Prototyping
3D printing
the product
In-house people & skills enlisted for designing
a medical communication device
Click here…

13. Atus Communication for medical professionals
13
Wearable connected medical
notification device with
ePaper display
Mobile App for additional information is
connected with Bluetooth LE Badge https://www.youtube.com/watch?v=RFIkrXPCc_8
App https://www.youtube.com/watch?v=OADd9Pwk3vQ

14. User Insights
Vital to get a grip on complexity
14
IOT projects are often complex systems with multiple touchpoints.
Humans are not so great at understanding systems. Getting the tricky human factors right is vital
for Business Success. So this requires thourough User Research.

15. 15
Observe things with you own eyes
(photos taken during actual brain surgery)
The wireless operating room is not there yet 
It’s just not safe enough
But cables are a usability and safety issue too.
Accept the wired reality and solve the spaghetti
the product

16. 16
Sapiens Streamlining brain surgery
Scenarios for optimized OR Workflow
MRI Operation planning ething
Software Suite... Implant remote control for patient

17. Physical Digital
Simultaneous & under one roof
17
Only by developing the Physical and Digital part of the UX simultaneously, under one roof, you get
a truly integrated UX

18. 18
Provide Context already while
designing. (Cardboard model)
Build the Physical experience
so you can test the Digital one.
(DIY Heads Up Display)
Hacked together from
3 screens, 2 beamers, gesture
sensors, arduinos, and a NUC
the product

19. 19
Dashboard Interactive driving experience demonstrator
Confidential

20. Prototyping
Not just your app
20
Your prototyping should not be limited to the digital UX.
We are talking about the internet of things. Physical things you should be able to produce, and
Electronic things that should fit in and connect to the outside world.

21. 21
Prototyping Housing before spending 40K euro on moulds.
Prototyping of Interaction Design
(Pixate)
Electronics Prototyping to
judge fonts on ePaper screen
the product

22. User testing
Early, on-location, qualitative, personal
22
Big decisions (hardware, costs, connectivity) are taken early. Validate them early with a user test
Context is often non-standard and very relevant, so test on location
Qualitative research. You should see where people feel friction, not how much % likes button A
You should be present in person to witness and interpret every little frown.

23. 23
UX Designer present in person
to witness and interpret
the product
Size matters! Get early feedback on
the physical sides of your design.
Improvize: Don’t try to find a letterbox-sized touch screen.
Use a tablet and mask off part of the screen

24. 24
ATAG Magna Oven Interface

25. Sensors over UI
Use sensors to make a happy flow
25
In a good user experience, the UI should not take center stage and be as unobtrusive as possible.
Sensors are a great way to help achieve this. They allow the user to focus on the goal, not the
screen. Even if you cannot go entirely ”zero UI” a well-placed sensor can make all the difference

26. 26
Sensors and controllers appear in
places and products you don’t expect
the product
These days even child safety seats are smart and
monitor whether the seat is installed correctly

27. 27
Dorel Maxi Cosi 2way Pearl
Proximity sensor to
welcome the passenger
Proximity sensor opens the door
Sensors check if your seat is connected secure!
(VanBerlo Design, on market since 2014)

28. Life after touch screens
Interaction beyond taps & swipes
28
A touch screen is just a screen you can touch, not the solution for all possible interaction. Taps
and swipes on a piece of glass have limitations. Haptic Feedback is very promising, but your
hands and fingers are not stupid. Fooling them just a little bit requires lots of trial and error

29. 29
3D printing in-house to iterate as fast as possible
on our Ultimaker. (a client of ours)
Haptic feedback is in its infancy. There are no blueprints.
Helping out in a Kick-starter is a great experience
A little fun now and then…
the product

30. 30
Frebble Haptic feedback : Hold hands online

31. Thank you!
Designing connected products
31www.VanBerlo.nl

32. BACKUP
32

33. Pioneering
No OS, frameworks, or rulebooks
33
For IOT there are no blueprints or rulebooks. There are limited frameworks, no Twitter Bootstrap,
or an OS. Sometimes there’s not even a product category. You have to be a bit of a mad inventor

34. 34
What is it?.. (take a guess)
3D prints, nuts and bolts arduinos and
some very clever mechanics... Production of first test-run products
the product

35. 35
Kiiroo Connect Lovers

36. The sky is not the limit
Deal with hardware limitations
36
Physical components have some nasty drawbacks. They cost money, take up space, add weight
and drain battery life. But worst of all: They need to be mass-produce-able and there are no
downloadable upgrades for them. You just kinda have to make the best of them...

37. 37
Cost-price drives component choice
Component choice impacts UX
Retina screens and A8 processors are an
exception in the world of Connected Products
The trick is to squeeze as much UX
as you can out of limited hardware
the product

38. Nefit Nefit Easy thermostat
38
Product & Interaction design
of smart, connected thermostat
Movie https://www.youtube.com/watch?v=vTbLBlyZJSA

39. Usertesting
& Prototyping
39

40. 40
HOW / Things we do/use…
Scope &
Context
Script
Recruit
Prep
Create
Prototype
Test Conclude adjust design
Platforms:
depends on
Prototype functionality
Concept Phase
depends on
nr. of participants & locations
Software:
Circle size gives some indication
of the relative effort involved
depends on
Recruitment
Usability Concept Test 1 Usability Concept Test 2 Acceptance Test

41. 41
WHAT / Examples & references…
Made with Axure

42. 42
WHAT / Examples & references…
Made with Pixate

43. 43
WHAT / Examples & references…
Prototype for ATAG
Made with Flash (obsolete)
Awarded with GIO award 2015

44. 44
use
learnin
g specs
Whentouse
Easytolearn?
Support&Community
experience(who)
Device/Screens
On-Devicetesting&
ClientSharing
Team&Collaboration
MotionDesign
Multi-screen
Accesstosensors
Scripting
Linktoback-end
Invest?
Visual Editor Prototypes are created by placing images and components on a canvas, much like Adobe Illustrator or Sketch, not so flrexible. Very WYSIWIG
Atomic
Advanced motion/animation
design. Multiscreen + timeline
oo oo -
phone &
tablet only
link yes
easing +
timeline
yes no no no try
Axure
Advanced functionality, not so
good in motion Design, clunky
interface
o oo
Pieter,
Bart,
Rosel
all link yes
basic
easing
yes no yes (own) no yes
Edge
Advanced motion/animation
design. Timeline + Javascript
o oo Pieter all link no
easing +
advanced
timeline
no no yes (JS) no yes
Invision
Simple click-throughs, version
management, collaboration
ooo ooo - all link yes easing yes no no no try
JustinMind
Advanced functionality, not so
good in motion Design, clunky
interface
o o - all link yes no yes no yes (own)
data
import
no
Marvel
Simple click-throughs, sleek
interface
ooo oo -
phone &
tablet only
link yes ? yes no no no no
Pixate
Advanced motion/animation
design
oo ooo Koen
phone &
tablet only
native app
(iOS+
Andr)
yes easing no x no no ?
Principle
Advanced motion/animation
design multiscreen + timeline
ooo Koen
phone &
tablet only
native app
(iOS+
Andr)
?
easing +
timeline
yes no no no try
Proto.io
Advanced motion/animation
design
ooo ooo Koen all
native app
(iOS+
Andr)
yes
easing +
timeline
yes x limited no ?

45. 45
use
learnin
g specs
Whentouse
Easytolearn?
Support&Community
experience(who)
Device/Screens
On-Devicetesting&
ClientSharing
Team&Collaboration
MotionDesign
Multi-screen
Accesstosensors
Scripting
Linktoback-end
Invest?
Patch Based Prototypes are created by connecting “Patches” that represent code elements and functionality. Very flexible, not very WYSYWIG
Origami/Avocad
o
Advanced motion/animation
design o oo x
phone &
tablet only
- no ? ? x ? no no
Form
Advanced motion/animation
design oo ooo Koen
phone &
tablet only
native app
(iOS+
Andr)
? easing somewhat x limited ? try
Noodle
Advanced motion/animation
design oo o Ester ? ? ? ? ? ? ? ? no
Code Based Prototypes are created by connecting “Patches” that represent code elements and functionality. Very flexible, not very WYSYWIG
Framer
Total flexibility because code
based. No Wysywig o ooo Bart, Tom all link no yes (code) no no yes yes yes
?
?
Other criteria:
Developer Handoff
Price