.jpg)
They seem to be everywhere. Design Systems, living style guides, reusable component libraries. What are Design Systems, and why is everyone talking about them? How are they different from a traditional style guide, brand book or component library?
Design systems are not a new thing. You may already be aware of this concept, especially if you’ve worked in the creative industry or the print media field. These adaptable systems have been around for decades, but have been recently trending, growing in popularity and use. They’ve become a strategic and integral part of how companies establish and maintain their corporate branding.
As a digital agency with a strong and cohesive design and software development offering, we’ve built several design systems for our clients. With it, they are now benefiting with a stronger brand presence, quicker time to market, streamlined collaboration, and increased return on investment. We’ll be sharing our experiences creating these design systems over a series of blog articles, starting with what a design system is, and why it has become such an important tool for companies in their digital transformation and innovation efforts.
We see Design Systems as a single source of truth for building a cross-collaborative brand-driven digital experience.
A Design System is a systemic approach to help a business maintain harmony across products, guide remote teams, communicate brand cohesion and standardize components and pattern languages. We use them to build products that scale and are easy to use.
Let’s start with the three pillars that form the foundation of a Design System:
A style guide, as the name suggests, is a guide to build and reuse styles for a consistent brand experience. A style guide includes and defines anything that your company’s brand stands for:
Brand ethos, philosophy, vision, branding, shared values. It also defines design principles applied to any media you’re using, visual properties, theming, tone of voice and accessibility.
Style guides are commonly used by the Marketing team and brand ambassadors of a company as well as designers. If you’re a software company a style guide is also very helpful to help product owners, developers and quality assurance and your employees to follow your brand easily and strategically.
A style guide is what you’re looking for when you’re asking: What is the coherent look and feel of the product / brand?
With a style guide established, the question becomes:
How might we develop a software solution that follows this style guide, delivering a consistent user experience and styling across our products and services?
A component library is computer code, organized as a collection of reusable user interface elements and components, that capture your brand’s styling and desired user experience. Each component is created once, and is intended to be combined with other components and reused over and over again.
Like a box of Lego™, a component library allows your software developers to combine building blocks together to more easily build more complex structures that ultimately make up your user interfaces.
A library of components can include:
Now that we’ve understood the need of a style guide and a component library, there's one more thing missing. How would your product, design, and engineering teams know where to use all of this? In what context should a notification be used? When should a secondary headline be utilized? How should success and failure states be represented?
This is when proper documentation comes in to save your day.
Remember the last time you built an IKEA shelf? Think of the documentation of a design system as your favourite BILLY instruction manual. You (hopefully) have all your parts and tools, now you’re ready to put them into place. The documentation helps you find the right screw for the right hole. And we promise, it’s easier than building that IKEA shelf.
Good documentation describes the purpose of each component, the usage rationale and direction. It should include
The truth is a design system doesn’t come for free. It takes time and effort. It requires participation from the different functions of your organization, which at a minimum should be marketing, design and technology.
You might be questioning why you need this. Is it worth the upfront effort? Will it slow you down in getting your product or service to market?
The honest answer is a Design System isn’t for everyone. It’s suited for relatively established companies, rather than early stage startups that are focusing on their MVP. However, if you’re at the point where you are looking to scale your offerings and your organization, or undertaking a digital transformation requiring many parts of your organization to update and innovate, the significant returns and long term benefits of a Design System should start coming into view.
At Shopify, their Design System became an enabler of their product teams. But what about your organization? Even if you’re not a tech company like Shopify, can you still benefit by investing in a design system?
Here are a three ways a design system at your company can give you an advantage and differentiate you from your competitors in the marketplace:
As Simon Sinek likes to say: Let’s start with the Why.
Why is a design system relevant to your brand?
Your brand and the experience your customers have with it is one of your most valuable assets to stay relevant in an oversaturated market. We’re living in a world where everything except the value of brand and experience is commoditized. Your brand creates differentiated products that your customers love and identify with, they’re the reason why you can retain them. You constantly need to reproduce solutions for more and more complex problems and be cutting edge to stay relevant. Why not reuse patterns for the repetitive common problems that have already been solved and focus on the bigger, more challenging ones?
This is how your Design System becomes the embodiment of your brand and helps it to sharpen, strengthen and grow with your business.
A very contemporary matter: It’s COVID time, and most of us are working in a more distributed, remote manner. Departments are spread out geographically, time zones might get in the way of lengthy walk-throughs and presentations. A common direction is needed and a silent orchestration to guide us. An organization is made up of multiple teams that need to work cohesively together for the organization to be successful. That’s obvious, but easier said than done.
A design system helps bring teams together with a common language and a single source of truth. It eliminates the guesswork across teams and results in improved communication, more transparency, and stronger cross-functional alignment. The outcome is a more inclusive environment, one that break silos, builds bridges, shares culture, and co-creates together.
If you think about it, there are numerous tiny decisions during the branding, design and development process:
It’s critical all of these day-to-day decisions are made using a shared set of perspectives and principles so the system can evolve along a predictable, sustainable path.
A Design System as the single source of truth fosters a deep sense of inclusivity and accessibility across departments and roles, where no point-of-view is weighted heavier than another — it’s a true collaboration. And when we build a Design System we provide that mindset to our customer.
It’s common to be looking over your shoulders to see what your competitors are doing. And it’s quite easy to fall into the trap of constantly building features and delivering new services in the race to be first to market or in the struggle to catch up. It may seem like you can’t afford to stop working hard to keep up.
But what about working smarter to deliver faster?
As a company grows and delivers more customer value, one thing that has become increasingly important is the need to deliver this value through an amazing user experience; one that is consistent across all touchpoints in a way that’s representative of the company’s brand. These challenges are present with every new product or service, and can be hard to get right.
A Design System forces you to tackle these challenges head on. It requires discussions amongst stakeholder groups to establish design guidelines and documentation. It needs designers and software developers to turn these designs into reusable code. However, this up front time and investment provides amazing long term value in return, in the form of enabling your teams to subsequently deliver customer value much more quickly and consistently.
A design system provides a starting foundation for every project, giving you a significant jump on the design, development and QA activities. This reuse across all projects shortens your project schedules and allows you to focus and hone in on delivering new business value instead of discussing, designing, building and testing things you’ve already done before.
As mentioned previously, the shared language established by a design system means communication is more efficient. Ideas are shared more quickly and effectively, and there’s less chance of misunderstandings which can lead to delays.
Finally, your company’s identity isn’t static. Even the most long standing companies have changed their brand over time, in one form of the other. Rolling out a brand update across all your digital solutions can be a significant undertaking… unless they are consolidated in a single, central place. This central place, of course, is the Design System. Thus, updating your apps to reflect brand updates only then requires an update to the design system they all use, allowing you to keep your brand fresh and exciting much more easily.
Hopefully you can see how companies that incorporate a design system into its strategy leads to important advantages over its competitors.
You might be wondering what’s involved in the creation of a design system, where could it be used at your own company, and how do you get started?
At Digitalist, we’ve helped many companies establish their Design Systems, enabling them to strengthen their brand, work more collaboratively, and deliver quicker to market. We’ll be sharing our experiences and invaluable lessons learned in a series of upcoming Design System articles. If you’re interested, sign up to be notified when our next Design System article is published. We’ll be discussing the problem many innovators face when bringing something new to the company: How to get started with a Design System and get internal buy-in.
Hopefully you can see how companies that incorporate a design system into its strategy leads to important advantages over its competitors. You might be wondering what’s involved in the creation of a design system, where could it be used at your own company, and how do you get started? At Digitalist, we’ve helped many companies establish their Design Systems, enabling them to strengthen their brand, work more collaboratively, and deliver quicker to market. We’ll be sharing our experiences and invaluable lessons learned in a series of upcoming Design System articles. If you’re interested, sign up to be notified when our next Design System article is published. We’ll be discussing the problem many innovators face when bringing something new to the company: How to get started with a Design System and get internal buy-in. Sign up here, and thanks for reading!
Check out our next blog post in the design system series, Getting started with Design System documentation. And sign up to be notified when our next Design System article is published.
