About the Project
How we built our design system
The project is about building a design system from scratch, exploring the purpose of creating a design system and how it helped our team to achieve unification throughout our digital products which would eventually contribute in elevating the users' experience, and helping the design team to ship design solutions faster.
Background
We had to take a different route this time.
It was the first time we as a team were building a design system for our organisation, and everybody had their own definition of what a design system is. Our very first step was to create an exhaustive deck to present it to our stakeholders, which could help us and our stakeholders in understanding how companies like Mercedes and Apple focus on design language and how we can take inspiration and build something of our own. We, for real, compared the C-Class and S-Class of Mercedes on one pager and also separately compared the Apple ecosystem of products on another. Well, this idea worked like magic. Everybody got excited.
Exploration
All we wanted was to come on the same page;
and then the exploration began.
Honestly when we started discussing the idea of a design system, we didn't even know why we as a team need to have a design system and how will the team optimise it. We started by watching videos on design systems over Youtube and finally met our saviours. Nick Babich - Design Expert and Dan Mall - Design System Expert. Dan Mall's explanation of the design system helped us a lot in figuring out the best way possible for us to move ahead.
Findings
Things which really helped us along our way.
There are a lot of different definitions of the word “design” and of the word “system,” and both concepts are very broad.
We came across a lot of definitions of the design system which serve different purposes and,- some of them are:
A collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications - Marco Suarez
Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products. - Andrew Couldwell
The official story of how your organization designs and builds digital interfaces. - Brad Frost
A library of visual style, components, and other concerns documented and released by an individual, team, or community as code and design tools so that adopting products can be more efficient and cohesive. - Nathan Curtis
At 360 ONE, the design system has to be built in such a way which could serve best for building financial reporting tools, supports data, different graph patterns and data table structure. We continued our learning by taking constant inspiration from some of the well renowned design systems in the domain like Goldman Sachs, IBM, and Nord.
Definition with which we all happily agreed on.
A connected, package-managed, version-controlled software product that contains the smallest set of components and guidelines which will help us as a team to make digital products consistently, efficiently and happily.
After all the very long and never ending discussions.
We considered One Design System as a product which grows organically with the needs of the organisation. The design team takes charge of it and uses it to the full capacity.
In the initial version of One Design System, we've incorporated:
- Dynamic components categorised as Actions, Communication, Containment, Selection, and Input (inspired by Material Design System).
- Icon sets available in XS, S, and M sizes.
- Colour schemes featuring brand, neutrals, and semantic colours.
- Typography guidelines for web and mobile.
- Set of graphs.
- Grid patterns for desktop, tablets, and mobile devices.
- Documentation to keep record and for easy handoff process.
I suggest if you're willing to build a design system for your organisation, sit with your design team and stakeholders, ask questions like "Why do we need a design system", "What are we trying to achieve from the design system" and define your own definition of the Design System and build it. Keep in mind to upgrade it in regular check-ups.
Who's going to use the system and how.
One Design x Designers
Design system will help other designers to use pre-made components which will ensure consistency, focus more on research and understanding rather than each UI element, and ensure faster shipping time. Facilitates collaboration, onboarding, reduces duplication, improves feedback, and enables scalability.
One Design x Developers
Giving access of the Design system to developers minimizes back-and-forth, ensures consistent look and feel. Saves time, fosters clear communication, reduces confusion, promotes teamwork. It will also help in the design handoff.
Solution Showcase
And Finally, One Design was out
From having multiple brainstorming sessions on including the last variants in the list of components to finally publishing on Figma. On our different project files, we imported One Design System and we as a team were able to design efficiently, focusing more on ideation and research and of course updating the system along the way. Here is a small glimpse of the One Design System.
.png)