Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Products & Services for the Internet of Things (IoT)

990 views

Published on

IoT Design key features and a smart home case study

Published in: Design

Designing Products & Services for the Internet of Things (IoT)

  1. 1. Pier Paolo Bardoni Rome, November 12th 2015 Designing products & services for the Internet of Things What is Different About UX?
  2. 2. Hi there!
  3. 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. 4. WHAT ABOUT INTERNET OF THINGS ?
  5. 5. IT’S ALL ABOUT CONNECTING EVERYDAY OBJECTS WITH PEOPLE AIMING TO MAKE LIFE BETTER AND EASIER
  6. 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. 7. WHAT ARE THE MAIN INGREDIENTS FOR AN IOT PRODUCT? connected & smart device mobilecloud connection sensors/actuators processor
  8. 8. everything can be connected, can be sensitive, can be shareable IOT AFFECTS DEVICES, SPACES & PEOPLE
  9. 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. 10. a new way to design products & services is emerging IOT IS ALL ABOUT NEW BEHAVIORS SUPPORTED BY EFFECTIVE INTERFACES
  11. 11. HOW CAN WE ENVISION NEW BEHAVIOURS & INTERFACES?
  12. 12. service design interaction design product design visual design technical design FOLLOWING A NEW DESIGN PROCESS TO OUTLINE THE ENTIRE EXPERIENCE ECOSYSTEM
  13. 13. WHAT ARE THE DIFFERENCES BETWEEN UX FOR IOT AND UX FOR DIGITAL SERVICES?
  14. 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. 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. 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. 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. 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. 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. 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. 21. WHAT IS THE EMERGING “DESIGN MODEL” FOR IOT?
  22. 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. 23. SMART HOME CASE STUDY
  24. 24. SCLAK CONCEPT IDEA
  25. 25. IDEA GENERATION WORKSHOP THINGS © Copyright 2015
  26. 26. ECOSYSTEM ENVISIONING THINGS © Copyright 2015
  27. 27. SCLAK QUICK PROTOTYPING
  28. 28. QUICK PROTOTYPING THINGS © Copyright 2015
  29. 29. QUICK PROTOTYPING THINGS © Copyright 2015
  30. 30. PRE-SERIES PRODUCTION THINGS © Copyright 2015
  31. 31. SCLAK IDENTITY
  32. 32. NAME & LOGO. CORE ELEMENTS OF THE IDENTITY
  33. 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. 34. THINGS © Copyright 2015
  35. 35. SCLAK PRODUCT DESIGN
  36. 36. 3-D MODELING & RENDERING THINGS © Copyright 2015
  37. 37. SCLAK PACKAGING
  38. 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. 39. SCLAK IxD/WIREFRAME APP
  40. 40. WIREFRAMES EXAMPLES THINGS © Copyright 2015
  41. 41. SCLAK APP VISUAL
  42. 42. APP VISUAL EXAMPLES | GUEST & OWNER FLOW THINGS © Copyright 2015
  43. 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. 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. 45. SCLAK IxD/WIREFRAME WEB
  46. 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. 47. SCLAK VISUAL WEB
  48. 48. THINGS © Copyright 2015 WEB VISUAL DESIGN - 1ST VERSION Home page
  49. 49. THINGS © Copyright 2015 WEB VISUAL ESHOP WEB ENGAGING DEMO
  50. 50. SCLAK EXHIBITION DESIGN
  51. 51. EXHIBITION - INTERACTIVE FAIR BOOTH THINGS © Copyright 2015
  52. 52. SCLAK ANALOG COMMUNICATION
  53. 53. ANALOG COMMUNICATION DESIGN THINGS © Copyright 2015
  54. 54. MANUAL & INFOGRAPHICS THINGS © Copyright 2015
  55. 55. © 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

×