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

The Ladder of System Thinking

Sparkbox
March 25, 2021

The Ladder of System Thinking

An iterative approach to building systems for design.

Sparkbox

March 25, 2021
Tweet

More Decks by Sparkbox

Other Decks in 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

    View Slide

  2. THE LADDER OF SYSTEM THINKING
    Problem
    Dream
    Solution
    Problem


    De
    fi
    nition
    Research Design
    Design Process

    View Slide

  3. THE LADDER OF SYSTEM THINKING
    Problem
    Dream
    Reality
    Solution
    Problem


    De
    fi
    nition
    Research Design
    Design Process

    View Slide

  4. THE LADDER OF SYSTEM THINKING
    Systems help with…
    Communication


    Consistent UI


    Thoughtful UX
    Avoiding band-aid solutions


    Productivity through process

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. THE LADDER OF SYSTEM THINKING
    Chaos
    Components
    Pattern Library
    Design System

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  16. THE LADDER OF SYSTEM THINKING
    Takeaways

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. THE LADDER OF SYSTEM THINKING

    View Slide

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

    View Slide

  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

    View Slide

  25. THE LADDER OF SYSTEM THINKING
    Thanks!
    @iam_aspencer

    View Slide