Post Image

3 Tips for Creating a Design Systems Taxonomy

by
Anca Luca

As design teams scale up from 1 or 2 members to 20 or more, design systems quickly become a necessity for product consistency and team communication. 

Creating a design system is like creating a new language.  You want to help your teams give meaning to their ideas, then capture that meaning, the existing knowledge, and the best practices in one place.

However, building a design system doesn’t come without challenges – one of which is building the right taxonomy.

Generally speaking, the purpose of a taxonomy is to understand a set of subject-specific concepts, and build a vocabulary for those concepts with the sole purpose of making the interaction with them easier.

In the digital world, taxonomies work in a similar way: they help to organize and classify information and features based on similar patterns and on differences.

Building a solid taxonomy for your design system helps remove subjectivity in design decisions, increases  awareness of the value of design, and improves communication between teams.

Here’s three few best practices that have helped me build taxonomies for my design systems projects.

1. Break down your UI into components

You don’t build a design system only for your fellow designers, but also for the development team, content strategists, information architects, and even marketing folks.

Make sure you involve representatives from all these departments.

My approach is to create  an inventory of all the components currently in our product. Then, I ask the team members to join me in a brainstorm session where we write all the names of the components on post-its. Afterwards,  each person groups them and names the group as they think it makes most sense (somehow similar to card sorting). Once everyone is finished, discuss all the groups and names.

During this exercise, remind people to consider the function of each group of components so they don’t give names based on appearance.

For example below, we have a few similar components for showing labels within content.

Label:

 

Label-strong-with-icon: 

Label-with-description: 

We decided that all these components should be part of a  group called “Content Labels”. We validate the decision by going through all the contexts in which we use these components and agreed that the name works for all the included components. For example, we use labels for showing topic titles, categories or to put an emphasis on a particular part of the content.

2. Focus on the functionality

Since the beginning of the web, we used to think in pages, mostly because everything related to branding, design, and advertising started with the printed world. However, the web world evolves everyday and the range of devices for which we have to build products increases and poses new challenges.

Switching our mindset from pages to components helps us simplify the taxonomy.

The following questions might help you in determining the right categories for your components :

  • Is it branding?
  • Is it navigation (including search)?
  • Is it call to action?
  • Is it content?
  • Is it related to integration with other business applications?

Make a list of similar questions that make sense for your product and use it as a checklist.

This way you can be sure your taxonomy supports search, website navigation, personalization and other customer experiences, and integration with other business applications.

And, needless to say, whatever naming convention you decide to adopt, it should be obvious and relevant to everyone using the  design system.

3. Build for flexibility

Your product will evolve and so will your taxonomy. Plan to regularly examine your existing structure and modify it as needed.

A design system shouldn’t be an obstacle for innovation, but quite the contrary: with less time spent on making design decisions that were already agreed upon in the design system, you have more time to explore improvements.

So your structure should support innovation, flexibility and creativity. I’ve found that a layered structure fits very well with this goal: decide on a few main categories, then break those categories down into sub-categories.

For example, we have one main category called content which contains the following sub-categories: tiles, labels, and progress components (UI that lets the users know where they are in the process of solving their problem). 

Next Steps

If you found these tips useful, download Creating a Design System: The 100-Point Process Checklist.

Based on real case studies, the guide explains every step of building a design system.

by Anca Luca

Anca Luca is a UX Designer who loves observing behaviors, analyzing the way users interact with a product and discovering new ways to improve the overall experience. She has more than 7 years experience in UX Design, software consultancy, and marketing which gives her an extensive knowledge of the full-cycle of software designing and planning. Check out her work or follow her on Twitter.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you