Making Usable Design Systems

Amber Krishan
Aug 25, 2018 · 5 min read
Image for post
Image for post

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 for post
Image for post
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 for post
Image for post
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 for post
Image for post
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 for post
Image for post
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 for post
Image for post
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.

NYC Design

A publication for designers of New York & design lovers from all around the world.

Amber Krishan

Written by

AK is visionary & co-Founder of THEM & acting VP -UX PayU, driving business results, envisioning UX frameworks, launch and mentor ventures, and teach Innovation

NYC Design

A publication for designers of New York & design lovers from all around the world. Design thinking is what makes us share with the whole world.

Amber Krishan

Written by

AK is visionary & co-Founder of THEM & acting VP -UX PayU, driving business results, envisioning UX frameworks, launch and mentor ventures, and teach Innovation

NYC Design

A publication for designers of New York & design lovers from all around the world. Design thinking is what makes us share with the whole world.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store