The Ladder of System Thinking

An iterative approach to building systems for design.

Transcript

1. THE LADDER OF SYSTEM THINKING The Ladder of System Thinking An iterative approach to building 
 systems for design Andrew Spencer | Frontend Designer #SparkboxUnConf
2. THE LADDER OF SYSTEM THINKING Problem Dream Solution Problem De fi nition Research Design Design Process
3. THE LADDER OF SYSTEM THINKING Problem Dream Reality Solution Problem De fi nition Research Design Design Process
4. THE LADDER OF SYSTEM THINKING Systems help with… Communication Consistent UI Thoughtful UX Avoiding band-aid solutions Productivity through process
5. THE LADDER OF SYSTEM THINKING https://www.livabl.com/2014/12/architecture-fails.html
6. THE LADDER OF SYSTEM THINKING https://www.architecturendesign.net/poor-design-decisions-fails/
7. THE LADDER OF SYSTEM THINKING https://www.architecturendesign.net/poor-design-decisions-fails/
8. THE LADDER OF SYSTEM THINKING So you need a better system…
9. THE LADDER OF SYSTEM THINKING Build a design system The end So you need a better system…
10. THE LADDER OF SYSTEM THINKING How do we build e ff ective systems?
11. THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System
12. 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
13. 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
14. 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
15. 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
16. THE LADDER OF SYSTEM THINKING Takeaways
17. THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System Consistency
18. THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System E ffi ciency
19. THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System E ff ort
20. THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System Team size
21. THE LADDER OF SYSTEM THINKING Chaos Components Pattern Library Design System Value
22. THE LADDER OF SYSTEM THINKING
23. THE LADDER OF SYSTEM THINKING The ladder of system thinking Chaos, Components, Pattern Library, Design System
24. 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
25. THE LADDER OF SYSTEM THINKING Thanks! @iam_aspencer