Zoom - Whiteboard Trash Flows

The new Zoom whiteboard feature will allow users to delete and restore whiteboards they have created from a meeting or their dashboard on the desktop app

Background

Research

After talking to the head PMs of this project I was able to understand the goals and constraints of our users. I then started by looking at all the different competitors in the whiteboard/document space to see how they handled the delete and restore process.

Design Process

Touchpoints - I designed this flow for the desktop client app first, as it has more abilities and features, and then was passed off to Alicia Kepner to scale back the designs to web (less functionality, although it will mostly look the same). Additionally this design will eventually need to be made for mobile, PWA, & Zoom Rooms, so while designing this client version, I needed to be mindful of what flows and UI states will be possible on other devices/platforms

Wireframes - I created an initial round of wireframes after thinking through the 4 most important flows and presented them in our weekly design team crit

Edge Cases - Besides the bigger scenarios above, there are many smaller edge cases to this flow that needed to be considered. This sprint quickly became complicated with all of Zoom’s different types of users and devices in their ecosystem. Below are some questions I had and their answers that were decided after I discussed them with PM and ENG.

• Do we allow users to create a new whiteboard from trash? If so, then do they get launched into it and when they return, they go to all whiteboards?

  • No, we should not let them make a new board from the trash folder

• In the trash view, do we show all the users that are shared on the board like we do in the normal grid view? If yes, I assume we should make them always be inactive/opaque?

  • Don’t show the users —> remove any indication of others

• Do we allow users to star a whiteboard from the trash view? If so, what happens to the board? Does it get added to the starred folder even in trash? Does a starred whiteboard lose its star once put in trash?

  • Starring should go away when a whiteboard is moved to trash

• When users restore a once-starred whiteboard does it go back to being starred?

  • Yes it should if you restore the whiteboard but not if you just make a copy

  • Can you delete a whiteboard from the inside (i.e. not on the dashboard but actually inside the whiteboard)?

  • Keep it outside, so no you cannot

• Can you delete a whiteboard from the inside (i.e. not on the dashboard but actually inside the whiteboard)?

  • No you cannot, keep it outside

Final Design

From the dashboard, an owner of a whiteboard can click on the tile’s 3 dot menu and select that they want to delete a whiteboard (a contributor can decide to “leave” a whiteboard). There is a toast here instead of an alert or popup because this action isn’t permanent and an owner can restore a board if they’d like

The owner can then go to their trash where they will see the board and can select to delete it forever. I wanted to have a final confirmation because this action will be permanent. I also chose to make the Delete Forever button red to alert people something dangerous will be occurring if they click the button

There’s also a Delete All feature to clear a person’s trash. This action is also permanent and therefore warrants a popup to make sure the user wants to complete this action.

Side note: We had to check with engineering to see how long we were able to store users’ whiteboards in the trash folder. We were able to configure the same amount of time as Zoom Recordings, which is 30 days, before it deletes everything automatically

If a user wants to restore their whiteboard from the trash folder, they can go through this flow below. The popup in the second frame was carefully worded to let users know that they can restore their whiteboard just for themselves or re-share the restored one with every collaborator previously on it.

Learnings

• How to think through a flow from the perspective of every stakeholder involved

• Setting up meetings with PM and ENG when the initial scope of the project is needed and technical issues arise

• Working with a UX copy writer to make sure the language of my designs fit into the existing verbiage that Zoom has chosen and is clear to the user what is happening with each click of their mouse

• How to use different colors for buttons/toasts/etc. to evoke certain emotions & thoughts from users

• Presenting to a team during a design crit (making it clear what type of feedback I want and taking feedback graciously)