Notion Voice Memo
The purpose of this case study was a personal project where I worked to integrate a hypothetical new feature ( a voice-memo functionality) into an existing mobile application.
The view of the new voice-memo feature in Notion
Introduction
Notion is meant to serve as all-in-one productivity platform that combines note-taking, task management, and collaboration tools in a single application.
Current Notion features include:
Highly customizable workspaces where users can create pages, databases, and boards to organize information according to their unique needs
Real-time editing and commenting on documents by multiple users
A relational database functionality that enables users to create structured data sources with ease
How Might We-
Project Goals
Notion wants to improve the experience of users interacting through Notion’s mobile app, in order to further increase customer retention and introduce new opportunities for capturing information in the Notion platform.
Research Goals
I needed to understand two primary tasks :
1) Understand how current Notion users utilized the mobile app on a day-to-day basis, and how this compared to their desktop usage of the app.
2) New features that would specifically improve the mobile app experience of using Notion.
Research Objectives
I’d interview current Notion users, and develop research artifacts such as empathy maps and sample personas, to summarize my findings.
I’d review the information architecture of the existing Notion app, to understand where a voice-memo feature would best fit in.
Research and Analysis
I wanted to understand both the layout of the original Notion app, and current usage patterns, to understand what mobile workspace functionality would make the most sense to introduce.
Examining the Current Notion Mobile App
There was a review of the existing Notion mobile app to understand how the content was laid out.
Notable features of the mobile app included:
A default to a list of workspaces that were either a) shared with others or b) exclusive to the user
The ability to search workspaces, add pages, and view notifications
Condensing the list of templates that could be added to a Notion page or workspace
A carousel that laid out the most recent workspace a user had been in, for easy reference purposes
Speaking to Notion Users on How They Used the Mobile App
One-on-one interviews were conducted with six different users of the Notion productivity app. These five users had varying levels of expertise with Notion.
Reasons for using Notion varied (as some technologists used it for professional work, others used it for personal productivity, or sometimes combination of the two).
Each person’s level of exposure from Notion either came from work, or recommendations from friends/family.
However, a common set of user needs and frustrations were uncovered through the interviews, which were used to create the person above.
User Needs
It was “cumbersome” to enter content into the Notion mobile app
There was a desire to enhance note-taking functionality within mobile app
Desire for mobile features native to the mobile phone
No desire to perform desktop level operations on a mobile device
User Frustrations
Multiple-steps to perform a task in the mobile app what could be done within the desktop app
Notion mobile app was “overly complex”, and people had sense of being overwhelmed by sheer of range features
There was a limited way to scroll back and forth across the mobile app using touch, as opposed to moving a cursor
MosCoW Analysis of Voice Memo Feature
A MoSCoW Analysis, reviewing must-have, should-have, could-have, and will-have functionalities was conducted based on the user responses. Based on this analysis, it was decided for a voice-memo function to be introduced as a hypothetical new feature.
Organizing the Information
The information gathered during the research was then consolidated via a sitemap, and it was decided where to put the new feature.
The Default Notion Sitemap
A sitemap was created of the current Notion mobile app to understand where the Notion mobile feature would be integrated. The sitemap was broken into four tiers
The main page (marked in teal), listing out the core functionalities of the mobile app
The project pages (marked in orange), which marked out actions that could be undertaken within a specific project
The persona pages (marked in blue), which marked out in blue the various templates associated with a particular kind of persona, such as marketing or human resources
The template pages (marked in blue-green), which were pre-built Notion templates that could be added onto an existing page.
The Notion Sitemap with a Voice-Memo Function Added
It was decided to include a voice-memo functionality in the Notion, at the project-level of the mobile app, as the voice-memo was too general to be classified as a template, and was meant to serve a similar functionality as typing in-notes.
Task Flow for Notion Mobile App
I proceeded to create a hypothetical task flow for the voice-memo feature, using LucidChart.
The task flow outlined how someone would navigate through the mobile app to create a voice-memo and save it. This navigation flow was based on the Notion sitemap, and on the user research.
Low Fidelity Sketches of Notion Wireframes
After reviewing the user flows and site-map, I proceeded to create a series of initial sketches that would serve as the basis for my low-fidelity and high-fidelity wireframes.
The image above shows sketches of the initial flow of the Notion app.
A Sample of the Initial Low Fidelity Wireframes
I then created an initial set of wireframes for the new Notion voice-memo.
Below is a sample display of the low-fidelity wireframes that were created for the new workflow, which reflected the information architecture and process flows identified via the sitemap.
Reviewing the New Features Introduced for Notion
As part of the initial introduction of the voice memo feature for Notion, I decided to create two different iterations of the voice-memo sequence.
Iteration One: The voice-memo feature is accessed via a drop-down to create new template ina Notion workspace.
Iteration Two: The voice-memo feature is accessed via a new tab to add content to a Notion workspace.
I decided to create more high-fidelity mockups of iteration two, out of a concern that the voice-memo option would not be visible.
High-Fidelity Wireframes
A series of high-fidelity wireframes were created for the voice-memo feature, which mimicked Notion’s existing style guide as much as possible.
The Notion Voice Memo App in High Fidelity
The Voice-Memo functionality was displayed as a tab within the Notion Workspace.
If the tab was selected, the user would have the option of adding a new voice-memo, or searching/filtering existing voice memos.
If the user chose to add a new voice-memo, they would be taken to the following screen where they would have the option to start recording.
The recording would continue until the user stopped it, by selecting the red button in the center.
The user would then see the new recording listed as a voice-memo, with a time-stamp, along with the ability to delete it.
Usability Testing
Once the wireframes were created, they were consolidated into a prototype that was tested by users to make sure the new voice-memo functionality worked.
Evaluating the Notion Voice-Memo
A series of usability tests were conducted for the purpose of making sure the new Notion voice-memo functionality that was introduced actually worked.
Objectives
Testing if users are able to navigate through the enhanced Notion App
Confirming that the new feature fit within Notion’s existing design system
Identifying pain points in the current process
Methodology
Remote one-on-one usability tests
Complete a set of designated user test scenarios
Participants
Three power-users of Notion, recruited through online forums
Two non-users of Notion, recruited through friends and family
An Overview of the Prototype Used for Usability Testing
The five prospective users were asked to navigate through the following prototype workflow, which outlined four basic uses cases that would need to be completed.
The following scenarios were presented and users were asked to complete the tasks.
Find where you can create voice-memos within the Notion mobile app
Go to the page for creating a new voice-memo
Record a new voice-memo, and save it
View the recorded voice-memo on the Voice-Memo tab
These tasks were selected because during the user interviews, the various interviewees said they wanted a voice-memo app to perform these basic functions.
Further Actions
The following actions were recommended after the usability tests were concluded, based off the test results.
Improving the Voice-Memo Placement
Based off the results of the usability tests, the following feedback was provided.
Confusion as to where the voice-memo was going to be created, whether it was within a page or a project.
How someone would access a voice-memo once it was created, and how they would play it.
Confusion as to where “Add Voice Memo” was happening, as “New” page implied possible to add new voice memo.
The following steps were taken to improve the voice-memo functionality
The ability to directly edit voice-memos that were already created, through the introduction of an edit icon on the page.
Removing the “Add New Voice Memo” step, as two options to add new items was confusing.
Making the “Save” button in the voice recording screen more visible as a primary button, and the “Cancel” button appear as a secondary one.
An example of the wireframe with the updated changes, is shown above.
Moving Forward with the Next Steps for Notion
Notion should consider the following enhancements for the mobile application in addition to the voice-memo.
Considering integrating the voice-memo with a Notion generative AI to capture real-time conversations
Introducing the ability to generate templates like in-line databases through voice-commands.
Evaluating what other unique actions can be leveraged through the Notion mobile app.
Lessons Learned
The learnings from the case study were as follows:
Mobile applicaitons should not just be reskinned versions of desktop web applications. Mobile apps instead should offer unique functionalities that complement desktop apps
There is a risk to an app being ‘overly complex’ in that most users will be overwhelmed by the choices available and restrict themselves to a few use cases. An app should encourage users to play and interact with it.
