Many things in the digital world are born out of necessity. That is, we need to find a way to do something in a smoother, more efficient manner in order to create something of higher value.
In the world of digital design, this concept rings truer each and every day.
And a design system is one thing that developers, designers and CEOs alike can use to increase the speed of the design process and ensure the product is designed in a coherent manner.
But what on earth is a design system?
Well, if you’ve come here asking that question, you’re in the right place.
This article will explain what a design system is and how it can be advantageous to a digital product.
You’ll even see how some of the digital realm’s leading brands, like Airbnb, Atlassian, and Shopify are leveraging their design systems to spread brand awareness.
“Design systems are an investment. Many companies don't employ people to focus on design systems until the inefficiencies of not having one become too painful to bear” - says Diana Mounter from GitHub in her fantastic presentation on design systems.
If your digital brand values:
-
A well-crafted user-experience
-
A consistent and easy-to-use environment for designers
-
Robust and versatile problem-solving
Then a design system is going to be the next thing you should set your sights on.
Design system - a system of designing?
Without digging out the Oxford dictionary, let’s try and define both these words:
Design: The art of creating and arranging imagery, shapes, and colours to create something visually appealing and/or functional.
System: A series of things working together in harmony; a complex whole.
So with these two things now clearly defined, are you able to figure out what a design system, in theory, actually is?
A design system consists of two things: the library and the documentation. Your visual assets, your logo, fonts, colours. A design system also includes UI components, their documentation, and the code snippets to facilitate developers using them across existing products.
It’s the rules, constraints, and principles implemented in both design and code.
These elements apply to everything - colour, typography, spacing, and layout. Interestingly, a design system should also encompass non-visual elements such as tone of voice, vocabulary, grammar, and audio cues.
All these components are designed separately, but are brought together to create a single source of truth.
It may be compared to front-end and back-end in design. So, on one hand we have all of these reusable components (which are visual), and on the other hand we have the codified counterparts of those elements, and thus they can be used by developers.
Let’s take a look at all this in action.
Within your design system are the standards adhered to when designing, for example, a user’s default icon. It doesn’t say how it needs to look, (that’s up to the creative mind of your designer) but your design system indicates the process to be followed in order to create it.
Simply put, a design system consists of your visual (and non-visual) elements and the processes to which they can be altered.
It’s worth noting that a good design system also includes naming conventions, file structure, and other ‘formalities’ of working in a digital environment.
After all, its sole purpose is to speed up and simplify the way designers work - this also includes many file management procedures.
Let’s dig a little deeper by taking a step back for a moment.
Success is in experiences.
It’s obvious that our world is getting more digitized. We’re using apps for everything. You may even be reading this on your phone, using your favourite browser.
It’s your favourite browser because it is logical to use. You don’t need to read a manual to learn how to use it.
So, in this digital world, the success of your app or software relies heavily on its design, its user interface, and the experience of the user.
Let me explain a little more.
Many businesses are familiar with the correlation between success and design.
If a user has to be shown, explained to, or taught how to do something, there’s a problem with the design.
Good user experience is rooted in good design - and when a user has a good experience, important metrics (like loyalty, retention, time in app, and conversion rates) go through the roof.
It doesn’t take a genius to know that these metrics are the be-all and end-all of a digital product.
So the next question is the most obvious - how can my digital product be designed in the best way possible?
Why design systems mean success...kinda
Asking what a role a design system plays is important, but the value of a design system is truly seen when you ask why.
1 - Consistency across products
Want your brand logos to be echoed through into the default user avatars of your app? Your design system will take care of that. It will outline the process that a designer should take when designing something, and the standards to which he or she must work. The end result is your user having a smooth and consistent experience through all parts of your product
2 - Design systems create a good working environment
Using a design system means that if your wonderful designer’s creative mind to goes off into some magic world and forgets the relevant font size, he or she will know how to find it. Your designers won’t be lost. They have an up-to-date play book to refer to if something isn’t clear. This in turn increases productivity and the happiness of your designer’s creative mind.
3 - More efficient production process
Similar to our first point here. Whether your design team is you, one other person, or a team of 45, ensuring that they’re all on the same page is going to make the process much smoother. It not only helps prevent errors, but shows what to do in the event of an error - be it minor or colossal.
Long story short: Make your design system proactive to avoid a problem, rather than reactive, in order to fix one.
Design systems in action
So now we that know the what and why, let’s take a look at the who and the how.
As mentioned earlier, many digital companies are seeing the benefits of using a design system.
Who are the pioneers in this field?
Shopify
Shopify is a company that creates a product that their customers spend all day using. One look at their ‘Polaris’ design system and you can see the ecommerce platform is no stranger to the importance of good design.
Below, you can see in simple terms, the dos and don’ts of the text/colour relationship.
The art of starting an online store is not a single task - more like a series of repetitive tasks that need to constantly be improved as your business grows.
Polaris has been designed with this in mind - not only to make the product as fatigue-free as possible, but also to make it consistent over all touch points.
A built-in onboarding procedure leads the user to their ‘ah-ha’ moment, thus adding even more value to the user.
In this, Shopify drive their growth through their design system.
Atlassian
Atlassian is a company who has a design system that we truly admire.
Comprehensive, advanced, and constantly evolving, it’s something all design systems should aspire to be.
One look at the landing page and you’ll see why we’re in love with it:
It has resources for branding, marketing, colour usage - if a designer needs a logo, it’s there, as well as the way that the logo can be modified.
As a company that has a wide array of digital products spanning different industries, this design systems ensures consistency and simplicity for designers, developers, marketers, and anyone else involved.
IBM
Of all the companies mentioned in this article, IBM are the oldest.
And with age, comes wisdom.
Recently, the company ‘needed to build out the entire foundation for the way IBM would practice design’.
And they did that by building the IBM design language.
This is just a snapshot of the wealth of resources the IBM have created for their design team.
The benefits? Joni Saylor, the IBM design lead says ‘we could see these aren’t just updated UIs,’” Saylor says. “The concept, fundamentally, was and is striking a chord with our clients and users.
A few years later, and IBM’s design team swears by their design system, with ripple effects coming in in marketing and sales.
IBM’s design system is one of the most in-depth and comprehensive on this list. It’s rivalled only by Google’s design system, Material Design.
Spotify
Spotify, a completely digital product, knows the importance of a design system. As a piece of software that’s used by the same person over multiple devices, the design had to be not only easy, but also consistent.
And a few years ago, that’s exactly what was lacking
When design lead Stanley Wood took the helm in 2012, he was ‘shocked at the lack of consistency in elements across Spotify’s product’.
Over the next 12 months, steps were taken to create Spotify’s design system, G.L.U.E (Global Language for a Unified Experience).
So how has Glue changed the way Spotify does design?
“Instead of 2 designers looking at the same thing and unintentionally creating totally different solutions, design systems provide a shared platform to create, collaborate, and build a deliberate outcome.”
Spotify is revolutionary just in its concept. Ensuring that design nurture and compliment this concept is a testament to the brand’s ongoing success.
Airbnb
Anyone that’s used Airbnb to book a holiday is no stranger to how easy it is to use and how visually appealing it is.
The product’s design system works hand in hand with simple product design in order to take the chaos out of booking somewhere to stay.
Below, you can see an example of the clear and concise templates that Airbnb use in the desktop version.
Airbnb’s design system is extensive. Below, you can see their restraints for type sizes, colour usage and spacing.
Airbnb have a world-class design system, and one can’t help but feel that it’s part of their HR department’s plan.
By sharing their assets with the general public, and sharing the story of how it came to be, they’re showing skilled talent that this is a place where your skill will be put to good use.
A great design system, and perhaps a great recruitment device!
Summing up
By now, you should have a good idea of what a design system is and how it can be of benefit to your business.
-
A single-source of truth for designers and devs, enabling more control over multiple versions.
-
A well-planned design system help solve common problems that designers face.
-
Your design system will work toward creating the best possible user experience.
Furthermore, seeing how some of the biggest digital brands leverage their design system should have you feeling motivated and inspired to create your own.
Whether you’re a seasoned vet and designed a few design systems in your time, or you’re fresh to the idea, it’s worth noting that there’s no such thing as a bullet proof design system.
As many digital products constantly grow and change, so should your branding, message, and ultimately your design system.
What’s the best way to get started building your design system, though?
Well before creating, it’s worth taking stock of your current position. Conducting a UI/UX audit can show you what’s working and what’s not.
This ensures that any major inconsistencies in your current processes are revealed, and you’re able to continue using what’s working.
What are some of the best design systems you’ve seen? Any tips for creating and developing one yourself?
Let us know in the comments!
=============================================
Here: outer links to get deeper knowledge
https://www.invisionapp.com/blog/scale-design-systems/
