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
   

   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