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
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
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
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
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
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
7. 7 An ever changing world Josh Thompson | UXA2021
8. 8 What is wrong with this image? Josh Thompson | UXA2021
9. 9 What is wrong with this image? Josh Thompson | UXA2021
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
11. 11 What is a design system and why do we need one? Josh Thompson | UXA2021
12. 12 What is a design system and why do we need one? Josh Thompson | UXA2021
13. 13 Josh Thompson | UXA2021
14. 14 Josh Thompson | UXA2021 New patterns, styles, ideas
15. 15 Josh Thompson | UXA2021 New patterns, styles, ideas New patterns, styles, ideas New patterns, styles, ideas
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
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?
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
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
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
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
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
23. 23 IBM Carbon design system Atlassian design system Lightning design system Josh Thompson | UXA2021
24. 24 A design system is always ready and never finished “ “ Josh Thompson | UXA2021
25. 25 Josh Thompson | UXA2021 The benefits of a design system Visibility Faster delivery & speed to market Standardisation Predictable, safe and scalable Flexibility
26. 26 Josh Thompson | UXA2021 The benefits of a design system Visibility Faster delivery & speed to market Standardisation Predictable, safe and scalable Flexibility
27. 27 Josh Thompson | UXA2021 Designers Developers Multiple Users
28. 28 Josh Thompson | UXA2021 The benefits of a design system Visibility Faster delivery & speed to market Standardisation Predictable, safe and scalable Flexibility
29. 29 Josh Thompson | UXA2021 Global colour change from 9 months to 3 minutes
30. 30 Josh Thompson | UXA2021 The benefits of a design system Visibility Faster delivery & speed to market Standardisation Predictable, safe and scalable Flexibility
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
32. 32 Josh Thompson | UXA2021 The benefits of a design system Visibility Faster delivery & speed to market Standardisation Predictable, safe and scalable Flexibility
33. 33 Josh Thompson | UXA2021 The benefits of a design system Visibility Faster delivery & speed to market Standardisation Predictable, safe and scalable Flexibility
34. 34 Josh Thompson | UXA2021 The stages of a design system (in cycling terms)...
35. 35 Stage 1 • Audits • Analysis • Testing • Assessment • Synthesis Josh Thompson | UXA2021 The stages of a design system
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
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
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
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
40. 40 Josh Thompson | UXA2021 The lessons I’ve learnt and mistakes we’ve made
41. 41 Josh Thompson | UXA2021 Lessons learnt 580 Font styles 58 Unique colours
42. 42 Josh Thompson | UXA2021 Lessons learnt 13 Font styles 11 Unique colours
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
44. 44 Josh Thompson | UXA2021
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
46. 46 The Tools... Josh Thompson | UXA2021
47. 47 Josh Thompson | UXA2021
48. 48 The spinny rainbow of death Josh Thompson | UXA2021
49. 49 Josh Thompson | UXA2021
50. 50 Josh Thompson | UXA2021
51. 51 Josh Thompson | UXA2021
52. 52 Josh Thompson | UXA2021
53. 53 Josh Thompson | UXA2021 + + = Not collaborative Files hard to find Hard to control versions No comments within artwork Not centralised Costly
54. 54 Josh Thompson | UXA2021 homepage-design.v1
55. 55 Josh Thompson | UXA2021 homepage-design.v1 homepage-design.v2
56. 56 Josh Thompson | UXA2021 homepage-design.v1 homepage-design.v2 homepage-design.v3
57. 57 Josh Thompson | UXA2021 homepage-design.v1 homepage-design.v2 homepage-design.v3 homepage-design.v4
58. 58 Josh Thompson | UXA2021 homepage-design.v1 homepage-design.v2 homepage-design.v3 homepage-design.v4 homepage-design.v5
59. 59 Josh Thompson | UXA2021 homepage-design.v1 homepage-design.v2 homepage-design.v3 homepage-design.v4 homepage-design.v5 homepage-design.v5_final
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
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
62. 62 Josh Thompson | UXA2021
63. 63 Josh Thompson | UXA2021 Live design collaboration Prototype Code
64. 64 My journey... Josh Thompson | UXA2021
65. 65 The incredible highs Josh Thompson | UXA2021
66. 66 The low lows Josh Thompson | UXA2021
67. 67 Tokyo Olympics Emma McKeon Genevieve Gregson Josh Thompson | UXA2021
68. 68 The aggregation of marginal gains Dave Brailsford Josh Thompson | UXA2021
69. 69 Tokyo Olympics Speed climbing Artistic swimming Josh Thompson | UXA2021
70. 70 Lay the foundations... Josh Thompson | UXA2021
71. 71 Josh Thompson | UXA2021 start small
72. 72 Josh Thompson | UXA2021 start small develop a proof of concept
73. 73 Josh Thompson | UXA2021 start small develop a proof of concept ensure adoption and alignment
74. 74 Josh Thompson | UXA2021 start small develop a proof of concept ensure adoption and alignment define principles
75. 75 Josh Thompson | UXA2021 start small develop a proof of concept ensure adoption and alignment define principles set goals
76. 76 Josh Thompson | UXA2021 start small develop a proof of concept ensure adoption and alignment define principles set goals define tokens and guidelines
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
78. 78 Thank you. linktr.ee/jhtommo