top of page

Zoom Mobile Redesign

10 week class redesign project

Timeline: Jan 2021 - Mar 2021

Role: UX Research and Interaction Design

Tools: Figma, Google Docs

The focus was on improving upon Zoom mobile app's existing interface while adding features that increased usability and enhanced user experience. We chose to redesign Zoom because it was a highly relevant app at the time and we heard numerous complaints about the user experience and even experienced some issues of our own.

Zoom Screen.jpg

Two of our overhauled screens for Zoom mobile.

The Problem

Everyone at one point was and maybe still is using Zoom. People needed a place to learn, interact, and hold important meetings, especially at the height of a global pandemic, and it became the go to communication app for online learning and professional organizations. Zoom's service was not without issues, however, and many users like myself experienced issues with audio-video quality, dysfunctional features, and navigation issues among other problems. 

After quick online research and community observation, the team quickly found that users struggled to navigate Zoom and understand some of its features and how to access the various elements through the interface. These problems were amplified on the mobile platform where limitations to what users could access and do on their devices already existed. Our team then asked how we might improve Zoom mobile's interface to help users like students, instructors, and employees have an easier experience navigating and managing their meetings and schedules. What would the changes look like on mobile and how would stakeholders respond to the changes?

Users

The targets of this redesign were students, teaching staff, and any companies using Zoom as their main medium for meetings. Rather than changing everything entirely or providing a new service, the focus was building on Zoom's existing app and letting the users' needs and frustrations guide the improvement. Users would benefit from small changes to the interface and the addition of features that improved usability and navigation.

Team and Role

Our team was made up of 4 designers across 2 time zones. In addition to this time zone difference, we each had strengths and weaknesses that we constantly worked together as a team to acknowledge and provide assistance with. 

My role being a designer consisted mainly of creating personas, doing competitive analysis research, and prototyping interactions. I also contributed to generating user storyboards, assisting with user testing at all stages, and creating the final presentation of our design process.

Design Process 

To confirm our online research findings, we interviewed a few stakeholders - namely college students - to see if they could index any new frustrations. After interviewing a handful of stakeholders, we consolidated a list of common pain point these users had and compared it to the list of problems from our previous online research. I found that my two interviewees struggled with navigating Zoom's interface.

A list of opportunities for improvement that our team identified.

Consolidated notes from our stakeholder interviews and online research.

After producing personas for our user research, we quickly moved to storyboarding and wireframing. With the list of opportunities, each team member created a specific storyboard for one scenario and after voting on two storyboards we thought were the most compelling and most accurately represented our stakeholders, we generated wireframes to go along with them. We storyboarded many scenarios specifically to thoroughly understand the needs and pain points of our users.

One storyboard and wireframe that inspired our redesign.

One of our many storyboards and a wireframe that inspired our interface redesign.

Our first digital prototype was aimed at addressing the core problems that our stakeholders faced. For this iteration, the focus was simplifying menu navigation to find meetings and implementing a page for users to view all meetings that they have planned (similar to how google calendar operates). The new 'meetings' and 'schedule' pages were inspired by our stakeholders who suggested that there should be a place where all links and meetings were visible and easy to access with the tap of a button. 

Screens from our low-fidelity prototype

Screens taken from our lo-fi digital prototype. There was a clear lack of color and low content-space balance.

Testing this version, the team found that stakeholders preferred this updated version. They did give feedback about the overload of information of particularly when scheduling a meeting and they noted that it was difficult to understand the buttons next to the titles of each meeting on the schedule page, something that we took into consideration for our updated prototype.

Our next iteration addressed the feedback that testers provided, added color and implemented proper interactions between screens. To sum up major changes, I contributed to removing the 'join' button and making the interaction to join a meeting tapping the meeting name or icon, and implemented visual elements (the highlighting/darkening of a section) that helps users navigate where they are during the creation or scheduling of a new meeting. Lastly, we placed moved more luxury features to a new 'advanced' tab.

Pre-validationtest-proto.jpg

Our second iteration of the prototype, updated with color and increased white space.

Testers were quite satisfied with the new iteration and enjoyed the updated colors on the interface. Many of the testers appreciated that we reduced the amount of information present on the screen at once but they still had some feedback about setting the time of the meeting. One tester stated that the duration counter seems redundant especially if the user is already setting the time of the meeting manually, and implementing scroll wheels to set the specific time also felt like a chore. In addition to the changes made based on tester feedback, I helped add collapsible sections on the home and schedule screens and reduced the thickness of dividing lines before presenting the final prototype.

Screens from our final prototype

Our final prototype iteration. We added collapsible sections and further reduced the clutter on the meeting creation screens.

Outcome

One round of final validation testing informed the team that stakeholders were pleased with our redesign and enjoyed the improved interface. Our instructional team complimented the functionality of the prototype and the team's ability to iterate efficiently and make quality of life changes on short notice. 

This project helped improve on my foundation of prototyping and grasp at the mid-to-high level functions of Figma. I reinforced the importance of doing thorough user research using multiple mediums for gathering information and learned from my teammates how to translate this insight onto storyboard scenarios and wireframes. Last but not least, I learned the importance of being flexible during changing circumstances and the necessity of constant communication when working on different schedules and in differing time zones. 

To view the prototype, click here

bottom of page