Notion Redesign

I’d like to preface I have no affiliations with Notion and this case study was driven by my personal interests.

2020 was truly an unprecedented year that revolutionized people’s way of working. As most businesses have transitioned to remote work, SaaS (Software-as-a-Service) tools are now more relevant and indispensable for better collaboration and productivity than never before. And here is one software that has experienced a surge in demand in 2020 — Notion.

A hero Image from Notion’s official page

Notion is apparently one of the most promising startups in the Bay Area now that hit a $2 Billion valuation mark with its all-in-one workspace app.

I’ve seen many people who come to admire Notion after exploring several productivity tools. I was one of them too. To be honest, I was a little obsessed with those tools in my previous career as I wanted to be called “very organized”. Before using Notion, I was a heavy user of Evernote, Trello, Google Calendar, Slack, Asana, and a number of other software.

However, there were rarely times when I found that a tool significantly boosted my productivity. What I learned from the past few years, if anything, is that there is no such thing as a “Perfect Tool” to cater to all teams since everyone has different tool experiences. I realized that what is more important is to find the right tools for the right purpose and enable as many employees as possible to adjust to it within a short time.

Overview

Notion launched its first foreign version in Korean on August 10, 2020

For this reason, I was intrigued by the news about Notion’s rapid growth in South Korea where they officially launched the first foreign-language version. It was rather surprising to me, as Notion was never considered an ‘Easy-to-learn’ software. I often used to compare it to learning Webflow, which takes some time to get used to, but once you get the hang of them, their value kick in. So I started to wonder how did Notion succeed in Korea, and while digging out that, I came across some common problems that users have.

My 4-month journey from initial ideas to design

What you’ll find below is a case study suggesting ideas that address Notion’s current problems and ways to improve as a better productivity tool for collaboration.

Observation

A screenshot of the Notion’s Korean community

Notion has strong communities over the world that enable user’s engagement. After exploring the Korean community for a couple months, I noticed that users are generally from one of two categories — either A. People in startups or B. People who are eager to learn new things and actively learn how to.

As someone with a background in B2B marketing, my initial assumption was that Notion is best for small teams compiling all document-type work into one place because when a team keeps growing, they would reach a point when advanced task-management is more crucial than the functionality of the tools.

But I was doubtful about B. If the majority of the users enjoy learning new tools, what about the rest who don’t? How difficult Notion is for those who are NOT enjoying learning new tools?

“Not everyone at your workplace is a Hipster.”

I remembered how many times I had seen myself or other co-workers struggling with learning new software. As we all know, while some people embrace new tools very quickly, some others dread even the thought of tech upgrades. I thought this might apply to Notion’s users too since not everyone at work is tech-savvy, open to changes, or ‘hipster’ to new trends. To further exploration of my initial assumptions and understand the user’s context, I conducted primary research through surveys and interviews.

Findings

I met first-time users of Notion for observing their behavior when getting started with the app

I received 78 respondents (51% Notion Users) from the survey and interviewed 6 users (3 Notion Users & 3 Non-users) to understand how and for what purpose they have used productivity tools and how they feel about them. Based on what I found, I could define 3 problems that Notion face:

  1. NOT EASY TO LEARN: The steep learning curve often overwhelms new users and discourages them from adapting to the tool.
  2. NOT CONVENIENT AT FIRST: Because of the platform’s huge flexibility, many users spend a lot of time formatting in various ways and experimenting with features. Even with a basic understanding of the tool, it can take quite some time to set up the format just as the user would like.
  3. NOT ALWAYS INTUITIVE: Many users lose track of where they are and often feel lost in terms of what exactly they are looking for. Some functions can also be misunderstood, and the navigation bar is not clearly visible.

I approached my redesign aligned with the three goals below, and each feature was developed while setting up the hypothesis and validation through users’ feedback:

  • Lower the entry barrier for beginners
  • Eliminate extra setup time for starting real work
  • Improve user interface for a better visibility

1. Lower the entry barrier: Onboarding

[Current] Notion starts with a very simple guidance page on how to get started

From the research, I found that most users felt frustrated when they first encountered Notion. Most of their first impression about the app was “Don’t know what to do”. The app starts with one simple page, which seems it was intended to minimize onboarding steps and quickly let users explore and learn by themselves. But shouldn’t we at least prevent users from getting overwhelmed before they even start using the app?

Hypothesis: A certain number of onboarding screens will help overcome the initial learning curve and ease users into the app.

[My Suggestion] How my design incorporated with the current flow.

I listed down the core functions that help users understand Notion by referring to the official page and observing user’s common questions. Also, by analyzing other SaaS apps’ onboarding screens, I decided that the final 9 steps for Notion are the most essential in getting users off to the right start :

  • Home (New feature)
  • Add a workspace
  • Template
  • Build up blocks
  • Create a page
  • Database
  • Embed and Import
  • Edit and style
  • Navigation

I created simple modals incorporating an animated gif and a brief guide to walk through the feature of the app following each step. Also, I made users can simply skip or stop each step and restart it whenever they want. See the final design below:

[Solution1] Onboarding Screens

2. Eliminate extra setup time for starting real work

Although Notion is one of the most flexible tools among productivity apps, I noticed its infinite flexibility can actually pose risk to some people. While interviewing users, I learned that people are inconvenienced by the initial setup, such as creating a dashboard and build up tables, as it interrupts their workflow in engaging in real tasks. It’s kind of “Work for Work”. Wouldn’t it be a bit ridiculous when productivity apps actually diminish productivity?

Too much flexibility can harm your productivity

[Current] How can I better organize numerous pages and workspaces?

I found that the Notion’s page-into-page concept can be confusing to some people until they find their own way to organize. Especially if you have tons of pages and workspaces, it’s going to be stressful to manage all pages and you would eventually need to group them into one single page — Home.

Home

Hypothesis: A default dashboard will help users quick start and minimize confusion.

[Solution 2–1] How to create a workspace

“Home” is a dashboard where a holistic view of all workspace is displayed. Many Notion users generally start the app from learning how to create a dashboard, I thought providing a top-level page will help users easily create and manage workspace and have a clear view of where they belong as a member or which workspaces they have created as a master.

[Solution 2–1] How to manage workspaces

The purpose of Home is not only to save extra time for setup but also to prevent disorganized pages that make users frustrating. I observed many users (including myself) making mistakes by misplacing their pages in private, shared, or public pages. These mistakes are mostly because of similarities in the permissions alert message among those three options. This would lead to situations where you accidentally shared something you shouldn’t or locked out something everyone needs access to.

So I thought that showing only one workspace at one time, which you can enter from the Home page, would prevent those mistakes and easing difficulty for managing to pile of pages.

[Solution 2–1] Users can turn the group of pages into a workspace

Users also can simply turn a group of pages into a new workspace. I think this would help when you have a myriad of page groups. By switching a group of pages into separate workspaces, you can achieve a clear content hierarchy and keep the side navigation organized.

Template

Notion’s various templates are a great resource that allows users to start and customize their own page. However, I noticed that many of them overlap, even when they had different names for different teams.

[Current] The current template page presenting the same Meeting Notes at all jobs

I noticed that people find templates by starting from the task itself rather from their roles or team. Whether you are a PM or designer, you may need to manage projects that require you to find templates for Project Management. In short, all you need to do is just browse the many available options and find the right one for you.

Hypothesis: A better way to showcase templates will help the user’s search.

[Solution 2–2] How I changed the template page

To improve these cons, I chose the Notion’s gallery view to provide more template options with the thumbnails. This will allow users to easily explore templates without clicking each toggle.

[Solution 2–2] How I changed the navigation

In addition, I re-organized the navigation by the user’s status and task categories. I think this would help to better search for a proper template.

My Template

[Solution 2–2] How to save a page to My Template

“My template” is a new feature through which users can save the page as a template. By setting a page at the top and saving it as my template, users can replicate it whenever they want without looking for the page to duplicate.

3. Improve user interface for better visibility

The below designs are intended to improve the current app into one that is more intuitive and provides clear directions.

Timeline (feat. Color labels & Subtasks)

Timeline is a recently launched feature that allows users to plot all their team’s work or personal projects chronologically. It’s one feature that many users hoped Notion would develop. But my first impression was that the timeline is too plain and empty. I hoped that it would be more intuitive.

[Current] What you will see at first when creating a timeline

In order to improve the overall look of the timeline to be easy to start and have better visibility for each task, I came up with adding “Color labels” as a new property that allows users to sort tasks by color tags. With the color labels, users will identify each task more intuitively without adding icons.

[Solution 3–1] Create a timeline with Color Labels and Subtasks

“Subtasks” is the other additional property users can use when creating a new card. One of the main issues of the current timeline is that it’s difficult to organize multiple subtasks. As you know, one project generally contains lots of subs/related tasks, but with the current view, It’s only possible by adding a parallel column to include databases of the tasks. So I wondered how I can display them easily.

How to incorporate the subtasks in the current timeline?

I approached to solve this by using one of the Notion’s features— Relations & Rollups for connecting data between two tables. I noticed it’s kind of an advanced feature that many users feel difficult to learn and even some users are not aware of. I think this would be great allowing the users can simply add more tasks inside of one project without creating any pre-made databases.

[Solution 3–1] How it looks with color labels and subtasks

Navigation

[Current] The navigation from Notion's webpage (Showing how to add to favorite page)

The chief complaint I heard while interviewing the non-user group was that the navigation is less intuitive. Also, there was a lot of feedback on how the search function doesn’t work well and how difficult it was to find what you’re looking for. So I felt to improve it too.

[Solution 3–2] My Menu on the side nav

As my design starts from Home, I added it with some key menus on the side. I then made sure that none of the pages in the workspaces would show up on the side navigation bar until the user enters one of them at Home.

[Solution 3–2] How workspace menus would show up

For the top navigation, I improved it with 5 icons to be more visibly striking so that users no longer need to find menus. I added a search icon alongside the one on the side navigation to help users search within a particular page.

[Solution 3–2] Top navigation with icons

I also included the arrow navigations on the pop-up modals, which is how Notion displays new pages. Since the current app doesn’t show a cancel button and arrows for pop-up pages, I noticed it’s difficult for some users to navigate pages back and forth. They didn’t notice they could click the breadcrumbs and wondered how to return to the previous page. So I decided to include the arrows to help users better navigate through the page.

[Solution 3–2] A pop-up modal with the top navigation

My Calendar

My calendar allows users to gain a holistic view of schedules from all workspaces. I understand that tracking scattered calendar databases would be frustrating and that users want to see all task schedule more intuitively.

[Solution 3–3] My Calendar

Once the user was assigned an owner for any task with a timeline, the task automatically integrated with My Calendar. I think this would help users coordinate all task schedules on one page. This would also function as easier navigation no matter how many pages there are by allowing users to go exactly where their schedule was made.

Conclusion

A part of my endless post-it notes-wall✌️

Redesigning the SaaS application was a whole different challenge from any of the other prior projects I engaged in. Beyond simply understanding how the current app works and what challenges users face, I had to deeply consider the exact context behind productivity tools and how I can incorporate features that smoothly complement the current design and ultimately improve users’ productivity and collaboration.

This project also allowed me to understand the value of my B2B marketing background in relation to UX design. My experience in dealing with various projects with different stakeholders was incredibly helpful in understanding users’ behaviors and sparking new ideas. I would also like to express my gratitude to all survey participants and the users who provided me with amazing insights.

Please feel free to share your opinions or provide feedback in the comments below. As a big fan of productivity tools, I hope that Notion will provide a more delightful experience for you that ultimately boosts your productivity.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Claire Kim

Claire Kim

49 Followers

a marketer-turned-product designer in SF. Currently @Cisco, previous@IBM. Find me @ clairekim.io