View Prototype
Zoom:
Custom Toolbar
A case study on Zoom exploring adding a feature that allows users to customize their toolbar to improve their experience and productivity during meetings.
Role
Project
Year
Product Designer
Product Enhancement: Add a Feature
April-May 2023
02
06
Final Design
Let's work
together.
03
User Personas
Using the affinity map and user interview insights, I created 2 distinct personas that encompassed many of the qualities of my interviewed participants. This helped me to ensure that my design decisions were grounded on real user needs, goals and expectations.
To create the user personas of Michael and Sarah for the Zoom feature, I conducted in-depth user research, including interviews and observations, to understand the diverse needs and behaviors of Zoom users. Through this process, I discovered two distinct user profiles that represent common user types.
By developing these personas, I gained valuable insights into the specific needs and pain points of different user types, enabling me to design and optimize the Zoom feature to cater to their unique requirements.
Synthesis
I created an affinity map to synthesize my qualitative data. Affinity mapping helped me to group my observations made during user interviews and notice themes that I could then use to develop insights. After conducting an affinity mapping exercise based on user feedback and insights, the following key findings emerged:
Affinity Mapping
View Mapping
User Preferences: Participants expressed a strong preference for customizing their Zoom toolbar, with a high interest in adding or removing buttons and rearranging their order. This customization feature was seen as a way to enhance productivity and tailor the Zoom experience to individual needs.
Popular Features: The most commonly used Zoom features were screen sharing, muting/unmuting audio, and the chat function. These features were deemed essential for effective communication and collaboration during meetings and webinars.
Feature Adoption: While some features, such as annotation and captioning, had relatively low usage rates, participants expressed interest in exploring and utilizing them if made more accessible and intuitive within the Zoom interface.
These insights from the affinity mapping process provide valuable direction for enhancing the customization options and optimizing the user experience of the Zoom toolbar
02
80%
100%
Analyze
I recruited 3 people for my initial user interviews, and 21 for a Google Poll, all of which are in my peer group. I had some hypotheses and preconceptions going into the interviews, but i also learned new information that influenced my designs.
would like to be able to add custom buttons to their toolbar
would like to remove buttons they do not use
Interview & Survey Analysis
expressed interest in being able to customize their zoom toolbar
90%
90%
would like to be able to rearrange the order of the buttons on their toolbar
The research findings indicate that the majority of participants use Zoom for meetings or webinars and express overall satisfaction with the current toolbar. Essential features like screen sharing and audio controls are widely utilized, while other features such as video control, recording, and participant management are also commonly used. Participants expressed a strong desire for customization options, including the ability to add and remove buttons, rearrange the toolbar, and customize specific features. These findings highlight the importance of allowing users to tailor their Zoom experience to meet their specific needs, enhancing user satisfaction and usability.
My Role
User Research
UX/UI Design
Interaction Design
Graphic Design
Timeline
April 2023 - May 2023 (80 Hours)
Tools Used
Figma
Google Forms
Vowel
Maze
Zoom currently has a fixed toolbar that cannot be customized by users. This can be frustrating for users who want to access their most frequently used features quickly and efficiently. Adding a feature that allows users to customize their toolbar could improve their experience and productivity during meetings.
We want to understand user needs and pain points in their Zoom usage with regards to the toolbar, and to explore how a customizable toolbar feature in Zoom can improve the user experience and enhance user interaction during remote meetings.
Simple and fast way to customize the toolbar
User-friendly interface and UI is consistent with Zoom branding guidelines
The Problem
Project Goals
01
Research
Background
Zoom is a video conferencing platform that allows users to hold meetings, webinars, and virtual events. It was founded by Eric Yuan in 2011 and was first launched in 2013. T
The company is headquartered in San Jose, California, and has offices around the world. Initially, Zoom was designed for businesses, but it quickly gained popularity due to its ease of use and reliability. In recent years, the platform has seen a massive surge in popularity as more people started working remotely due to the COVID-19 pandemic.
Zoom's key features include video and audio conferencing, screen sharing, virtual backgrounds, chat, and recording. It also offers a range of subscription plans, including a free plan with some limitations and paid plans with more features.
As of September 2021, here are the top 3 video conferencing platforms ranked by monthly active users:
Zoom - 300 million
Microsoft Teams - 145 million
Google Meet - 100 million
Research Goals
Client:
Improve User Engagement: By allowing users to customize their toolbar, the client can provide a more personalized and efficient video conferencing experience, which can lead to increased engagement and user loyalty.
Increase Revenue: By adding the ability to customize the toolbar, the client can differentiate itself from competitors and attract more users who require specific tools during video calls.
Improve Productivity: By providing users with a customized toolbar, the client can help users work more efficiently during video calls.
User:
Personalization: By allowing users to customize their toolbar, they can tailor the platform to their specific needs, making their video conferencing experience more enjoyable and efficient.
Ease of Use: The design should provide clear instructions for adding and removing tools, with a simple and intuitive interface that users can easily understand and navigate.
Methodologies
Competitive Analysis: A competitive analysis will be conducted to identify best practices for customization features in video conferencing platforms and inform the design of the customization menu.
User Interviews and Surveys: Interviews and Surveys will be conducted to gather insights into the specific tools users need most frequently during video calls and how they would like to customize their toolbar.
I researched the top (5) competitors in the marketplace for similar travel/visa services in order to asses how they meet their target customers needs, as well as pain points. (SWOT Analysis)
Interview Debrief
In order to better empathize with users, I conducted user interviews to learn their perspective and get a better understanding of their motivations and pain points around using Zoom.
User Interviews
Method
Particpants
Created an interview discussion guide based on open-ended questions to allow participants to share their experiences
Conducted and recored interviews for 3 participants
Organized notes to generate an actionable interview debrief
3 participants
Age: 26-45
2 Females & 1 Male
Various levels of Zoom user
One common finding from the three interviews is the importance of customization and personalization in the Zoom toolbar. All three interviewees suggested adding or customizing features such as muting, video on/off, chat functionality, and share screen based on individual needs and preferences. They also highlighted the need for a persistent toolbar across different devices and the ability to rearrange or eliminate icons. These suggestions indicate a desire for a more tailored user experience.
Key Finding
User & Task Flows
View User + Task Flow
To create user flows and task flows for the Zoom feature, I conducted a comprehensive analysis of user journeys and interactions through a combination of user interviews, usability testing, and careful observation. This allowed me to understand the specific steps and actions users take when using Zoom, as well as their goals and pain points throughout the process.
By mapping out the user flows, I identified key touchpoints and decision points where users may encounter challenges or confusion. Through this process, I gained insights into the ideal sequence of steps that users should follow to achieve their desired outcomes, such as scheduling a meeting, joining a call, or customizing their settings. I also identified opportunities to streamline the user experience and enhance usability.
Task flows were then created to dive deeper into specific user tasks and actions within the Zoom feature. This involved breaking down complex processes, such as screen sharing, muting/unmuting audio, or managing participants, into step-by-step sequences. By visualizing these task flows, I gained a clear understanding of the user's journey, the actions they need to perform, and the possible pain points they may encounter along the way.
Lo-Fi Wireframes
To create low-fidelity wireframes for the Zoom feature, I began by carefully analyzing the user flows and task flows that I had previously developed. By understanding the key steps and interactions required by users, I was able to identify the essential elements and components that needed to be included in the wireframes.
I then sketched out rough drafts of the wireframes, focusing on simplicity and clarity. Using an Ipad, I quickly translated the user flows into visual representations, mapping out the basic layout, structure, and content of each screen. This allowed me to explore different design options and iterate on the wireframes as needed.
Through this iterative process of forming low-fidelity wireframes, I was able to bridge the gap between conceptual ideas and tangible design. These wireframes served as a foundation for further development, allowing stakeholders and team members to visualize the Zoom feature's layout, structure, and content, facilitating collaboration and ensuring a user-centered design approach.
View Lo-Fi
Mid-Fi Wireframes
Building upon the insights gained from the low-fidelity wireframes, I started on creating mid-fidelity wireframes for the Zoom feature. This involved translating the basic structure and layout from the low-fidelity sketches into more detailed and refined designs.
I carefully crafted the mid-fidelity wireframes, focusing on enhancing the visual elements and adding more specific content. I paid attention to the established Zoom aesthetics, typography, color schemes, and iconography to create a visually appealing and cohesive user interface. Additionally, I ensured that the wireframes accurately represented the functionality and interactions of the Zoom feature.
By investing time and effort into creating mid-fidelity wireframes, I was able to strike a balance between visual design and functionality. These wireframes served as a valuable communication tool, enabling stakeholders and development teams to visualize the Zoom feature's user interface and provide valuable input for further refinements.
View Mid-Fi
Hi-Fi Wireframes
View Hi-Fi
Building upon the mid-fidelity wireframes, I started on creating high-fidelity wireframes for the Zoom feature. This involved adding more refined visual elements, including high-quality images, precise typography, and polished iconography, to create a realistic representation of the final product.
I crafted the high-fidelity wireframes paying close attention to every detail of the user interface. I focused on creating a consistent and visually engaging design, ensuring that the colors, fonts, and visual hierarchy were in harmony. Additionally, I incorporated interactive elements, such as buttons and dropdown menus, to simulate the actual user experience.
To validate the high-fidelity wireframes and gather user feedback, I conducted user testing sessions with a representative sample of users. Their input and reactions were instrumental in refining the user interface, identifying any usability issues, and ensuring that the Zoom feature met their expectations. This iterative process allowed me to make necessary adjustments and improvements to the wireframes, resulting in a highly usable and visually appealing design.
Prototypes
Task Flows:
Task 1 - Please change your Toolbar from the settings menu
Task 2 - Please change your Toolbar from a video call
View Prototype
Guided by the high-fidelity wireframes, I transformed them into an interactive prototype for the Zoom feature. Using prototyping tools, I brought the design to life by adding interactive elements and animations that mimicked the real user experience. This allowed me to showcase the functionality and flow of the feature in a dynamic and engaging way.
I conducted usability testing sessions with a diverse group of users, presenting them with the prototype and observing their
By creating a functional prototype, I was able to test and validate the design concept, gather user feedback, and make informed design decisions. The iterative nature of prototyping allowed me to refine the Zoom feature, ensuring that it met user needs and expectations. The prototype served as a solid foundation for the development phase, providing clear guidance to the development team and ensuring a successful implementation of the feature.
Usability Testing
05
Test
Task Flows:
Task 1 - Please change your Toolbar from the settings menu
Task 2 - Please change your Toolbar from a video call
To determine the success of my design, I recruited 14 participants and conducted usability tests through Maze. Each participant went through two flows and were tested on their ability to complete them.
The success of each task given was based on 3 metrics:
Time on Task
Difficulty
Likelihood of use
Results:
Flow 1:
57.1% - Direct success
35.7% - Mission unfinished
66.7% - Misclick rate
131.7s - Avg Duration
Flow 2:
57.1% - Direct success
42.9% - Mission unfinished
29.4% - Misclick rate
60.9s - Avg Duration
*Huge decrease in ‘Misclick rate’ and ‘Avg duration’! 57.1% - Direct success
Heat map of Flow 1 - Clear User Flow to Toolbar
Heat map of Flow 2 - Clear User Flow to Toolbar
Final Design
Flow 1: Settings
Flow 2: Video Call
Design Recap:
The prototype for the Zoom feature includes a convenient option for users to customize their toolbar. To access this feature, the user can follow two simple desktop user flows.
Flow 1: Settings - The user starts by opening the Zoom application on their desktop and then click on the "Settings" icon located in the top right corner of the app. In the settings menu, they navigate to the "Toolbar" tab on the left. Here, they find the "Customize Toolbar" button, which allows them to personalize their toolbar. By dragging and dropping icons, they can rearrange them to their preferred order. If they want to hide an icon, they can simply toggle the icon on the right side.
Flow 2: Video Call - The user starts by opening the Zoom application on their desktop and 'Joins' a video call. In the call, on the "Toolbar" on the bottom navigation, they navigate to 'more'. Here, they find the "Customize Toolbar" button, which allows them to personalize their toolbar. By dragging and dropping icons, they can rearrange them to their preferred order. If they want to hide an icon, they can simply toggle the icon on the right side.
Key Takeaways
The majority of participants are interested in customizing their Zoom toolbar, with a 15% increase in interest after users experienced the Flow 1 + 2 prototypes.
*Majority (93%) are ‘Somewhat interested/Very Interested’ now
The majority of participants would customize their toolbar in Zoom if they had the option.
*72% of participants were either ‘Very Likely’/ ‘Somewhat Likely’
Overall I am very pleased with this test,and Prototype in its achieved KPIS in ‘Flow 2’ and the ability to convey the business case for this new feature.
This was my first time using more advanced prototyping settings with video, smart animation drag + drop, and other settings. I also used Maze for the first time which may have swayed my results as the ‘Directions’ page obscured many participants' views/ and key interaction areas.
I think the great improvement in benchmark metrics from Flow 1 to Flow 2 is due to the curve in unmoderated UX usability testing platforms/workstreams being new to the average participant.
01
02
03
04
05
Research
Synthesis
Analyze
Design
Test
My Design Process
Competitive Analysis
I researched the top (5) competitors in the marketplace for similar video conferencing services in order to asses how they meet their target customers needs, as well as pain points. (SWOT Analysis). This helped me identify any missing features that I could add to Zoom and can address any potential design patterns to adopt or avoid.
As I analyzed the competitive landscape of video conferencing platforms, I discovered that many of the top contenders lack the flexibility and customization options desired by users. This presents an exciting opportunity for Zoom to stand out by offering a highly customizable toolbar that caters to individual preferences.
I observed that users across different platforms expressed a strong desire for a persistent toolbar that remains consistent across devices. Zoom can leverage this insight by ensuring that users can access their customized toolbar seamlessly, regardless of the device they are using, enhancing their overall user experience.
By examining feedback, it became evident that personalization is a key factor in enhancing the user experience of video conferencing platforms. Zoom has the potential to differentiate itself by providing a range of customizable features, such as rearranging icons, adding/removing buttons, and tailoring the toolbar layout to suit individual needs. This level of customization can foster a sense of ownership and empowerment among users.
View SWOT Analysis
Survey Debrief
In order to better empathize with users, I conducted user interviews to learn their perspective and get a better understanding of their motivations and pain points around using Zoom.
User Survey
Method
Particpants
Created a Google form to ask 10 multiple/open ended questions
Organized notes to generate an actionable interview debrief and guide wireframes
21 participants
Various levels of Zoom user
Participants desire customization options for their toolbar and are interested in adding custom buttons, removing unused buttons, and rearranging the order of buttons.(95% of participants)
The most commonly used Zoom features are 'Share Screen', 'Mute/unmute audio', and 'Chat', while less commonly used features include 'Annotate', 'Show Captions/Reactions', and 'Manage AV Settings'.
Participants have various suggestions for new Zoom features, including the ability to minimize/hide the toolbar while screen sharing, scheduling new meetings, adding a timer function, and previewing their video and background before joining a meeting.
Key Findings
04
Design
Revisions:
Explore increasing font sizes
Explore easier ways to access the toolbar options as suggested by a usability test participant, "could customize the toolbar with one click off the bottom bar when on a call vs more button then to toolbar. Possibly just a right click on the bottom bar while on a call to customize."
Next Steps:
Make customization options more discoverable. Make it easier for users to customize the Zoom toolbar, the customization options could be more prominently displayed or integrated into the toolbar itself.
Improve drag and drop functionality: The process of rearranging icons on the Zoom toolbar could be made more intuitive and user-friendly.
Highlight hiding/showing options. Make it easier for users to toggle the option to hide or show icons on the Zoom toolbar and the size/color of icons.
Qualitative Observations:
The majority of participants are interested in customizing their Zoom toolbar, with a 15% increase in interest after users experienced the Flow 1 + 2 prototypes.
*Majority (93%) are ‘Somewhat interested/Very Interested’ now
The majority of participants would customize their toolbar in Zoom if they had the option.
*72% of participants were either ‘Very Likely’/ ‘Somewhat Likely’