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
   

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

    View Slide