IoT Design key features and a smart home case study

1. Pier Paolo Bardoni Rome, November 12th 2015
Designing products & services
for the Internet of Things
What is Different About UX?

2. Hi there!

3. things.is a physical/digital design agency
VISUAL
DESIGN/UI
INTERACTION
DESIGN/UX
STRATEGY/
CONCEPT
INTERNET
OF THINGS
WEB/
MOBILE APP
QUICK
PROTOTYPING
PRODUCT
DESIGN
SERVICE
DESIGN
INNOVATIVE SHOPPING EXPERIENCECONNECTED & SMART PRODUCTS
CONNECTED & SMART SERVICES OPEN INNOVATION WORKSHOPS
PURE DIGITAL PRODUCTS
INTERACTIVE EXHIBITIONS

4. WHAT ABOUT
INTERNET OF THINGS ?

5. IT’S ALL ABOUT CONNECTING
EVERYDAY OBJECTS WITH PEOPLE
AIMING TO MAKE LIFE BETTER AND
EASIER

6. IOT IS REVOLUTIONARY FOR
INDUSTRIAL & CONSUMER CONTEXTS
consumers will get new added values from:
home public
mobility
city museums &
exhibitions
healthcare consumer
goods
cars

7. WHAT ARE THE MAIN INGREDIENTS
FOR AN IOT PRODUCT?
connected & smart
device
mobilecloud
connection
sensors/actuators
processor

8. everything
can be connected,
can be sensitive,
can be shareable
IOT AFFECTS
DEVICES, SPACES & PEOPLE

9. IoT
added values
brought by
active devices
WE’RE LIVING A BIG SHIFT IN THE
USE OF DEVICES AND IN THE
PERCEPTION OF SPACES

10. a new way to design
products & services is
emerging
IOT IS ALL ABOUT NEW BEHAVIORS
SUPPORTED BY EFFECTIVE
INTERFACES

11. HOW CAN WE ENVISION
NEW BEHAVIOURS &
INTERFACES?

12. service
design
interaction
design
product
design
visual
design
technical
design
FOLLOWING A NEW DESIGN PROCESS
TO OUTLINE THE ENTIRE EXPERIENCE
ECOSYSTEM

13. WHAT ARE THE
DIFFERENCES BETWEEN
UX FOR IOT AND
UX FOR DIGITAL SERVICES?

14. 1IOT DEALS WITH DEVICES THAT
ARE DISTRIBUTED IN THE REAL
WORLD.
Computing power and networking is embedded in objects and
environments around us. Now computers are used in a wide variety
of situations. We believe in a thorough understanding of the user’s
specific needs.

15. 2UX INVOLVES DIGITAL AND
PHYSICAL DOMAINS.
The presence of multiple devices create more complexity for the
user’s understanding, IoT products & services need clearness &
simplicity.

16. 3INTERACTIONS CAN HAPPEN IN
A WIDE VARIETY OF CONTEXTS.
We deal with a wider variety of device types especially for mobile
devices, with or without screens. Connected devices dramatically
affect the UX.

17. 4FUNCTIONALITY CAN BE
DISTRIBUTED ACROSS MULTIPLE
DEVICES WITH DIFFERENT
CAPABILITIES.
Some devices may have no input or output capabilities and are unable
to tell us directly what they are doing. Interactions may be handled by
web or smartphone apps.

18. 5IOT IS ALL ABOUT DATA.
DATA IS AT THE CORE OF SMART
SERVICES.
Big data can be user centric, resulting in an improvement of UX.
Networked and embedded devices allow us to capture data from
the world and use it to deliver better services to users.

19. 6COMPARED TO A CONVENTIONAL
DIGITAL SERVICE, THERE ARE
MORE PLACES WHERE CODE CAN
RUN.
<- <- <- <- <- <-
A typical IoT service is composed of one or more embedded devices, a
cloud service, perhaps a gateway device, one or more control apps
running on a different device, such as a mobile, tablet or desktop.

20. 7IOT IS LARGELY ASYNCHRONOUS
- MAINTAINING CONNECTIONS
USES A LOT OF POWER.
IoT Design has to deal with discontinuities in the UX, as a result
parts of the ecosystem can be out of sync.

21. WHAT IS THE EMERGING
“DESIGN MODEL” FOR IOT?

22. IOT DESIGN
MODEL
OVERVIEW
UI/VISUAL DESIGN
screen layout, look & feel
INTERACTION DESIGN
architecture & behaviour for
services & devices
INDUSTRIAL DESIGN
physical hardware: capabilities
and act form
INTERUSABILITY
interaction spanning, multiple devices
with different capabilities
CONCEPTUAL MODEL
how should users think about the
system
SERVICE DESIGN
customer journeys & services,
interaction with non digital touchpoint
PRODUCTISATION
audience proposition, objectives,
functionality of a specific service
PLATFORM DESIGN
conceptual architecture and domain
modules spanning products/services
source: “Designing Connected Products”
Claire Rowland, Elizabeth Goodman, Martin Charlier, Alfred Lui & Ann Light

23. SMART HOME CASE STUDY

24. SCLAK CONCEPT IDEA

25. IDEA GENERATION WORKSHOP
THINGS © Copyright 2015

26. ECOSYSTEM ENVISIONING
THINGS © Copyright 2015

27. SCLAK QUICK PROTOTYPING

28. QUICK PROTOTYPING
THINGS © Copyright 2015

29. QUICK PROTOTYPING
THINGS © Copyright 2015

30. PRE-SERIES PRODUCTION
THINGS © Copyright 2015

31. SCLAK IDENTITY

32. NAME & LOGO. CORE ELEMENTS OF THE IDENTITY

33. 70%
40%
PANTONE 419 C
R 34
G 34
B 34
HEX #222222
CMYK C73 M64 Y60 K78
PANTONE 527 C
R 123
G 36
B 161
HEX #7B24A1
CMYK C70 M90 Y0 K0
PRIMARY COLOR
PANTONE 382 C
R 183
G 210
B 51
HEX #B7D233
CMYK C37 M0 Y90 K0
PANTONE 279 C
R 01
G 139
B 229
HEX #008CE6
CMYK C78 M39 Y0 K0
SECONDARY COLORS
PANTONE Cool Gray 1C
R 244
G 244
B 244
HEX #F6F6F6
CMYK C4 M4 Y4 K4
PANTONE Cool Gray 10C
R 102
G 110
B 117
HEX #666E75
CMYK C4 M0 Y0 K75
NEUTRAL GRAYS LOGO GRAY BLACK
THE IDENTITY OF SCLAK
is used separately from symbol and logotype. Only in specific cases can the
symbol and logo be used together. It’s simple. Easy to understand.
No drop shadows, no glossy reflections, no flashy graphic effects.
COLOUR PALETTE
ELEMENTS OF THE IDENTITY PACK
Symbol
Logotype
Symbol
Logotype
THINGS © Copyright 2015

34. THINGS © Copyright 2015

35. SCLAK PRODUCT DESIGN

36. 3-D MODELING & RENDERING
THINGS © Copyright 2015

37. SCLAK PACKAGING

38. SCLAKISCOMPATIBLEWITHANYELECTRONICLOCKALLOWINGYOUTOUSE
BOTHTHEINNOVATIVEKEYLESSACCESSANDYOURPHYSICALKEYS.
8 051272 150018
INSTALLCONNECTUSEACTIVATE
4EASYSTEPSTOACTIVATESCLAK
Works on devices equipped with Bluetooth 4.0.
Runs on iOS 7 or later and Android 4.3 or later.
Does not require an internet connection.
Compatible with any electronic lock.
SAFEEASYCONNECTED KEYLESSCOMPATIBLE
denscatolaesterna
FO
H
1.
Fin
of
ma
2.
Re
us
ch
3.
Tu
po
an
se
1
B
+
SCLAKISCOMPATIBLEWITHANYELECTRONICLOCKALLOWINGYOUTOUSE
BOTHTHEINNOVATIVEKEYLESSACCESSANDYOURPHYSICALKEYS.
SAFEEASYCONNECTED KEYLESSCOMPATIBLE
isola
Liftheretofindallyou
needtouseSCLAK
MAKESYOURKEYSDIGITAL
useyoursmartphonetomanageand
sharethemsafelyandeasily
dentroscatola
FORMOREINFORMATIONCHECKTHEMANUAL
HARDWAREINSTALLATIONPROCESS
1.PLACETHESCLAK
FindasuitablepositionnearthelocktoplacetheSCLAK,thenremovethefilmfromone
ofthesidesofthedouble-sidedtapeandplaceitonthewall/door.Thendrillinthe
marks,removethesecondsideofthefilm,placetheSCLAKandtightenthescrews.
CAUTION:Turnoffthelightbeforeyoubegin!
2.CONNECTTHESCLAK
Removethecoverofthelock,detachitspowercordandconnectittotheSCLAK.Then
useacabletoconnecttheSCLAKhardwaretothelock.Usethefollowingschemesto
choosetherightconnectionprocessforyourlock.
3.FINALCHECKANDAPPSETUP
Turnonthelight,iftheLEDsareblinkingtheSCLAKis
poweredcorrectly.SecurethecoverofboththeSCLAK
andthelock,thenproceedtotheSCLAKapptobeginthe
setupprocessonyoursmartphone.
1
AC/DCpower
supply
BA++––
–+
ELECTROMECHANICALLOCK2
DCpower
supply
BA++––
+–L+L–
MOTORIZEDLOCK3
AC/DCpower
supply
Relay
switchNA
BA++––
RELAYSWITCHNA
PRODUCT PACKAGING
THINGS © Copyright 2015
isola
Liftheretofindallyou
needtouseSCLAK
MAKESYOURKEYSDIGITAL
useyoursmartphonetomanageand
sharethemsafelyandeasily

39. SCLAK IxD/WIREFRAME APP

40. WIREFRAMES EXAMPLES
THINGS © Copyright 2015

41. SCLAK APP VISUAL

42. APP VISUAL EXAMPLES | GUEST & OWNER FLOW
THINGS © Copyright 2015

43. THINGS © Copyright 2015
APP VISUAL EXAMPLES | INSTALLATION FLOW
How to install hardware
t ut or ial
you ar e an admin
ot her per son is an admin
ever y t ime when
you lounch app
t his alert will appear
af t er f inishing t he
pr ocess you go b ack t o
locks list
set t ings pr ecedur e
r ecognised
as in st aller
r ecognised
as owner / guest
usual Locks list ect...
while t est in s
lock st art s blinking
and b ut t on DONE
b acome act ive
af t er
t est
while par ing lock
is blinking, when
par ing dine - light
st op blinking and b ut t on
b acome act ive
af t er
par ing
Start the lock set up procedure.
Please be sure to follow next steps to install and
successfilly activate a SCLAK lock.
Test Lock
TIM 100%9:25 PM
Locks List
SUNNY PLACE, 19
U 1234 HS
MAINE USA
Mary House
SUPER MEGA 11
999 E ST NW
WASHINGTON USA
Island House A
GUESTS OWNERS ADMINS INSTALLERS
TIM 100%9:25 PM
SECURESECURE
A
Search
Import User
Jane Brown
Jason Kay
Jill Smith
Joe Black
Joey Gardener
John Foster
Karen Wiseman
Kathy Barrow
Kevin Rose
Kyle McDonald
K
2
ABC
3
DEF
1
5
JKL
6
MNO
4
GHI
8
0
TUV
9
WXYZ
7
PQRS
ACTIVATE
* * * *
* * * *
* * * *
INSERT CODE MANUALLY
Activate Lock
TIM 100%9:25 PM
2
ABC
3
DEF
1
5
JKL
6
MNO
4
GHI
8
0
TUV
9
WXYZ
7
PQRS
ACTIVATE
* * * *
* * * *
* * * *
INSERT CODE MANUALLY
Activate Lock
TIM 100%9:25 PM
DONE
TEST LOCK
SET NAME &
LOCATION
PAIRING
SET ADMIN
TEST LOCK
SET NAME &
LOCATION
TEST
DONE
PAIRING
SET ADMIN
PAIRING
SET ADMIN
PAIRING
SET ADMIN
First of all you need to do
what is written here
bellow.do it very well.
LORIM IPSUM TRA TATAI AM AN
ANIMATED
ICON
I AM AN
ANIMATED
ICON
I AM AN
ANIMATED
ICON
Second step from my point
of view is what written here
l. do it very well.
LORIM IPSUM TRA TATA
Last step from my point of
view is to do what is written
here bellow. do it very well.
LORIM IPSUM TRA TATA
Test lock
Lorem ipsum dolor sit ameet, conmattis
vitae sectetur adipiscing elitipsum.
Paring
Lorem ipsum dolor sit ameet, conmattis
vitae sectetur adipiscing elitipsum.
DONE
Paring
Lorem ipsum dolor sit ameet, conmattis
vitae sectetur adipiscing elitipsum.
DONE
Set name and location
SET NAME &
LOCATION
TEST LOCK
SET NAME &
LOCATION
TEST LOCK
CREATE NEW
ADD FROM
ADRESS BOOK
SET ME
Sign In
LOG IN
INSERT CODE
Lorem ipsum dolor sit amet, consectetur adipi
scing elit, sed do eiusmod tempor incididun.
TIM 100%9:25 PM
Installetion precess
HOW TO INSTALL
INSTALL NEW LOCK
Lorem ipsum dolor sit amet, consectetur adipi
scing elit, sed do eiusmod tempor incididun.
TIM 100%9:25 PM
Swipe up for the install SCLAK
Swipe down to return to Sign In
SET LATER
Peripherals list
OFFICE
ALBI
TIM 100%9:25 PM
LOCK ROCKY MOUNTAIN HOUSE
Sir John
Hiusten
LOCATION AROOSTOOK, MELI 7
U 1234 HS
MAINE USA
SET ADMIN
Hardware Installation
Lock Setting
Lock Setting
Lock Setting
Lock Setting Set Admin
PairingPairing
Set Admin Permissions
Set Name & Location
Test Lock
TIM 100%9:25 PM
TEST
DONE
Test lock
Lorem ipsum dolor sit ameet, conmattis
vitae sectetur adipiscing elitipsum.
TIM 100%9:25 PM
TIM 100%9:25 PM
TIM 100%9:25 PM
TIM 100%9:25 PM
TIM 100%9:25 PM TIM 100%9:25 PM
TIM 100%9:25 PMTIM 100%9:25 PM
TIM 100%9:25 PM
TIM 100%9:25 PM
LOCATION AROOSTOOK, MELI 7
U 1234 HS
MAINE USA
NAME ROCKY MOUNTAIN HOUSE
DONE
Lock Details
TIM 100%9:25 PM
ROCKY MOUNTAIN
BACK DOOR
ENABLE LOCK
SETTINGS
Lorem ipsum dolor sit amet, consectetur
adiscing elit. Donet tellus etd, vitale fringilla.
AUTO OPEN
Lorem ipsum dolor sit amet, consectetur
adiscing elit. Donet tellus etd, vitale fringilla.
ENTRYPHONE
Lorem ipsum dolor sit amet, consectetur
adiscing elit. Donet tellus etd, vitale fringilla.
TOCK TOCK
Lorem ipsum dolor sit amet, consectetur
adiscing elit. Donet tellus etd, vitale fringilla.
LOCATION AROOSTOOK, MELI 7
U 1234 HS
MAINE USA
INVITE OWNER
You need to set an Admin
Would you like to do
it right now?
LATER YES

44. THINGS © Copyright 2015
APP VISUAL EXAMPLES | INSTALLATION FLOW
Check out the new app store
Easily manage your apps and watchfaces
See more notification history
Installing V.2.4.1 60,1 MG
UPDATING
PLEASE WAIT
TIM 100%9:25 PM
Test lock
Lorem ipsum dolor sit ameet, conmattis
vitae sectetur adipiscing elitipsum.
DONE
Test Lock
TIM 100%9:25 PM
Paring
Lorem ipsum dolor sit ameet, conmattis
vitae sectetur adipiscing elitipsum.
DONE
Pairing
TIM 100%9:25 PM
Pairing

45. SCLAK IxD/WIREFRAME WEB

46. WIREFRAME WEB EXAMPLES
THINGS © Copyright 2015
SCLAK Home Page
SCLAK
< >
menu: (logo) home, soluzioni, caratteristiche, progetti, chi siamo, contattaci, news, compra ora
Soluzione 1
Soluzione 2
Soluzione 3
Soluzione 4
Soluzione 5
footer: logo, informazioni, indirizzo, lingua, termini e condizioni, rimborso, note
legali, contattaci, faq, garanzia, copyright
SCLAK Caratteristiche
L’app
menu: (logo) home, soluzioni, caratteristiche, progetti, chi siamo, contattaci, news, compra ora
footer: logo, informazioni, indirizzo, lingua, termini e condizioni, rimborso, note
legali, contattaci, faq, garanzia, copyright
Specifiche techniche
Servizio
Installazione Semplice
Contattaci
SCLAK Compra Ora
Compra Ora
menu: (logo) home, soluzioni, caratteristiche, progetti, chi siamo, contattaci, news, compra ora
footer: logo, informazioni, indirizzo, lingua, termini e condizioni, rimborso, note
legali, contattaci, faq, garanzia, copyright
Carrello
Il tuo Ordine
PRODOTTI
SCLAK casa
CHIAVI
Owner Key
1-year Guest Pack
Bundle
QUANTITA PREZZO
249 199€
9€
5€
13€
Informazioni Di Spedizione
Informazioni generali
nome* cognome*
Informazioni di spedizione
nome*
cognome*
indirizzo*
citta*
CAP*
paese*
numero di telefono*
spedizione = fatturazione
Totale xxx€
accetto i Termini e le Condizioni Compra via PayPal

47. SCLAK VISUAL WEB

48. THINGS © Copyright 2015
WEB VISUAL DESIGN - 1ST VERSION
Home page

49. THINGS © Copyright 2015
WEB VISUAL ESHOP WEB ENGAGING DEMO

50. SCLAK EXHIBITION DESIGN

51. EXHIBITION - INTERACTIVE FAIR BOOTH
THINGS © Copyright 2015

52. SCLAK ANALOG COMMUNICATION

53. ANALOG COMMUNICATION DESIGN
THINGS © Copyright 2015

54. MANUAL & INFOGRAPHICS
THINGS © Copyright 2015

56. © Copyright 2015
THINGS srl
Registered office:
Viale Papiniano 44
20123 Milano ITALIA
P.IVA/Vat no. 08360540960
http://things.is
@THINGS_IS
Operating office:
Via Bartolomeo Panizza 7
20144 Milano ITALIA
For inquiries, please contact
Pier Paolo Bardoni
pier.bardoni@things.is
@PierBardoni
Thank you!
@PierBardoni@THINGS_IS
THINGS.IS
Pier Paolo Bardoni
Pier Bardoni
Follow us