Prototyping all the things

Humans are incredibly bad at predicting the future yet increasingly complex environments require us to do just that in order to avoid costly and even dangerous mistakes. To try and understand the future of our apps, our products, even entire businesses, we make risky guesses and estimations which — not rarely — end up being far from reality.
Prototyping to the rescue! Prototypes built the right way can act as the time machine we always wanted. At Siili, Florian and his team are building prototypes for a wide variety of environments — from in–car guidance systems to kitchen appliances. Through–out the years they have found a way to utilize prototypes as strategic design tool and Florian will share some insights on what he has learned.

Transcript

1. Prototyping
   all the things
   GOTO Night 2015
   

   View Slide

2. My interest is in the future
   because I am going to spend
   the rest of my life there.
   !
   Charles F. Kettering
   “
   

   View Slide

3. Prediction &
   Anticipation
   

   View Slide

4. http:/
   /wikipedia.org/
   

   View Slide

5. View Slide

6. http:/
   /flickr.com/photos/adactio/
   

   View Slide

7. http:/
   /macrumors.com/
   

   View Slide

8. http:/
   /pcmag.com/
   

   View Slide

9. http:/
   /androidpolice.com/
   

   View Slide

10. http:/
    /androidpolice.com/
    

    View Slide

11. http:/
    /wikipedia.org/
    

    View Slide

12. The upcoming generation will
    no longer be able to distinguish
    between online and offline.
    

    View Slide

13. We need new tools
    

    View Slide

14. We can only see a short distance
    ahead, but we can see plenty
    there that needs to be done.
    !
    Alan Turing
    “
    

    View Slide

15. Prototyping as
    Strategic Design Tool
    

    View Slide

16. —Connect across silos
    —Support for short iteration cycles
    —Increase development speed
    —Increase transparency
    —Involve users and designers early on
    —Enable sustainable solutions
    

    View Slide

17. Manifesto
    

    View Slide

18. Assumption is the
    root of all evil
    1
    

    View Slide

19. Ideation is always
    followed by validation
    2
    

    View Slide

20. Design happens
    close to the ‘client’
    3
    

    View Slide

21. Constant change is
    supported by all tools
    4
    

    View Slide

22. Prototypes don’t have
    to be dead–ends
    5
    

    View Slide

23. Experiences
    

    View Slide

24. The ubiquitous browser
    1
    

    View Slide

25. View Slide

26. View Slide

27. POC
    Business
    prototype
    Production
    

    View Slide

28. Business prototype
    Feature
    Prototype
    Production
    Invalid feature
    Validation
    Integration
    

    View Slide

29. Web technology
    

    View Slide

30. —Speed
    —Transparency
    —Variations
    —Validation
    —Education
    

    View Slide

31. —Speed
    —Transparency
    —Variations
    —Validation
    —Education
    Html, CSS, JavaScript
    Meta languages (Haml, Sass, Slim)
    Interpreted languages (Ruby, JS)
    

    View Slide

32. —Speed
    —Transparency
    —Variations
    —Validation
    —Education
    Hosted solution
    Accountability of Design
    Access through browser
    

    View Slide

33. Version control
    Skinning/Theming
    Media Queries
    —Speed
    —Transparency
    —Variations
    —Validation
    —Education
    

    View Slide

34. Tangible design process
    Utilize existing infrastructure
    Short iteration cycles
    —Speed
    —Transparency
    —Variations
    —Validation
    —Education
    

    View Slide

35. Higher availability of experts
    and resources
    —Speed
    —Transparency
    —Variations
    —Validation
    —Education
    

    View Slide

36. Motion on mobile
    2
    

    View Slide

37. People
    

    View Slide

38. Truly responsive,
    on the road
    3
    

    View Slide

39. View Slide

40. Server Client Instances
    WS
    Server
    External inputs
    

    View Slide

41. Client Instance Client Instance Client Instance
    Component
    

    View Slide

42. Client Instance Client Instance Client Instance
    Component Component
    

    View Slide

43. Ruby
    Rack
    Middleman
    Server Client Instances
    WS
    Server
    External inputs
    

    View Slide

44. Html
    CSS
    JavaScript
    SVG (Templating)
    Server Client Instances
    WS
    Server
    

    View Slide

45. JavaScript
    Node.js
    Express
    Einaros
    API proxy
    Server Client Instances
    WS
    Server
    

    View Slide

46. Home appliances
    4
    

    View Slide

47. (Touch)
    Display
    Controls Sensors
    

    View Slide

48. (Touch)
    Display
    Controls Sensors
    ? ?
    ?
    

    View Slide

49. Server
    WS
    Server
    WiFi
    iPhone
    (Touch Display)
    Controls
    Arduino
    

    View Slide

50. Pitfalls
    

    View Slide

51. —Hardware
    —Repeatability
    —Geographical distance
    —Remote updates
    —Education
    —Corporate environment
    

    View Slide

52. StroopBox
    

    View Slide

53. Development
    GIT
    CI/CD
    StroopMeister
    (Proxy)
    Prototype
    

    View Slide

54. View Slide

55. Development
    

    View Slide

56. Raspberry Pi
    or similar
    Arduino Sensors Controls
    — Configuration
    — VM
    — Ruby, Python, JS, C
    — Local WiFi
    — LCD (Status)
    

    View Slide

57. Development
    Prototype
    (Staging)
    Prototype
    (Production)
    Prototype
    Provisioning (Ansible)
    

    View Slide

58. CI/CD
    

    View Slide

59. GIT
    Build Tests Store build artefact
    Notify user
    

    View Slide

60. StroopMeister
    

    View Slide

61. StroopMeister
    Prototype
    SSH Tunnel
    Development
    Error logs
    Certificate “key”
    

    View Slide

62. Updates
    

    View Slide

63. Raspberry Pi
    Certificate “key”
    Update request
    

    View Slide

64. Pull build Stop services Update Restart services
    

    View Slide

65. —Hardware
    —Repeatability
    —Geographical distance
    —Remote updates
    —Education
    —Corporate environment
    

    View Slide

66. Prototyping —
    Strategic Design Tool
    

    View Slide

67. Thanks!
    

    View Slide

68. siili.com / @siili_de / @polarblau
    

    View Slide