{"id":27693,"date":"2022-07-05T16:39:55","date_gmt":"2022-07-05T15:39:55","guid":{"rendered":"https:\/\/www.intercom.com\/blog\/?p=27693"},"modified":"2025-01-03T13:21:15","modified_gmt":"2025-01-03T13:21:15","slug":"intercoms-product-principles-connected-modular-systems","status":"publish","type":"post","link":"https:\/\/www.intercom.com\/blog\/intercoms-product-principles-connected-modular-systems\/","title":{"rendered":"Intercom’s product principles: How connected, modular systems help us to focus on important decisions"},"content":{"rendered":"

When I joined Intercom eight years ago, I knew nothing about system design. <\/span><\/p>\n

I designed and presented my ideas using high-fidelity mockups. They were quick to put together, and so I assumed that even wireframes were a waste of time, let alone system design diagrams.<\/span><\/p>\n

This is the fifth post in a <\/span><\/i>series exploring our product principles<\/span><\/i><\/a>. Here, Gustavs discusses our design principle of \u201cConnected, Modular Systems\u201d.<\/span><\/i><\/p><\/blockquote>\n

But often when I shared these designs with others to get feedback, we’d get sidetracked by seemingly small interaction design decisions when, in reality, we just had different mental models of how the system should work.<\/span><\/p>\n

Months after the solution was shipped, we’d learn that we had made a fundamental mistake in our solution. Because I was designing at the UI level, not the system level, we were not focusing on the most important decisions.<\/span><\/p>\n

Our Chief Product Officer Paul Adams<\/a> introduced me to the idea of <\/span>creating systems, not destinations<\/span><\/a>. This idea was a core part of our design process, initially implicit, but later formalized into a design principle: connected, modular systems.<\/span><\/p>\n

Let’s break it down and look at each part of this design principle in more detail.<\/span><\/p>\n

Focus on the most important decisions with system design<\/span><\/h2>\n

System design<\/a> is a representation of how your solution works conceptually \u2013 what are the objects in your system and how does data flow between them? Typically it’s presented as a diagram.<\/span><\/p>\n

For example, here’s a system design diagram that we used to <\/span>design our Articles product<\/span><\/a>. It demonstrates how teammates manage their help center content, how users consume that content, how teammates can send that content when responding to users, and how a feedback loop continuously improves the content quality. Without the distraction of a mockup of a screen, we were able to get aligned on how the product should work.<\/span><\/p>\n

\"articles<\/p>\n

System design for Intercom Articles<\/a><\/em><\/p>\n

By first focusing on the system, and not the interaction design, you can ensure that you’re debating the most important questions first and aligning on how the solution should work at a high level, without getting bogged down by minor details.\u00a0<\/span><\/p>\n

The same system can be implemented in many different ways when it comes to interaction and visual design. By working through system, interaction, and visual design layers gradually, you can ensure that the right feedback is given at the right time. For example, there’s no use sweating the visual design details if you’re not yet aligned on the system.<\/span><\/p>\n

Increase efficiency with modular system<\/span><\/h2>\n

By designing systems first, you focus on the most important questions without getting lost in the finer details. But designing too many systems can also lead to a product that’s difficult to understand and expensive to maintain. That’s where <\/span>modular<\/span><\/i> systems come in.<\/span><\/p>\n

\u201cA modular system is a system that you create once but reuse in many different contexts\u201d<\/p><\/blockquote>\n

A modular system is a system that you create once but reuse in many different contexts. This idea is not new and is used across a range of industries \u2013 from home construction to standard shipping containers \u2013 to increase efficiency and reduce costs.<\/span><\/p>\n

Back in 1908, Sears Roebuck and Co. took advantage of a modular system when they started to sell entire houses through their mail order catalogs. They were prefabricated and all the necessary parts to build the house were shipped to customers across the US. As a result, Sears significantly reduced manufacturing costs and passed along the savings in lower prices for their customers.<\/span><\/p>\n

\"Sears<\/p>\n

Sears and Roebuck catalog featured pre-fabricated homes between 1908 and 1940<\/em><\/p>\n

You’re likely already familiar with the concept of connected, modular systems if your product has a <\/span>design system<\/span><\/a> \u2014 a library of reusable UI components and patterns. Design systems can greatly increase team efficiency and product consistency since you design and build UI components once, then use them throughout the product.<\/span><\/p>\n

Modularity can be applied in multiple contexts<\/span><\/h2>\n

The idea of modularity can be applied beyond UI components \u2013 here’s an example.\u00a0<\/span><\/p>\n

Intercom customers can set up automated messages to engage their customers when they match certain criteria. Initially we only had simple in-app messages and email but over time we added more and more ways to engage customers, such as SMS, Product Tours, Banners, etc. While we used the same design system in the UI, it was more efficient to build the technical capabilities as separate systems since each of them had slight nuances.<\/span><\/p>\n

As a result, each of these message types had similar, yet slightly different capabilities (e.g. they could target different audiences, some had A\/B testing, some had goals, etc.).<\/span><\/p>\n

\"message<\/p>\n

Varying feature capabilities across separate systems<\/em><\/p>\n

They were difficult to maintain and improve because whenever we wanted to make an improvement that would benefit all message types, we’d have to update all of them individually. In the long run, this was slowing us down, constraining what our customers could do with them, and made it difficult for us to create a solution for orchestrating how all of them should work together.<\/span><\/p>\n

To fix this problem, we took on a project to rationalize all of these disparate systems and come up with one modular system that can be used for all message types. Now whenever we make an improvement to this system, all message types automatically benefit from it.<\/span><\/p>\n

\"connected<\/p>\n

One modular system to power all features<\/em><\/p>\n

Differentiate with connected systems<\/span><\/h2>\n

With modular systems you can increase your efficiency by having a small number of powerful and flexible systems, but the real magic happens when you connect these systems together.<\/span><\/p>\n

A big reason why Apple can create amazing products is that they are vertically integrated \u2014 Apple designs their own hardware, software, services, and even the retail experience. This way they control the entire customer experience and are able to seamlessly integrate their hardware and software, whereas some of their competitors can only work within the constraints of the hardware they get.<\/span><\/p>\n

\"Apple's<\/p>\n

Apple’s vertical integration<\/em><\/p>\n

By making sure that your systems are connected and integrated with the rest of the product, you can gain similar strategic advantages:<\/span><\/p>\n