Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Ladder of System Thinking

693de2ed24f77254be781fc44c757363?s=47 Sparkbox
March 25, 2021

The Ladder of System Thinking

An iterative approach to building systems for design.

693de2ed24f77254be781fc44c757363?s=128

Sparkbox

March 25, 2021
Tweet

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