Design System for UX: A Primer
Design system is not a new buzz word or catch phrase, they have been existing for a very long time. A Design System is a systematic approach/framework for a consistent, scalable product development.
For those that have been hearing what exactly makes up a design system or why is it important, we got you covered.
Let me start off by asking you a question, How many combinations are possible using 6 standard Lego bricks?
The answer is 915,103,765 combinations!
That is the number of combinations produced by a series of components combining in different ways to produce different outcomes.
Interesting. But why are we talking about designs systems now, What has changed?
Design system gained popularity for prints and publications & wasn’t popular for digital products but that is all in the past. Today, the rapidly digitized world is centered around User Experience (UX) & User Interfaces (UI). Design system lays the foundation to be more scalable & efficient way to build the product & collaborate with teams & provide consistent experience.
Ok, Understood, Can you give me an example of Design System in the Digital Context?
Look no further than Google’s material design. The Digital design system by Google has gained widespread adoption across Startups and Enterprise alike.
Tell me this, Why is it Important & how can I leverage?
From poor product descriptions on web-pages, to inconsistent product specs to conflict between designers and engineers, these are the many challenges individuals faced because of the absence of design system.
Here’s how all of them can be managed efficiently with this framework
- A Design system can be used to build several digital products and applications collaboratively
- Design systems allow Designers and UI engineers to work together efficiently on any product with components designed for consistency
- Without design systems, every product or business owner has their own product philosophy not aligned with the brand itself
- Design systems are not just limited to Designers and Engineers but to Marketers, Business Leaders, Customer Experience teams and more
- Want to ship your Products fast and in a consistent manner? Look no further.
So, usually, what are the components of a Design System?
- Colors (Could be different for Social, Web, Sub-brands)
- Icons (Icons are created and classified based on the function viz. if its a transaction, value props, product or service offered, financial etc.)
- Fonts (Consistent Primary, Secondary, Tertiary fonts/font-family)
- Imagery (Who you are, What you do, The Whys, The Hows of a Brand)
- Templates (Web, Mobile App, Social Media, Graphics, Newsletters etc.)
- Even Sounds etc.
A design system is like a good salad; Combination of different ingredients produce different end product
How Can I create a design system?
Well, goes without saying, a design system is a complex project involving multi-faceted understanding of Design, Business, Marketing, Customer Experience etc. The best approach to go about this problem statement is to take this step-by-step approach.
- Start by understanding Brand Identity and Elements
- Understand Business needs and Value Propositions
- Get data from Analytics, User Research and CX teams to see what is that your user wants+needs and add them to your project
- Set ground rules for the design system — The decision makers, flow of information, approvals etc.
- Start building components at a Unit level be it Colors, Fonts, Communication for these elements based on your research
- Take these unit level elements and build components out of them to customize for different mediums viz. Web, Social, Physical etc.
- The last and the most significant part, document, launch the system and communicate extensively to all stakeholders at the launch and periodically during the early stages of adoption.
I want to know more examples, where can I see?
Polaris by Shopify — https://polaris.shopify.com/
AirBnb Design system — https://airbnb.design/the-way-we-build/
Lightning by Sales Force https://www.lightningdesignsystem.com/getting-started/
Atlassian- https://www.atlassian.design/
About us: Leo9 Studio is a Premier Design & Tech Agency. We help Enterprises and Startups alike build Great Products, Gorgeous Interfaces, Great Brands.
Want to build a design system?
Say hello to us at info@leo9studio.com
