Keeping messaging competitive
Dec 30, 2024
This is how I got the messaging functionality in Webex caught back up to the competition. I added new features that helped people stay organized and communicate more easily. They are now used by millions of people per day.
ROLE
Lead designer
ROLE
Lead designer
DELIVERABLES
End-to-end product design
DELIVERABLES
End-to-end product design
TIMELINE
6 months
TIMELINE
6 months
Background
Background
Messaging features in Webex had fallen behind. Users and customers said we no longer stacked up to the competition.
Users were unhappy, it was blocking sales, and causing friction at organizations that purchased Webex subscriptions.
So, we got a high-level ask from product leadership to figure this out quickly.
Messaging features in Webex had fallen behind. Users and customers said we no longer stacked up to the competition.
Users were unhappy, it was blocking sales, and causing friction at organizations that purchased Webex subscriptions.
So, we got a high-level ask from product leadership to figure this out quickly.
Discover
Discover
We knew that there was user and customer dissatisfaction, but we didn't have enough clarity to yet to start prioritizing and designing.
The lead product manager and I started to dig into the available data. Our process included:
Reading, grouping, and analyzing NPS (net promoter score) comments.
Posts from our feedback tool called Aha where users could vote on improvements.
Interviews with sales teams to hear what issues were blocking deals.
Interviews with users directly, specifically teams who had recently switched from competitor applications.
We knew that there was user and customer dissatisfaction, but we didn't have enough clarity to yet to start prioritizing and designing.
The lead product manager and I started to dig into the available data. Our process included:
Reading, grouping, and analyzing NPS (net promoter score) comments.
Posts from our feedback tool called Aha where users could vote on improvements.
Interviews with sales teams to hear what issues were blocking deals.
Interviews with users directly, specifically teams who had recently switched from competitor applications.
Define
Define
Three main problem statements arose:
Three main problem statements arose:
Problem 1: not all new notifications are equal, so users need to organize their list.
For example, a message from someone on your team needs to be read and responded to right away, but a company-wide announcement can be read later. When you're starting your day with 40 new messages, having no control over that is a challenge.
Problem 1: not all new notifications are equal, so users need to organize their list.
For example, a message from someone on your team needs to be read and responded to right away, but a company-wide announcement can be read later. When you're starting your day with 40 new messages, having no control over that is a challenge.
Problem 2: the reaction options are limiting communication.
Having only six reactions limited users ability to convey nuanced emotions or quickly communicate things such as "done" (✅) or "looking into it" (👀).
Problem 2: the reaction options are limiting communication.
Having only six reactions limited users ability to convey nuanced emotions or quickly communicate things such as "done" (✅) or "looking into it" (👀).
Problem 3: setting up a new chat with multiple people had too much friction.
Say someone was running late for a meeting. They need to send a message to two people to let them know they'll be a few minutes late. They would need to go through multiple pages and steps, including adding a title to the chat, to send both of them a message at once.
Problem 3: setting up a new chat with multiple people had too much friction.
Say someone was running late for a meeting. They need to send a message to two people to let them know they'll be a few minutes late. They would need to go through multiple pages and steps, including adding a title to the chat, to send both of them a message at once.
Develop
Develop
Each problem had different ways that they could have been solved.
Each problem had different ways that they could have been solved.
Organization: old labeling explorations.
A previous designer looked into labeling chats in the past. This turned out to not be the right thing to do. It was more complex for users, more steps, more clicks, and higher cognitive load. Which also meant it was more technically expensive as well.
Organization: old labeling explorations.
A previous designer looked into labeling chats in the past. This turned out to not be the right thing to do. It was more complex for users, more steps, more clicks, and higher cognitive load. Which also meant it was more technically expensive as well.
Reactions: adding more animated reactions one at a time?
My exploration made it clear that this wasn't the right approach. For example, one customer specifically asked that we add an animated "100." It became obvious that adding animated emoji one-by-one wasn't going to be practical. Our design resources were too limited for this.
Reactions: adding more animated reactions one at a time?
My exploration made it clear that this wasn't the right approach. For example, one customer specifically asked that we add an animated "100." It became obvious that adding animated emoji one-by-one wasn't going to be practical. Our design resources were too limited for this.
Problem 3: adding a new chat type like group DMs?
Some user that were familiar with competitors like Slack asked for "Group DMs,” but because chats in Webex are private by default, this didn't make sense for our architecture. So we needed to disentangle that ask and focus on the real problem.
Problem 3: adding a new chat type like group DMs?
Some user that were familiar with competitors like Slack asked for "Group DMs,” but because chats in Webex are private by default, this didn't make sense for our architecture. So we needed to disentangle that ask and focus on the real problem.
Deliver
Deliver
Interaction design details for sections
In total, I specified 13 end-to-end flows, wrote all of the copy and error messages, defined the information architecture and clarified all the states. My design process includes in-depth interaction design specs with wireframes that help the product team write better requirements and eliminate any ambiguity for engineering teams.
While I specified all the core flows like creating a new section and adding chats to it, I also made sure all the finer details like click + drag and keyboard shortcuts were defined too.
Interaction design details for sections
In total, I specified 13 end-to-end flows, wrote all of the copy and error messages, defined the information architecture and clarified all the states. My design process includes in-depth interaction design specs with wireframes that help the product team write better requirements and eliminate any ambiguity for engineering teams.
While I specified all the core flows like creating a new section and adding chats to it, I also made sure all the finer details like click + drag and keyboard shortcuts were defined too.
Motion design details for sections
Click + drag as a pattern didn't yet exist in Webex. I worked closely with a motion designer on our team to define how dragging sections and chats around should work. I did all the competitive analysis and wrote the brief, and the motion designer delivered the specifications.
Motion design details for sections
Click + drag as a pattern didn't yet exist in Webex. I worked closely with a motion designer on our team to define how dragging sections and chats around should work. I did all the competitive analysis and wrote the brief, and the motion designer delivered the specifications.
Sections video
This video was used for both marketing and for the help documentation for this feature. And while it doesn't cover all the functionality, it give a solid overview of what we shipped.
Interaction design details for reactions
After I successfully advocated for us to expand to the full emoji palette. the flows for adding emoji were simple and already well defined. We just need to switch from animated gifs to platform-specific emoji. So a migration of existing reactions needed to happen and then restrictions and error messages had to be defined and built.
Interaction design details for reactions
After I successfully advocated for us to expand to the full emoji palette. the flows for adding emoji were simple and already well defined. We just need to switch from animated gifs to platform-specific emoji. So a migration of existing reactions needed to happen and then restrictions and error messages had to be defined and built.
Video for reactions
This video was used for both marketing and for the help documentation after we launched the expanded reactions set.
Interaction design details for faster chat creation
In total, I specified over 11 end-to-end flows, wrote all of the copy and error messages, and clarified all the states.
For this feature, it was crucial to define how adding a removing people to the chart worked. To make sure there was no ambiguity, I showed in details that there should not be duplicate chats created when you add the same people to a new chat. This was to make sure past conversations were easy to find.
Interaction design details for faster chat creation
In total, I specified over 11 end-to-end flows, wrote all of the copy and error messages, and clarified all the states.
For this feature, it was crucial to define how adding a removing people to the chart worked. To make sure there was no ambiguity, I showed in details that there should not be duplicate chats created when you add the same people to a new chat. This was to make sure past conversations were easy to find.
Video for low-friction chat creation.
I made this video using a Figma prototype. It doesn't use exact final visual design, but this is a the artifact I used for internal demos and consensus building. It provides a good overview of the feature.
Adoption
Adoption
Sections:
25% of users
and 142.9k deep actions per month
Reactions:
3.6 million
Daily net reactions applied
Faster chat:
194k users
Unique users per month
Retention
Retention
These features helped us retain key customers.
I, along with product leadership, helped present this feature set to an important customer who ended up renewing their Webex contract. I’m not at liberty to disclose all the details, but it was a large American auto manufacturer who we had a close relationship with at Cisco. Many of these features were things they asked us for, so being able to deliver them in a timely manner was a rewarding success.
These features helped us retain key customers.
I, along with product leadership, helped present this feature set to an important customer who ended up renewing their Webex contract. I’m not at liberty to disclose all the details, but it was a large American auto manufacturer who we had a close relationship with at Cisco. Many of these features were things they asked us for, so being able to deliver them in a timely manner was a rewarding success.
Praise
Praise
Here are direct, verbatim quotes praising these features and showing the quick adoption they got. Names, pictures, and context have been scrubbed.
Here are direct, verbatim quotes praising these features and showing the quick adoption they got. Names, pictures, and context have been scrubbed.
Reflection
Reflection
This fast-paced project was a fun one. Getting to do scrappy interviews with teams who were resistant to switching off competitor tools like Slack gave us a ton of clarity and helped us move quickly. And then seeing all the praise, both internally at Cisco, and externally felt great. That’s one of my favorite things as a product designer, when we hit it right and people thank us for making their workflows and lives easier by enhancing the tools they user everyday.
This fast-paced project was a fun one. Getting to do scrappy interviews with teams who were resistant to switching off competitor tools like Slack gave us a ton of clarity and helped us move quickly. And then seeing all the praise, both internally at Cisco, and externally felt great. That’s one of my favorite things as a product designer, when we hit it right and people thank us for making their workflows and lives easier by enhancing the tools they user everyday.