Meeting Scheduling
Dec 30, 2024
How we got the Webex mobile app to feature parity with the desktop app by giving users the ability to schedule meetings. 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
6 months
TIMELINE
6 months
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.
Discover
Discover
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.
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.
User 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.
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.
User 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.
Define
Define
How might we help users can schedule meetings on-the-go using the Webex mobile apps?
How might we thoughtfully adapt the desktop functionality to mobile?
From our research it was clear why users needed to schedule meetings with the mobile app. The goal was now to reduce the frustration of having to wait until you were back at your laptop or desktop in order to get something on the calendar.
However, the amount of content that was shown on a single screen in the desktop app was about 3x what we could show on smaller width mobile screens, so I knew it would need to be thoughtfully adapted, with more layers and depth, to make sure users could set up a fully featured meeting.
How might we help users can schedule meetings on-the-go using the Webex mobile apps?
How might we thoughtfully adapt the desktop functionality to mobile?
From our research it was clear why users needed to schedule meetings with the mobile app. The goal was now to reduce the frustration of having to wait until you were back at your laptop or desktop in order to get something on the calendar.
However, the amount of content that was shown on a single screen in the desktop app was about 3x what we could show on smaller width mobile screens, so I knew it would need to be thoughtfully adapted, with more layers and depth, to make sure users could set up a fully featured meeting.
Develop
Develop
The goal became matching all the functionality and features on the desktop app while following platform-specific mobile patterns.
We 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.
UI that can scale to accommodate more features as they get added to desktop and mobile going forward.
This required full interaction specs for each platform, visual design including tablets, and accessibility specs. Here's a sample of the differences between iOS and Andriod.
The goal became matching all the functionality and features on the desktop app while following platform-specific mobile patterns.
We 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.
UI that can scale to accommodate more features as they get added to desktop and mobile going forward.
This required full interaction specs for each platform, visual design including tablets, and accessibility specs. Here's a sample of the differences between iOS and Andriod.
Usability testing
I collaborated closely with a researcher on the team to test options for picking the meeting time and finding an open slot.
Moving and resizing the bricklet needed to be as clear as possible. 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
I collaborated closely with a researcher on the team to test options for picking the meeting time and finding an open slot.
Moving and resizing the bricklet needed to be as clear as possible. 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.
Deliver
Deliver
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:
iOS visual design samples
iOS visual design samples
iOS visual design samples
iOS visual design 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.
Solution
Solution
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.