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 Connected 
 Products With thanks to Claire Rowland
2 Hello I’m a freelance designer,
 a co-author and a co-founder. rain cloud method.com raincloud.eu senseye.io iotacademy....
3 Connected products Things we’ll see more of
4 Products with extended value proposition Digital business models Services going physical Device ecosystem
5 Products with extended value proposition Digital business models Services going physical Device ecosystem
6 Product evolution Electricity as enhancement.
7 Product evolution Connectedness as enhancement.
8 Product evolution Connectedness as enhancement.
9 Products with extended value proposition Digital business models Services going physical Device ecosystem
10 Freemium, advertising-funded, monetising user data Advertising or data funded products.
11 Pay-per-use & Micropayments 1 LATTE (GR.) @ 3,60 3.60 1 SEAT OCCUPATION 42 MINS 0,50 Dynamic pricing
12 Pay-per-use & Micropayments Dynamic pricing
13 Products with extended value proposition Digital business models Services going physical Device ecosystem
14 onefinestay.com Home rental site that develops a connected lock
15 Nespreso Zenius with cellular connectivity Nespresso is a coffee service that happens to make devices.
16 New kinds of products Amazon Echo Physical context Entire home Amazon Dash Amazon Dash Button Kitchen Device Conceptual...
17 New user experience model Smartphone model 1. Find/pick up device
 Start the computer 2.Unlock & login 3.Launch app or ...
18 New user experience model Services and features will dissolve into the environment.
19 Products with extended value proposition Digital business models Services going physical Device ecosystem
20 Device ecosystem plays This is a way to make this better. But it needs to stand on its own as well.
21 Device ecosystem plays The battery as delivery mechanism
22 Design for IoT What’s this to do with design?
23 It’s not just UX and industrial design.
24 Designing Connected Products Technology of connectivity Product & service definition & strategy Design methods for conne...
Value proposition Conceptual model Interaction model 25 Design is key in every aspect of connected products What does it d...
26 Productisation What does it do? Why would I want it?
27 A products solves a specific problem. Nest don’t talk about connectivity, just about how it is a better smoke alarm.
28 Mass market consumers want products, not tools. Product Tool
29 A tool puts the onus on the user A connected socket requires the user to solve their own problem.
30 Design methods Design can help develop and focus the value proposition early on.
31 Newspaper article Image: Dan Hill Press release Sketch the box / Sketch the advert • Can this service, idea or product ...
32 Conceptual model How does it work?
33 Non-connected products are conceptually quite simple.
34 Connected products are more complex.
35 Connected products are more complex. Connectedness means users have to think about system models.
36 Extra stuff to think about Connects via your WiFi No hub Connects via ZigBee Comes with a hub Connects via ZigBee Requi...
37 Explaining the system model Images: Lowes, Apple You might need to explain your system model.
38 Explaining the system model Or develop a really good way to simplify it.
39 Amazon methodology Press release FAQ Amazon product development: http://www.quora.com/What-is-Amazons-approach-to-produ...
40 Interaction model How do I use it?
41 Interusability Cross-Platform Service User Experience: A Field Study and an Initial Framework. Minna Wäljas, Katarina S...
42 Interusability Composition Consistency Continuity
43 A tale of two thermostats… Images: Tado, British Gas Subset of functions on device, full set in app. Mirrored functions...
44 A tale of two thermostats… Images: Tado, British Gas Subset of functions on device, full set in app. Mirrored functions...
45 Interusability Composition Consistency Continuity
46 Consistency is a two-way street. One one hand: Platform conventions On the other:
 Consistency across your touch points...
47 Consistency is a two-way street. Platform conventions vs. System consistency Rotate bezelTap up/down arrows “Click”
48 Top priority: terminology However different the UIs, identical functions or settings must have the same name. Consisten...
49 Consistency Secondary colour Typeface, terminology, accent colour Accent colour CMF Paper insert as a means to delay de...
50 Interusability Composition Consistency Continuity
Image: Kei Noguchi via CC licence 51 Continuity Coherent flow of interactions and data across devices.
52 Hard because: 1. Latency and reliability of the network. 2. Battery powered devices that only connect intermittently.
53 Has my action been executed? Delays & interruptions mean there is a third state between on and off.
54 Option 1 A little white lie to make it feel smooth. Showing the action as executed before it really has.
55 Option 2 Transparency at the expense of a more complex UI flow. Communicating what is actually happening. Off In progres...
56 Intermittent connectivity UIs might need timestamped data because they may be out-of-sync. 2 min delay 21
57 Conversational UI An elegant solution: Conversational UIs.
58 Prototyping Build the right product before 
 you build the product right.
59 Experience prototyping Video is a great tool to prototype and explore connected products. Useful prototyping techniques...
60 I don’t mean this stuff
61 30 minute prototype for a connected herb garden sensor.
62 Sketch-A-Move: Slightly more elaborate. Both a demonstration and an exploration. http://www.superflux.in/work/sketch-move
63 Sketch-A-Move: Behind the scenes http://www.superflux.in/work/sketch-move Capture imagination and inspire the team Matth...
64 Stills compositions with narration More info: http://www.cooper.com/journal/2008/12/economizer
65 A storyboard or video prototype can guide the tech requirements More info: http://www.cooper.com/journal/2008/12/econom...
66 A closing thought Credit: Adam Crickett
67 Error proof power tools
68 “Guided cooking for guaranteed success”
69 Reducing “time to destination”
70 Smart vending machine
71 Design responsibility The values that drive connected products will pervade our everyday: Our power tools, our food pro...
72 Design responsibility We need to think about what these values are, and not forget about the whimsical, the inefficient,...
73 Thank you! @marcharlier m@marcharlier.com www.designingconnectedproducts.com Use code AUTHD for 50% off ebook/ 40% off ...
Upcoming SlideShare
Loading in …5
×

Designing Connected Products - Web Directions 2015 Sydney

1,629 views

Published on

Slides from my talk on Designing Connected Products at Web Directions 2015 in Sydney.

Published in: Design
no profile picture user

  • Be the first to comment

Show More

Designing Connected Products - Web Directions 2015 Sydney

  1. 1. Designing Connected 
 Products With thanks to Claire Rowland
  2. 2. 2 Hello I’m a freelance designer,
 a co-author and a co-founder. rain cloud method.com raincloud.eu senseye.io iotacademy.org designingconnectedproducts.com
  3. 3. 3 Connected products Things we’ll see more of
  4. 4. 4 Products with extended value proposition Digital business models Services going physical Device ecosystem
  5. 5. 5 Products with extended value proposition Digital business models Services going physical Device ecosystem
  6. 6. 6 Product evolution Electricity as enhancement.
  7. 7. 7 Product evolution Connectedness as enhancement.
  8. 8. 8 Product evolution Connectedness as enhancement.
  9. 9. 9 Products with extended value proposition Digital business models Services going physical Device ecosystem
  10. 10. 10 Freemium, advertising-funded, monetising user data Advertising or data funded products.
  11. 11. 11 Pay-per-use & Micropayments 1 LATTE (GR.) @ 3,60 3.60 1 SEAT OCCUPATION 42 MINS 0,50 Dynamic pricing
  12. 12. 12 Pay-per-use & Micropayments Dynamic pricing
  13. 13. 13 Products with extended value proposition Digital business models Services going physical Device ecosystem
  14. 14. 14 onefinestay.com Home rental site that develops a connected lock
  15. 15. 15 Nespreso Zenius with cellular connectivity Nespresso is a coffee service that happens to make devices.
  16. 16. 16 New kinds of products Amazon Echo Physical context Entire home Amazon Dash Amazon Dash Button Kitchen Device Conceptual context Anything Groceries & consumables Specific item Interface Voice Voice & physical Physical
  17. 17. 17 New user experience model Smartphone model 1. Find/pick up device
 Start the computer 2.Unlock & login 3.Launch app or browser
 Login
 Navigate bloated website 4.Tell it what product 5.Add to basket Connected product model 1. Find/pick up device
 Start the computer
 Unlock & login
 Launch app or browser
 Login
 Navigate bloated website 2.Tell it what product
 Add to basket 2000s 2010s Next Desktop model 1. Find/pick up device 2.Start the computer 3.Unlock & login 4.Launch app or browser 5.Login 6.Navigate bloated website 7.Tell it what product 8.Add to basket
  18. 18. 18 New user experience model Services and features will dissolve into the environment.
  19. 19. 19 Products with extended value proposition Digital business models Services going physical Device ecosystem
  20. 20. 20 Device ecosystem plays This is a way to make this better. But it needs to stand on its own as well.
  21. 21. 21 Device ecosystem plays The battery as delivery mechanism
  22. 22. 22 Design for IoT What’s this to do with design?
  23. 23. 23 It’s not just UX and industrial design.
  24. 24. 24 Designing Connected Products Technology of connectivity Product & service definition & strategy Design methods for connected products Industrial design & Interface types Prototyping methods Cross-device interactions Responsible IoT design Designing with data
  25. 25. Value proposition Conceptual model Interaction model 25 Design is key in every aspect of connected products What does it do? How does it work? How do I use it? Images: Instructables, How It Works Daily
  26. 26. 26 Productisation What does it do? Why would I want it?
  27. 27. 27 A products solves a specific problem. Nest don’t talk about connectivity, just about how it is a better smoke alarm.
  28. 28. 28 Mass market consumers want products, not tools. Product Tool
  29. 29. 29 A tool puts the onus on the user A connected socket requires the user to solve their own problem.
  30. 30. 30 Design methods Design can help develop and focus the value proposition early on.
  31. 31. 31 Newspaper article Image: Dan Hill Press release Sketch the box / Sketch the advert • Can this service, idea or product be plausibly conveyed? • Are we able to convey the idea in simple terms? • Forces you to clearly and simply convey the value and why anyone should care. • Can be iterated quickly. • Why should people care? • How do you persuade them? • How can you proof your claims?
  32. 32. 32 Conceptual model How does it work?
  33. 33. 33 Non-connected products are conceptually quite simple.
  34. 34. 34 Connected products are more complex.
  35. 35. 35 Connected products are more complex. Connectedness means users have to think about system models.
  36. 36. 36 Extra stuff to think about Connects via your WiFi No hub Connects via ZigBee Comes with a hub Connects via ZigBee Requires a hub, but doesn’t come with one
  37. 37. 37 Explaining the system model Images: Lowes, Apple You might need to explain your system model.
  38. 38. 38 Explaining the system model Or develop a really good way to simplify it.
  39. 39. 39 Amazon methodology Press release FAQ Amazon product development: http://www.quora.com/What-is-Amazons-approach-to-product-development-and-product-management/answer/Ian-McAllister More on Amazon: http://brendansterne.com/2013/11/21/amazon-product-management-working-backwards/ Development
  40. 40. 40 Interaction model How do I use it?
  41. 41. 41 Interusability Cross-Platform Service User Experience: A Field Study and an Initial Framework. Minna Wäljas, Katarina Segerståhl, Kaisa Väänänen-Vainio-Mattila, Harri Oinas-Kukkonen MobileHCI’10: http://bugi.oulu.fi/~ksegerst/publications/p219-waljas.pdf
  42. 42. 42 Interusability Composition Consistency Continuity
  43. 43. 43 A tale of two thermostats… Images: Tado, British Gas Subset of functions on device, full set in app. Mirrored functions across device & app.
  44. 44. 44 A tale of two thermostats… Images: Tado, British Gas Subset of functions on device, full set in app. Mirrored functions across device & app. Hardware Simpler & cheaper to design & make. More expensive due to UI. Iteration & updates Quick and easy to iterate the product,
 app stores, developer community. Can be tricky. Firmware updates, 
 physical controls. Smartphone Dependent on smartphone for full functionality. Independent from smartphone.
  45. 45. 45 Interusability Composition Consistency Continuity
  46. 46. 46 Consistency is a two-way street. One one hand: Platform conventions On the other:
 Consistency across your touch points Android: Contextual menu iOS: Separate screen
  47. 47. 47 Consistency is a two-way street. Platform conventions vs. System consistency Rotate bezelTap up/down arrows “Click”
  48. 48. 48 Top priority: terminology However different the UIs, identical functions or settings must have the same name. Consistent use of terminology
  49. 49. 49 Consistency Secondary colour Typeface, terminology, accent colour Accent colour CMF Paper insert as a means to delay decision making. This is hard across physical/digital development timelines.
  50. 50. 50 Interusability Composition Consistency Continuity
  51. 51. Image: Kei Noguchi via CC licence 51 Continuity Coherent flow of interactions and data across devices.
  52. 52. 52 Hard because: 1. Latency and reliability of the network. 2. Battery powered devices that only connect intermittently.
  53. 53. 53 Has my action been executed? Delays & interruptions mean there is a third state between on and off.
  54. 54. 54 Option 1 A little white lie to make it feel smooth. Showing the action as executed before it really has.
  55. 55. 55 Option 2 Transparency at the expense of a more complex UI flow. Communicating what is actually happening. Off In progress On
  56. 56. 56 Intermittent connectivity UIs might need timestamped data because they may be out-of-sync. 2 min delay 21
  57. 57. 57 Conversational UI An elegant solution: Conversational UIs.
  58. 58. 58 Prototyping Build the right product before 
 you build the product right.
  59. 59. 59 Experience prototyping Video is a great tool to prototype and explore connected products. Useful prototyping techniques: Media from the future Storyboards Physical props Wizard of Oz Video prototyping
  60. 60. 60 I don’t mean this stuff
  61. 61. 61 30 minute prototype for a connected herb garden sensor.
  62. 62. 62 Sketch-A-Move: Slightly more elaborate. Both a demonstration and an exploration. http://www.superflux.in/work/sketch-move
  63. 63. 63 Sketch-A-Move: Behind the scenes http://www.superflux.in/work/sketch-move Capture imagination and inspire the team Matthias Kranz, et. al http://www.eislab.fim.uni-passau.de/files/ publications/2006/SketchAMove_preprint.pdf
  64. 64. 64 Stills compositions with narration More info: http://www.cooper.com/journal/2008/12/economizer
  65. 65. 65 A storyboard or video prototype can guide the tech requirements More info: http://www.cooper.com/journal/2008/12/economizer Technology requirements Technology requirements Technology requirements Technology requirements
  66. 66. 66 A closing thought Credit: Adam Crickett
  67. 67. 67 Error proof power tools
  68. 68. 68 “Guided cooking for guaranteed success”
  69. 69. 69 Reducing “time to destination”
  70. 70. 70 Smart vending machine
  71. 71. 71 Design responsibility The values that drive connected products will pervade our everyday: Our power tools, our food processors, 
 our elevators and our vending machines…
  72. 72. 72 Design responsibility We need to think about what these values are, and not forget about the whimsical, the inefficient, the serendipitous, the beautiful.
  73. 73. 73 Thank you! @marcharlier m@marcharlier.com www.designingconnectedproducts.com Use code AUTHD for 50% off ebook/ 40% off print at shop.oreilly.com

×