Create a UX Design System

UX Design system is not a new buzz word or catchphrase, they have been existing for a very long time. A UX Design System is a systematic approach/framework for consistent, scalable product development. For those that have been hearing what exactly makes up a UX 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.

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 UX 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 UX design system.

Here’s how all of them can be managed efficiently with this framework

Use such system to build several digital products and applications collaboratively

These systems allow Designers and UI engineers to work together efficiently on any product with components designed for consistency

Without these systems, every product or business owner has their own product philosophy not aligned with the brand itself

Interesting. But why are we talking about designs systems now, What has changed?

These systems are not limited to Designers and Engineers but also 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 UX 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 UX design system is like a good salad; Combination of different ingredients produce different end product

How Can I create a UX design system?

Well, goes without saying, this system is a complex project involving a 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.

1. Start by understanding secrets of Branding, Identity and Elements

2. Understand Business needs and Value Propositions

3. Get data from Analytics, User Research and CX teams to see what is that your user wants+needs and add them to your project

4. Set ground rules for the this system — The decision makers, flow of information, approvals etc.

5. Start building components at a Unit level be it Colors, Fonts, Communication for these elements based on your research

6.Take these unit level elements and build components out of them to customize for different mediums viz. Web, Social, Physical etc.

7. The last and the most significant part, for instance, 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 UX Design system — https://airbnb.design/the-way-we-build/

Lightning by Sales Force https://www.lightningdesignsystem.com/getting-started/

Atlassian- https://www.atlassian.design/

Medium: UX vs CX