Making Usable Design Systems

Design systems have become very popular with organizations for their obvious cost saving abilities. They are great to…

  • Ensure basic usability across
  • Save designers’ time utilized to create UI and helps them focus more on the UX
  • Avoid time wastage in reinventing the wheel
  • Save time required to conduct quality reviews of development builds
  • Save time required to fix design inconsistency
  • and many more

Having delivered multiple such design systems to clients over my career, there have been some obvious challenges that I have seen, with how the systems are used. I think, as we build these systems we often forget that these need to be used by someone who has absolutely no Idea or very little context to how it was put together. Here are some of the challenges…

Choosing the wrong components/patterns

I remember conducting a workshop with a client about 5 years back where we were introducing their shiny new design system. The objective was to familiarize their team with the system and to get them started on using it. We divided about 25 managers, designers, developers into small groups and asked them to create screen flows using the system. What the groups ended up making was very different than what we had expected. It seemed that they had a tough time understanding what component they should use for which purpose. This was stupefying for us considering that we had provided extensive documentation with each component, for where and how it should be used. It seems that instructions are up for interpretation and are very subjectively consumed.

Image Source: Bootstrap

Granularity leads to dithering over time

A lot of design systems I see are heavy on controls, buttons and other detailed objects. Design and tech teams which build their work with such granular systems end up creating very inconsistent designs over time. Buttons and controls get used anywhere and overall usability suffers all over again. The objective of a design system is to balance granularity vs abstraction such that creativity is not curbed but usability is sacrosanct.

Image source: Bootstrap, Carbondesignsystem, Salesforce

Not everyone should be playing with typography and colors

With details such as colors and typography pushed upfront in most design systems, its not a wonder that they get messed up in implementation. Its important to realized that not everyone is trained to work with these. It takes years of understanding of color and typography to be able to use it effectively. Exposing them to everyone means that there is no surety how the brand will be rendered and the menagerie of creatives that will be outputted by the team.

Vast design systems are hard to read

Documentation is great but going overboard can become a huge challenge for compliance management. For starters, no one goes through all of it. In fact most grow through only some of it. The vastness of the system can also make it really hard to conduct development-build quality review exercises.

I feel design systems need to be succinct and effective. Consider organizing the design system in a way that future teams can easily use it. Here is an example of what I mean…

This is a rough example only

Area #1: If you want to create a new page do this…

This section could contain the ‘container’ and detailed page types/templates which have been tested to deliver usability. Templates can be created to support various kind of content and tasks. Starting with a template ensures that there is very less risk to mess up both brand, usability and aesthetics while building something. Starting to build a page directly with components is a big risk. You never know what you will end up with.

Image Source: Wix Templates

Area #2: If you want to modify a screen do this

This section could contain packaged components like cards for specific use or small forms. These can be plugged into the design, again without having to worry about disturbing the brand, usability or aesthetics. Whenever there is new requirement to add something to a page, designers or developers can fall back to these, to make a fairly good choice. Its key not to start directly with these. Start by selecting a template or an existing page first, to which you could add relevant components.

Image Source: Bootstrap

Area #3: Dont touch these unless NOTHING else is working

This section contain brand colors, typography, detailed controls etc. Designers and developers should ideally not have to go to this section regularly. This section is to be used when all the templates and components do not satisfy your requirement. In fact in this case, you should consider going through a design system modification exercise where you add in a new template or component without going all maverick on the colors and fonts etc. So for all purposes this section should be ‘hands-off’. Build your design system such that designers and developers are not frequenting this section and creating a bizarre mess out of your software.

Image Source: Lightningdesignsystem

These are some points to keep in mind while making your own simple to use design system. Of course you will need to account for variety of footprints and evolving form factors etc. Remember, it is not necessary for you to build a design system for your organization. Consider reusing a free design system (Usability tested) by creating a ‘How to use’ guide on top of it. Making your own is not important unless you are like a multi-product SAAS company, where you gain value through scale and cost.

Like what you read? Give amber krishan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.