Notion Redesign: Navigation for Productivity

Solution Preview

The full prototype can be found here.

Left-hand menu

Features: indentation, chevron arrows, hover state tooltips, color system

Breadcrumb Menu

Features: hidden drop down pages, indentation, chevrons

Favorites

Features: favorites under three dots menu and in left-hand navigation, colored heart icon, hover states

Design Process

01. User Research

Who are the users? 

Since navigation is one of the most used features of Notion on desktop, we wanted to understand how different types of users get around the website. Our primary method of research was in-depth user interviews. We conducted interviews with 9 different users of various experience levels, from new to experienced. We structured our interview script into three sections: background questions, navigation-specific questions, and tasks and observations. Background questions helped us to understand who the user is and why they use Notion. Then, we asked navigation-specific questions to gather insights on the users’ navigation habits and setups. Most of the interview consisted of tasks and observations on a test workspace we created (pictured below), to examine how users interact with the existing Notion navigation features and pick up on their pain points.

02. Synthesis and Ideation

Pain Points and Opportunities

From our user research, we were able to compile the data onto a spreadsheet where we coded our videos based on a 1-5 rating scale. We gave a score of 1 for tasks that were completed very easily and 4 for tasks that were seemed to be difficult. 5 was given for any tasks that the users could not complete. From this data we found three main pain points:

• Levels:

  • The left navigation bar does not communicate levels very easily. Users have to click through multiple levels in order to reach intermediate pages. In addition, as users click more pages open, the names of each page are progressively truncated so users can no longer see the full name. Overall, this progression causes users to have difficulty understanding what level they are on and how to navigate through the levels when they cannot see what they are clicking into.

  • The breadcrumb menu has a similar problem. As the user goes further into the pages, the breadcrumb menu becomes truncated and the levels are collapsed into an ellipsis. Therefore, users cannot tell how many levels deep they are by just looking at the breadcrumb menu.

• Orientation:

  • The left navigation bar also has issues related to user orientation. As stated above, users end up clicking through the pages on the left navigation bar to find one they are looking for. There is no way for them to quickly scan the bar and find what they are looking to help orient themselves. In addition, the deeper they are in Notion, the more the left navigation bar needs to be expanded to the right in order to see the progression of levels. Users did not want to expand the navigation bar which left them unable to full view each page.

  • The breadcrumb menu also has issues in relation to user orientation. With the ellipses in place, the breadcrumb menu confused users on the progression of the pages; they did not seem to make sense.

• Discoverability :

  • The current favoriting system is hard to discover. Users can click on ‘Favorite’ in the upper right hand corner, but complained that its placement was hard to find and did not make sense next to ‘Updates’ and ‘Share’

  • We noticed that the current Quick Find was also hard for users to find. First, the fact that the search function was called ‘Quick Find’ and not the standard ‘Search’ was confusing. Secondly, Quick Find was located in the left navigation bar, whereas most search functions are located at the top of the page.

  • The lack of a hover function in the left navigation bar affected its discoverability. The pages in the left hand navigation require a long pause in order for a hover to pop up, letting the user know the full name of the truncated page. Therefore, users ended up clicking through the pages because they did not know which one they were looking for. The process was time consuming and unnecessary.

03. Prototyping

Iterations

Because we were working with an existing design system, we started with a mid-fidelity mockup. Rather than coming up with sketches, we recreated the existing Notion home page with left hand navigation displayed. We played around with variations of indentation, hover states, and color-coding during this stage.

04. Usability Testing

Receiving Feedback

We conducted usability testing with our compiled prototype with all the new features, alongside prototypes of the old Notion, or Notion’s navigation as it is. We had 16 participants run through a few tasks in both versions, focusing on timing and self-reported ratings. We recorded the results in a spreadsheet for comparison.

05. Final Product

A New Notion

Favorites

We switched the star icon for a heart, due to the more familiar connotation. We found that the original favorite text blended in with the surroundings too easily, so we opted for a colored icon with hover states and a short pop-up message to confirm the completed favoriting action for additional feedback. The addition of the favorite option into the left hand navigation was based on usability testing as well: we saw users attempt to use the three dots menu first, before navigating to the upper right.

Left-Hand Menu

We preserved the indentation of the left-hand menu because many users had specifically cited it as very intuitive and helpful towards understanding the workspace’s organization. We kept the chevron arrows as these are more visually distinctive than the small grey triangles that Notion currently uses. We counteracted the truncating of the page names caused by consecutive indenting with our installment of the hover state tooltips that display the full page name. To further show hierarchy, we created a color system of five shades of grey. The master page is the darkest in value, and each level down is lighter in shade. This color system helps differentiate levels from one another, as well as show depth.

Breadcrumb Menu

We changed 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,” a drop down menu appears with the entire list of the order of pages of how the user got to their current page. We added indentations and chevrons for a clearer understanding that all of the pages are embedded within one another. The gray boxes in the dropdown menu are the pages hidden within that section.

Quick Find

From our user testing we found that the majority expected the search bar to be at the top, therefore we moved Quick Find from the left navigation bar to the top right corner of the Notion workspace. We found it helps users to more quickly locate and use the search bar. The next change we made was within the search bar itself. In order to make it more identifiable we changed the name from ‘Quick Find’ to ‘Search’ and we also widened the bar to make it stand out more.

06. Reflection