Visualizing a Note-Taking Feature Inside Zoom
Disclaimer: The views expressed in the blog post is purely based on personal experience. It was not influenced by any external factor.
Off all the apps I use on a daily basis, I love Zoom the most.
In my opinion, Zoom is one of the most minimal, yet amazingly functional apps built around its users.
It is designed like a TV remote. Anyone could figure out all the key features and start using it after playing around with it for a while.
They’ve carefully designed a ton of features such as the ability to chat among participants, run polls, the option to mark breaks, and so on. But, the one thing I wish they could prioritize is taking notes during a meeting.
As a daily Zoom user, I would say that as of now, there is no effective way to take notes when you’re on a call.
Yes, you can have the notes app open on a minimized window during the meeting. But, what if you’re sharing the screen! The experience becomes difficult. You either share the whole desktop and everyone can see your notes or you share one screen and if move on to another (in Mac), the screen sharing is paused which kind of makes the experience a little chaotic.
This made me wonder.
What if Zoom had a built-in notetaking feature that allows you to take notes and share it with the meeting participants after the meeting?
So, last week, I spent some time drawing mocks to try and fit a native note-taking feature inside Zoom.
Before designing the mocks, I wanted the “Notes” section to fulfill the following requirements.
- It should support distraction-free note-taking
- Provide a better way of organizing notes.
- Allow you to bookmark/favorite frequently used notes
- Support for sharing meeting notes with all the invitees, attendees, and selected members in the organization.
- Ability to share meeting notes in multiple formats (PDF, TXT, DOCX)
- Capture the timeline of notes along with date stamp (useful in recurring meetings)
- Should be accessible from the Zoom web app.
- Ability to filter their own and shared notes.
I did not include functions like thumbnail preview for links and videos; Collaboration inside notes (such as highlighting portions of a note or adding comments, etc.) as I thought it would compromise the minimalistic approach the tool currently takes and will make it look more like Microsoft Teams or Slack.
The current Zoom app has a lot of space (if nobody enables the video) in the center which would be an ideal place for the placement of the notes section as it would be in the eye line of the user. However, the notes module should be a floating window if one or more attendees use video or if you’re sharing your screen.
In order to easily launch and access the feature, I’ve decided the place the notes icon in the bottom toolbar.
The first thing I want is a simple, neat space for taking notes.
I wanted the editor to have basic text-formatting options as the user won’t be adding an image or video in the notes section. All they can add are plain text, bullets, hyperlinks, and perform basic actions such as text/paragraph styling.
The users can perform the following functions on this screen:
- Create a new note
- Add a title to their note
- Bookmark frequently used notes (by clicking on the ribbon icon next to the title)
- Instantly switch between other notes or notebooks (I’ll talk about that later)
- Perform basic text/paragraph formatting
- Option to delete a note
- Share notes button to share the notes with the rest of the invitees/attendees
- A timeline of when the notes were taken (useful during weekly/bi-weekly/monthly meetings)
- Last saved info to denote auto-save on the system or on the cloud.
A note is created by default when you set up a recurring meeting. This note will capture the timeline of notes taken over a period of time (can be seen next to the body of the note). You can disable this in the settings section.
The notes are organized under notebooks under which you can add, edit, or delete notes. By default, your notebooks will be named with <month><year> as I thought it would be easier.
I’ve also added another default notebook titled “Bookmarked” to access all your bookmarked notes. The universal search to quickly locate a note and open it during a meeting.
You can share your notes with your invitees, attendees, or other people in your company. When you click on the “Share Notes” button, you will be shown the following options.
The advanced option includes choosing the format in which you would like to share the meeting notes and also add a custom message to those with whom you wish to share the message.
As of now, I’ve shortlisted three options for the note format: TXT, PDF, and DOCX as they’re the most commonly used document formats. I’ve thought about adding Markdown (because I love it!). But, it is not commonly used by many compared to the other formats. So, I’ve kept it on hold.
Notes Pop-Out Window
During video calls and screen sharing, the notes section would turn into a pop-out window on the screen (similar to chat and participant list).
Notes in Zoom Web App
You can access all your notes from the sidebar of your Zoom web app.
You can also add notes from this screen, search for notes located in other notebooks and also share notes with others in the organization. I’ve also added a filter section on this page that allows you to filter bookmarked notes and the notes that are shared with you by others in the organization.
Since the function of the feature is minimal, I did not add a lot of options under Settings. I added an option to automatically share meeting notes when a user ends a meeting and the option to enable a timeline for notes that are part of a recurring meeting.
Major Use cases
- Taking notes during meetings, conferences, online classes, etc.
- Sharing notes among peers. In an online class setup, the teacher can share a note with all the students.
- Access to past notes during recurring meetings to get context
Lessons Learned Today
- Don’t go all-in on features – Understand what is important for the user and keep them as the core of what you’re designing. In this case, I don’t want the notes section to have features like collaboration, comments, etc. That would have compromised on the user experience. I wanted to build a lightweight note-taking capability and I built it with minimal functions.
- Consider all possibilities – Consider all possible use cases where a feature would be used. In my case, I asked a lot of questions. What happens when nobody turns on the video? What if one or more attendees use video? What if I share my screen? What if I log into the web app? I’ve considered adding notes to the mobile app as well. But, I decided to do it as a separate post as I realized it would involve redesigning a lot of moving parts.
- Document your feature to realize shortcomings – Halfway into writing the blog post I realized I forgot to add buttons for adding a new note and creating a new notebook. I did not realize it until then. Writing about the feature and trying to explain it made me realize its fault. Maybe this is a habit I picked up as a technical writer.
Lessons Learned as a Weekend PM
After my last post about redesigning Google Pay, I realized two things:
- You can tear down and redesign an entire product from the ground up, but you can’t do it in one blog post. That would be ridiculous, long, and would tire the readers. Also, you’d be consuming too much, you will end up forgetting everything. So, I’ve decided to tear down, analyze, and design parts of a larger product.
- Building a new feature or adding an enhancement to a successful product takes a lot of time. Especially when you try to stick to the design principles and approach followed by the product.
If you like the blog, subscribe, share it on LinkedIn and share it with your friends who are passionate about product management and product design. You can follow me on Twitter for more interesting articles on SaaS products.
If you think I missed out on something or did something horrible while designing a feature, feel free to email me at [email protected].
Special thanks to Silent Marketer for suggesting Zoom for my next article.