Josh Thompson - Design Systems with augmented teams: best practice for connection and alignment

UX Australia 2021 DAY 2

This talk will identify the role Design Systems play in connecting and aligning teams and organisations. Referencing case studies for some of Australia’s largest retailers, it will suggest best practices for DesignOps, Agile, and Ways of Working for e-commerce projects.

Transcript

1. 1
   Josh Thompson | UXA2021
   Design Systems
   with Augmented
   Teams: Best Practice
   for Connection and
   Alignment
   

   View Slide

2. 2
   Josh Thompson | UXA2021
   What I am going to take
   you through today
   What is a
   design system
   Benefits of a
   design system
   Stages of a
   design system
   Lessons I have
   learnt
   The tools
   

   View Slide

3. 3
   Josh Thompson | UXA2021
   What I am going to take
   you through today
   What is a
   design system
   Benefits of a
   design system
   Stages of a
   design system
   Lessons I have
   learnt
   The tools
   

   View Slide

4. 4
   Josh Thompson | UXA2021
   What I am going to take
   you through today
   What is a
   design system
   Benefits of a
   design system
   Stages of a
   design system
   Lessons I have
   learnt
   The tools
   

   View Slide

5. 5
   Josh Thompson | UXA2021
   What I am going to take
   you through today
   What is a
   design system
   Benefits of a
   design system
   Stages of a
   design system
   Lessons I have
   learnt
   The tools
   

   View Slide

6. 6
   Josh Thompson | UXA2021
   What I am going to take
   you through today
   What is a
   design system
   Benefits of a
   design system
   Stages of a
   design system
   Lessons I have
   learnt
   The tools
   

   View Slide

7. 7
   An ever
   changing world
   Josh Thompson | UXA2021
   

   View Slide

8. 8
   What is wrong
   with this image?
   Josh Thompson | UXA2021
   

   View Slide

9. 9
   What is wrong
   with this image?
   Josh Thompson | UXA2021
   

   View Slide

10. 10
    Poor urban design
    (systems)
    =
    Confusion
    Unsafe
    No confidence
    Not meeting needs
    No design system
    =
    Siloed
    Misalignment
    Inconsistent
    Not serving all users
    Josh Thompson | UXA2021
    

    View Slide

11. 11
    What is a design system
    and why do we need one?
    Josh Thompson | UXA2021
    

    View Slide

12. 12
    What is a design system
    and why do we need one?
    Josh Thompson | UXA2021
    

    View Slide

13. 13
    Josh Thompson | UXA2021
    

    View Slide

14. 14
    Josh Thompson | UXA2021
    New patterns, styles, ideas
    

    View Slide

15. 15
    Josh Thompson | UXA2021
    New patterns, styles, ideas
    New patterns, styles, ideas
    New patterns, styles, ideas
    

    View Slide

16. 16
    Josh Thompson | UXA2021
    Customer
    experience
    suffers
    =
    Slower
    development
    cycles
    Josh Thompson | UXA2021
    New patterns, styles, ideas
    New patterns, styles, ideas
    New patterns, styles, ideas
    

    View Slide

17. 17
    Josh Thompson | UXA2021
    Are we using the correct red?
    Is that the right hex code?
    Is that the primary CTA pattern?
    Where can I find that
    component?
    

    View Slide

18. 18
    Josh Thompson | UXA2021
    Brand Language Design Principles
    Implementation
    Guidelines
    Content Guidelines
    Ecosystem Overview
    Organisational
    Structure
    Onboarding & Role
    Resources
    Editorial Guidelines
    Elements Components Templates
    Colours Typography Grids Icons
    DESIGN SYSTEM
    Tokens or Building Blocks
    Elements or Atomic Design
    Rules & Standards
    What is in a
    design system?
    Modules
    

    View Slide

19. 19
    Josh Thompson | UXA2021
    Brand Language Design Principles
    Implementation
    Guidelines
    Content Guidelines
    Ecosystem Overview
    Organisational
    Structure
    Onboarding & Role
    Resources
    Editorial Guidelines
    Elements Components Templates
    Colours Typography Grids Icons
    DESIGN SYSTEM
    Tokens or Building Blocks
    Elements or Atomic Design
    Rules & Standards
    What is in a
    design system?
    Modules
    

    View Slide

20. 20
    Josh Thompson | UXA2021
    Brand Language Design Principles
    Implementation
    Guidelines
    Content Guidelines
    Ecosystem Overview
    Organisational
    Structure
    Onboarding & Role
    Resources
    Editorial Guidelines
    Elements Components Templates
    Colours Typography Grids Icons
    DESIGN SYSTEM
    Tokens or Building Blocks
    Elements or Atomic Design
    Rules & Standards
    What is in a
    design system?
    Modules
    

    View Slide

21. 21
    Josh Thompson | UXA2021
    Brand Language Design Principles
    Implementation
    Guidelines
    Content Guidelines
    Ecosystem Overview
    Organisational
    Structure
    Onboarding & Role
    Resources
    Editorial Guidelines
    Elements Components Templates
    Colours Typography Grids Icons
    DESIGN SYSTEM
    Tokens or Building Blocks
    Elements or Atomic Design
    Rules & Standards
    What is in a
    design system?
    Modules
    

    View Slide

22. 22
    Josh Thompson | UXA2021
    Brand Language Design Principles
    Implementation
    Guidelines
    Content Guidelines
    Ecosystem Overview
    Organisational
    Structure
    Onboarding & Role
    Resources
    Editorial Guidelines
    Elements Components Templates
    Colours Typography Grids Icons
    DESIGN SYSTEM
    Tokens or Building Blocks
    Elements or Atomic Design
    Rules & Standards
    What is in a
    design system?
    Modules
    

    View Slide

23. 23
    IBM Carbon design system
    Atlassian design system
    Lightning design system
    Josh Thompson | UXA2021
    

    View Slide

24. 24
    A design system is always
    ready and never finished
    “
    “
    Josh Thompson | UXA2021
    

    View Slide

25. 25
    Josh Thompson | UXA2021
    The benefits of a
    design system
    Visibility
    Faster delivery
    & speed to
    market
    Standardisation
    Predictable,
    safe and
    scalable
    Flexibility
    

    View Slide

26. 26
    Josh Thompson | UXA2021
    The benefits of a
    design system
    Visibility
    Faster delivery
    & speed to
    market
    Standardisation
    Predictable,
    safe and
    scalable
    Flexibility
    

    View Slide

27. 27
    Josh Thompson | UXA2021
    Designers
    Developers
    Multiple Users
    

    View Slide

28. 28
    Josh Thompson | UXA2021
    The benefits of a
    design system
    Visibility
    Faster delivery
    & speed to
    market
    Standardisation
    Predictable,
    safe and
    scalable
    Flexibility
    

    View Slide

29. 29
    Josh Thompson | UXA2021
    Global colour change from
    9 months to 3 minutes
    

    View Slide

30. 30
    Josh Thompson | UXA2021
    The benefits of a
    design system
    Visibility
    Faster delivery
    & speed to
    market
    Standardisation
    Predictable,
    safe and
    scalable
    Flexibility
    

    View Slide

31. 31
    Josh Thompson | UXA2021
    Design systems do save time and money. Just by
    eliminating code redundancy, more than 20% of a
    developer’s time can be regained. For a team of 100
    developers, this means around US$2 million per year.
    “
    “
    Drew Loomer, Managing Architect, projekt202
    

    View Slide

32. 32
    Josh Thompson | UXA2021
    The benefits of a
    design system
    Visibility
    Faster delivery
    & speed to
    market
    Standardisation
    Predictable,
    safe and
    scalable
    Flexibility
    

    View Slide

33. 33
    Josh Thompson | UXA2021
    The benefits of a
    design system
    Visibility
    Faster delivery
    & speed to
    market
    Standardisation
    Predictable,
    safe and
    scalable
    Flexibility
    

    View Slide

34. 34
    Josh Thompson | UXA2021
    The stages of a design
    system (in cycling terms)...
    

    View Slide

35. 35
    Stage 1
    ● Audits
    ● Analysis
    ● Testing
    ● Assessment
    ● Synthesis
    Josh Thompson | UXA2021
    The stages of a design system
    

    View Slide

36. 36
    Stage 1 Stage 2
    ● Audits
    ● Analysis
    ● Testing
    ● Assessment
    ● Synthesis
    Josh Thompson | UXA2021
    ● Form design system team
    ● Establishing standards, ways of
    working, comms channels and
    ceremonies
    ● Return on investment baselines
    ● Internal design system launch
    The stages of a design system
    

    View Slide

37. 37
    Stage 1 Stage 2 Stage 3
    ● Audits
    ● Analysis
    ● Testing
    ● Assessment
    ● Synthesis
    Josh Thompson | UXA2021
    ● Form design system team
    ● Establishing standards, ways of
    working, comms channels and
    ceremonies
    ● Return on investment baselines
    ● Internal design system launch
    ● Review ways of working and
    processes
    ● Adjust team size, role’s and
    responsibilities
    ● Return on investment (ROI)
    benchmark review (quarterly)
    ● Public design system launch
    The stages of a design system
    

    View Slide

38. 38
    Stage 1 Stage 2 Stage 3 Stage 4
    ● Audits
    ● Analysis
    ● Testing
    ● Assessment
    ● Synthesis
    Josh Thompson | UXA2021
    ● Form design system team
    ● Establishing standards, ways of
    working, comms channels and
    ceremonies
    ● Return on investment baselines
    ● Internal design system launch
    ● Review ways of working and
    processes
    ● Adjust team size, role’s and
    responsibilities
    ● Return on investment (ROI)
    benchmark review (quarterly)
    ● Public design system launch
    ● Continuous optimisation
    ● Evaluation of processes and
    team structures
    ● ROI report to business
    ● Rinse and repeat
    The stages of a design system
    

    View Slide

39. 39
    Stage 1 Stage 2 Stage 3 Stage 4 Stage 5
    ● Audits
    ● Analysis
    ● Testing
    ● Assessment
    ● Synthesis
    Josh Thompson | UXA2021
    ● Form design system team
    ● Establishing standards, ways of
    working, comms channels and
    ceremonies
    ● Return on investment baselines
    ● Internal design system launch
    ● Review ways of working and
    processes
    ● Adjust team size, roles and
    responsibilities
    ● Return on investment (ROI)
    benchmark review (quarterly)
    ● Public design system launch
    ● Continuous optimisation
    ● Evaluation of processes and
    team structures
    ● ROI report to business
    ● Rinse and repeat
    ● Build in other brands,
    banners or pillars of the
    business
    The stages of a design system
    

    View Slide

40. 40
    Josh Thompson | UXA2021
    The lessons I’ve learnt and
    mistakes we’ve made
    

    View Slide

41. 41
    Josh Thompson | UXA2021
    Lessons learnt
    580
    Font styles
    58
    Unique colours
    

    View Slide

42. 42
    Josh Thompson | UXA2021
    Lessons learnt
    13
    Font styles
    11
    Unique colours
    

    View Slide

43. 43
    Josh Thompson | UXA2021
    Brand Language Design Principles
    Implementation
    Guidelines
    Content Guidelines
    Ecosystem Overview
    Organisational
    Structure
    Onboarding & Role
    Resources
    Editorial Guidelines
    Elements Components Templates
    Colours Typography Grids Icons
    DESIGN SYSTEM
    Tokens or Building Blocks
    Elements or Atomic Design
    Rules & Standards
    Modules
    

    View Slide

44. 44
    Josh Thompson | UXA2021
    

    View Slide

45. 45
    Josh Thompson | UXA2021
    Brand Language Design Principles
    Implementation
    Guidelines
    Content Guidelines
    Ecosystem Overview
    Organisational
    Structure
    Onboarding & Role
    Resources
    Editorial Guidelines
    Elements Components Templates
    Colours Typography Grids Icons
    DESIGN SYSTEM
    Tokens or Building Blocks
    Elements or Atomic Design
    Rules & Standards
    Modules
    

    View Slide

46. 46
    The Tools...
    Josh Thompson | UXA2021
    

    View Slide

47. 47
    Josh Thompson | UXA2021
    

    View Slide

48. 48
    The spinny
    rainbow of death
    Josh Thompson | UXA2021
    

    View Slide

49. 49
    Josh Thompson | UXA2021
    

    View Slide

50. 50
    Josh Thompson | UXA2021
    

    View Slide

51. 51
    Josh Thompson | UXA2021
    

    View Slide

52. 52
    Josh Thompson | UXA2021
    

    View Slide

53. 53
    Josh Thompson | UXA2021
    + + = Not collaborative
    Files hard to find
    Hard to control versions
    No comments within artwork
    Not centralised
    Costly
    

    View Slide

54. 54
    Josh Thompson | UXA2021
    homepage-design.v1
    

    View Slide

55. 55
    Josh Thompson | UXA2021
    homepage-design.v1
    homepage-design.v2
    

    View Slide

56. 56
    Josh Thompson | UXA2021
    homepage-design.v1
    homepage-design.v2
    homepage-design.v3
    

    View Slide

57. 57
    Josh Thompson | UXA2021
    homepage-design.v1
    homepage-design.v2
    homepage-design.v3
    homepage-design.v4
    

    View Slide

58. 58
    Josh Thompson | UXA2021
    homepage-design.v1
    homepage-design.v2
    homepage-design.v3
    homepage-design.v4
    homepage-design.v5
    

    View Slide

59. 59
    Josh Thompson | UXA2021
    homepage-design.v1
    homepage-design.v2
    homepage-design.v3
    homepage-design.v4
    homepage-design.v5
    homepage-design.v5_final
    

    View Slide

60. 60
    Josh Thompson | UXA2021
    homepage-design.v1
    homepage-design.v2
    homepage-design.v3
    homepage-design.v4
    homepage-design.v5
    homepage-design.v5_final
    homepage-design.v5_final_final
    

    View Slide

61. 61
    Josh Thompson | UXA2021
    homepage-design.v1
    homepage-design.v2
    homepage-design.v3
    homepage-design.v4
    homepage-design.v5
    homepage-design.v5_final
    homepage-design.v5_final_final
    homepage-design.v5_final_final_USE_THIS_ONE
    

    View Slide

62. 62
    Josh Thompson | UXA2021
    

    View Slide

63. 63
    Josh Thompson | UXA2021
    Live design collaboration Prototype Code
    

    View Slide

64. 64
    My journey...
    Josh Thompson | UXA2021
    

    View Slide

65. 65
    The incredible
    highs
    Josh Thompson | UXA2021
    

    View Slide

66. 66
    The low lows
    Josh Thompson | UXA2021
    

    View Slide

67. 67
    Tokyo
    Olympics
    Emma McKeon
    Genevieve Gregson
    Josh Thompson | UXA2021
    

    View Slide

68. 68
    The aggregation
    of marginal
    gains
    Dave Brailsford
    Josh Thompson | UXA2021
    

    View Slide

69. 69
    Tokyo
    Olympics
    Speed climbing
    Artistic swimming
    Josh Thompson | UXA2021
    

    View Slide

70. 70
    Lay the
    foundations...
    Josh Thompson | UXA2021
    

    View Slide

71. 71
    Josh Thompson | UXA2021
    start small
    

    View Slide

72. 72
    Josh Thompson | UXA2021
    start small
    develop a proof of concept
    

    View Slide

73. 73
    Josh Thompson | UXA2021
    start small
    develop a proof of concept
    ensure adoption and alignment
    

    View Slide

74. 74
    Josh Thompson | UXA2021
    start small
    develop a proof of concept
    ensure adoption and alignment
    define principles
    

    View Slide

75. 75
    Josh Thompson | UXA2021
    start small
    develop a proof of concept
    ensure adoption and alignment
    define principles
    set goals
    

    View Slide

76. 76
    Josh Thompson | UXA2021
    start small
    develop a proof of concept
    ensure adoption and alignment
    define principles
    set goals
    define tokens and guidelines
    

    View Slide

77. 77
    Josh Thompson | UXA2021
    start small
    develop a proof of concept
    ensure adoption and alignment
    define principles
    set goals
    define tokens and guidelines
    start to scale
    

    View Slide

78. 78
    Thank you.
    linktr.ee/jhtommo
    

    View Slide