large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2sibPEk">Inside Intercom</a> | ShekMan Tang </p>
<p>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?</p>
<p>It’s like choosing furniture when you don’t know how big your room is.</p>
<p>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.</p>
<p>That’s where systems thinking comes in. It’s a top-down approach where we consider the big picture first and the specific interactions later. It helps you establish a design system early, which sets the course of the product direction, gets the team on the same page, and focuses your design effort on the most important product areas.</p>
<p>Let me show you how we created a design system for <a href="http://ift.tt/2h2UQ6X">our knowledge base product</a>, <a href="http://ift.tt/2hcEp4x">Educate</a>, and how it helped.</p>
<h2>What exactly is a system?</h2>
<p>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, <em><a href="http://ift.tt/29HhoXZ">Thinking in Systems</a></em>:</p>
<blockquote>
<p>“A system is an interconnected set of elements that is coherently organized in a way that achieves something.”</p>
</blockquote>
<p>Using this definition gives me a set of simple questions to start asking:</p>
<ul>
<li><strong>Elements:</strong> What are the core elements in the system?</li>
<li><strong>Interconnections:</strong> How are the elements connected? What are the relationships? What are their inputs and outputs?</li>
<li><strong>Purpose:</strong> What does this achieve?</li>
</ul>
<p>These questions are the foundations of systems thinking, and armed with them you can start applying them to the specific problem you’re going to tackle.</p>
<h2>Applying systems thinking in practice</h2>
<p>With Educate, 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.</p>
<p>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 to the article.</p>
<p><img src="http://ift.tt/2rkAZoJ" alt=""></p>
<p>So far, so easy.</p>
<p>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? </p>
<p><img src="http://ift.tt/2siVhft" alt=""></p>
<p>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 feedback to one another? How does this system interact with other systems? By continuing to probe, we were left with the following system:</p>
<p><img src="http://ift.tt/2rkSkO5" alt=""></p>
<p>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.</p>
<h2>Never easy, always worth it</h2>
<p>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:</p>
<ul>
<li><strong>Uncover new possibilities:</strong> By uncovering all states in the system in advance, we could could spend more time thinking about creative ways that teammates (i.e. users in 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.</li>
<li><strong>Prioritize work:</strong> 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.</li>
<li><strong>Reuse existing components:</strong> 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, <a href="http://ift.tt/2rRoOA4">Reactions</a>, 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.</li>
</ul>
<p><iframe src="http://ift.tt/2siTrLy" title="Wistia video player" frameborder="0" width="400" height="234"></iframe></p>
<h2>A simple way to apply systems thinking</h2>
<p>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?</p>
<p>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:</p>
<ul>
<li>How can you achieve your goal with smaller amount of elements?</li>
<li>Are there elements in the system serving the similar purpose? Can we reuse or combine them?</li>
<li>Can the relationships between the elements be changed? Can it be organised with a better structure?</li>
<li>What if you could modify the overall purpose of the system?</li>
</ul>
<p>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.</p>
<div>
<h2>Join over 25,000 subscribers and get  the best content on product management, marketing and customer support.</h2>
<div>
      Sign me up
    </div>
<div></div>
<div>
      <span>You’re all set. You already get our newsletter.</span><br />
      <span>Almost there – we’ve sent you an email to confirm your subscription.</span>
    </div>
</div>
<p>The post <a href="http://ift.tt/2sibPEk">Applying systems thinking in product design</a> appeared first on <a href="http://ift.tt/2ci06Cx">Inside Intercom</a>.</p>
<p><img src="http://ift.tt/2rRd1BW" height="1" width="1" alt=""></p>


Applying systems thinking in product design

Applying systems thinking in product design

Top Stories