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. 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. 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. These quotes capture the need:
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. These quotes capture the need:
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.
Research participant
Exploratory 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.
Research participant
Exploratory research
I always have my mobile with me and not necessarily my laptop. I have wanted to schedule on my phone and have been very frustrated not to be able to do it.
Research participant
Exploratory research
I always have my mobile with me and not necessarily my laptop. I have wanted to schedule on my phone and have been very frustrated not to be able to do it.
Research participant
Exploratory research
Problem
Problem
From the research, it was clear why users needed to schedule meetings with the mobile app. So, 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, how might we thoughtfully adapt the desktop functionality to mobile?
How might we align to native iOS and Android patterns and components as much as possible? Differences between iOS and Android:
How might we align to native iOS and Android patterns and components as much as possible? Differences between iOS and Android:
Solution
Solution
Deliverables:
Interaction
In total, I specified 5 entry points, 9 end-to-end flows, 7 calendar states, and 7 error flows.
Interaction
In total, I specified 5 entry points, 9 end-to-end flows, 7 calendar states, and 7 error flows.
Interaction
In total, I specified 5 entry points, 9 end-to-end flows, 7 calendar states, and 7 error flows.
Visuals
I designed all the visuals for iOS and Android. As a lead, I had help with tablet designs as well.
Visuals
I designed all the visuals for iOS and Android. As a lead, I had help with tablet designs as well.
Visuals
I designed all the visuals for iOS and Android. As a lead, I had help with tablet designs as well.
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 used for demos and tests.
Prototype
I made a Figma prototype that myself and others used for demos and tests.
Prototype
I made a Figma prototype that myself and others used for demos and tests.
Accessibility
I defined all the screenreader behavior, flows, and VoiceOver copy.
Accessibility
I defined all the screenreader behavior, flows, and VoiceOver copy.
Accessibility
I defined all the screenreader behavior, flows, and VoiceOver copy.
Components
I defined a new component in the calendar to be added to the design system.
Components
I defined a new component in the calendar to be added to the design system.
Components
I defined a new component in the calendar to be added to the design system.
Timeslot
Timeslot
Timeslot
The biggest thing to figure out was how to make it clear and easy for users to find an open slot on the calendar. This required a new flow and component:
The biggest thing to figure out was how to make it clear and easy for users to find an open slot on the calendar. This required a new flow and component:
The biggest thing to figure out was how to make it clear and easy for users to find an open slot on the calendar. This required a new flow and component:
Usability testing
I collaborated closely with a researcher to test options for the component's drag handles. 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 to test options for the component's drag handles. 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 to test options for the component's drag handles. 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.
UX writing
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.
UX writing
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.
UX writing
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.
Invitees
Invitees
Invitees
Users needed to be able to understand attendees' availability and add and remove them seamlessly on mobile. I used consistent user feedback in the color and iconography across touchpoints. I also included multiple convenient entry points to the calendar to find an open slot.
Users needed to be able to understand attendees' availability and add and remove them seamlessly on mobile. I used consistent user feedback in the color and iconography across touchpoints. I also included multiple convenient entry points to the calendar to find an open slot.
Users needed to be able to understand attendees' availability and add and remove them seamlessly on mobile. I used consistent user feedback in the color and iconography across touchpoints. I also included multiple convenient entry points to the calendar to find an open slot.
Password
Password
Password
Adding or changing a password for a meeting needed clear copy and upfront design:
Adding or changing a password for a meeting needed clear copy and upfront design:
Adding or changing a password for a meeting needed clear copy and upfront design:
Video
Video
Video
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
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.
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:
Keeping messaging competitive in Webex.
How I kept Webex competitive by quickly adding key messaging features. These additions and improvements helped us retain key customers and are now used by upwards of 4 million users daily.
