Choosing a Design System

Recently, the UI Guild has been investing in choosing a new Design System. You may be wondering, what is a design system?

It’s a language!

According to Dan Eden, a product designer at Facebook, a Design System is “a collection of metaphorical nouns and verbs that allow designers, engineers, and beyond to express their intent in building a product.”

Here are the main parts to a design system:

  • A library of assets
  • Logos
  • Fonts
  • Colors
  • UI components
  • Code snippets
  • Corresponding documentation

 

The whole point of each part is to define guidelines, constraints, and principles for design, as well as code. Design System resources should also define typography, spacing, and layout, as well as non-visual elements such as tone of voice, vocabulary, and grammar. As a part of these visual and non-visual elements, there should be a definition, possible usages in various scenarios, and a defined process of how those elements can be changed.

Other things that are good to include in a Design System are naming conventions, file structure, and other technicalities that are necessary in a computerized environment.

What’s a Guild?

At RoboSource, Guilds are special-interest groups that are a cross section of the company. Any team member can join any guild. Guilds meet monthly and make decisions about things in their specific areas. Each guild is led by a Guild Master and a Lesser Master. Occasionally we ask a Guild Master to give an update on what the guild has been working on. Today, the UI (User Interface) Guild gets a chance.

Design Systems We Tried

At some point, we decided that RoboSource needed a Design System. We started by looking through all the options – here’s an awesome list that we started from. Eventually, the UI Guild decided to go with a pre-made Design System, rather than creating one from the ground up.

After a lot of research, we narrowed it down to three systems. Here are two that we really liked, but didn’t end up choosing. (Note that both these two and Google Material Design, which we ended up going with, are completely free to use!) Each of these Design Systems is incredible, not to mention supported by well-established companies.

Alibaba’s Ant Design:

The Ant Design design system

 

 

Atlassian’s Design Language:

Atlassian Design System

 

What the RoboSource UI Guild Ended Up Choosing:

We ended up going with Google’s Material Design. Since we had already been using it somewhat, we were already familiar with its schemes and overall feel. Material Design felt like it was more established and specifically created to be open to modifications or adaptations to any brand. Since we will likely add on to any Design System we adopt, Material Design seemed like the right choice for us.

Google’s Material Design:

Material Design design system

 

Why Does a Design System Matter?

There are many reasons to adopt or create a Design System. Three of those reasons are: efficiency, clarity, and consistency.

In the fast-paced technology industry, we need to be quick to create and iterate on a given idea. Without design systems we end up stumbling over technicalities, like the way a button looks or what colors we should have in a given scenario. With a Design System, everyone on the team has an understanding of our branding, tone, colors, and components.

That means when John Hasenmyer (RoboSource Director of Architecture) says, “We are probably going to need a boxy thing with a little table inside and little dots in it,” we will know exactly what he is talking about because we are all speaking the same language.

At RoboSource, we strive to be efficient and productive with few to no errors, and that means that communication is extremely important. If everyone is speaking the same language, then it brings a level of clarity and understanding that wouldn’t exist without it. Without a system, you could end up in a scenario where two or more people think they understand each other, but in reality one person thought they said “make me an elephant,” and the other person thought they heard “make a boat.” Those scenarios typically end up being painful and costly.

With a Design System, the components are predefined, and the UI work is essentially like playing with LEGOs. If there is a design phase of a project or product, using a Design System makes it quick and easy for the developer. As a result, turning out new functionality becomes less about the technical challenge and more about solving problems for the client. The added efficiency also opens up the opportunity to have quicker iterations of feature changes and additions.

Once you have happy clients, then they go and tell their friends and learn about how amazing you are! And because you are using a Design System, you can bring the same level of quality and craftsmanship to their friends or others and create a brand that is known for consistency, efficiency, and quality.

 

Bryant Sell is an RoboSource software engineer who came to us through our apprentice program. He’s a 2016 Taylor University grad and since that time, has become a leader in user experience. Bryant was one of our very first apprentices and has been with RoboSource for about four years. We’ve known Bryant since he was a single college student driving a lime-green motorcycle with a matching lime-and-black leather jacket. Below, Bryant writes about how the UI Guild chose the Design System RoboSource currently uses.