Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE

Building a successful design system is widely held as one of the biggest challenges in the industry right now. How much harder is it when you’re building a design system for a 250 year old, heavily regulated, multi-brand organisation?

When Lily Dart joined Lloyds Banking Group nearly 2 years ago, she faced a challenging environment. Her team identified 40+ different design languages across multiple platforms and brands. She had over 8000 designers and developers as customers, across more than 150 teams.

2 years later, their design system Constellation is widely used, and about to expand into iOS and Android interfaces. Find out how Lily and her team beat the organisational odds, saving the business an estimated 3.5mil in their first year of operation.

Transcript

1. @lily_dart Constellation DS @lily_dart Head of Design Systems Lloyds Banking Group
2. @lily_dart Design systems are the hot new thing right now.
3. @lily_dart
4. @lily_dart What is a design system?
5. @lily_dart I tend to define a design system as the official story of how your organization designs and builds digital products.” Brad Frost “
6. @lily_dart A design system is a product made for the organisation. It provides the tools, materials, guidance and standards needed for digital design and delivery.” Me “
7. @lily_dart Principles Brand Vision
8. @lily_dart Design System Principles Brand Vision
9. @lily_dart Design System Team Team Team Team Principles Brand Vision
10. @lily_dart Design System Team Team Team Team Principles Brand Vision
11. @lily_dart Design System Team Team Team Product Team Principles Brand Vision
12. @lily_dart Design System Team Team Team Product Team Principles Brand Vision
13. @lily_dart Design System Team Team Team Product Team Principles Brand Vision
14. @lily_dart video of Constellation
15. @lily_dart video of Constellation
16. @lily_dart
17. @lily_dart Github
18. @lily_dart What is the purpose of a design system?
19. @lily_dart What is the purpose of a design system?
20. @lily_dart What is the purpose of a design system?
21. @lily_dart Autonomy Size of team
22. @lily_dart Autonomy Size of team
23. @lily_dart Autonomy Size of team
24. @lily_dart Autonomy Size of team
25. @lily_dart Autonomy Size of team
26. @lily_dart Autonomy Size of team
27. @lily_dart Autonomy Size of team
28. @lily_dart Autonomy Size of team
29. @lily_dart Autonomy Size of team
30. @lily_dart Autonomy Size of team Alignment - -
31. @lily_dart Design system Autonomy Size of team Alignment - -
32. @lily_dart Each new interpretation of the colour palette risks accessibility failures.
33. @lily_dart
34. @lily_dart
35. @lily_dart
36. @lily_dart Fail Fail Fail Pass Fail Fail Fail Fail Fail Pass Fail Fail Fail Pass Fail Fail Fail Pass Fail Fail Fail Fail Fail Pass Pass Pass Pass Pass Pass Fail
37. @lily_dart 15 colours
38. @lily_dart 15 x 15 colours
39. @lily_dart 15 x 15 colours 225 potential combinations =
40. @lily_dart 15 x 15 colours 225 potential combinations =
41. @lily_dart Fail Fail Fail Pass Fail Fail Fail Fail Fail Pass Fail Fail Fail Pass Fail Fail Fail Pass Fail Fail Fail Fail Fail Pass Pass Pass Pass Pass Pass Fail
42. @lily_dart
43. @lily_dart
44. @lily_dart Customers may perceive an inconsistent UI as unprofessional, buggy or at worst fraudulent.
45. @lily_dart Customers may perceive an inconsistent UI as unprofessional, buggy or at worst fraudulent.
46. @lily_dart
47. @lily_dart
48. @lily_dart
49. @lily_dart 225 colour combinations
50. @lily_dart 225 colour combinations 350 designers x
51. @lily_dart 225 colour combinations 350 designers 78750 decisions x =
52. @lily_dart 225 colour combinations 350 designers 78750 decisions x =
53. @lily_dart 225 colour combinations 350 designers 78750 decisions x =
54. @lily_dart
55. @lily_dart
56. @lily_dart Design documentation does not deliver products to customers. Code does.
57. @lily_dart Design documentation does not deliver products to customers. Code does.
58. @lily_dart
59. @lily_dart customer designer developer
60. @lily_dart customer designer developer
61. @lily_dart customer designer developer
62. @lily_dart customer designer developer pop-up? interstitial? dialog?
63. @lily_dart customer designer developer pop-up? interstitial? dialog? #295EC8 #2B5BC4 #245AC0 #245AC0
64. @lily_dart customer designer developer pop-up? interstitial? dialog? #295EC8 #2B5BC4 #245AC0 #245AC0
65. @lily_dart customer designer developer pop-up? interstitial? dialog? #295EC8 #2B5BC4 #245AC0 #245AC0
66. @lily_dart What goes into our design system?
67. @lily_dart Colours
68. @lily_dart Fonts
69. @lily_dart Components
70. @lily_dart Guidance
71. @lily_dart Code
72. @lily_dart
73. @lily_dart
74. @lily_dart
75. @lily_dart
76. @lily_dart
77. @lily_dart
78. @lily_dart
79. @lily_dart
80. @lily_dart
81. @lily_dart
82. @lily_dart Do you need a design system?
83. @lily_dart 1 More than 20 designers, developers and content people?
84. @lily_dart Seeing inconsistencies in your customer experience? 1 2 More than 20 designers, developers and content people?
85. @lily_dart Seeing inconsistencies in your customer experience? 1 2 3 More than 20 designers, developers and content people? Want to design and build faster?
86. @lily_dart Designers 50% Developers 33%
87. @lily_dart On average, Constellation saves teams 190k per project
88. @lily_dart Do better work Reduce risk Save money
89. @lily_dart You probably need a design system.
90. @lily_dart Thank you