Design systems and principles

This article is an adaptation of a talk I gave for the product team at Bukalapak back in 2017 when I was leading the very first design team. One of our projects in the early days was to initiate a design system. We had to ensure the design can keep up with their goal to expand the services and be a super app.

*Super app is a platform that offers various services under one umbrella.

Before the euphoria in which people talked and wrote more about design systems, we've been knowing them as design guidelines, style guides, UI guidelines, and so on. Some people would argue a design system is fancier and more affluent than the other terms used earlier.

However at the higher level, they're all the same. It's about rules; a how-to.

Based on our case in Bukalapak, building up a design system was more exciting than piloting the system and then maintaining it. I've heard a couple of feedback when using the system; they felt a bit constrained. Some of them are too rigid and always follow the existing system.

They weren't quite sure when to follow and challenge the rules.

It's understandable. It was still immature at that time, both the system itself and the way we understand it.

I came up with a notion to shed light on how to balance between challenging and following the system.

Imagine if a design system is a dotted line connecting point A to B. The most straightforward and safest way to travel from A to B is by following the dots. Those dots lead you the way, the same as what a design system does; it guides you when designing.

(missing pic)

If you must always follow the system, you might face these situations.

  • You may force the system to fit into the context you are dealing with. Rather than to understand the context and see how far we can use the system.
  • You will always put rules before the need for good user interaction.
  • Every page that you design will seem monotonous. There may be some pages that would be better off being different from existing templates or component variants.
  • You may feel that you are not creative enough in visualizing solutions.

To follow the system is a must.

If you don't follow the design system, what is the point of having one? Designers want to reuse even reduce components that are no longer effectively used to give a cohesive feeling across a product.

However, designers need to challenge the system continually. So the system can thrive as the product grows or proves the solidity in different cases. The system shouldn't limit you to give the best experience for users.

The beauty of a design system is to achieve unity across a product, not a uniform. A unity means harmoniously different. We aim for cohesiveness across our product, while we still need to aim for consistency in certain parts.

With that kind of understanding, now we try not to always following the dotted line. We try to explore by extending the use of the system whenever we think we need to.

(missing pic)

In the practice of extending the system, to keep you from exploring wildly, you need another set of rules, a looser one from the design system, which is called a design principle. The system and principle define how designers design, yet a principle is commonly broader, not specific in describing the rules like a design system. Typically a design principle consists of multiple points and only one sentence. If there is an explanation, it will be minimal. To some people, principles seem abstract.

Besides setting up constraints, designers create room for designers to develop different interpretations when exploring the system. Think of the principles as boundaries, the spaces between the design system line (middle) and the principle borders provide space for designers to articulate a system differently.

(missing pic)

However, understanding the principles and using them as guidelines is not as simple as we write ones. They are arguable, can be interpreted differently depending on the cases. Sometimes we can rely on one of the principles, and sometimes we should see it all together.

A design system is open to be bent or extended, but it's not a lenient and straightforward journey. It requires thinking to seek justification. More than anchoring on principles, you should be able to see your exploration objectively. Try answering these questions:

  • Will your proposed component/variant work in other cases?
  • Why do your users need it?
  • Which component is the closest to the one you are offering? Why don't you use that one?
  • What are the pros and cons of your exploration?

The further you explore, the more significant the responsibility.

I realized what I wrote may not suit your case. The notion is quite simplistic, with no given examples & not tested in many different circumstances.

What do you think?

Resources for more reading
  1. An open source collection of Design Principles and methods.
  2. Atomic Design
  3. Design Principles Behind Great Products