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

Design with code and data

Design with code and data

Prototyping is a crucial step in the design process and yet practically nowhere to be found. We shouldn’t be surprised! The medium of choice by the vast majority of designers — Sketch, Figma, Invision — are terrible at building realistic, meaningful prototypes. What could go wrong when we try to validate our designs with illusions?

The future doesn’t have to be like this. Standardization on component-based frameworks like React, growing adoption of design systems, technologies like GraphQL, and a slew of innovative, designer-focused tools that tie everything together, building realistic prototyping is finally within reach. Designers who make the leap into this world will find themselves empowered to create prototypes as an essential part of the design process.

In this talk, we’ll dive deeper into the current state of prototyping and how tools are evolving to allow designers to prototype with code and real data!

Patrick Thompson

November 30, 2018
Tweet

More Decks by Patrick Thompson

Other Decks in Design

Transcript

  1. #CHD18
    PATRICK THOMPSON | CO-FOUNDER / ITERATIVE.LY | @PATRICKT010

    View Slide

  2. View Slide

  3. Iterative.ly
    Rapid product experimentation made simple.

    View Slide

  4. ! ⛵

    View Slide

  5. $

    View Slide

  6. Agenda
    Why are prototypes rarer than a
    Your (better) options in an InVision world
    Why you should build code based prototypes
    Demo of Iteratively
    Q&A

    View Slide

  7. The Atlassian Team Playbook
    www.atlassian.com/team-playbook

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. If a picture is worth a
    thousand words, a prototype
    is worth a thousand meetings.
    @IDEO

    View Slide

  12. Create a shared
    understanding amongst
    the team.
    Increase the likelihood of
    shipping the right
    experience by testing it
    with customers.
    CUSTOMER VALIDATION INTERNAL COMMUNICATION

    View Slide

  13. DEGREES OF FIDELITY
    Paper Wireframe Visual Code Experiment
    50 60 70 80 95
    Confidence
    Effort

    View Slide

  14. Modern tools
    Graphics
    DEGREES OF FIDELITY
    Paper Wireframe Visual Code Experiment
    50 60 70 80 95
    Confidence
    Effort

    View Slide

  15. Modern tools
    Graphics
    DEGREES OF FIDELITY
    Paper Wireframe Visual Code Experiment
    Effort

    View Slide

  16. Modern tools
    Graphics
    DEGREES OF FIDELITY
    Paper Wireframe Experiment
    Effort
    Code

    View Slide

  17. Agenda
    Why are prototypes rarer than a
    Your (better) options in an InVision world
    Why you should build code based prototypes
    Demo of Iteratively
    Q&A

    View Slide

  18. • Only testing the happy path
    • Not testing with real customer data
    • Unsure how repeat usage will impact the experience
    PAIN POINTS

    View Slide

  19. View Slide

  20. View Slide

  21. OTHER INDUSTRIES
    Gaming
    Unity, Maya
    Mobile
    Storyboard, Layout Editor
    Web
    &

    View Slide

  22. OTHER INDUSTRIES
    Gaming
    Unity, Maya
    Mobile
    Storyboard, Layout Editor
    Web
    &

    View Slide

  23. OTHER INDUSTRIES
    Gaming
    Unity, Maya
    Mobile
    Storyboard, Layout Editor
    Web
    &

    View Slide

  24. View Slide

  25. • Mass adoption of component based frameworks and design systems
    • Lower barrier to creating product experiences
    • The emergence of the ‘devsigner’
    TRENDS

    View Slide

  26. Agenda
    Why are prototypes rarer than a
    Your (better) options in an InVision world
    Why you should build code based prototypes
    Demo of Iteratively
    Q&A

    View Slide

  27. • Designing in the same medium as your customer
    • Fully interactive, components manage state
    • No more testing just the happy path, or managing hundreds of artboards
    • You can show real customer data via APIs
    • Add conditional logic and use variables to create live-data prototypes
    • Eases handoff as we’re all speaking the same language
    BENEFITS OF CODE

    View Slide

  28. View Slide

  29. Iterative.ly

    View Slide

  30. Agenda
    Why are prototypes rarer than a
    Your (better) options in an InVision world
    Why you should build code based prototypes
    Demo of Iteratively
    Q&A

    View Slide

  31. • Invest in a comprehensive code-based design system library. Use it for all
    presentational components in your app - no exceptions.
    • Expose simple, intuitive props - your library will be used by the design tools
    of the future.
    • Follow Atomic principles - this enables designers to envision and compose
    brand new interfaces.
    • Document well - use propTypes and defaultProps. Consider tools like
    Storybook and Styleguidist.
    WRAPPING IT UP (ENGINEERS)

    View Slide

  32. • Broaden your horizons beyond Sketch and InVision. Code brings you
    exponentially closer to the real product.
    • Invest in component standardization and reuse.
    • Turn code-based prototyping into an integral part of your design process.
    • Invest in understanding your medium for greater impact and autonomy.
    WRAPPING IT UP (DESIGNERS)

    View Slide

  33. Agenda
    Why are prototypes rarer than a
    Your (better) options in an InVision world
    Why you should build code based prototypes
    Demo of Iteratively
    Q&A

    View Slide

  34. Thanks!
    [email protected] or @patrickt010

    View Slide