MLD (Minimum Lovable Design) — Quick Starting Point for building your UX Design System 1.0

I have been receiving an increasingly large number of questions related to building a UX Design System — What is it? What should it include? What should it NOT include? How long does it take to build one? Why do we need one?

As part of my current work as well as on-going research, I have read through a lot of articles about building UX design systems but most of them don’t seem to make it prescriptive enough to allow teams/design leads to actually start building their first iteration of a UX design system. Most articles seemed more theoretical than practical.

Therefore, I decided to write this article to be very focused and tactical about the best way to build a UX design system to craft consistent, efficient and beautiful on-brand experiences across all platforms and channels.

Furthermore, sometimes teams attempt to design too few or two many components as part of their first iteration of the design system. Therefore this guide is mean to serve as a key starting point for your UX design system 1.0.

Components of a UX Design System

While a UX design system can get fairly complex, the illustration below highlights the key components of a basic design system and we will focus this article on these components.

Typically a UX design system should consist of the following key components. These components help you to get a foundational system in place that you can iterate and mature over time.

Figure 1: UX Design System Components

A) Brand Design Framework

A brand framework serves as a North Star to point towards what the brand stands for. It also acts as a guide to ensure all customer facing touch points are consistent and on-brand.

Figure 2: Brand Design Framework

B) Content Design Style

Content standards provide clear and tactical guidelines that helps to think strategically about the use of language and choice of words in products to craft better experiences

Figure 3: Content Design Framework

D) Visual Design Language

Whether it’s an app, a store, a landing page, a t-shirt, or a promotion, we want things to look, feel and sound consistent and seamless across platforms.

Figure 4: Visual Design Language Components

F, G) UX Components and UX Patterns

Finally, Components are foundational building blocks of a user interface which can be combined together to build apps. Patterns are simply combination of components combined together.

Figure 5: Key Components and Patterns

In conclusion, having these key components as part of your UX design system 1.0 should allow your team to have a great starting point to ensure effective collaboration, consistency and efficiency across cross-functional teams. I’m sure there are a lot more components that can be added to this system but it sure makes a great starting point for a MVP err MLD (Minimum Lovable Design) System.

--

--

Kevin Dalvi
UX Design — Web | Mobile | Virtual Reality

Entrepreneur and Head of Product & Design focused on the future of Cloud | Web | Mobile | Artificial Intelligence