Let me first start by describing what Design systems is because lots of people think them to be just a bunch of components. Design system is a collection of components, interaction patterns, standards and guidelines. The components in a design system follow the branding and accessibility guidelines. It is single source of truth for the designers, developers and product owners. It is one of the most important strategic assets of the company which can make or break a company’s customer experience.
How I got introduced to the design system?
During my work at Argo, it was clear to all our UX team that we need to have a design system which would help us to make things consistent across the products. With a team of 6 UX designer it was no longer an option as using the material design components was not fulfilling our needs. Material design system was still evolving with lots of stuff missing in it. Other issue was that when more than 1 designer would be working on the same project things would look different across the different screens with in the same product/application. I would then have to combine the designers work and then fix the things which looked off. This process was cumbersome and time consuming so, to have a well-defined design system was the need of an hour. We also knew that we would have to dedicate a person for that which would stretch us all. So, we started with weighing in all the pros and cons of having our own design system to make sure that we stick to it.
Three approaches to using the design system
1. Adopting an existing design system.
2. Adapting an existing design system and customizing it to meet your needs.
3. Create your own design system from the scratch.
There are pros and cons to each one of these methods, but generally the more custom design system solution is, the more time and money it takes to implement it. Thus, adapting an existing design system is the lowest cost consuming and can be implemented at much faster rate.
Some of the Pros:
1. Enhanced Design Consistency
Brand Identity: Design system ensures that all the touchpoint, from website to mobile app, reflects the branding guidelines consistently, building trust and recognition.
Faster Go-to-Market: Design systems accelerate the design and development process as it promotes reusability saving time, effort and cost This in turn helps in reducing time-to-deliver new products and features to the market at a faster pace.
Reduced Design Debt: By establishing a single source of truth for design, you minimize inconsistencies and rework.
Faster Development: Standardized components streamline the development process, leading to cost savings.
2. Better User Experience
Intuitive Interactions: Consistent design patterns create a familiar and intuitive user experience.
Accessibility: Design systems incorporate accessibility guidelines ensuring products are usable by everyone which makes the products inclusive.
Faster Feedback: With a shared understanding of design principles, teams can collaborate more effectively.
3. More time for Innovation
Faster Innovation: A well-established design system allows teams to focus on innovation, rather than reinventing the wheel.
The only negative we could think of is that we would all have to dedicate some time to build it, and we could not afford to have 1 person doing it all.
Process/How
So, the first thing we did was we audited our current UI components, made content inventory of them, as we did not want to create stuff which we could reuse. We made sure that all those assets were WCAG and branding compliant.
For creating new components, I followed the atomic design principle and took inspiration from google materials, Apple human computer interaction guidelines, salesforce, Atlassian and IBM carbon design system. I also took care of incorporating WCAG 2.2 and accessibility guidelines. I would organize and conduct a meeting related in which I would showcase the controls, components, various states (for example button has 4 states – active, disabled, in focus and filled) and interactions. I would always have 2 to 3 variations and then as a team we would review them. Once we liked the component, then it would get included in the design library. This was a time and effort consuming process with lots of meetings, reviews but it was all worth it.
Defining the components and interaction patterns for the design system was just the first step. It had to make its way into the product. If it didn’t, then it was of no use. So, we started socializing the design system to our stakeholders and our engineering teams while we were still working on the system.
All the organization was excited. It was very well accepted by everyone, as it helped in making scalable, consistent UI which in turn led to greater adaptability and good customer experience.
