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

  2. Iterative.ly
    Rapid product experimentation made simple.

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

  18. • 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 full-size slide

  19. Iterative.ly

    View full-size slide

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

  21. • 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 full-size slide

  22. • 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 full-size slide

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

  24. Thanks!
    [email protected] or @patrickt010

    View full-size slide