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 full-size slide

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

    View full-size slide

  3. Prediction &
    Anticipation

    View full-size slide

  4. http:/
    /wikipedia.org/

    View full-size slide

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

    View full-size slide

  6. http:/
    /macrumors.com/

    View full-size slide

  7. http:/
    /pcmag.com/

    View full-size slide

  8. http:/
    /androidpolice.com/

    View full-size slide

  9. http:/
    /androidpolice.com/

    View full-size slide

  10. http:/
    /wikipedia.org/

    View full-size slide

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

    View full-size slide

  12. We need new tools

    View full-size slide

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

    View full-size slide

  14. Prototyping as
    Strategic Design Tool

    View full-size slide

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

    View full-size slide

  16. Assumption is the
    root of all evil
    1

    View full-size slide

  17. Ideation is always
    followed by validation
    2

    View full-size slide

  18. Design happens
    close to the ‘client’
    3

    View full-size slide

  19. Constant change is
    supported by all tools
    4

    View full-size slide

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

    View full-size slide

  21. The ubiquitous browser
    1

    View full-size slide

  22. POC
    Business
    prototype
    Production

    View full-size slide

  23. Business prototype
    Feature
    Prototype
    Production
    Invalid feature
    Validation
    Integration

    View full-size slide

  24. Web technology

    View full-size slide

  25. —Speed
    —Transparency
    —Variations
    —Validation
    —Education

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. Motion on mobile
    2

    View full-size slide

  32. Truly responsive,
    on the road
    3

    View full-size slide

  33. Server Client Instances
    WS
    Server
    External inputs

    View full-size slide

  34. Client Instance Client Instance Client Instance
    Component

    View full-size slide

  35. Client Instance Client Instance Client Instance
    Component Component

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. Home appliances
    4

    View full-size slide

  40. (Touch)
    Display
    Controls Sensors

    View full-size slide

  41. (Touch)
    Display
    Controls Sensors
    ? ?
    ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. GIT
    Build Tests Store build artefact
    Notify user

    View full-size slide

  48. StroopMeister

    View full-size slide

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

    View full-size slide

  50. Raspberry Pi
    Certificate “key”
    Update request

    View full-size slide

  51. Pull build Stop services Update Restart services

    View full-size slide

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

    View full-size slide

  53. Prototyping —
    Strategic Design Tool

    View full-size slide

  54. siili.com / @siili_de / @polarblau

    View full-size slide