Keeping messaging competitive for Webex
This is how I got the messaging functionality in Webex caught back up to the competition. I quickly added new, key features that helped people stay organized and communicate more easily. These additions and improvements helped up retain key customers and are now used by upwards of 4 million people per day.
ROLE
Lead designer
ROLE
Lead designer
DELIVERABLES
End-to-end product design
DELIVERABLES
End-to-end product design
TIMELINE
7 months
TIMELINE
7 months
YEAR
2023
YEAR
2023
The three key features I added to Webex messaging.
Background
Background
Messaging features in Webex had fallen behind. Users and customers said we no longer stacked up to the competition. It was blocking sales and causing friction at organizations with Webex. I worked with product leadership to define key features to keep Webex competitive.
Messaging features in Webex had fallen behind. Users and customers said we no longer stacked up to the competition. It was blocking sales and causing friction at organizations with Webex. I worked with product leadership to define key features to keep Webex competitive.
Research
Research
So we knew that there was user and customer dissatisfaction, but we didn't have the full picture yet. The lead product manager and I started to dig into the available data. My research process included incorporating feedback from:
So we knew that there was user and customer dissatisfaction, but we didn't have the full picture yet. The lead product manager and I started to dig into the available data. My research process included incorporating feedback from:
NPS comments
Read, grouped, and analyzed NPS (net promoter score) comments. Specifically searched for competitor comparisons.
NPS comments
Read, grouped, and analyzed NPS (net promoter score) comments. Specifically searched for competitor comparisons.
Feedback forums
Gathered highly upvoted feedback from our forum tool (called Aha). Grouped by problems, not necessarily just the solutions users proposed.
Feedback forums
Gathered highly upvoted feedback from our forum tool (called Aha). Grouped by problems, not necessarily just the solutions users proposed.
Sales interviews
Led in-depth discussions with our sales team to hear exactly what issues were blocking new deals.
Sales interviews
Led in-depth discussions with our sales team to hear exactly what issues were blocking new deals.
Customer interviews
Met directly with customers and heard in detail what issues they expressed due to the limitations with messaging.
Customer interviews
Met directly with customers and heard in detail what issues they expressed due to the limitations with messaging.
I identified 3 problems that we should tackle: better organization, better reactions, and better "new message" creation.
Problems
Problems
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 users start their day with 40+ new messages, having no control over that is a challenge.
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 users start their day with 40+ new messages, having no control over that is a challenge.
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" (👀).
Having only six reactions limited users' ability to convey nuanced emotions or quickly communicate things such as "done" (✅) or "looking into it" (👀).
3. Setting up a new message had too much friction.
Say someone is running late for a meeting and needs to send a message to two people to let them know they'll be there in a few minutes. They would need to go through multiple pages—and add a title to the chat— to send both of them a message at once.
Say someone is running late for a meeting and needs to send a message to two people to let them know they'll be there in a few minutes. They would need to go through multiple pages—and add a title to the chat— to send both of them a message at once.
I addressed these 3 problems with 3 new features: sections, reactions, and less friction for a new message.
Sections
Sections
Deliverables for sections:
Interaction
In total, I specified 13 end-to-end flows, including all the errors and states.
Interaction
In total, I specified 13 end-to-end flows, including all the errors and states.
Interaction
In total, I specified 13 end-to-end flows, including all the errors and states.
Visuals
I designed all the Mac and Windows screens with breakpoints, modals, menus, etc.
Visuals
I designed all the Mac and Windows screens with breakpoints, modals, menus, etc.
Visuals
I designed all the Mac and Windows screens with breakpoints, modals, menus, etc.
Copy
I wrote all the copy, including errors, menu copy, and picked the feature name.
Copy
I wrote all the copy, including errors, menu copy, and picked the feature name.
Copy
I wrote all the copy, including errors, menu copy, and picked the feature name.
Prototype
I made a Figma prototype that myself and others could use for demos and tests.
Prototype
I made a Figma prototype that myself and others could use for demos and tests.
Prototype
I made a Figma prototype that myself and others could use for demos and tests.
Accessibility
I defined all the keyboard navigation and screenreader behavior.
Accessibility
I defined all the keyboard navigation and screenreader behavior.
Accessibility
I defined all the keyboard navigation and screenreader behavior.
Motion
I defined how new click + drag motion should work for the feature and for Webex.
Motion
I defined how new click + drag motion should work for the feature and for Webex.
Motion
I defined how new click + drag motion should work for the feature and for Webex.
Interaction design details: feature discoverability for sections
I took a particular care to make sure the feature was discoverable. I specified multiple intuitive pathways to getting started, which paid off in higher adoption (see below for the data).
Interaction design details: feature discoverability for sections
I took a particular care to make sure the feature was discoverable. I specified multiple intuitive pathways to getting started, which paid off in higher adoption (see below for the data).
Interaction design details: feature discoverability for sections
I took a particular care to make sure the feature was discoverable. I specified multiple intuitive pathways to getting started, which paid off in higher adoption (see below for the data).
Interaction design details: sorting and filtering for sections
I made sure to include full feature depth, like this “show” functionality and sorting functionality. We knew from interviews that users would want these to help make organization more powerful. I worked with our product team to set this up as a later phase so we could release in an agile fashion.
Interaction design details: sorting and filtering for sections
I made sure to include full feature depth, like this “show” functionality and sorting functionality. We knew from interviews that users would want these to help make organization more powerful. I worked with our product team to set this up as a later phase so we could release in an agile fashion.
Interaction design details: sorting and filtering for sections
I made sure to include full feature depth, like this “show” functionality and sorting functionality. We knew from interviews that users would want these to help make organization more powerful. I worked with our product team to set this up as a later phase so we could release in an agile fashion.
Interaction design details: keyboard shortcuts for sections
I sweated the details, like keyboard navigation and shortcuts that would meet user expectations. I specified this and advocated that this be added to the requirements after very early internal trial feedback.
Interaction design details: keyboard shortcuts for sections
I sweated the details, like keyboard navigation and shortcuts that would meet user expectations. I specified this and advocated that this be added to the requirements after very early internal trial feedback.
Interaction design details: keyboard shortcuts for sections
I sweated the details, like keyboard navigation and shortcuts that would meet user expectations. I specified this and advocated that this be added to the requirements after very early internal trial feedback.
Interaction design details: copy for sections
Because of my background as a UX writer, I still write my own copy. And while I wrote all the menu copy and error messages, the most difficult part was what to name the feature itself.
I spent time exploring other options, researching, and interviewing users about the copy and ultimately landed on "Sections." That term matched the language users already knew and it wasn't already a term used in Webex.
Interaction design details: copy for sections
Because of my background as a UX writer, I still write my own copy. And while I wrote all the menu copy and error messages, the most difficult part was what to name the feature itself.
I spent time exploring other options, researching, and interviewing users about the copy and ultimately landed on "Sections." That term matched the language users already knew and it wasn't already a term used in Webex.
Interaction design details: copy for sections
Because of my background as a UX writer, I still write my own copy. And while I wrote all the menu copy and error messages, the most difficult part was what to name the feature itself.
I spent time exploring other options, researching, and interviewing users about the copy and ultimately landed on "Sections." That term matched the language users already knew and it wasn't already a term used in Webex.
Motion design details for sections
Click + drag as a pattern didn't yet exist in Webex. As the lead, I worked closely with a motion designer on our team to define how dragging sections and chats 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. As the lead, I worked closely with a motion designer on our team to define how dragging sections and chats 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. As the lead, I worked closely with a motion designer on our team to define how dragging sections and chats 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 gives a solid overview of what we shipped.
Reactions
Reactions
Reactions
Deliverables for reactions:
Interaction
In total, I specified 5 end-to-end flows, including errors, states, and settings.
Interaction
In total, I specified 5 end-to-end flows, including errors, states, and settings.
Interaction
In total, I specified 5 end-to-end flows, including errors, states, and settings.
Visuals
I designed the Mac, Windows, iOS, and Android screens with correct pickers.
Visuals
I designed the Mac, Windows, iOS, and Android screens with correct pickers.
Visuals
I designed the Mac, Windows, iOS, and Android screens with correct pickers.
Copy
I wrote all the copy, including server-limit errors, menu text, and truncation.
Copy
I wrote all the copy, including server-limit errors, menu text, and truncation.
Copy
I wrote all the copy, including server-limit errors, menu text, and truncation.
Prototype
I made a Figma prototype that myself and others could use for demos and tests.
Prototype
I made a Figma prototype that myself and others could use for demos and tests.
Prototype
I made a Figma prototype that myself and others could use for demos and tests.
Accessibility
I defined all the keyboard navigation and screenreader behavior.
Accessibility
I defined all the keyboard navigation and screenreader behavior.
Accessibility
I defined all the keyboard navigation and screenreader behavior.
Video Demo
I recorded and widely shared a video demo of this feature to align all the teams async.
Video Demo
I recorded and widely shared a video demo of this feature to align all the teams async.
Video Demo
I recorded and widely shared a video demo of this feature to align all the teams async.
Interaction design details for reactions
Now, engineering just needed to switch from old animated gifs to platform-specific emoji. First, a migration of existing reactions needed to happen. Then I defined restrictions and error messages for engineering to build.
Interaction design details for reactions
Now, engineering just needed to switch from old animated gifs to platform-specific emoji. First, a migration of existing reactions needed to happen. Then I defined restrictions and error messages for engineering to build.
Interaction design details for reactions
Now, engineering just needed to switch from old animated gifs to platform-specific emoji. First, a migration of existing reactions needed to happen. Then I defined restrictions and error messages for engineering to build.
Video for reactions
This video was used for both marketing and for the help documentation after we launched the expanded reactions set.
New Message
New Message
New Message
Deliverables:
Interaction
In total, I specified 11 end-to-end flows, including all the error flows and states.
Interaction
In total, I specified 11 end-to-end flows, including all the error flows and states.
Interaction
In total, I specified 11 end-to-end flows, including all the error flows and states.
Visuals
I designed a chip component for the design system and all the needed visuals.
Visuals
I designed a chip component for the design system and all the needed visuals.
Visuals
I designed a chip component for the design system and all the needed visuals.
Copy
I wrote all the copy, including errors, menu copy, and naming conventions.
Copy
I wrote all the copy, including errors, menu copy, and naming conventions.
Copy
I wrote all the copy, including errors, menu copy, and naming conventions.
Prototype
I made a Figma prototype that myself and others could use for demos and tests.
Prototype
I made a Figma prototype that myself and others could use for demos and tests.
Prototype
I made a Figma prototype that myself and others could use for demos and tests.
Accessibility
I defined all the keyboard navigation and screenreader behavior.
Accessibility
I defined all the keyboard navigation and screenreader behavior.
Accessibility
I defined all the keyboard navigation and screenreader behavior.
Next Phases
I also defined some future phases that haven’t been implemented yet.
Next Phases
I also defined some future phases that haven’t been implemented yet.
Next Phases
I also defined some future phases that haven’t been implemented yet.
Interaction design details for faster chat creation
For chat creation—now without a title required—it was crucial to define how adding and removing people worked. I made sure we avoided two possible pitfalls:
We needed to make sure that each time you added people to a chat and clicked create, it brought you back to any existing chat with the history. Otherwise, finding old messages would become very hard.
Engineering said a static title, using a string, would be easier. This would have been bad UX. People would have to manually update the title string each time a person was added or removed from a chat.
I clearly defined, in detail, 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 would be easy to find. Additionally, I made sure the chat titles updated when you added or removed people.
Interaction design details for faster chat creation
For chat creation—now without a title required—it was crucial to define how adding and removing people worked. I made sure we avoided two possible pitfalls:
We needed to make sure that each time you added people to a chat and clicked create, it brought you back to any existing chat with the history. Otherwise, finding old messages would become very hard.
Engineering said a static title, using a string, would be easier. This would have been bad UX. People would have to manually update the title string each time a person was added or removed from a chat.
I clearly defined, in detail, 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 would be easy to find. Additionally, I made sure the chat titles updated when you added or removed people.
Interaction design details for faster chat creation
For chat creation—now without a title required—it was crucial to define how adding and removing people worked. I made sure we avoided two possible pitfalls:
We needed to make sure that each time you added people to a chat and clicked create, it brought you back to any existing chat with the history. Otherwise, finding old messages would become very hard.
Engineering said a static title, using a string, would be easier. This would have been bad UX. People would have to manually update the title string each time a person was added or removed from a chat.
I clearly defined, in detail, 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 would be easy to find. Additionally, I made sure the chat titles updated when you added or removed people.
Video for faster 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
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
For the sections feature in particular, not only was the overall adoption high, it was fast.
Here are some verbatim quotes (with names and pictures changed) from different phases of the rollout. We saw a big spike of users when we did an internal rollout to all of Cisco.
For the sections feature in particular, not only was the overall adoption high, it was fast.
Here are some verbatim quotes (with names and pictures changed) from different phases of the rollout. We saw a big spike of users when we did an internal rollout to all of Cisco.
For the sections feature in particular, not only was the overall adoption high, it was fast.
Here are some verbatim quotes (with names and pictures changed) from different phases of the rollout. We saw a big spike of users when we did an internal rollout to all of Cisco.
And we saw great adoption and organic discovery as we rolled it out to other early test organizations.
And we saw great adoption and organic discovery as we rolled it out to other early test organizations.
And we saw great adoption and organic discovery as we rolled it out to other early test organizations.
Praise
Praise
Praise
The praise for these features kept rolling in.
The praise for these features kept rolling in.
The praise for these features kept rolling in.
Including praise for specific details of the sections feature, like the filtering and sorting.
Including praise for specific details of the sections feature, like the filtering and sorting.
Including praise for specific details of the sections feature, like the filtering and sorting.
We saw surprise and delight when reactions was released.
We saw surprise and delight when reactions was released.
We saw surprise and delight when reactions was released.
And additional praise for reactions from the beta channels. Plus, praise that confirmed we'd went in the right direction.
And additional praise for reactions from the beta channels. Plus, praise that confirmed we'd went in the right direction.
And additional praise for reactions from the beta channels. Plus, praise that confirmed we'd went in the right direction.
Retention
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.
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.
Reflection
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 felt great. That’s one of my favorite things as a product designer: when we hit the nail on the head and people thank us for making their workflows and lives easier.
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 felt great. That’s one of my favorite things as a product designer: when we hit the nail on the head and people thank us for making their workflows and lives easier.
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 felt great. That’s one of my favorite things as a product designer: when we hit the nail on the head and people thank us for making their workflows and lives easier.
NEXT:
Adding mobile meeting scheduling to Webex.
How I added the ability to schedule meetings to the Webex mobile app so people can get work done on the go. This 0 - 1 initiative is now used by over 270k users per week.