Menu About

Macro/micro vision for coherent design systems

How alternating focus between the yin and yang of design leads to the perfect balance of consistency and flexibility.

Talk to any design system advocate and you’ll hear the word “consistency” over and over. Consistency in customer experience is what has matured our design field, governed UX best practices, and elevated many loved brands and services to the top of their industries.

We all know that consistency is a core principle of good UX and visual design. It provides familiarity, strengthens intuitive behaviour, and establishes a strong brand identity. Consistent experiences help build trust, while disjointed design erodes it.

Design great Massimo Vignelli describes consistency as “discipline”, and the goal of creating “continuity of intent throughout”. The opposite of continuity is fragmentation.

Consistency in design also brings efficiency. Reusing styles and components makes design production faster and development more organised, maintainable, and scalable. A fragmented system is a designer and developer’s worst nightmare.

But design consistency has a dark side. Over-emphasis on consistency leads to rigidity. A design system that’s not flexible — that cannot adapt to change and growth — can stifle innovation more than not having a system at all.

Consistency and flexibility must find an equilibrium. That’s why any good design system provides some unchanging absolutes as well as some guidelines that can be bent and adapted.

This is the yin/yang of effective design systems. Too much focus on consistency will begin to dominate a design process and drive it into a confining, rigid state. Too much flexibility will lead to fragmentation and loss of efficiency at scale.

Coherence is consistency, only better

If consistency is too rigid a principle to build ideal design systems on, what’s the alternative? Coherence.

This isn’t a new idea in the field of digital product design. Bruno Bergher, Jon Yablonski, and Carlos Yllobre have both written about it, as have others. Bergher says:

Coherence means making sure every part of your product feels like it belongs there, instead of trying to make them exactly the same.

Consistency doesn’t have to mean uniformity. By thinking in terms of coherence instead, we side-step the trap of being too prescriptive.

Coherence means creating something that looks like it all belongs together. It’s an experience that feels natural and matches expectations. It’s making sure every detail and design decision has been considered, even if that consideration leads to a conclusion that being inconsistent is more effective in a specific context.

Jared M. Spool, the UX master, shares the same conclusion in Consistency in Design is the Wrong Approach:

“Consistency in design is about making elements uniform — having them look and behave the same way. We often hear designers talk about consistent navigation, consistent page layouts, or consistent control elements. In each case, the designer is looking for a way to leverage the usability by creating uniformity. After all, if the user learns to operate the design in one place, why not have that knowledge transfer to the next. This is all good. But wrong.”

The problem with a designer’s aim for consistency is that they are thinking about their world, not the user’s. It’s easy to get lost in your product and narrow your vision to the most immediate concerns of stakeholder feedback and sprint deadlines.

Yes, consistency often leads to user experiences that are easier to learn and understand. But when we get into the nitty-gritty details of building a design system, we’re leaning on consistency for our own benefit. We do it to make design decisions easier, production faster, and coding more manageable.

To correct this, Spool argues that we should shift thinking from consistency to the user’s “current knowledge”. Current knowledge is the knowledge the user has when they approach the design. It’s the sum of all their previous experiences with relevant products and designs. Instead of asking “is what I’m designing consistent with what I (or others) have designed in the past?” he thinks we should be asking “will the user’s current knowledge help them understand how to use what I’m designing?”.

Spool sums up his concept of current knowledge like this:

“When you think about consistency, you’re thinking about the product. When you’re thinking about current knowledge, you’re thinking about the user. They are two sides of the same coin. We’ve just noticed that the designers who spend more time thinking about the users are the ones that end up with more usable designs.

Funny thing about thinking about current knowledge: when you’re done, your interface will feel consistent. Why? Because it will match the users’ expectations and, where they expect it to behave like something they’ve encountered before, it does.”

Designing based on current knowledge is one great way to design for coherence instead of consistency. The level of consistency you’ve achieved in your design system is meaningless to your users. What matters is that the experience you’ve created feels coherent. Consistency is simply a tool to help build coherence, and “current knowledge” helps keep your drive for consistency focused on its value to users.

But even when we remain user-centric, there are plenty of other things that can impede our path to design coherence. The biggest culprit: forgetting to zoom in and out.

Macro vs. micro design — the internal struggle of context and consistency

If you’re responsible for building and growing a pattern library or design system — as I am right now — you’ll be very aware of the necessity to think at both macro and micro levels. What does that mean? Here’s a definition from Autumn Sullivan:

“Specific, or micro thinkers, tend to focus on the how of a problem. They’re experts in efficiency, processes, and systems. Because they are hyper-focused on the specifics of each segment of a problem at a time, they can identify potential gaps or pitfalls in a new process or plan. They may also have a tendency toward goal-completion, which can make them excellent motivators.

Holistic, or macro, thinkers tend to also be creative thinkers. These folks think way outside the box, and their ability to make connections across two or more seemingly disparate concepts can result in surprising solutions and creative campaigns. Their passion and vision can inspire affinity and motivation in their team.”

When applied to the practical matters of design:

Micro (specific) design is about small, contextual decisions. It’s about which control to use here, what text style to use there, how a screen or flow works in the context of its immediate surroundings. Designers make micro decisions constantly, hundreds of them every day. Micro decisions are what gets work done. It’s zooming in.

Macro (holistic) design is when you’re looking at the system as a whole — when you’re zooming out. With every change made at the micro-level, you think “what are the implications of these decisions as it ripples through the system?”, or “does this decision improve or erode design system coherence?”.

Macro design creates consistency, while micro design demands flexibility. If your vision is stuck at the micro-level, you’ll lose coherence and begin to fragment. If your vision remains too macro, you’ll be unaware of the breadth of micro needs, and build a system too rigid to evolve.

The best designers are constantly oscillating between zoomed-in and zoomed-out vision to ensure every critical design decision finds the right balance between micro-contextual value and macro-system health. If a single person can’t hold that vision in their head, you have to build a team of complementary thinkers that can play both roles. It’s vital that every design system has at least one central champion with that macro view necessary to ensure quality and consistency in output across all applications.

Stakeholders that are too far removed from the internal workings of the design process will almost always think too micro — they’re simply unaware of the macro consequences of what appear to be small decisions. They request a seemingly superficial change that makes perfect sense in the context of a single screen or journey— but when considered at the macro level — create far-flung consequences that require rethinking fundamental system-wide strategies. Only those dealing with the day-to-day macro decisions truly understand the butterfly effect of micro-changes that don’t align with the system’s principles of coherence.

Every design system will have its push and pull of consistency vs. flexibility. Larger complex systems demand greater flexibility, but they also rely on stronger consistency to keep their variety from fragmenting. The job of a design system owner is to never lose sight of both sides — to balance the yin and yang. Have the ability to see the micro and macro together at once, so you can make strategic decisions on the fly that balance small contextual needs with the greater good of the system as a whole.

Only design systems constantly scrutinised at this level will grow up to become lasting, scalable tools for their team. Their consistent ground rules will make them easy to use and maintain, while their flexible variations will foster innovation and growth. Design systems never stand still. They’re constantly evolving organisms. It takes tremendous vision to stay ahead of that evolution. Be the champion of coherence in the face of change.

Want to comment?
See this story on Medium
Benek Lisefski

Hi, I'm Benek Lisefski. Since 2001 I've run my own independent design business. Join me as I unfold 18 years of freelance business knowledge: honest advice and practical tips to help you take your indie career from good to great.

MediumTop writer in Design, Business, Creativity, and Entrepreneurship.