Notion is hugely popular both for small teams and large corporations. However, not everyone finds it easy to navigate.

How might we make it easier for people to find the pages they need in Notion?

Notion became a popular note-taking app, known as an all-in-one workspace where users are able to customize their own way of thinking, planning, and writing. Many individuals, companies, and organizations use Notion as a way to collaborate and manage their work in a productive and efficient way.

For this project, we prioritized redesigning the navigation system mainly to improve the efficiency of the experience for all users.

In order to understand Notion and their users, we researched the main uses of Notion, features of competing apps, and the UX guidelines for navigation systems. Based on our findings, we concluded that Notion stands out as an all-in-one workspace, combining the uses of multiple apps into one, while also allowing for personalization and customization. However, with Notion’s flexibility, it leads to users feeling confused and overwhelmed with all the different features.

We conducted a total of 9 user interviews, sampling a range of experience levels. To gauge their interaction with Notion's navigation system, we had them complete tasks in a sample Notion workspace. We broke down our interviews into:

1. Background questions about the user and their use of Notion.
‍
2. For users who had experience with Notion, we asked them navigation-specific questions to gather insight on how their Notion is set up.
‍
3. We gave users a sample Notion workspace and asked them to complete a series of tasks, allowing us to observe their behaviors and instincts. Each task was focused around the navigation to examine users' pain points.
‍

Notion became a popular note-taking app, known as an all-in-one workspace where users are able to customize their own way of thinking, planning, and writing. Many individuals, companies, and organizations use Notion as a way to collaborate and manage their work in a productive and efficient way.

For this project, we prioritized redesigning the navigation system mainly to improve the efficiency of the experience for all users.

During the user interviews, we observed and took note of where the users struggled. We compiled data onto a spreadsheet where we coded each user's performance on each task on a scale from 1-5, with 1 = completed easily and 5 = could not complete. With this data, we determined three main paint points:
‍
1. Deeper Levels    
‍
In the sidebar menu, as users access deeper pages, the page names become more truncated. In the breadcrumb menu, the deeper the user goes, page names are also truncated and intermediate levels are hidden, causing the user to become lost.

2. Orientation    
‍
For the sidebar menu, users found the progressive indentation to become quickly cluttered and truncated, causing confusion on what page they were on. Users were also uncertain about the function of the breadcrumb menu, as they struggled to connect the relationship between location of a page with it.

3. Discoverability    
‍
Users had a difficult time finding the 'Favorite' and 'Search' features, while also not understanding the function of Quick Find. In the sidebar menu, the lack of a hover function for page names and the option to toggle drop-down pages was unclear.

After forming a clear idea on the redesigns we wanted, we started working on mid-fidelity prototypes. Since we wanted to conduct usability testing with these, we decided to individually test each feature for a more controlled environment and examine the effectiveness of our redesigns.

We conducted a total of sixteen usability testing. Our prototype was divided by each feature we were testing with two versions, Version A was how the feature currently works in Notion and Version B was our redesign. Users were asked to complete a series of tasks, and before and after each task, we would ask them task questions where they would rate their confidence level on a scale from 1-5, 1 = not confident and 5 = very confident. For a more controlled environment, we tested half of the users with Version A first and the others with Version B first.

We preserved the progressive indentation of the pages on the sidebar menu as many users stated this feature as very helpful. However, currently as users go deeper into pages, the page names are truncated. We redesigned to incorporate hover state tooltips to display the full page name and decreased the indentation to allow for maximum readability, along with the replacement of chevron arrows instead of Notion's gray triangles.

To emphasize hierarchy, we created a color system of five shades of gray, where the darkest shade is the master page and gets increasingly lighter and repeats.

We substituted the 3 dots to “3 more” to show the hidden pages as an indication to users how many pages are within that section. Once users click on the “3 more,” our redesigned drop down menu appears with the entire list of the order of pages of how the user got to their current page. The gray boxes in the dropdown menu are the pages hidden within that section. We also added indentations and chevrons for a clearer understanding that all of the pages are embedded within one another.

We added new ways for users to favorite a page along with adding hover state tooltips to the Favorites heart icon to increase the discoverability if the function. We opted for a colored heart favorites icon for additional feedback and visibility.

We simplified the features in the top right-hand corner and kept the more frequented functions to decrease clutter and confusion. The addition of the circular "+" icon allows for a more intuitive way for sharing a page.

We moved the search feature to the upper-right hand corner for more familiar visibility which users located more quickly. We also added search suggestions to the pop-up search box to indicate to users that the function was for searching throughout Notion.

Throughout this process, we went through a lot of trial and error. Therefore, I learned that it’s always important to keep iterating and testing every prototype to see what is the most effective. Not every design was more effective, so just go back to the drawing board and try again.

With this project, our biggest challenge was the time constraint, as six weeks is a short time span to develop a big project, especially with working collaboratively remotely and on top of classes. Despite those difficulties, we were able to create a project while helping each other every step of the way, as this was most of our first UX design projects.

For future improvements, we could conduct another usability testing with our final prototypes since we did not have enough time to do so before. We would also like to expand on our features and the relationships between the new redesigns with the other features already present in Notion.