Mobile meeting scheduling for Webex
How I got the Webex mobile app to feature parity with the desktop app by giving users the ability to schedule meetings. This 0 - 1 initiative ensured that people can get important work done on the go. It’s now used by over 270k users per week
ROLE
Lead designer
ROLE
Lead designer
DELIVERABLES
End-to-end product design
DELIVERABLES
End-to-end product design
TIMELINE
4 months
TIMELINE
4 months
YEAR
2022
YEAR
2022
Background
Background
You couldn't schedule meetings in the Webex mobile apps. This meant users didn’t have the flexibility for on-the-go work they needed.
While Webex desktop users had a full-featured meeting scheduler, mobile users could only to view, join, accept, or decline meetings. So, I had to design it from scratch.
You couldn't schedule meetings in the Webex mobile apps. This meant users didn’t have the flexibility for on-the-go work they needed.
While Webex desktop users had a full-featured meeting scheduler, mobile users could only to view, join, accept, or decline meetings. So, I had to design it from scratch.
Research
Research
We knew mobile didn’t have meeting scheduling, but we didn’t know how badly it was needed. Our user research team helped conduct some explorations.
A user quote from research:
When I’m traveling or in a cab it would be very useful to do on my phone. Once in a cab, I got a call from a colleague that I needed to schedule a meeting to coordinate with all different global leaders and I had to wait until I got home.
And another quote from research:
I always have my mobile with me and not necessarily my laptop. I have wanted to schedule on my phone and been very frustrated not to be able to do it.
We knew mobile didn’t have meeting scheduling, but we didn’t know how badly it was needed. Our user research team helped conduct some explorations.
A user quote from research:
When I’m traveling or in a cab it would be very useful to do on my phone. Once in a cab, I got a call from a colleague that I needed to schedule a meeting to coordinate with all different global leaders and I had to wait until I got home.
And another quote from research:
I always have my mobile with me and not necessarily my laptop. I have wanted to schedule on my phone and been very frustrated not to be able to do it.
Problems
Problems
From the research, it was clear why users needed to schedule meetings with the mobile app.
So now the goal was to reduce people's frustration and make it so you didn't need to wait to get meeting on the calendar. But, the patterns from desktop wouldn't work on mobile.
How might we thoughtfully adapt the desktop functionality to mobile?
From the research, it was clear why users needed to schedule meetings with the mobile app.
So now the goal was to reduce people's frustration and make it so you didn't need to wait to get meeting on the calendar. But, the patterns from desktop wouldn't work on mobile.
How might we thoughtfully adapt the desktop functionality to mobile?
Exploration
Exploration
The goal became matching all the functionality and features on the desktop app while following platform-specific mobile patterns.
I explored if some features could be cut for mobile, but none seemed like good candidates. I decided the mobile version of scheduling needed:
Full 1:1 feature parity with desktop.
To align to native iOS and Android patterns and components as much as possible.
Scaleable UI that can accommodate more features as they get added.
iOS vs. Android pattern differences:
The goal became matching all the functionality and features on the desktop app while following platform-specific mobile patterns.
I explored if some features could be cut for mobile, but none seemed like good candidates. I decided the mobile version of scheduling needed:
Full 1:1 feature parity with desktop.
To align to native iOS and Android patterns and components as much as possible.
Scaleable UI that can accommodate more features as they get added.
iOS vs. Android pattern differences:
Usability testing
Moving and resizing the meeting bricklet needed to be as clear as possible. I collaborated closely with a researcher on the team to test options for picking the meeting time and finding an open slot.
We A/B tested two options, and the first worked best. But in the end, it made the touch targets too close, so I went with a hybrid option.
Usability testing
Moving and resizing the meeting bricklet needed to be as clear as possible. I collaborated closely with a researcher on the team to test options for picking the meeting time and finding an open slot.
We A/B tested two options, and the first worked best. But in the end, it made the touch targets too close, so I went with a hybrid option.
Solution
Solution
Wireframes
In total, I specified over 15 end-to-end flows, wrote all of the error messages, 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.
Here are some sample flows.
Wireframes
In total, I specified over 15 end-to-end flows, wrote all of the error messages, 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.
Here are some sample flows.
UX writing samples
I wrote clear copy for different states and error messages. The Webex voice is concise, straightforward, and slightly conversational — but not too casual. Errors and states are meant to let users clearly understand what's happened and correct actions quickly.
Here's some samples:
UX writing samples
I wrote clear copy for different states and error messages. The Webex voice is concise, straightforward, and slightly conversational — but not too casual. Errors and states are meant to let users clearly understand what's happened and correct actions quickly.
Here's some samples:
A11y
I designed full accessibility specs with the tab order for voice over and all the screenreader copy. It was adapted for each platform, iOS and Android.
Here are some samples.
A11y
I designed full accessibility specs with the tab order for voice over and all the screenreader copy. It was adapted for each platform, iOS and Android.
Here are some samples.
iOS visual design samples
iOS visual design samples
iOS visual design samples
iOS visual design samples
Check out how the interactions work in this live demo of the current application. And see how it's scaled to accommodate new features.
Mobile meetings now has:
270k+
Weekly unique users
Mobile meetings now has:
270k+
Weekly unique users
Mobile meetings now has:
270k+
Weekly unique users
Reflection
Reflection
This was an interesting project for me. At the time, it was one of the largest-scope projects I had the opportunity to work on. For established enterprise applications, it’s rare to be able to do 0-1 work where you can own each piece.
It was also nice to have support from the research team, rather than needing to run the studies myself. This made it so that even though we were on a time crunch, we got to do both exploratory research and usability testing. Often, I only have time to run usability tests on my own.
I also had support from a contract visual designer, who worked on things like tablet screen for Android (not shown above). It was a good experience to break things up for her and have her work on smaller pieces to speed up delivery.
Overall, it was a great learning experience, but most importantly it was nice to close this gap for our users and see a significant amount of people adopt. It — we knew we’d solved an important problem.
This was an interesting project for me. At the time, it was one of the largest-scope projects I had the opportunity to work on. For established enterprise applications, it’s rare to be able to do 0-1 work where you can own each piece.
It was also nice to have support from the research team, rather than needing to run the studies myself. This made it so that even though we were on a time crunch, we got to do both exploratory research and usability testing. Often, I only have time to run usability tests on my own.
I also had support from a contract visual designer, who worked on things like tablet screen for Android (not shown above). It was a good experience to break things up for her and have her work on smaller pieces to speed up delivery.
Overall, it was a great learning experience, but most importantly it was nice to close this gap for our users and see a significant amount of people adopt. It — we knew we’d solved an important problem.
NEXT:
Fixing the data analytics tool for Webex Contact Center.
How I took a neglected data analytics tool for Webex Contact Center out of the past with 7 new features, better information architecture, and a complete visual redesign.
