The Challenge
When I first joined Mattermost, the team began exploring a feature that had long been discussed since the infancy of the platform: Collapsed Reply Threads. The general concept was to find a way to better organize threads within a channel to prevent thread overlap, reduce clutter and improve scannability. This feature was the top requested feature from our user base with over 2,400 votes in Uservoice.
The Process
In broad strokes, we followed a design process that included the stages below. More specifics are also articulated further below.
Problem Definition
As a team, we first set out to narrow down the main problems we needed to solve. This is the problem statement we landed on:
Channels often contain multiple conversations about varied topics in parallel. Due to this, threads end up overlapping in the ‘conveyor belt’ of messages within a channel which makes it difficult to keep track of threads that are important to me. How might we make it easier to find, consume and interact with conversations that are important to me?
Goals
Through our brainstorms and problem definition exercises, we zeroed in on the following primary goal for this project:
Improve users’ ability to process content, find, follow, and resume conversations while keeping topical threaded conversations focused.
We also included some additional secondary goals below:
Help users keep track of conversations they are involved in
Remove the complexity of overlapping conversations in channels
Provide cues to users to identify threads that might be of interest
Prevent fractured threads
Make it easier for users to browse or graze channel history
Consolidate ‘important threads’ in a place that makes them easy to review and take action
Competitive Research
Before diving into design exploration we took some time to research how other products have solved similar problems. Knowing that many of our users have familiarity with competitive products, it was important for us to take into consideration what mental models might be brought into their experience. We reviewed products like Microsoft Teams, Twist, Zulip, Slack, Discord and many other messaging applications.
User Stories and Flows
We then began capturing all the pertinent user stories based on the end goals and based on the current product’s architecture. Once we had the key user stories, we mapped out the user flows for each story. This provided a good base for the team to take the early design explorations and advance them to a more fully-fleshed out state.
A snippet of the documented user flows for the new collapsed threads feature.
Early Wireframe Explorations
Before we got too in-depth the team was inspired to start capturing some of the high-level ideas that had been floating around. As a way to get the creative juices flowing, we jammed as a team on a number of different explorations. Some of the key ideas that were explored:
Toggling collapsed threads on/off as a user preference
Expandable threads in the context of the channel
A collapsed message input to encourage replies and prevent fractured threads
Following threads - users can choose to follow conversations that matter and be notified about them
Threads inbox - a place to collect all followed threads
Thread titles - allowing users to name a thread for easier organization and recognition
Options explored for collapsable replies
We explored and tested a number of options for how we could display collapsed replies in a channel. Below is one such example that was not selected in the end because it felt too complex for users we tested with.
Collapsed Message Input
In an effort to prevent fractured threads, one idea was to collapse the primary message input in the channel to make the act of creating a new root post more intentional. Through testing and feedback, we quickly learned that this was a pretty divisive idea. Ultimately, we decided not to move forward with this as it was controversial and made the conversational feel of a channel more rigid.
Testing
Once we narrowed down some of our explorations to a few key concepts, we scheduled user interviews with some of the people who were most keen to get their hands on this feature. A few of the key findings from our interviews:
The vast majority of participants gravitated toward the threads inbox approach for collecting all followed threads
Some worried about missing messages, but the reduce clutter outweighed this worry
Users found it added considerable noise to surface the most recent reply in a collapsed thread and had a preference for simpler layouts.
Giving titles to threads was valuable, but should be made optional
The ability to ‘pop out’ a thread into it’s own pane/window was desired for multi-tasking
The Final Solutions
Collapsed Reply Messages in Channels
Replies are hidden from the center panel while parent messages show the number of replies, avatars of the users who replied, and the time of the most recent reply. To read the reply the user has to open the Right sidebar view of the full thread.
Follow/unfollow threads
Users can explicitly choose to follow a thread by clicking the “Follow” button which then enables notifications about future replies. In addition, whenever a user participates in a thread or is mentioned by others, the thread gets automatically followed.
Preventing FOMO
Users can choose to automatically follow all threads in a specific channel if they have the fear of missing conversations in a channel that is important to them.
A new threads inbox view
One of the concepts we kept coming back to from the exploration phase was the ‘Threads’ inbox view. The inbox model is a familiar pattern in email for collecting all active conversations that were important to you, so we thought it could be a helpful way for collecting followed threads as well. The concept tested well in our user interviews as well so we ended up building it into the product. This quickly became a part of the product that people couldn’t live without.
Thread Titles
Adding titles to threads quickly became an important feature during the explorative phases—especially as the inbox approach gained traction. Although this feature didn’t make it in to the MVP of this feature, it was slotted for a later release.
Mobile Experience
This feature would not be successful if the mobile-equivalent wasn’t solved. Because this feature is such an integral part of the messaging experience, we had to think about mobile from the beginning. Below are a few samples of the final designs for how collapsed reply threads played out on mobile.
Praise for Collapsed Reply Threads
Once the feature was released for general availability, we got lots of great feedback from our user base. Despite some initial technical and performance-related problems during the alpha and beta phases, the feature was very well received.
