How systems thinking informs good content and design

What do a car, an iceberg, and Leonardo DaVinci’s Vitruvian Man all have in common? No, we’re not setting you up for a punchline. All of the above are examples of systems thinking. 

Systems are products of the interactions between their parts. Applying that understanding to the world around you is the basis of systems thinking.

If you were to dismantle an automobile into its individual components, for example, it stops being a car simply because it’s no longer roadworthy. The things that dictate systems behavior for cars are the collective interactions of parts like the engine, the steering wheel, and the tires (I promise I’ll get to the iceberg and DaVinci later.)

Systems thinking encourages approaching systems — businesses, machines, you name it — as complex organisms, and the elements within as parts of the whole. Someone engaged in systems thinking won’t see a broken car part as a single problem; instead, they’ll try and figure out what went wrong within the system, the car as a whole.

Systems thinking expands problem-solving from whack-a-mole to holistic overviews of entire ecosystems.

The value of systems thinking is applicable to many disciplines, supporting and connecting them in ways that are intuitive and highly impactful — including the way people approach digital experiences. In this post, I’ll explore the evolution of systems thinking, how it led to the emergence of design systems, and how it codifies and scales decision-making to promote good design and content.

Car

What is systems thinking and what does it mean for digital products?

The term “systems thinking” was coined in 1994 by Barry Richmond, who described it as the art and science of making reliable inferences about behavior by developing an increasingly deep understanding of underlying structure. Academics have furthered this definition by talking about the ability to recognize interconnections, identifying and understanding feedback, understanding dynamic behavior, and much more.

The internet has proven itself ideal for reevaluation through the prism of systems thinking, because in the earliest days we approached this exciting new medium as simply a digital rendering of print. We saw the world through single pages. Editors and designers would create content on one page, copy and paste to another, and then rinse and repeat. 

As the digital ecosystem grew larger and more complex, this model became broken. Treating websites like newspapers or magazines doesn’t work; same goes for the legacy, monolithic technologies originally developed to maintain them. They both have to be scalable.

How might systems thinking be relevant here? A helpful framework is The Iceberg Model and its four levels of thinking. Icebergs usually have only 10 percent of their total mass above the water, while the other 90 percent lurks beneath the surface. But that 90 percent mass is what interacts with the ocean currents, and it’s what we’re not seeing below that  determines the iceberg’s course of direction up above. You might expect it to drift in one direction, when in fact it goes in another.

The Iceberg Model and its four levels of thinking.

At the tip of the iceberg — the Event Level — you can see what’s going on without doing any digging. Let’s imagine that the circulation of a newspaper’s print edition is in freefall, while the supporting website is slow to keep up with the day’s agenda. At this level, the only course of action is to react after the worst has happened, perhaps by cutting back on staff or giving over more space to advertising, and hoping that circulation will recover.

Now we go below the waterline to the Pattern Level, an area not immediately visible to the casual observer. This stage represents the digital product creation process. What’s going wrong here? If you look at the problem through a systems-thinking lens, you may find that the website doesn’t publish breaking news until it’s appeared in the print edition, and it’s impossible to adapt each piece of content for viewing on desktop, mobile, and tablet browsers. At this level, you can anticipate these problems, but there’s only so much you can do to mitigate their impact.

Deeper underwater we have the Structure Level, which is connected to the patterns we’ve just identified. This is where we start to ask ourselves, why does the website have to wait for the print edition before publishing breaking news? How can we optimize for omnichannel distribution? Maybe the newspaper management is too attached to print circulation as a metric of success, or the website team is understaffed and overworked. 

Finally, way down at the bottom we have the Mental Level: the assumptions, beliefs and values that allow these structures to flourish and persist. In our example of a terrible, no-good newspaper and website management, the root could be a media outlet doggedly sticking to the old ways of doing things and lacking a vision for future distribution. The issue is not the behavior but the motivation for that behavior. 

But if reevaluation and transformation is possible at this level, it can influence every level upward. What happens if the newspaper adopts a digital-first mindset, and reports the news in real time on the website behind a subscription paywall? Just look at The New York Times or The Washington Post and you’ll have your answer.

digital first news

How systems thinking applies to design systems

As we become dependent on more and more digital products and experiences, content, design, and engineering are more interconnected than ever before. In a post for the Knapsack blog, I wrote that systems thinking encompasses design and engineering; it should become your product team’s de-facto mode of work — and it must include content too.

How can you ensure your product page is simultaneously optimized for a tablet or a phone or a desktop PC? What about setting up a good localization and co-creation workflow? Systems thinking doesn’t answer that question directly. It’s more about codifying and scaling decision-making to enable good design and content.

This is where design systems come in. As an extension of systems thinking, design systems are complete sets of standards intended to manage digital product creation at scale, using reusable components and patterns. Design systems are built to serve product teams in their entirety—not just designers and engineers, but content writers, product managers, and executive stakeholders too. 

What they most definitely aren’t, however, are just repositories for building blocks and documentation: They’re the inner workings of your digital products. And to effectively foster collaboration, they have to be open and available to everyone — the people doing the work, and the people benefiting from it.

In these terms, a design system becomes a platform for innovation. Systems thinking will become the norm, and you’ll be able to depend on what’s worked as a framework for creativity and experimentation.

One place we might see this happen is at the intersection between design systems and structured content, where the latter feeds into the continuous refinement of the design system. 

As a byproduct of decoupling content from the presentation layer in a headless CMS or a content platform, structured content can be combined with design systems to glean telemetry data about how, for example, UI is consumed in apps. Design systems will not only make design scalable for builders and keep the experience consistent for end users, but data will tell you which components are getting the most use (and which aren’t) and help inform the ongoing evolution of the design system.

Which brings us back round to systems thinking. Both design systems and content platforms can trace their roots to this underutilized but tremendously valuable philosophy. Are you still wondering how Leonardo DaVinci’s Vitruvian Man relates to this conversation? 

Leonardo DaVinci is an early example of a systems thinker. He is the archetypal Renaissance man; an artist, mathematician, inventor, writer, sculptor, architect, musician, and more. The Vitruvian Man is a fantastic example of systems thinking because it represents much more than a sketch of human proportions; it’s a pure distillation of DaVinci’s studies into anatomy, geometry, religion, and philosophy. It’s a pretty decent template for the rest of us to follow.

Stuck with a stagnant website? Download the Modern Website Strategy Guide to see how you can turn your website into a living, evolving software application with a product-centric approach.

Take a tour!

See Contentful in action with a personalized walkthrough.

About the author

Don't miss the latest

Get updates in your inbox
Discover how to build better digital experiences with Contentful.
add-circle arrow-right remove style-two-pin-marker subtract-circle