Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prototyping all the things

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.

Florian Plank

July 07, 2015
Tweet

More Decks by Florian Plank

Other Decks in Technology

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. 1
    3
    2

    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