Design Systems: A solution for scale
Product teams need to keep a fairly fast pace with product changes to ensure their customers are being delivered the best kind of experience. With all these fast-paced changes to keep up with, having a nexus for design learning and best practices becomes necessary. To combat this problem statement of constant change, design teams have had to develop a system to create and scale-up projects faster, and these were called Design Systems.
So, what is a Design System?
Before starting any design project, a designer needs to plan out the layouts for multiple pages of the product. While sketching out the layouts, what’s crucial is that interfaces and experiences remain consistent. Similar paradigms in different instances cannot look different or have different experiences (unless some need arises, of course.)
That’s where a design system comes in. Think of it as a “just add water” solution that can be used to build products.
A Design System, to define briefly, is a set of standard reusable components and elements that can be brought together and used to scale the design of a product.
It’s essentially a set of shared practices and guiding principles that govern a product’s design decisions.
Why use a Design System?
1. Design Systems help scale up the design process, fast
Since it is a collection of prebuilt reusable design components, all that needs to be done is assemble these elements to get to your final design. It results in faster turnarounds since there is no time wasted creating and planning these UI elements from scratch. It helps eliminate repetitive work and, more importantly, frees up mental space for higher-level tasks.
Designers/developers can avoid design debt since they do not have to start every new project requirement from scratch.
2. Design systems aid in creating a shared language across product teams
A multitude of teams/individuals is responsible for building a product. Not having clear, consistent design guidelines and principles will only lead to inconsistency. With a design system in hand, it becomes much easier to create visually consistent designs across all platforms. Having a consolidated source for all the components and patterns can mitigate inconsistency and prevent the design process from feeling disjointed.
Design systems, over time, become the shared language teams use to speak about their product.
“What that means is that when we’re all working together, I can just call it by name. We need a carousel here. We need a slideshow here. We need a card list there. Whatever names we’ve come up with, we can just refer to them.”- Josh Clark in an interview with Invision
3. Design systems enable designers to mitigate the small problems and focus on more complex issues
The designers don’t have to worry about the intricate details or reinvent the wheel every time they build a product. With a significant chunk of the design process taken care of, designers can now focus on more design-heavy and complex problems. They can converge their efforts into designing user flows, journey mapping and solving high-level user problems.
Atomic Design as a means to systematic design
Atomic design is a design strategy that helps segregate a user interface into its basic components and organize it to be reused. These components are generally distributed into 5 distinct levels:
Atoms, Molecules, Organisms, Templates and lastly, Pages.
Let’s look at how Zomato incorporates this in its Sushi Design System.
1. Atoms and Molecules (Low-Level Items):
The images (shown below) represent atoms in the design system of Zomato; these are essentially the basic building blocks of the product. Atoms can include typography, colour system, icons, spacing and shadow. These interface elements are not entirely functional on their own however they make a crucial part of the overall page design process.
2. Organisms (Mid-Level Items):
The images (shown below) demonstrate the higher-order elements that are created when the low-level elements (atoms) are brought together to make organisms and templates. For instance, the buttons are formed by assembling a specific colour palette, font, icons and shadow. Some examples of these could be slider components and image carousels.
3. Templates and Pages (High-Level Items):
The highest order of the design system comes together when these mid-level items (organisms, comprising of their respective atoms and molecules) are placed down on a layout to create the full-page experience. Some examples could be the entire page design samples from the Zomato app (Shown below).
Here’s another large design system project from yours truly:
Canvs recently created a Living Design System, a nuts-and-bolts-included toolkit of Design & Dev resources — designed and engineered for rapid prototyping and deployment for Aditya Birla Capital. Aditya Birla Capital is a family of four verticals: Protecting, Investing, Financing and Advising, each vertical having multiple lines of business.
With over 20 different products, there came a need of unifying all sub-brands under the same umbrella of principles, culture, customer experiences and support the ‘One Brand for All Your Financial Needs’ philosophy behind Aditya Birla Capital.
Read the entire case study on how Canvs solved the multi-party challenge and created an ABC Design System intending to unify the look and feel of ABC’s digital products.
Besides the examples we showed you, check out this immensely large repository of design systems here.
Keeping your design systems evergreen:
Design Systems become outdated when they no longer can keep up with the constantly updating user, business and product needs.
Design Systems are never a one-time job; they’re never done, they’re continually growing and changing.
Keeping up with the regular updates and documentation can be time-consuming and sometimes challenging, so it’s always helpful to pass this system through regular reality checks to trim out the fat.
One of the main ways to maintain a design system is to assign a team dedicated to performing regular audits/reviews, grooming and maintaining the overall document.
Here’s an insightful interview on the design system maintenance by the team of some renowned industry experts.
Closing Thoughts
Building a design system requires initial effort (and needs to be maintained regularly), but the system pays off when multiple projects across many platforms emerge through the lifecycle of a product company. The major part of heavy-lifting work is already taken care of; all that’s left to focus on is use these as enablers to provide meaningful experiences to the users.
The Canvs Editorial team comprises of: Editorial Writer and Researcher- Paridhi Agrawal, the Editor’s Desk- Aalhad Joshi and Debprotim Roy, and Content Operations- Abin Rajan
Follow Canvs on Instagram and LinkedIn. Don’t forget to follow us here on Medium as well for more design-related content.
