Tweet
Tweet

Slide 1

Slide 1 text

THE LADDER OF SYSTEM THINKING The Ladder of System Thinking An iterative approach to building 
 systems for design Andrew Spencer | Frontend Designer #SparkboxUnConf

Slide 2

Slide 2 text

THE LADDER OF SYSTEM THINKING Problem Dream Solution Problem De fi nition Research Design Design Process

Slide 3

Slide 3 text

THE LADDER OF SYSTEM THINKING Problem Dream Reality Solution Problem De fi nition Research Design Design Process

Slide 4

Slide 4 text

THE LADDER OF SYSTEM THINKING Systems help with… Communication Consistent UI Thoughtful UX Avoiding band-aid solutions Productivity through process

Slide 5

Slide 5 text

THE LADDER OF SYSTEM THINKING https://www.livabl.com/2014/12/architecture-fails.html

Slide 6

Slide 6 text

THE LADDER OF SYSTEM THINKING https://www.architecturendesign.net/poor-design-decisions-fails/

Slide 7

Slide 7 text

THE LADDER OF SYSTEM THINKING https://www.architecturendesign.net/poor-design-decisions-fails/

Slide 8

Slide 8 text

THE LADDER OF SYSTEM THINKING So you need a better system…

Slide 9

Slide 9 text

THE LADDER OF SYSTEM THINKING Build a design system The end So you need a better system…

Slide 10

Slide 10 text

THE LADDER OF SYSTEM THINKING How do we build e ff ective systems?

Slide 11

Slide 11 text

THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System

Slide 12

Slide 12 text

THE LADDER OF SYSTEM THINKING Chaos Action Rapid exploration Design “in your head” Outcome Messy fi les Not sustainable or scalable Best for one designer, ideation

Slide 13

Slide 13 text

THE LADDER OF SYSTEM THINKING Components Action Find solutions from ideation Start with styles and build up Documentation! Outcome Faster to make edits More consistency Natural transition to code Best for two or more designers

Slide 14

Slide 14 text

THE LADDER OF SYSTEM THINKING Design Library Action Collect common components Move outside a single fi le Share components Outcome Teams are on the same page and can share resources Reduce decisions across the team Best for two or more projects

Slide 15

Slide 15 text

THE LADDER OF SYSTEM THINKING Design System Action Combine design, code, and documentation Establish a dedicated team to build and maintain Outcome Design and built components live side by side with documentation Shared understanding between design and engineering Best for large, cross-functional teams

Slide 16

Slide 16 text

THE LADDER OF SYSTEM THINKING Takeaways

Slide 17

Slide 17 text

THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System Consistency

Slide 18

Slide 18 text

THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System E ffi ciency

Slide 19

Slide 19 text

THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System E ff ort

Slide 20

Slide 20 text

THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System Team size

Slide 21

Slide 21 text

THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System Value

Slide 22

Slide 22 text

THE LADDER OF SYSTEM THINKING

Slide 23

Slide 23 text

THE LADDER OF SYSTEM THINKING The ladder of system thinking Chaos, Components, Pattern Library, Design System

Slide 24

Slide 24 text

THE LADDER OF SYSTEM THINKING Next steps Evaluate where you are on the ladder Improve what you have or… Weigh the advantages of the next rung against the e ff ort it takes to get there

Slide 25

Slide 25 text

THE LADDER OF SYSTEM THINKING Thanks! @iam_aspencer