Notion Navigation Redesign — a UX case study
Design Interactive Fall ’20 Cohort Project.
Project Overview
Notion is a hugely popular note-taking and data management tool for both individuals and large corporations alike. However, not everyone finds it easy to navigate. Over the course of a six-week sprint process, our team redesigned Notion’s navigation system to make it easier for users to find the pages they need.
Our Team
Project Timeline
User Research
Literature Review
To conduct user interviews, we first needed to form a strong understanding on how Notion is used, as well as the existing UX guidelines regarding navigation.
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
With the information gathered from our literature review, we each conducted two to three user interviews, for a total of nine interviews. We sampled a range of experience levels with Notion, from completely new to very experienced. To better observe how users interacted with Notion’s navigation, I created a sample Notion workspace for our interviewees to complete tasks with. Interviews were conducted and recorded over Zoom, with the interviewees sharing their screen as they completed tasks.
Each interview was broken down into three parts:
- We started with background questions to understand the user’s experience level with Notion and what they use it for.
- 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.
- 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
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.
Pain Points
Accessing Deeper Pages
In the sidebar menu, the deeper a page is, the more the page name is indented and thus cut off, which greatly reduces readability.
In the breadcrumb menu, deeper pages between the master page and current page are hidden in a drop-down menu that users were unaware of.
Orientation
The progressive indentation of the sidebar menu quickly clutters up the menu, and hierarchy becomes unclear. Users could not easily determine what page they were on.
The page hierarchy shown by the breadcrumb menu was also confusing to users. Users struggled to understand the relationships between the locations shown in the breadcrumb menu.
Discoverability
In the sidebar menu, the option to toggle the drop-down menus by clicking on the small triangles was unclear. Users also had difficulty discovering the Quick Find search feature in the sidebar menu and the Favorites feature in the upper right-hand corner of the page.
Ideation
After analyzing our pain points, we decided to focus on four features to redesign and/or improve upon. At this point, we also made the important decision to work within the current UI guidelines and structure of Notion. Countless users have already built countless pages in Notion, and had this been an actual project for the company, the current UI would definitely have been crucial. Thus, our redesigns should look coherent with and function seamlessly with the other existing features.
1. Sidebar Menu
How might we make the sidebar menu more discoverable and usable for accessing pages?
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.
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.
2. Breadcrumb Menu
How might we make the breadcrumb menu more meaningful and useful for accessing intermediate pages?
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).
3. Quick Find
How might we make the Quick Find search feature discoverable?
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.
4. Favorites
How might we make the Favorites feature more discoverable?
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.”
Mid-Fidelity Prototyping
Now that we had solid ideas on what our redesigns would look like, we started fleshing them out in mid-fidelity prototypes on Figma. We knew that we would be conducting usability testing with these prototypes, so we first discussed how to best format the prototypes. We decided that we would test each feature individually, to achieve a controlled environment and better gauge the efficacy of our specific redesign.
Usability Testing
Structure
As mentioned above, we decided to test each feature individually to achieve a controlled environment. We compiled our prototypes to be accessible from a main menu. Each feature that users would complete tasks with had its own section with two versions: Version A was a prototype of how the specific feature currently works in Notion, while Version B was a prototype of our redesign. Each of the sixteen tested users was asked to complete tasks for each section, as well as answer pre-task and post-task questions (such as: Rate from 1–5: How confident are you that you have fully completed the task?(1 = Not confident, 5 = Very confident)). To further control any other external factors, half of the tested users would interact with Version A first, while the other half interacted with Version B first.
Analysis and Insights
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
We found that 81.25% of users preferred our design with hover state tooltips that showed the full page name, explaining that they could locate pages faster and more easily. On the other hand, when it came to how page hierarchy was shown, users were evenly split between the progressively indented menu of current Notion and the sliding+accordion style of our redesign. Users said the indentation was helpful for determining page hierarchy, but liked how clean and decluttered our redesign was. Our challenge now was to find a compromise between the two.
2. Breadcrumb Menu
Users reported the lowest levels of confidence in this section, still struggling to understand how the pages in the breadcrumb menu were related. Though some users were able to understand what our redesigned “3 more” meant, many were still confused by the pop-up menu that appeared, not realizing that the pages listed in the pop-up menu were the “3 more.”
While users appreciated the grey background behind the left and right arrows, they were unsure what to expect with the up arrow. Even after we explained its purpose of going “up” a level, users still could not grasp its meaning and use. Thus, the up arrow was removed.
3. Favoriting a Page
Users found our Favorites icon easier to notice and understand than the text “Favorites” of current Notion. However, we realized that the upper right-hand corner is still cluttered, with “Share” and “Updates,” which aren’t as frequently used. The text felt redundant, because both features could also be accessed from a menu triggered by clicking on the three dots in the very upper-right corner. How might we further declutter and increase the usability of this corner?
4. Quick Find/Search
When asked where they would expect a search feature to be, 87.5% of users responded that it should be at the top of the page. They preferred the upper right-hand corner location of our redesign and found it faster there. Users also preferred the visual look of our search bar, as it easily cued them into how to use the feature.
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
For our sidebar menu, we preserved the progressive indentation of deeper pages, because so many users during testing had specifically cited it as very intuitive and helpful towards understanding the workspace’s organization. The largest issue with progressive indentation is that more and more of each page is cut off. However, this is counteracted with our installment of hover state tooltips which display each full page name. Furthermore, we decreased the amount of indentation as more and more sub-pages are added, to allow for maximum readability.
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.
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
Looking back on our project, one of our greatest challenges was the time constraint. It was definitely difficult to manage such a large-scale project, on top of our schoolwork and the challenges of remote learning, all in just six weeks. However, despite not always being able to spend as much time as we’d like on certain phases, the time crunch spurred us to work harder and manage our time more efficiently. I learned the value of clear and open communication, especially during evaluations of our ideas and in the face of pressing deadlines.
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.
