What is a Design System – and why we think you should build one

21/11/2018
Design

An introduction to Design Systems

Design system has become a buzzword in the digital design & development community during the past couple of years. People are going crazy about the power of design systems, some even see that design systems can replace the need for having designers (which we don’t agree with).

The topic shouldn’t be all that new for people working in the design field, but developers and product owners might still be in dark when it comes to design systems. If you are still wondering, whether your company or product team needs one, you are in the right place!

In short, a design system is a library of reusable design components, principles, and patterns that are in use across all united products.

“A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.”

– Nathan Curtis. Founder of UX firm Eightshapes. Speaker. Writer.

 

But we already have a UI library – why do we need this?

Design systems (‘DS’ for short here) are far more comprehensive than a UI kit. UI kits usually live as a sketch art-board and include components and elements for design. A sketch prototype may look and feel nice, but it’s far away from still including the actual code needed to build the final product. This is where a DS becomes handy; design systems effectively live as code.

A design system, made with code, helps not only designers but also developers remain constant, save time and focus on more important problems than reinventing the wheel.

One part of a DS are UI elements, yes, but it’s only a part. It’s a combination of tools, that includes UI elements, guidelines on composition, white space, color scheme, etc. When to use a content switcher and when tabs? A UI-kit does not include guides for a component usage but there must be an answer for that in a design system.

 

Bridging the gap between design and development

There’s the age-old problem with hand-overs and collaboration between designers and developers agencies and product teams deal with on a daily basis. For example, a sketch file (or Photoshop one if you are old-school) require a special program for viewing which really don’t make sense for developers to install. Moreover, shared documents get outdated quickly, some design decisions are made only verbally and exist in code but not in the original design.

In addition, developers sometimes may have problems with making everything look like in the design they are supposed to implement, or they end up implementing a different solution than what was originally designed – for whatever reason.

An example case could be this: 

Designer X has designed an element to be green. Developer A has a limitation or a problem, which means the element should be pink instead. The two colleagues discuss this and determine that, indeed pink seems like a good choice, and so that gets implemented.

Somewhere midst of all the talking and getting things done in a super lean and agile way, the designer forgets (or simply decides) not to update the documentation, which still has the green element defined.

When Developer B steps in and starts working on the project, he/she will follow whatever documentation has been done and implement the same element in a different way then Developer A did.

Sound familiar?

A design system keeps everything up to date, so that everyone working on the same project / product will follow the same principles and guidelines, both in terms of design and development (as the DS includes code for components as well).

 

See for yourself!

Interested in examples of extensive design systems? Many big companies like IBM and Elisa have made their design systems public. Adele by UXPin lists multiple great public examples.

Check out these examples to get to the right mood!

As you can see, a DS may be documented simply on a website or some other internally used system. Companies like UXPin provide ready platforms for creating and maintaining DS’s. Another option is to try Storybook or Lona from Airbnb, tools that provide shared styled to multiple platforms.

 

Key benefits of having a design system

Not convinced yet? Well, let’s be frank: if the only digital product you have is a simple website, you are definitely fine without a design system.

Software teams working on digital products should consider this as a no-brainer, really. If you have a couple of developers inside your organisation, working on something that’s being constantly developed and it brings in money or serves your customers otherwise, it’s probably wise to consider bringing a design system. You can start small and simple, and probably already have some documentation to begin with.

Agencies (like us) need to weigh the pros and cons (mostly use of time and resources) on a project level, whether building a comprehensive DS makes sense or not and convince the client to invest in the work needed to establish one. Long-term application development projects are a great candidate for building a DS.

Here are 4 good reasons for adopting a design system:

 

Consistency.

When Hubspot started their design inventory, they discovered over 100 shades of gray, 16 different styles of modals and thousands of lines of custom CSS. Yikes!

hubspot-UI-elements_example_design-systems
Which button style to use? Source: Hubspot Product and Engineering Blog

A shared location with reusable items gives the same look and feel across all digital product, like Hubspot. As a product is getting bigger, there is a chance to have several options for the same element which will eventually bring confusion, and maintaining all of them is tough work, not to mention it can easily increase expenses for development.

According to the UX industry report from UXPin, design consistency is the greatest challenge most teams face. Having all tested elements documented in one place is a good practice to reduce the amount of code as well.

 

Speed.

Ready-made components don’t need to be defined twice. How many hours of development time may it save? Moreover, as the basics are done, designers have the freedom to focus more on users needs and pain points.

 

Collaboration.

Developers, designers and project managers often speak a different language. Defining the system allows to make work more productive and helps to come up with better solutions.

 

Scalability.

Android Native, Swift, React, Vue, Angular, and other great languages and frameworks need different styles. Or do they? As we mentioned before, when there is one place for all the components, there is no need to redesign every single button for each platform. Yes, the way of implementation may vary a lot based on the platform, but having shared, defined styles and components make life much easier.

Growth companies might also benefit from design systems as they make on-boarding processes less challenging.

airbnb_design-system_screens
Source: Airbnb Design

Building a visual language – Airbnb style

One of the best known DS advocates is Airbnb. A company that has several mobile and web apps forced a huge problem while the team was growing. Also keeping features and designs synchronized took significant effort, often requiring the same work to be repeated across all of these platforms. However, after two weeks they using the design system they began to see huge leaps in productivity by using the library when iterating on designs.

“One day, while putting together a last-minute prototype, our team was able to create nearly 50 screens within just a few hours by using the framework our library provided.” – Karri Saarinen, Principal Designer at Airbnb.

Now they can build and release features on all native platforms at roughly the same time. Airbnb’s team admits that development now is generally faster since product engineers can focus more on writing the feature logic rather than the view code. If the design system worked for them, it will work for you as well.

Read the full story here: Building a Visual Language – Airbnb Design

Conclusion

So now we have learned that a design system is A) a tool that includes all crucial design principles, B) guides the use of different elements and components across all digital products, C) lives as code, not a sketch file and D) is assembled by everyone who works with the product.

Design systems increase collaboration between designers, developers and stakeholders, and bring consistency and productivity. As a result, companies are able to save money and release products faster.

So do you need a design system? Maybe you already have a common sketch file or a folder with definitions for typography, colors, and paddings. It’s more than enough to start. Building a DS is an ongoing process which requires updates, nurture and care like having a plant on your desk.

If you’re involved in designing or developing a digital product that consists of more than a simple website, a design system surely will help your business to grow and scale easier.

 


Need a design system for your application?

Or are you simply interested in hearing if your team / company / product would benefit from having a design system? Get in touch and we’ll give you our honest feedback and advice.