Robust Design System in the Digital Era

Contents

1. About Design Systems.
2. Why do we need a Design System?
3. How to build a multidisciplinary core team to create the best Design System?
4. Does the Design System help designers and developers with clear direction?
5. Evaluating Design System
6. A few popular Design Systems
7. How to keep updating your Design System?
8. Unveiling the Path to Success with a Robust Design System

Background

While in your UI audit, have you found out that your team uses similar hues of grey or many curve angles on your widgets or buttons? Multiply this by every piece of UI in your product, and you realize how inconsistent and difficult maintaining your design has become.

To match the rapid pace of development, companies have three options to ensure their design keeps up with the demands:

1. Add more designers to each team
2. Design faster
3. Build a Design System that helps to overcome multiple problems

About Design Systems

A Design System establishes a design foundation by providing solutions to recurring problems. It’s a series of components that can be reused in different combinations. User interfaces are broken down into reusable, pre-built modules that can be assembled based on design patterns and styled for specific use cases. Design Systems allow you to manage design at scale. Design Systems can help people who work on digital work on digital design, user experience, interaction design, and front-end development.

Teams that use Design Systems in their development strategy set the stage to differentiate themselves from their competition with coherent, connected design. Design System is much more than UI Style-guide as it allows the team to design, develop and maintain the quality of the product, focusing more on UX, and less on visuals. Consistency, higher quality, better communication with the development team, and faster design process are some of the benefits of a Design System.

 

Why We Need a Design System?

Having a Design System in place acts as a savior. Perhaps the most crucial thing that a Design System brings to a product team is a different approach — members start approaching a design with a system in mind. Design System is a source of reference to make sure that everyone who works on their product is always on the same page, consistent, and in agreement with the way things should be.

Here are a few everyday tasks that a Design System can help a team member with:

-Improved usability and accessibility
-Using the right component, pattern, or style option i.e. typeface, icon, branding etc.
-Reusable components or patterns in the same product or in another product
-Quickly finding components or patterns
-Teaching the team how to use a component or pattern properly
-Making product development faster and more collaborative
-Establishing a common shared language among team members and allowing the team to collaborate more effectively & much faster

How to Build a Multidisciplinary Core Team to Create the Best Design System?

Whether created or adapted, Design Systems require continuous maintenance and oversight to ensure they don’t become outdated, obsolete, or overcrowded with redundant entries or submissions. Before beginning work on your Design System, take a moment to think about the team you’ll need to bring it to life. Who needs to be involved? You’re going to need more than just designers, which include:

-For Design Aesthetics - Visual Designers
-For modular and efficient code - Front-End Developers
-To understand customer expectations - Researchers
-To help the team meet the tone of the system - Content Writer
-To ensure the product meets WCAG standards - Accessibility Experts
-To make sure the system is aligning with customer expectations - Product Managers

Does the Design System Help Designers and Developers with Clear Direction?

To build solutions for product problems, the Design System should give a guided approach. It is valuable only if the teams adopt it. Shared understanding has a vital role in the adoption of the Design System. It is essential to align teams around a clear set of shared goals, before starting to design a product. Everyone should be looking towards the same vision. A single cross-discipline system that describes components helps project teams alleviate these issues and stay on the same page. Everyone can reference the same style, function, and naming of the application’s building blocks. Any changes to the system trickle down across design and development. Work is done in one place and easily shared throughout the app.

Since a single component can be flexible enough for different use cases, you can do away with most instances of duplicate or out-of-date code. Aside from the primary dialogue around component details, it is helpful for designers and developers to discuss, What content should be provided in the design system? Or Which design concepts require mockups? or Which proposed design solutions are most feasible given project constraints?

Evaluating Design System

There is no point in creating a Design System if it doesn’t help your organization improve. Using a Design System will help designers to save 34% of their time. I think 3 focus areas will help organizations measure Design Systems, namely, Adoption, Coverage, and Shared Ownership. Adoption of Design System must increase day by day, product by product. The more designers and developers stick to Design System, the more Design System can help. The more engineers can add new code to the system, the more they can trust and adopt the Design System. Comparing new features with the previous features can also give you an idea of the impact the system has had over time. The CSS growth rate will start reducing as more and more engineers start using Design Systems. A higher count of unique contributors to the Design System is better. Focus on improvements in productivity, efficiency, and user experience as quantifying design quality and brand consistency is difficult. How quickly can users create new experiences now? How often are components being used?

How satisfied are your users? Assign a value to each code snippet so you can track how often the components appear in your live environments. This will also help you understand which components are the most valuable and which groups are carrying your design forward by contributing new components to the design system.

A Few Popular Design Systems

Material Design by Google

https://material.io/design

Fluent by Microsoft

https://www.microsoft.com/design/fluent/#/

Salesforce Lightning Design System (SLDS)

https://www.lightningdesignsystem.com

Atlassian Design

https://atlassian.design

Apple

https://developer.apple.com/design/human-interface-guidelines/

Carbon by IBM

https://www.carbondesignsystem.com

Polaris by Shopify

https://polaris.shopify.com

“Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.” - Alex Schleifer

How to Keep Updating Your Design System?

It may be difficult to create the first Design System in a company and it may be more difficult to convince teams to use it. When working on a Design System, your ultimate goal is to get people to use it. This works better if you include people in your vision, and share your work and your process. Everyone working on a design system must share a common vision: where you would like to be in the next three months, six months, and one year. Plan a roadmap for your Design System. It will make it easier to decide your priority task. Like every other application, a Design System is never finished. You need to remove old components at the same time ensure style change and accessibility or maybe add things like animation, or improve performance. You must define the contribution process for team members. No matter how small/ big is the team working on the Design System, you must define some parameters on how things are used or how to propose new changes. Once your team gets used to incorporating the design system into their workflow, someone will inevitably discover that something is outdated, no longer used, or that needs to be added. So long as they feel empowered to do so, they can take an active role in keeping the design system up-to-date when they encounter these scenarios. Whether design system changes are detected during the audit process or just while managing your product from day to day, you need to control the flow of these changes.

Unveiling the Path to Success with a Robust Design System

Design Systems consist of guidelines, styles, components, and patterns, which can help your team to optimize your efforts while creating products. However, one of the important factors to consider while creating a Design System is your application’s scale and replicability along with the team. Design Systems have changed the way we design and build applications. Design Systems are a lot of work at the same time fun and rewarding to work on. Your Design System keeps a live record of your app. If it’s not properly maintained, these undocumented changes could bog down your team with reworks that could’ve been avoided, leading to unhappy clients and team dissatisfaction. Even if you don’t accept contributions from a wider community, you should still define the contribution process for people within your team.

About the Authors:

Hitesh Puri

Technical Architect

Digital Applications - Tech Ops

Microland 

Hitesh Puri is a focused self-motivated UX practitioner with 14 years of experience in UX design and research and 16+ years of experience in Visual Design. Hitesh Puri brings strong expertise in applications interface design, creative thinking, and conceptual and analytical skills; he can translate user needs and business goals into simple and effective design solutions. He loves to apply business strategy and human-centered design in collaboration with key stakeholders and cross-functional teams to reduce complexity and uncertainty for consumers & businesses and lead to organizational success. Hitesh Puri is a trained UX expert from HFI.