Design Systems: Better UX through Defined Standards

April 16, 2018 in Design system

I was recently asked to help a client develop a new cohesive visual identity. Their business is growing and, in our conversations, their CEO expressed concerns regarding their coming expansions into new markets. One reason he wanted to focus on a new visual identity was was due to fears that local markets would “play around” with the visual identity and, in a year’s time, their product portfolio would be a scattered mess. He wanted to make sure that they had a brand that everyone would stick to without “exploring” their own creative agendas. *There may be a place and time for that too, but let’s agree on what colors and fonts we’ll use.

After thinking it through, it became clear that while I could help them develop a new visual identity, that alone wouldn’t ensure that all markets would follow the rules. Even with a strong style guide, there are always ways to interpret those guidelines to create branding within the brand. We want to avoid this at all costs.

I told him that while I’d love to work with them on a new visual identity, what they really need is a design system. Now, if you’re a frequent reader of design related articles on Medium, “design systems” is a phrase you’ve heard before. If not, let me briefly explain what a design system is and why it can help your organization.

Design systems broken down

A solid visual identity is a key piece in any company's marketing strategy. For this specific company, I identified a couple of vital points for their visual identity. The company's product is very text-heavy and their target audience are primarily schools. So the typography needs to work in small sizes in order to stay crystal clear on tablets, phones, and Chrome books. The colors should offer a clear set of rules for hierarchy and interaction feedback. All colors need to be WCAG AA+ compliant to be accessible for the estimated 15% of people worldwide with a wide spectrum of permanent or temporary visual, auditory, motor, and cognitive impairments.

When dealing with any digital product, the visual identity is more than just fonts and colors. It isn’t just colors and typography, but shapes and structures that form digital patterns. It is vital to make sure the brand is aligned in everything they do and create patterns that can re-used across their products. Patterns can be things like buttons, navigations, interactions, and forms. Together, these form a design system. This is not the same as a style guide, which at it’s best is a website with assets; colors, typography, buttons but - more often than not - a sad PDF that was created last minute five weeks after the agency considered the project to be delivered. A design system is a more of a living organism.

While a design system may feature the same objects as a style guide, it offers coded elements and a Sketch file (or whatever tool) with objects that are editable in content, but not in context.
This is particularly useful when you have many people, designers and developers, working on products. It’s a way of minimizing the guessing and allowing designers and developers to focus on their actual work - making great things.

With no common design language to unite the product, the user experience starts to break down, as does the design process. Design critiques become unproductive when there’s a dearth of design conventions. To create alignment within teams, there must be a shared source of truth—a place to reference official patterns and styles.

Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.DesignBetter.co

Design systems are great for building products that stay coherent. Combined with Atomic Design, it can become a powerful and efficient way for your organization to make design work for you.

Sharing design systems

Lots of companies have started sharing their design systems online and publicly - a great way of showing for potential employees that they truly care about design! Here’s a couple I really like and that have served as great resources for me in my work:

It’s honest, authentic, and accessible.

I love sharing my experiences working in design and what’ve I’ve learned along the way. Join a community of thousands of designers, developers, and product professionals by signing up to my newsletter!

Not quite ready to sign up? I totally understand! Why not start by reading some of my past issues?

Great! Just “one more thing”...

You need to confirm your email to confirm your subscription.

  1. March, 2024

  2. February, 2024

  3. January, 2024

  4. December, 2023

  5. November, 2023

  6. October, 2023

  7. September, 2023

  8. August, 2023

  9. July, 2023

  10. June, 2023

  11. May, 2023

  12. April, 2023

  13. March, 2023

  14. January, 2023

  15. December, 2022

  16. November, 2022

  17. September, 2022

  18. August, 2022

  19. July, 2022

  20. June, 2022

  21. May, 2022

  22. April, 2022

  23. January, 2022

  24. December, 2021

  25. November, 2021

  26. October, 2021

  27. September, 2021

  28. August, 2021

  29. July, 2021

  30. June, 2021

  31. May, 2021

  32. April, 2021

  33. March, 2021

  34. January, 2021

  35. November, 2020

  36. October, 2020

  37. September, 2020

  38. August, 2020

  39. June, 2020

  40. May, 2020

  41. April, 2020

  42. March, 2020

  43. February, 2020

  44. January, 2020

  45. December, 2019

  46. November, 2019

  47. October, 2019

  48. September, 2019

  49. August, 2019

  50. July, 2019

  51. June, 2019

  52. May, 2019

  53. April, 2019

  54. March, 2019

  55. February, 2019

  56. January, 2019

  57. December, 2018

  58. November, 2018

  59. October, 2018

  60. September, 2018

  61. August, 2018

  62. July, 2018

  63. June, 2018

  64. May, 2018

  65. April, 2018

  66. March, 2018

  67. February, 2018

  68. January, 2018

  69. December, 2017

  70. November, 2017

  71. October, 2017

  72. September, 2017

  73. August, 2017

  74. July, 2017

  75. June, 2017

  76. May, 2017

  77. April, 2017

  78. March, 2017

  79. February, 2017

  80. January, 2017

  81. December, 2016

  82. November, 2016

  83. October, 2016

  84. September, 2016

  85. August, 2016

  86. July, 2016

  87. June, 2016

  88. May, 2016

  89. April, 2016

  90. March, 2016

  91. February, 2016

  92. January, 2016

  93. December, 2015

  94. November, 2015

  95. October, 2015

  96. September, 2015

  97. August, 2015

  98. July, 2015

  99. June, 2015

  100. May, 2015

  101. April, 2015

  102. November, 2014

  103. April, 2013