Reinventing our wheel: The vision behind Intercom’s redesigned Messenger

At Intercom, we’ve reinvented different parts of our product many times over the years – most recently, our Messenger. This evolution always starts with one thing: a clear product vision. 

All products follow the same life cycle: development, growth, maturity, decline.

An inevitable slide into decline sounds ominous. And, when products are in this phase, users can feel it: it’s the slow, clunky, dated experience you get when using previous-generation tech. Businesses can feel it too: declining KPIs, competitors catching up, market impact waning.

Great companies reinvent products before reaching decline. They recognise when a step change is required to solve new problems, deliver a better experience, and drive higher growth. Through reinvention, they extend the life span of the product, and create new value for customers and the business.

Reinvention requires a product vision: a visual artifact that sets product direction over a longer term time horizon. Product vision is the critical bridge between strategy and execution. It’s the catalyst for getting teams moving with speed towards a compelling and coherent future state. 

Most recently, we reinvented the Intercom Messenger. The previous version was almost five years old, and we knew that we needed an ambitious and clear vision to bring a next-generation Messenger to the market. Here’s how we did it.

Surveying the landscape

First, we zoomed out from day-to-day execution and evaluated Messenger across multiple dimensions – product, market, customers, and business. When we looked at things from this higher altitude, we saw a confluence of factors that indicated that the current Messenger product needed to be reinvented.

The Intercom Messenger before reinvention

Product

• We had compelling ideas for powerful new features, but our information architecture and card-based navigation were not set up to house them.
• For customers with less content, Messenger’s size made it appear frequently empty.
• Our visual design needed modernization.

Market

• All business messengers had become homogenised, we needed to differentiate.
• We saw an emerging trend of businesses hand-rolling “mini” messengers, and an opportunity to productize this.

Customers

• Mature brands want deep visual customisation, so that Messenger feels native to their business.
• Users have rising expectations for premium-grade messaging software, similar to the apps they use every day: Whatsapp, Messages, and Slack.

Business

• Messenger is critical to Intercom’s business – its presence across the internet drives awareness, demand, and virality. It’s critical we re-invest in it.
• Our major virtual launch event, New at Intercom, was six months away at the time. We saw an opportunity to use it to share our vision with the world, and ship the first parts of the new Messenger.

The landscape was primed for reinventing Messenger, the need for a product vision was clear, and we had an ambitious deadline to meet. Time to get to work!

Setting ourselves up

Our experience in creating previous product visions had taught us that a vision brief is a critical doc to create upfront. It’s a simple one-pager which frames the work and gets all stakeholders bought in and brought along.

It captured the need for a vision, the timeline it should cover (we chose twelve months), our plan of attack, and critically, our five goals:

1. Shape the product
   Visualize the high-level product we’ll build, broken down into sensibly sequenced pieces.
2. Position the product
   Pitch how we’ll explain it to the world to ensure that what we build, market, and sell are joined up.
3. Validate the vision
   Build conviction by getting feedback from target customers on desirability and value.
4. Build alignment
   Generate clarity and excitement with teams and leadership.
5. Unlock planning
   Facilitate multi-quarter roadmapping and resourcing. 

Along with this brief, we ran workshops with teams and leaders to gather ideas on what the vision for Messenger should be.

These workshops served three important purposes:

• Set up an inclusive and collaborative working group.
• Define specific problems and opportunities to be solved for.
• Agree a prioritized shortlist of ideas to focus on.

Finally, with an agreed approach, we were now set up to get moving to the fun stuff: cracking open Figma and starting to jam.

Crafting the vision

A learning we had from previous vision work was that designing a vision requires a balance of three things:

• Fidelity: Concepts must be explored just enough. Too much detail and they’ll be prescriptive, too little and they’ll be handwavey. The goal is to sufficiently disambiguate, without adding anything superfluous.
• Coherency: Concepts must come together elegantly so that the whole is greater than its parts.
• Intuition: Users can’t invent the future for you. You need strong product conviction, coupled with a plan to validate. 

To strike this balance, we designed quickly and in low fidelity, combining the ideas we had most conviction in, fleshing them out, then distilling them down to their core. It took a few rounds of exploration to land on a vision that we had collective confidence in.

Exploration 1: The customer engagement hub

Our first concept was all about evolving the fundamental model of what a messenger could be: from a predominantly chat-based tool, to a powerful customer engagement hub. The hub would consolidate previously fragmented support and engage content, and present it in a rich, modular, expandable hub, right inside the product.

We were excited about a lot of the ideas here: consolidating all content, greater configurability, ML-powered suggestions. This felt like it could be a step change for Messenger.

However, there were flaws in the design. We felt that a larger home screen would be problematic for customers with little content, and could feel overwhelming for those with lots of content. And, some parts felt ambiguous too: What exactly was that News card?

We knew that we were scratching on something valuable, but not yet viable. We needed another pass.

Exploration 2: Spaces – A new product architecture

Our second attempt revolved around introducing a new product architecture, which we called spaces. It built on our previous concept of the customer engagement hub, but took a new approach to organising content, which was way more effective.

• It’s powerful: Spaces gave us the product surface area to build brand new features, like Tasks (onboarding checklists) and News (an announcement feed).
• It’s configurable: Customers could turn on/off and reorder spaces to suit a broad range of use cases.
• It’s simple: Customers could choose a smaller, compact Messenger to suit simple or low content use cases.

This concept got us really excited, and we now had conviction in both the idea and the execution. We converged on this as the core of our vision.

With our product architecture solidified, we move forward to layer in another idea that we had…

Exploration 3: Conversational ticketing

Ticketing allows end users to submit a request to a business, and track it’s progress over time. It was a long asked for feature from customers, and one we knew we needed to solve for.

Our Inbox teams already had a solid understanding of how the support agent experience of ticketing could work. But, the end user experience was ambiguous. To drive that forward, it needed to be a part of our vision.

We explored the space and landed on a concept that we were excited about – conversational ticketing. We believed it was a new, different and better way.

• It’s Messenger-first: The experience starts in the product, through the modern medium of messaging, as opposed to out of context, through the dated medium of email.
• It’s personal: See the name and face of the teammate solving your problem, as opposed to being assigned an auto-generated ticket ID.
• It’s transparent: See status, resolution time, and next steps, as opposed to a black box with unclear expectations.

With next generation ticketing unlocked, there was one final concept required to tie it all together…

Exploration 4: A complete visual refresh

Messenger’s visual design is a differentiator for Intercom: It’s front and center in our marketing, it’s frequently cited in sales wins, it’s on customer websites all over the internet. To keep this competitive edge, our vision had to capture the need for a visual refresh, to keep Messenger feeling modern and inline with the latest standards.

Alongside this, we saw strong signal around the importance of offering greater visual customisation:

• Customers with mature brands wanted Messenger to feel native to their product, not a layer on top.
• Dark mode is now table stakes in modern apps.
• Modern platform design like iOS 16 and Material 3 are centered around personalization and expression.

Adding a visual design component to the vision made it feel fully coherent and compelling. We now had a vision for both form and function, for a Messenger that both is new and feels new.

Validation

The vision was a big bet, with a large investment required. It was critical to validate, conviction alone was not enough. Our hypothesis was that this new Messenger would appeal to prospective customers through its power and design, attracting them to Intercom and thereby driving new customer growth.

To test this, we conducted interviews with target prospects, walked them through the core concepts, and asked about the value and appeal they saw.

We were excited about what we learned:

• Across the board, sentiment was positive – prospects understood the vision and found it compelling.
• Configuration and customisation was key – the combination of new spaces and deep visual customisation resonated.
• Design details matter – a lot of the appeal was in the details and the feel that this would be modern, next generation product.

These insights gave strong confidence we were on the right track. Concepts? Check. Validation? Check. Time to rally the troops!

Storytelling

Great teams are diverse, composed of people from different disciplines, backgrounds and opinions. A strong story is what unites a diverse team behind a common purpose. It motivates teams at the beginning of the work, and provides clarity during the work when things inevitably get knotty and complex.

We captured our story in a short, simple deck, split into three parts:

• Why: A synthesis of the product, market, customers and business landscape. A framing to set the scene.
• What: Our vision and concepts. The meat of the story.
• How: A breakdown of the work into pillars and projects. A starting point to begin planning.

This deck helped leadership understand and buy into the work. It was the catalyst for shifting our team into execution mode. And, as we built, we continuously referred back to it, to ensure we hadn’t veered off course. It was our north star.

A slide showing our vision, pillars and projects

From vision to reality

I’m going to skip over what was a fun but intense period of execution, and focus on the final product we delivered. Our vision was scoped to a twelve month time horizon, however our next virtual launch event, called New at Intercom, was set for six months time.

To capitalize on the event and deliver customer value as quickly as possible, we approached the work in two phases. First, build the foundations in time for the event. Then, incrementally ship the rest as fast follows. That looked like this:

Phase one

• Spaces, ticketing, and a visual refresh (shipped at the event!)

Phase two

• Compact variation (shipped shortly after!)
• Visual customization (building at the time of writing!)

Our Chief Product Officer, Paul Adams, presented the product at the event keynote. We used animation to unveil our new Messenger, showing the whole new world of possibilities that existed.

We also partnered with customers to show how the new Messenger could be tailored to their unique brand. Here’s examples from two great companies that we featured, Coda and Pitch.

It was pretty special to see our product in the wild, but even more special to see reactions from customers, who loved what they were seeing!

Over the following weeks we monitored usage, gathered feedback, and iterated. As of now, we’ve got a ton of great customers using our new Messenger in awesome ways. And, we’ve plenty of exciting features coming soon, including deep visual customisation.

So, that’s the story of our most recent reinvention, and how we went from vision to reality in just six months.

Learn more about our new Messenger.