Last weekend, my design pal Catherine and I sat down and did a 90min design critique on Zoom, one of the most popular work-from-home apps these days. In this round of discussion, we focused on business use cases and formed our conversation around user experience and interface design of the latest Zoom application (Web, iOS version 5.4.9).

Why business users choose Zoom

Zoom now has around 265,400 customers with more than 10 employees. Despite the rising demands of online video services after Covid-19, it is attractive to institutions and business users mainly due to the following reasons:

1. High quality: it provides a smooth online conferencing experience with the ability to hold meetings of up to 300 participants.
2. Cost-effective: it offers affordable plans that are suitable for both big organizations and small startups.
3. Convenience and accessibility: the platform is compatible with Mac, Windows, Linux, iOS, and Android, meaning nearly anyone with a digital/mobile device can access it. Setting up a meeting is just a click away, and joining a meeting only takes 1-2 steps.
4. Cloud-based: it offers stable and reliable cloud services to help business users store, manage, and share cloud recordings, transcripts, and chat files.
5. Collaboration: it delivers a wide range of features that allow the users to interact and collaborate with each other within the application.

For business users, the main purpose of using Zoom is to have online business conversations. They usually have licensed/paid accounts that fall under their belonged institutions. Typically, they host or participate in pre-scheduled meetings, and expect to have smooth conversations on predefined topics or agenda. Depending on the meeting format and the level of engagement required, they may need interaction capabilities beyond basic audio and video chatting.

Use case #1: Join a meeting

Users can join a meeting by either opening the Zoom app to locate an upcoming one or clicking the meeting link via plugins such as Zoom for Microsoft Outlook and Zoom for Slack. Since business users usually have their Outlook/Slack opening on their work laptops, it’s convenient to enter a scheduled meeting when they receive notifications on the above work-related applications.

We find Zoom always asks the users to review and approve the audio setting before joining the meeting, which is important since a smooth conversation is essential to an efficient and effective meeting. One thing that can be improved is to use more concise language in the title of the audio preview modal. Since it is apparent to users that they can only choose ONE option at a time using the segmentation control, there is no need to repeat the same information in the title.

It is nice that Zoom also provides video preview and allows users to apply virtual background when joining the meeting. The “virtual background” feature gives users the control to protect their own privacy, while also provides opportunities to let users showcase a certain degree of personality.

Unlike the audio setting, the video preview is not always prompted when users join a meeting. Making the video preview optional is maybe the consideration of allowing users to quickly enter a meeting without browsing too much information, however,

this lack of ambiguity of can cause a sense of insecurity since being able to always preview and adjust professional appearance is essential to business users.

From the designer’s viewpoint, we think it can be beneficial to combine the audio and video previews into one modal, and using a 2-step progressive disclosure pattern to reduce risks of information overload.

In addition, we found there’s no meeting title visible to users unless the meeting host has set up a waiting room in advance. This may be because Zoom wants to keep a clean UI style and only shows the most frequently needed actions during a meeting. However, if we only show the meeting title for the first 10 seconds (a fade-in and fade-out animation could work here), it can provide more clarity to users and help them confirm they’re in the right meeting.

Use case #2: View and manage participants

A toolbar appears at the bottom of the Zoom window once the meeting begins. It puts the audio and video adjustment icons on the far left, showing a clear division with all the other options, which makes it easy for users to locate these two important settings and make changes at any time.

The number tag next to the “Participants” helps users easily view and track how many participants are in the meeting. Users can also click the icon to see more participant details in the sidebar. We like that Zoom is providing access control at different levels to different types of participants (host, co-host, internal participant, guest) while keeping a consistent UI style. When reaching a certain number of participants (not sure what’s the threshold value), a search bar appears on top of the sidebar, making it easy to locate a participant we want to interact with. The status icons (audio, video, cloud recording, screen share) right next to each participant name also provide visual aids to inform users what’s happening in the meeting.

However, users need to scroll all the way down to use action buttons in the sidebar. Especially when we have only a few participants in the meeting, there can be too much white space in between the participant list and action buttons.

For the host, there are 3 actions: invite, mute all, more (dropdown menu that includes additional participant management options); for other types of participants, there are 2 actions: invite, mute me. In both views, there is no visual hierarchy to help differentiate the primary, secondary, and tertiary actions.

More importantly, in the general participant view, the implied objectives following the verbs are different (“invite” ->users other than me, “unmute” ->me), which adds burden to users during the decision-making process. As UX designers, it’s our responsibility to “don’t make users think”.

After clicking the “invite” button, we can see a pop-up that provides detailed instructions for inviting users. It’s not clear to the user what’s the difference between “Zoom Rooms” and “Room System”. Maybe these are two unique product features Zoom wants to promote, however, without any explanation provided, users can be hesitant to try out these features.

Taking a closer look at the “Room System”, we can see there’re 2 segmentation controls with different UI styles. Although there’s abundant white space in between to inform the users that these are 2 separate controls, the layout is still not visually appealing and can even confuse the users.

The display format for the dial numbers (xxx.xxx.xx.xx) looks like an IP address, however, the display format of the meeting ID looks more like a real phone number (xxx xxx xxxx). Meanwhile, the meeting passcode is showed twice in the modal, but one is applied the gray color indicating the inactive status, another one is applied black color indicating the active status.

These uncommon, inconsistent display formats contradict what users are familiar with in their daily life. It will be great if Zoom can standardize the number display format so that users won’t feel overwhelmed and confused.

In addition, the scrollbar is not visible in the “Dial” dropdown menu until the users start scrolling. Users may misunderstand that there are only 10 options to choose from, yet actually, there are more.

Use case #3: Chat

The “Chat” action button can be easily found in the toolbar, and it is one of the core features in Zoom. It creates a space for participants to exchange ideas without interrupting the presentation or discussion in the meeting, and serves as an alternative communication method when participants have difficulties joining conversations through connected audio.

However, the conversations in the chat window are not organized, making it difficult to track a message thread or locate a message, especially when participants are actively messaging each other. From a designer’s viewpoint, we think it may be because Zoom wants to keep the UI clean and simple, however, no complicated interaction flow doesn’t always mean a satisfied user experience. Users need to scroll all the way up to manually locate a message, it can cause a sense of anxiety and delay the communication — which are two things we always want to avoid, especially on business occasions.

Zoom provides flexibility in the aspect of allowing participants to send public messages and direct messages. It also adds visual cues (highlighting the direct messages in red) to help users differentiate the 2 types of conversations. However, the vivid red color is not accessible to users who have color vision deficiency. It is also inappropriate to be used to display neutral information, since it’s commonly used as a warning sign.

In addition, the meaning of options in the “more” dropdown menu is not clear to users. What’s the difference between “everyone publicly” and “everyone publicly and directly”? It would be useful if there’s a “help” icon here to provide some explanations. A refinement of the languages used here can also help bring more clarity.

The “Chat” feature was intended to make the conversations more accessible. However, insufficient use of visual cues and lack of organization in the messages make it hard for users to enjoy smooth and effective written communications, and even make the entire conversation less accessible — after all, the anxiety it brings is also a form of disability.

Use case #4: Share screen

Zoom uses vivid green color for the “Share Screen” and places it in the center of the toolbar, conveying the eagerness to promote this functionality as a core product value. However, we wonder if green is an appropriate color to use here, especially when the “End” button at the right edge of the toolbar is dark red.

Using this color palette is not accessible to people with red/green color blindness. Meanwhile, we normally use green to indicate something safe or some kind of positiveness, while using red to indicate something dangerous or some kind of warning. At a quick glance, users can easily misunderstand the meanings of “Share Screen” and “End” —when seeing two action buttons using complementary colors (colors that are opposite each other on the color wheel), people expect these two actions indicate the exact opposite meanings.

As designers, we need to carefully consider the logics and inidications behind colors we choose. Research reveals people make a subconscious judgment about a product within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone.

To improve the experience, we feel Zoom needs to do more explorations on color palettes with accessibility guidelines in mind. One approach can be applying different shades and tints to the sky blue — its brand color, and use the blue colors across all the screens to promote brand identity.

Opening the “Share Screen” modal, we can see Zoom makes good use of its brand color here — a solid sky blue background is applied to indicate the selection state of an option. When sharing screens, participants can either share the entire desktop/phone screen, the interface of a running application, or a connected iPhone/iPad screen. The wide range of options takes consideration of the common business use cases, such as sharing a computer or application screen to collaborate with colleagues, remotely accessing a colleague or client’s computer to troubleshoot a technical problem, and walking through a demo on a mobile app with the development team.

Switching to the “Advanced” segmentation control, users can even share a portion of the screen. However, it doesn’t allow users to define which portion of the screen they would like to share before clicking the “Share” button. The lack of visibility of what will happen can lead to a sense of insecurity.

If users can preview which portion of the screen they will share, they will feel more confident to proceed to the next step — they get to confirm their selection, and their privacy is protected by only exposing contents they are comfortable sharing with the group.

When making decisions, there is a rectangle border automatically applied to the selected screen. It is definitely helpful to preview the contents we’ll be sharing, however, the border color uses lake blue, which cannot be found anywhere else in the application and is not a color written in its style guide.

Same for the border applied to the selected “portion of the screen”. The orange (when screen sharing is paused) is a color already widely used in its web design, however, the grass green (when screen sharing) is a unique color that added along with the new “share portion of the screen” feature.

We’re not sure how Zoom approached its current color palettes, however, we can see there’s an opportunity to define the meaning of the colors, so the team can set clear standards and create repeatable patterns for how the colors should be used in the future.

Besides all the flexible screen-share options, there’s even a “Whiteboard” that enables participants to virtually collaborate in real-time. This is a highly demanded feature after many companies made the abrupt shift to working from home. The actions users can take using the annotation bar — draw, stamp, erase — have held the tool itself as a physical prop we place around the office.

Business users are so used to crowd around the same space and lay out ideas or explanations on a traditional whiteboard. With everything becoming digital, it’s a challenge and also an opportunity for online tools to mimic the experience users once enjoyed in the physical working environment.

There is no doubt that Zoom has been the go-to tool of cloud video communications for many enterprises. It keeps exploring the capability of virtual communication and collaboration, showing the desire of fine-tuning the software to constantly fit customers’ needs.

However, it still needs to think more when applying new colors to the product UI. In addition to picking colors that meet the basic accessibility guidelines, we should also think about if the colors communicate the meaning and tone of functions.

How to systematically utilize the product brand color while maintaining a repeatable pattern for how the colors can be used in the future?

This is a topic that every designer needs to constantly reflect on the design practices.