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!

Transcript

1. #CHD18 PATRICK THOMPSON | CO-FOUNDER / ITERATIVE.LY | @PATRICKT010
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
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
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 &
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
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