Design with code and data

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Iterative.ly Rapid product experimentation made simple.

Slide 4

Slide 4 text

! ⛵

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

DEGREES OF FIDELITY Paper Wireframe Visual Code Experiment 50 60 70 80 95 Conﬁdence Effort

Slide 14

Slide 14 text

Modern tools Graphics DEGREES OF FIDELITY Paper Wireframe Visual Code Experiment 50 60 70 80 95 Conﬁdence Effort

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Modern tools Graphics DEGREES OF FIDELITY Paper Wireframe Experiment Effort Code

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

• 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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Iterative.ly

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

• 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)

Slide 32

Slide 32 text

• 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)

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Thanks! [email protected] or @patrickt010