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

9f4dcab6a0fc5889de79521bf35e49c4?s=47 Frontend NE
December 05, 2019

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.

9f4dcab6a0fc5889de79521bf35e49c4?s=128

Frontend NE

December 05, 2019
Tweet

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