designing products & services for the internet of things (iot)

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


SCLAK QUICK PROTOTYPING

QUICK PROTOTYPING


PRE-SERIES PRODUCTION


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


SCLAK PRODUCT DESIGN

3-D MODELING & RENDERING


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




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


isola

Lift here to find

all you need

to use SC

LAK

MAKES YO




SCLAK IxD/WIREFRAME APP

WIREFRAMES EXAMPLES


SCLAK APP VISUAL

APP VISUAL EXAMPLES | GUEST & OWNER FLOW



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


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


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


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


ENTRYPHONE


TOCK TOCK



U 1234 HS

MAINE USA

INVITE OWNER

You need to set an AdminWould you like to do

it right now?

LATER YES


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


DONE

Test Lock

TIM 100%9:25 PM


DONE

Pairing

TIM 100%9:25 PM

Pairing

SCLAK IxD/WIREFRAME WEB

WIREFRAME WEB EXAMPLES


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



Specifiche techniche

Servizio

Installazione Semplice

Contattaci

SCLAK Compra Ora

Compra Ora



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


WEB VISUAL DESIGN - 1ST VERSION

Home page


WEB VISUAL ESHOP WEB ENGAGING DEMO

SCLAK EXHIBITION DESIGN

EXHIBITION - INTERACTIVE FAIR BOOTH


SCLAK ANALOG COMMUNICATION

ANALOG COMMUNICATION DESIGN


MANUAL & INFOGRAPHICS


© 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