What is the value of a Design System?
Over the past few years, I’ve had the opportunity to lead an incredibly talented team and together we have designed and built a design system for one of South Africa’s largest banks.
So firstly what exactly is a Design System and how can it add value to your business or organisation?
“Design has always been largely about systems, and how to create products in a scalable and repeatable way… These systems enable us to manage the chaos and create better products… A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.”
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications
Most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts - Emmet Connolly, Director of Product Design at Intercom
A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working together to bring products to life.
Why is this important?
By defining and adhering to standards we create an exceptional user experience which removes the subjectivity and ambiguity that often creates friction and confusion within product teams.
Standards encompass both design and development. Standardising things like naming conventions, accessibility requirements and file structure will help teams to work consistently and prevent errors.
Visual language is a core part of your design standard. Defining the purpose and style of colour, shape, type, icons, space and motion is essential to creating brand alignment and a consistent user experience. Every component in our system incorporates these elements, and they play an integral role in expressing the personality of our brand.
Without standards, decisions become arbitrary and difficult to critique. Not only does this not scale, it creates an inconsistent and frustrating user experience.
Why invest in a Design System?
Many businesses are investing in design as they recognise that the customer experience of their products offers a competitive advantage, attracts and retains the customer, and reduces support costs.
This is what things usually look like inside a company that is investing in design:
The design team is growing
Design is embedded in teams throughout the company, maybe in multiple locations
Design is playing a key role in all products on all platforms
What can I use it for?
Let’s take a look at how Design Systems can help our organisation:
Scale design
Manage our debt
Design consistently
Prototype faster
Iterate quicker
Improve usability
Build in accessibility
Scale design
As teams grow, it’s common for designers to concentrate on discrete areas of an app like search and discovery, account management, and more. This can lead to a fragmented visual language i.e. with each designer speaking their own language. This happens when designers solve problems individually and in isolation and not systematically and collaboratively.
Manage our debt
As applications and their teams age, they build debt. Not financial debt, but technical and design debt. Debt is acquired by building for the short-term. Design debt is made up of an overabundance of non-reusable and inconsistent styles and conventions, and the interest is the impossible task of maintaining them. Over time, the accumulation of this debt becomes an overwhelming weight that slows growth.
Design consistently
Standardised components used consistently and repetitively create a more predictable and easy-to-understand application. Standardised components also allow designers to spend less time focused on style, and more time on developing a better user experience.
Prototype faster
Working within an existing design system allows you to piece together flows and interactions as quickly as pulling LEGO blocks from a bin. This allows you to build an endless amount of prototypes and variants for experimentation - helping your team gain insights and data fast.
Iterate quicker
Whether evolving the style of your UI or making UX changes to a flow, using a design system reduces effort from hundreds of lines of code to a few characters. This makes iterations quick and painless, and experimentation much faster.
Improve usability
Inconsistent interface conventions hinder usability. When CSS for countless unique interface elements and their interactions increases, so does cognitive load and page weight. This makes for a terrible user experience. It can also create conflicting CSS and JavaScript, potentially breaking your app. By using a design system, you’re able to avoid most of these conflicts by building a holistic library of components, instead of per page - which will mean you’ll spend less time in quality assurance.
Build in accessibility
Accessibility can be implemented at the component level by optimising for those with disabilities, on slow Internet speeds or on old computers. This is an easy usability win. Design systems can help improve your product’s accessibility and compliance with legislation.
Who are our users?
Due to the nature of our Design System we cater for a variety of users both internal and external - from Designers, Developers, Product Owners, Program Managers, Brand to Marketing.
Designers
Developers
Product Owners
Program Managers
Brand
Marketing
Education is as important as documentation. A style guide can show clients that websites are systems rather than collections of pages.
Source - Brad Frost (Atomic Design)
Source - Brad Frost (Atomic Design)
Source - Brad Frost (Atomic Design)
Build your design system like the pros:
Learn the secrets of product design at scale in a design systems master class taught by the most influential thinkers in the field.
Over the course of this up-close six-part video series, Brad Frost, Dan Mall, and Josh Clark share expert recommendations for every step of design system implementation—from early planning of system scope and structure to ongoing operational success.
DESIGN SYSTEMS - Mastering Design at Scale
Brad Frost, Dan Mall, and Josh Clark deconstruct the organisational challenges of scaling digital product design and reveal how design systems can unite teams and provide consistency in the face of growing product demands.
Whether you’re starting from scratch or evolving an existing system, this up-close conversation offers real-world insight into modern design systems and what they can solve.
Episodes
Credits
https://www.invisionapp.com/design-system-manager/expert-advice
https://bradfrost.com/blog/post/atomic-web-design/
https://atomicdesign.bradfrost.com/chapter-2/
