My Role
Lead DesignerCollaborators
2 product managers (Dipkin and Sai)Engineering Team (Mario L.)
Duration
3 months(In parallel with other projects)
Overview
This multitasking picture-in-picture feature is a project that I went through from conducting research with RingCentral users, designing with stakeholders, to final launch with the engineering team. Its main goal is to provide better multitasking experience so that RingCentral customers can leverage their productivity when attending online meeting on mobile devices, including smartphones and tablets.
My contribution includes conducting UX research (e.g., unmoderated remote user interviews, affinity analysis, usability tests), and product design (both UX and UI) (e.g., conducting brainstorming sessions, defining wireframe flows, hi-fi feature iterations, hi-fi mock-ups, design handoff, several UX research and design readouts).
FINAL IMPLEMENTATION
RingCentral Picture-in-Picture feature. (Released)
Here is a demo video I filmed using the screen recorder on my iPhone after designing the RingCentral Picture-in-Picture feature and launching it with my team in 2021. No sensitive information was displayed since I created a test account for demonstration purposes. In the video, you will see the implementation of this feature in the RingCentral app and the related user tasks.
The background music used is copyright-free and sourced from an audio library on YouTube. :)
EXPLORE PROBLEM SPACE
The story begins with customer feedback shared by our PM: 'Mobile users reported frustrations around multitasking.'
RingCentral App is an unified commmunications app that allows users to access team messaging, video meetings, and phone/text all in one place.
Below are some key communication tasks that users use this app to achieve at work,
At the beginning of this project, the PM reached out to me and let me know some of our customers mentioned that the current multitasking experience is not sufficient enough on mobile devices. Below are some of the feedback we received from our users.
“I attend most meetings on my phone, and the current multitasking experience makes it hard to jump between different tabs when attending meetings on smartphone.”
“When I’m on the message tab, I don’t know what’s going on in the video tab.”
“When I was multitasking on other tabs during meetings, sometimes I wasn’t sure if I was muted or not.”
VALIDATION AND DISCOVERY
Let's validate this user problem through interviews. What are the multitasking behaviors of users in relation to the online meeting experience on mobile devices?
Conducting user interviews is a great approach to generate user insights and validate if your assumptions about the users' pain points are worth solving. Through the interviews, I was able to confirm the multitasking needs of our mobile users and proceed to the next steps.
Here are some overarching research questions I was eager to learn from our users.
Who are our mobile users?
Why would they join meetings from mobile devices?
What do mobile users do in the RingCentral app when joining meetings from smartphone/tablet?
After I collected data from 10 smartphone users and 10 tablet users, I analyzed the data via affinity analysis using Excel sheet. After that, I visualized the findings via personas. Let's take a look at what I found.
Who are our mobile users?
Type A User - Bob
Behavior
Attend most of the meetings using mobile devices
Perform multitasks both in the RingCentral app and on other apps
Needs and Goals
Attend online meetings on the go
Background
36 years old, a salesman who needs to meet with clients frequently
Type B User - Jennifer
Behavior
Attend non-presentation meetings using mobile devices
Perform most multitasks on other apps, some multitasks in the app
Needs and Goals
Strike a balance between work, family and chores
Utilize time efficiently, and sometimes attend remote meetings while performing chores
Background
43 years old, mom of two, a senior program manager who works remotely at home
Type C User - Chen
Behavior
Treat mobile devices as second monitor
Don't multitask on mobile devices
Might multitask on desktop device
Needs and Goals
Chen's desktop device is used for programming, and her iPad and iPhone are used for attending online meetings
Background
28 years old, a software engineer who currently works from home
Based on the data points, it appears that most mobile users fall under Type B. This means that they attend some of the meetings via mobile devices and perform some multitasking within the app. Some mobile users are Type A power users who attend most meetings via mobile devices and multitask both within and outside of the app. Lastly, Type C users do not multitask on mobile devices at all and instead use them as a second monitor.
Through this research, I was able to identify our target mobile users who multitask: Type A and Type B users.
Why would users join meetings from mobile devices?
1.
If the meetings are considered less formal (e.g. yoga sessions, happy hours), less important (non-presentation meetings) or less informative, users are more likely to join via mobile devices (Type B).
2.
Smartphones are highly portable and easy to carry whether users are meeting with clients (Type A), driving, walking, or running errands (Type B).
3.
When Wi-Fi is unstable, users will use their mobile devices' data to join online meetings (Type A, B,
and C).
4.
When the laptop is occupied with important tasks, users are more likely to join meetings via mobile devices (Type B and C).
What multitasks do mobile users do in the RingCentral app when joining meetings from smartphone/tablet?
During the user interviews, I asked users to rank the most common multitasks from the most frequent to the third most frequent. When analyzing the data, I weighted their first choice with 3 points, their second choice with 2 points, and their third choice with 1 point. This allowed us to see a clear distribution of the multitasks users perform when attending meetings on mobile devices. From the chart, we can see that the most common multitasking activity is sending and receiving work messages.
DISCOVER DESIGN OPPORTUNITIES
After walking through the current multitasking experience with users, I translated pain points into design opportunities.
During the user research sessions, I also asked users to walk through their online meeting experience on mobile devices and think out loud during the process. After analyzing the qualitative data, I concluded some pain points I observed during their user journey as belows.
No clues of screensharing when multitasking
For Type A power users who attend both presentation and non-presentation meetings on mobile devices, a more comprehensive multitasking experience is preferred. This includes having access to the ongoing presentation while multitasking.
No access to key controls
Both Type A power users and Type B average users express the need to access key controls, such as mute and camera, while multitasking on other tabs.
UI is not self-explanatory
Both Type A and Type B users expressed confusion about the green video icon, as it appears as if the video is on while they are multitasking on other tabs.
Design recommendations based on research findings.
1. Provide a preview with maximized screensharing mode for Type A users.
2. Provide a preview with minimized non-screen sharing mode for Type B users.
(Type B users attend mostly non-presentation meetings on mobile devices.)
3. Provide access to key controls for both Type A and Type B users.
4. Change the design of the green circular video UI to improve clarity.
PROBLEM STATEMENT
“How might we provide a better multitasking experience when users attend online meetings using RingCentral app on mobile devices?”
DESIGN HIGHLIGHTS
01.
Keep track of the ongoing presentation while multitasking on other tabs.
02.
Flexible picutre-in-picture mode to cater different users' multitasking needs.
03.
A variety of maximized picture-in-picture preview modes that are scalable and cater to different user scenarios.
BEHIND THE SCENES
Key Iterations.
Version 1.
What I learned
Users like the idea of having different modes as it provides flexibility
Both users and stakeholders considered that the max mode is too large and could hinder the readability of messages
When asked to switch between different modes, 4 out of 8 users showed confusion in succeeding at this task
Action items for V2
Explore other designs for the max mode that utilize screen real estate more efficiently
Make the view-switching entry point more discoverable
Version 2: what I improved
1. Combined the max mode and regular mode to save more screen real estate for users to read messages
2. Removed the view-switching tab bar and replace it with another switch CTA on the control bar
3. Removed the chat CTA from the control bar, but still allow users to receive related chat notifications on the back-to-meeting CTA
What I learned
3 out of 8 users felt that the minimized mode gets in the way and could be easily mistapped
The product leadership advised reducing the number of CTAs, as the multitasking preview still looks busy
The visual designer suggested combining the active speaker's indicator with the preview window using the current video tile pattern
Action items for V3
Explore alternative designs for the minimized mode that wouldn't get in the way of major thumb reach zone
Reduce the number of call-to-actions on the preview
Fine-tuning the UI
Version 3: what I improved
1. Combined the indicator that shows the current speaker with the preview window to save screen real-estate
2. Removed the video CTA and keep the mute/unmute CTA as it's the most frequrently used CTA by users
3. Fine-tuned the UI of the control bar to display more screen-sharing content to users
4. Switched minimized mode to horizontal and enabled preview mode-switching through swiping interactionn
AFTER THE LAUNCH
Results and Impacts
This new RingCentral Picture-in-Picture feature rolled out in 2021. By the time we released this feature, our strongest competitor Zoom hadn't developed a similar feature yet. So, the feature I designed also serves as a competitive strength for our RingCentral Video product. Here are the DAU and MAU this feature reached, as well as several feedback shared by our PM that were received from RingCentral customers and internal users after the feature was launched on both iOS and Android mobile platforms, including smartphones and tablets.
Daily active users on iOS: 567K
Monthly active users on iOS: 1.12M
Daily active users on both platforms: 810K
Monthly active users on both platforms: 1.55M
“This feature is so helpful! I’ve wanted this feature for a while.”
"This is a great improvement for the RingCentral app! And the menu is intuitive.”
"I really like that it also provides two different modes."
"This new feature works MUCH better than the previous button!”
REFLECTION
My key takeaway from this project.
Don't let technical constraints hinder your creativity when brainstorming.
At first, I was a bit worried about the technical constraints brought up by the engineers. But my manager advised me to set aside all those constraints and explore as many possibilities as possible. After that, we discussed each option with stakeholders and evaluated its feasibility to see how far we could go. This approach really unleashed my creativity, and I brainstormed a variety of options and discussed their pros and cons with stakeholders. I also demonstrated to stakeholders how creative design could be and how we narrowed down all those options by taking different factors into consideration.