Pier Paolo Bardoni Rome, November 12th 2015
Designing products & services for the Internet of ThingsWhat is Different About UX?
Hi there!
things.is a physical/digital design agency
VISUALDESIGN/UI
INTERACTIONDESIGN/UX
STRATEGY/CONCEPT
INTERNETOF THINGS
WEB/MOBILE APP
QUICKPROTOTYPING
PRODUCT DESIGN
SERVICEDESIGN
INNOVATIVE SHOPPING EXPERIENCECONNECTED & SMART PRODUCTS
CONNECTED & SMART SERVICES OPEN INNOVATION WORKSHOPS
PURE DIGITAL PRODUCTS
INTERACTIVE EXHIBITIONS
WHAT ABOUT INTERNET OF THINGS ?
IT’S ALL ABOUT CONNECTING EVERYDAY OBJECTS WITH PEOPLE AIMING TO MAKE LIFE BETTER AND EASIER
IOT IS REVOLUTIONARY FOR INDUSTRIAL & CONSUMER CONTEXTS
consumers will get new added values from:
home public mobility
city museums & exhibitions
healthcare consumer goods
cars
WHAT ARE THE MAIN INGREDIENTS FOR AN IOT PRODUCT?
connected & smart device
mobilecloud
connection
sensors/actuators
processor
everything can be connected, can be sensitive, can be shareable
IOT AFFECTS DEVICES, SPACES & PEOPLE
IoTadded values brought by active devices
WE’RE LIVING A BIG SHIFT IN THE USE OF DEVICES AND IN THE PERCEPTION OF SPACES
a new way to design products & services is emerging
IOT IS ALL ABOUT NEW BEHAVIORS SUPPORTED BY EFFECTIVE INTERFACES
HOW CAN WE ENVISION NEW BEHAVIOURS & INTERFACES?
service design
interaction design
product design
visual design
technical design
FOLLOWING A NEW DESIGN PROCESS TO OUTLINE THE ENTIRE EXPERIENCE ECOSYSTEM
WHAT ARE THE DIFFERENCES BETWEEN UX FOR IOT AND UX FOR DIGITAL SERVICES?
1 IOT 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.
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.
3 INTERACTIONS 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.
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.
5 IOT 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.
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.
7 IOT 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.
WHAT IS THE EMERGING “DESIGN MODEL” FOR IOT?
IOT DESIGN MODEL OVERVIEW
UI/VISUAL DESIGNscreen layout, look & feel
INTERACTION DESIGNarchitecture & behaviour for
services & devices
INDUSTRIAL DESIGNphysical hardware: capabilities
and act form
INTERUSABILITYinteraction spanning, multiple devices
with different capabilities
CONCEPTUAL MODELhow should users think about the
system
SERVICE DESIGNcustomer journeys & services,
interaction with non digital touchpoint
PRODUCTISATIONaudience proposition, objectives, functionality of a specific service
PLATFORM DESIGNconceptual architecture and domain modules spanning products/services
source: “Designing Connected Products” Claire Rowland, Elizabeth Goodman, Martin Charlier, Alfred Lui & Ann Light
SMART HOME CASE STUDY
SCLAK CONCEPT IDEA
IDEA GENERATION WORKSHOP
THINGS © Copyright 2015
ECOSYSTEM ENVISIONING
THINGS © Copyright 2015
SCLAK QUICK PROTOTYPING
QUICK PROTOTYPING
THINGS © Copyright 2015
QUICK PROTOTYPING
THINGS © Copyright 2015
PRE-SERIES PRODUCTION
THINGS © Copyright 2015
SCLAK IDENTITY
NAME & LOGO. CORE ELEMENTS OF THE IDENTITY
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
THINGS © Copyright 2015
SCLAK PRODUCT DESIGN
3-D MODELING & RENDERING
THINGS © Copyright 2015
SCLAK PACKAGING
SCLAK IS COMPATIBLE WITH ANY ELECTRONIC LOCK ALLOWING YOU TO USE BOTH THE INNOVATIVE KEYLESS ACCESS AND YOUR PHYSICAL KEYS.
8 051272 150018
INSTALLCO
NNECTUSE
ACTIVATE
4 EASY STEPS TO ACTIVATE SCLAK
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
isola
Lift here to find
all you need
to use SC
LAK
MAKES YO
UR KEYS DIGITALuse your sm
artphone to manage and
share them safely and easily
dentro scatola
scatola esterna
FOR MORE INFORM
ATION CHECK THE MANUAL
HARDW
ARE INSTALLATIO
N PRO
CESS
1. PLACE THE SCLAK
Find a suitable position near the lock to place the SCLAK, then remove the film
from one
of the sides of the double-sided tape and place it on the wall/door. Then drill in the
marks, rem
ove the second side of the film, place the SCLAK and tighten the screw
s.
CAUTION: Turn off the light before you begin!
2. CONNECT THE SCLAK
Remove the cover of the lock, detach its pow
er cord and connect it to the SCLAK. Then use a cable to connect the SCLAK hardw
are to the lock. Use the following schem
es to choose the right connection process for your lock.
3. FINAL CHECK AND APP SETUP
Turn on the light, if the LEDs are blinking the SCLAK is pow
ered correctly. Secure the cover of both the SCLAK and the lock, then proceed to the SCLAK app to begin the setup process on your sm
artphone.
1
AC/DC power
supply
BA
++
––
–+
ELECTROMECHANICAL LOCK
2
DC power
supply
BA
++
––
+–
L+L–
MOTORIZED LOCK
3
AC/DC power
supplyRelay
switch NA
BA
++
––
RELAY SWITCH NA
SCLAK IS COMPATIBLE WITH ANY ELECTRONIC LOCK ALLOWING YOU TO USE BOTH THE INNOVATIVE KEYLESS ACCESS AND YOUR PHYSICAL KEYS.
8 051272 150018
INSTALLCO
NNECTUSE
ACTIVATE
4 EASY STEPS TO ACTIVATE SCLAK
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
isola
Lift here to find
all you need
to use SC
LAK
MAKES YO
UR KEYS DIGITALuse your sm
artphone to manage and
share them safely and easily
dentro scatola
scatola esterna
FOR MORE INFORM
ATION CHECK THE MANUAL
HARDW
ARE INSTALLATIO
N PRO
CESS
1. PLACE THE SCLAK
Find a suitable position near the lock to place the SCLAK, then remove the film
from one
of the sides of the double-sided tape and place it on the wall/door. Then drill in the
marks, rem
ove the second side of the film, place the SCLAK and tighten the screw
s.
CAUTION: Turn off the light before you begin!
2. CONNECT THE SCLAK
Remove the cover of the lock, detach its pow
er cord and connect it to the SCLAK. Then use a cable to connect the SCLAK hardw
are to the lock. Use the following schem
es to choose the right connection process for your lock.
3. FINAL CHECK AND APP SETUP
Turn on the light, if the LEDs are blinking the SCLAK is pow
ered correctly. Secure the cover of both the SCLAK and the lock, then proceed to the SCLAK app to begin the setup process on your sm
artphone.
1
AC/DC power
supply
BA
++
––
–+
ELECTROMECHANICAL LOCK
2
DC power
supply
BA
++
––
+–
L+L–
MOTORIZED LOCK
3
AC/DC power
supplyRelay
switch NA
BA
++
––
RELAY SWITCH NA
PRODUCT PACKAGING
THINGS © Copyright 2015
isola
Lift here to find
all you need
to use SC
LAK
MAKES YO
UR KEYS DIGITALuse your sm
artphone to manage and
share them safely and easily
SCLAK IxD/WIREFRAME APP
WIREFRAMES EXAMPLES
THINGS © Copyright 2015
SCLAK APP VISUAL
APP VISUAL EXAMPLES | GUEST & OWNER FLOW
THINGS © Copyright 2015
THINGS © Copyright 2015
APP VISUAL EXAMPLES | INSTALLATION FLOW
How to install hardware
t ut o r ial you ar e an admin
ot her per son is an admin
ever y t ime whenyou lounch appt his aler t will appear
af t er f in ishing t he pr ocess you go b ack t o
locks list
set t ings pr ecedur e
r ecogn isedas in st aller
r ecogn isedas own er / guestusual Locks list ect ...
while t est in slock st ar t s blinkingand b ut t on DONEb acome act ive
af t ert est
while par ing lockis blinking, whenpar ing din e - light st op blinking and b ut t onb acome act ive
af t erpar 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
SECURE SECURE
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
2ABC
3DEF
1
5JKL
6MNO
4GHI
8
0TUV
9WXYZ
7PQRS
ACTIVATE
* * * *
* * * *
* * * *
INSERT CODE MANUALLY
Activate Lock
TIM 100%9:25 PM
2ABC
3DEF
1
5JKL
6MNO
4GHI
8
0TUV
9WXYZ
7PQRS
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 lockLorem ipsum dolor sit ameet, conmattisvitae sectetur adipiscing elitipsum.
ParingLorem ipsum dolor sit ameet, conmattisvitae sectetur adipiscing elitipsum.
DONE
ParingLorem ipsum dolor sit ameet, conmattisvitae sectetur adipiscing elitipsum.
DONE
Set name and location
SET NAME &LOCATION
TEST LOCK
SET NAME &LOCATION
TEST LOCK
CREATE NEW
ADD FROMADRESS 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 lockLorem ipsum dolor sit ameet, conmattisvitae 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 AdminWould you like to do
it right now?
LATER YES
THINGS © Copyright 2015
APP VISUAL EXAMPLES | INSTALLATION FLOW
Check out the new app storeEasily manage your apps and watchfacesSee more notification history
Installing V.2.4.1 60,1 MG
UPDATING
PLEASE WAIT
TIM 100%9:25 PM
Test lockLorem ipsum dolor sit ameet, conmattisvitae sectetur adipiscing elitipsum.
DONE
Test Lock
TIM 100%9:25 PM
ParingLorem ipsum dolor sit ameet, conmattisvitae sectetur adipiscing elitipsum.
DONE
Pairing
TIM 100%9:25 PM
Pairing
SCLAK IxD/WIREFRAME WEB
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 SpedizioneInformazioni 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
SCLAK VISUAL WEB
THINGS © Copyright 2015
WEB VISUAL DESIGN - 1ST VERSION
Home page
THINGS © Copyright 2015
WEB VISUAL ESHOP WEB ENGAGING DEMO
SCLAK EXHIBITION DESIGN
EXHIBITION - INTERACTIVE FAIR BOOTH
THINGS © Copyright 2015
SCLAK ANALOG COMMUNICATION
ANALOG COMMUNICATION DESIGN
THINGS © Copyright 2015
MANUAL & INFOGRAPHICS
THINGS © Copyright 2015
© Copyright 2015THINGS srl Registered office: Viale Papiniano 4420123 Milano ITALIAP.IVA/Vat no. 08360540960http://things.is @THINGS_IS
Operating office: Via Bartolomeo Panizza 720144 Milano ITALIAFor inquiries, please contactPier Paolo [email protected] @PierBardoni
Thank you!
@PierBardoni @THINGS_IS
THINGS.IS
Pier Paolo Bardoni
Pier Bardoni
Follow us