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!

69de3badfe38e44e33601cea057dcb81?s=128

Patrick Thompson

November 30, 2018
Tweet

Transcript

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

  2. None
  3. Iterative.ly Rapid product experimentation made simple.

  4. ! ⛵

  5. $

  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
  7. The Atlassian Team Playbook www.atlassian.com/team-playbook

  8. None
  9. None
  10. None
  11. If a picture is worth a thousand words, a prototype

    is worth a thousand meetings. @IDEO
  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
  13. DEGREES OF FIDELITY Paper Wireframe Visual Code Experiment 50 60

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

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

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

    Code
  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
  18. • Only testing the happy path • Not testing with

    real customer data • Unsure how repeat usage will impact the experience PAIN POINTS
  19. None
  20. None
  21. OTHER INDUSTRIES Gaming Unity, Maya Mobile Storyboard, Layout Editor Web

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

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

    &
  24. None
  25. • Mass adoption of component based frameworks and design systems

    • Lower barrier to creating product experiences • The emergence of the ‘devsigner’ TRENDS
  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
  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
  28. None
  29. Iterative.ly

  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
  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)
  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)
  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
  34. Thanks! patrick@iterative.ly or @patrickt010