If your product design process looks anything like ours, each project will start with a clear set of problems to solve. But what happens next?
The temptation for many designers is to jump straight into designing the interface. But designing specific interactions this early can get in the way of designing the foundations of your product. It’s like choosing furniture when you don’t know how big your room is yet.
“It’s like choosing furniture when you don’t know how big your room is”
That’s where systems thinking comes in.
What is systems thinking in design?
Systems thinking in design is a top-down approach where companies consider the big picture first and the specific interactions later. Systems thinking helps product development and design teams establish a design system early, which sets the course of the product direction, gets everyone on the same page, and focuses design efforts on the most important product areas.
Let me show you how we created a design system for our knowledge base product, Articles, and how it helped.
What exactly is a system?
Before we start, let’s be crystal clear in our definition of what a system is. I like to use the definition given by Donella H. Meadow in her book, Thinking in Systems:
“A system is an interconnected set of elements that is coherently organized in a way that achieves something.”
Using this definition gives me a set of simple questions to start asking:
Elements: What are the core elements in the system?
Interconnections: How are the elements connected? What are the relationships? What are their inputs and outputs?
Purpose: What does this achieve?
These questions are the foundations of systems thinking, and armed with this thinking process you can start applying them to the specific problem you’re going to tackle.
Applying systems thinking in practice
With Articles, we were creating a product to help users answer simple support questions themselves. This helps users resolve their questions faster, and lets support teams focus on questions that need deeper investigations.
So we asked ourselves: What are the core elements in this system? For us it was an “article” – content written by the company to provide answers to common questions. It has an author, content, and ways for users to give feedback on the article.
So far, so easy.
Next, we mapped out how these elements were connected and their inputs and outputs. How do articles get created? How do articles get delivered to people?
Most of these questions have a domino effect. No sooner have you answered one question then you’re left with another that needs answering. How do these elements feed back to one another? How does this system interact with other systems? By continuing to probe, we were left with the following system:
As you can see, what looks like a straightforward problem at the outset has an incredibly complex system behind it. Of course, we could have jumped headfirst into designing the atomic units of this system right way, but without everyone agreeing how these components interacted with one another, we would have got bogged down discussing unnecessary details without a clear vision of where we were heading.
Never easy, always worth it
If the above system seems like an overly complex approach to apply to your designs, let me bring you through a few of the ways that this approach can help you during the product execution phrase:
Uncover new possibilities: By uncovering all states in the system in advance, we could spend more time thinking about creative ways that teammates (i.e. users of Intercom) could publish content to their users. On the back of this system, we were given an exciting opportunity to create a suggestion system (articles are intelligently recommended for you to share based on each conversation) that played a big part in helping end users resolve their questions more efficiently.
Prioritize work: When you have a clear idea of the full system in advance, it’s easier to whittle your work down to the most important and impactful parts, and avoid any scope creep later in the project. Then once you’ve built the core part of the system, it’s easier to add to it at a later stage.
Reuse existing components: Consistent UI patterns and components make a huge difference in guiding a user through a product. They also have a huge impact in helping your team avoid doubling up on work. Not everything has to be rebuilt from scratch. An example of this are our article reactions. When users read an article, we want to enable a way for them to rate the helpfulness of the content. We already have a component in our Messenger, Reactions, that serve a similar purpose. All the way from design to implementation we’ve reused the same component, its hover effect, transition details, and clicked state are shared across the two contexts.
A simple way to apply systems thinking
The example I gave up until now shows how systems thinking is useful when developing a new product, but it’s just as good for improving existing products as well. Using the framework, you can ask yourself the same questions: What are the key elements in your product? How are they connected? What’s the overall purpose they serve?
For example, take 1-2 hours with your team and try to draw out your product’s system on a whiteboard. Once you’ve mapped everything out, start asking your team how you can make the system simpler and better. Here’s a few questions to ask to get the ball rolling:
How can you achieve your goal with a smaller amount of elements?
Are there elements in the system serving a similar purpose? Can we reuse or combine them?
Can the relationships between the elements be changed? Can it be organised with a better structure?
What if you could modify the overall purpose of the system?
Putting on your systems thinking glasses before you start your next project will prevent your team from getting mired into design details too early. You’ll find yourself having meaningful conversations about your product’s blueprints, rather than about button colors and the like. And once you’ve got a hold of your system, you’ll find countless ways to improve your product. You’ll understand each atomic unit so clearly that you can set about creating something that’s more than a sum of its parts.
Comments