Notion Navigation Redesign — a UX case study

Design Interactive Fall ’20 Cohort Project.

Project Overview

Our Team

Project Timeline

Our timeline for the six-week sprint process

User Research

Literature Review

From Wall Street Journal’s review of Notion, we learned what makes Notion stand out from similar apps: it’s all-in-one. What previously would have needed multiple apps to organize, users could now manage with just one app. However, though Notion’s extensive features offer great flexibility, this consequently leads to a steep learning curve and confusion on how to use all the tools.

Next, UX Booth offered general rules for navigation design, explaining how 70% of users rely on navigation rather than just the search function, and thus a failure in navigation design decreases the discoverability of your content and features. Well-designed navigation systems are consistent and intuitive; users should know what to expect when they interact with features.

Using a UX guideline checklist, we identified the main features of Notion’s current navigation design: a breadcrumb menu at the top and a sidebar menu on the left, containing multiple drop-down menus and the search function.

Understanding Our Users

Each interview was broken down into three parts:

  1. We started with background questions to understand the user’s experience level with Notion and what they use it for.
  2. If users had experience with Notion, we asked them navigation-focused questions about their habits and to explain their workspace set-up. If comfortable, users shared their personal Notion screen.
  3. Given our sample Notion workspace, users were then asked to complete a series of tasks as they shared their screen. Each task involved interaction with the main navigational features we had identified in our literature review. This part constituted most of the interview and allowed us to closely examine each interaction to pick up on pain points while synthesizing our data in the next phase.

Synthesis

Affinity diagram for one of the users we interviewed

To begin finding patterns in our interviews, we used affinity diagrams to group related responses together. These were especially helpful for understanding our audience’s goals when using Notion (i.e. take class notes, organize lesson plans, etc.) and navigation-related habits (i.e. relying on the sidebar menu, ignoring the breadcrumb menu, etc.).

Next, we created a spreadsheet that simplified each prompted task into the navigational feature that was being targeted. We coded each user’s performance on a scale from 1 to 4 (with 1=Completed with no issues, 4=Failed to complete), focusing on their actions and taking notes on where and why they struggled. Using this method, we were able to determine areas that users struggled the most in and identify pain points.

An excerpt from our data synthesis spreadsheet; users’ performance on each task was coded on a scale of 1 to 4 (1=Completed with no issues, 4=Failed to complete)

Pain Points

Accessing Deeper Pages

Orientation

Discoverability

Ideation

1. Sidebar Menu

One main issue was the progressive indentation with each deeper page, which cluttered up the menu and cut off longer page names. With extensive research looking into similar menus, we learned about a sliding menus and accordion menus. Sliding animations clearly show hierarchy, and accordions allow users to expand and collapse levels freely. These could be combined to create a sleeker, more usable sidebar menu for Notion.
We noticed that Google Calendar’s drop-down menus used chevron arrows that had more distinctive open vs. closed states. These would be more intuitive than the small grey triangles Notion currently has.

Competitive analysis of similar sidebar menus

Since longer page names could still be cut off, our redesign also included tooltips, small text boxes containing the entire page name that appeared upon hovering.

Low-fidelity wireframe of proposed changes to the sidebar menu

2. Breadcrumb Menu

Users struggled mainly with the “…” that represented the pages existing in between the three pages shown. To help add meaning, we decided to change the “…” to “n more,” with n denoting the number of in-between pages.
To make the existing forward and backward arrows more discoverable, we added a grey background behind them. We also added an up arrow, for the purpose of moving up a page (i.e. from a sub-page up to its master page).

Low-fidelity wireframe of proposed changes to the breadcrumb menu

3. Quick Find

Quick Find proved to be a valuable tool for users to efficiently find desired pages, either by typing the page name or a keyword in the page into the search query. However, Quick Find is embedded in the sidebar menu and visually matches all the other tabs next to it. Thus, it blends in and is easily overlooked.

To increase discoverability, we moved Quick Find to the upper right-hand corner, where users would expect search features to be. We also changed its appearance to look more like a familiar rectangular search bar.

Low-fidelity wireframe of redesigned Quick Find

4. Favorites

Currently, on a Notion page, the Favorites feature is located in the upper right-hand corner in the same typeface, size, and color as surrounding features like Updates and Share. Similar to Quick Find, the Favorites feature is difficult for users to discover because it doesn’t stand out. To increase discoverability, an icon would be more distinct and recognizable instead of the word “Favorite.”

Low-fidelity wireframe of redesigned Favorites feature

Mid-Fidelity Prototyping

Usability Testing

Structure

Analysis and Insights

An excerpt from our usability testing analysis spreadsheet

After sixteen rounds of usability testing, we synthesized all the research in a spreadsheet similar to the one we had used for our earlier user research interviews. With these numbers and notes, we were able to extract the following insights that would help us develop high-fidelity final prototypes:

1. Sidebar Menu

2. Breadcrumb Menu

3. Favoriting a Page

4. Quick Find/Search

Based on these valuable insights, we then implemented changes to our mid-fidelity prototypes, developing them into our final high-fidelity prototypes.

The Final Prototypes

To emphasize hierarchy, we created a color system of five shades of grey. After some iterations of this color system in the sidebar menu, we decided that the master page would be the darkest in value, with each deeper page getting lighter, repeating every five levels.

The chevron arrows, indentation, hover state tooltips, and color system work together to create an intuitive and understandable sidebar menu.

Knowing from our usability testing that users couldn’t understand the breadcrumb menu’s hierarchy, we substituted the “/” partitions for arrows. By indicating a direction, these arrows are much more intuitive and users can better understand the hierarchy.

Users also have trouble understanding the pop-up menu in the breadcrumb, which lists out the intermediate pages between the three other shown pages. We redesigned the pop-up menu to also include these three shown pages, so that the relationships between all the pages would be apparent. The n intermediate pages are initially hidden under “n more,” and we gave them a grey background in the pop-up to emphasize this. We also used chevron arrows and indentation, similar to the sidebar menu, to reinforce hierarchy.

Next, hover state tooltips were added to the Favorites heart icon, to reinforce the user’s expectation of how to use the feature. We also added more ways to access the Favorite feature, within other pop-up menus that contained similar features.

We continued to simplify the upper right-hand corner of the page, implementing our decision to remove “Updates” and “Share.” These features are not as frequently accessed here and clutter around more used features. As the share feature involves the people who have access to the page, we integrated it into the circular avatars that already exist in the current design. This circular “+” icon is more expected in this new location and becomes more intuitive to use for sharing the page with more people.

Lastly, we polished up the changes we had implemented to Quick Find. We had learned from our usability testing that moving the search feature to the upper-right corner helped users locate it more quickly, and that giving it the look of a wide rectangular text box prompted users with what to expect.

Evaluation and Reflection

Another challenge involved the constraints of Notion’s current UI. We gave ourselves the constraint of improving Notion’s navigation while taking into account the real life context that thousands of teams and users have already established countless workspaces in Notion’s current structure. This was a critical constraint that heavily influenced how we approached our project.

If given more time to continue our project, our next step would be to conduct another round of usability testing on our most recently polished prototypes. We would also explore deeper into how our redesigns are influenced by the myriad of other features that exist in Notion, as well as how our redesigns in turn affect the other features.

We’re a student-run design consultancy @ UC Davis!