NOTION App REDESIGN: REDESIGNING PRODUCTIVITY

Making productivity-hacking easy and accessible for all user abilities.

THE CHALLENGE

Demystify Notion for mobile users to improve app usability and encourage app retention.

  • UX Lead, Product research, heuristic evaluation, user research, insight generation, concept building, prototyping, user testing.

  • 12 Weeks

  • Identify a mobile app to improve usability.

    Conduct competitor research, user research and interface evaluation to identify opportunities for redesign.

    Create redesign and compare usability study metrics to quantify changes.

  • Figma, FigJam, Adobe Color, Zoom, GSuite

RESEARCH AND DISCOVERY

Notion markets itself as an “all in one workplace” that provides its users lego style building blocks to customize the product to each user’s unique needs. This high degree of flexibility and personalization means the app attracts users of all types and abilities. This mammoth undertaking has positioned Notion as a Billion dollar venture but users still report drastically different experiences on the desktop application vs mobile.

The mobile app was often reported to be buggy and overwhelming for new users. This effected the app retention with users often resorting to use the desktop version instead. A competitor study was also conducted with similar apps like Evernote, OneNote and Google Tasks. An interface evaluation was also performed to identify redesign opportunities based on best practices, design theories and frameworks.

Homepage Evaluation

“It's a good note taking app but it has many bugs and it's slow so I just use the desktop versions when possible” [Google PlayStore User Review, 2023]

“Fantastic on PC but awful on mobile. App won't let me highlight all the text I need. Cut and paste sometimes doesn't work, occasionally causing me to lose data. Click and hold to rearrange items only works before you select a line to type in, after which you need to exit and re-enter the page to be able to move lines. I love notion but the android app needs a lot of work on basic functionality.” [Google PlayStore User Review, 2023]

We were curious to understand what made this experience different and how might we improve it. To understand who our target demographic was for the redesign, we conducted preliminary research through user surveys and received 31 responses.

Further, a usability study was conducted with the existing product. A mix of quantitative and qualitative metrics like task completion time, error rate, user confidence and user satisfaction were used to evaluate Notion’s current offering through the user’s experience.

DESIGN PROCESS

OPPORTUNITY :

ideation

MOckups and high fidelity prototype

The app's visual language was kept consistent with the existing design system. Accessibility was ensured through contrast and color blindness tests as well as by incorporating labels for screen readers. A high fidelity prototype was created that was used to perform a usability study.

Usability study insights

  • Clear and easy way to start a new document.

    Dedicated way to access help through tutorials.

    Better breadcrumbs to show where each document is stored.

    Better icons and labels that are grouped to match a user’s mental model making discoverability easier.

  • Improve color and contrast for accessibility.

Notion offers a wide range of features that attract users of varying technology backgrounds and abilities. The primary issue we identified through our research was that Notion tries to replicate the desktop experience for mobile. This causes confusion and reduces discoverability of features especially for novice and intermediate users. To address this our team identified three user flows that could be redesigned:

  • Understanding how to use the app/Tutorials

  • Creating a document

  • Sharing a document

    With this in mind we hopped on to the ideation stage.

“A usability study was conducted with 8 participants who self identified as novice or intermediate users of productivity apps.”

Finished user flow

One novice user shared, “I finally understand what I can do with this app. I was so overwhelmed when I first got it but I like this version loads better. It’s very helpful for someone who is new to the app like me.”

One intermediate user shared, “I can’t believe how easy it was to take down notes. That’s mostly what I use Notion on my phone for and earlier it felt like such a chore. But now everything is right there and it is so helpful!”

Here’s what we changed to get rave reviews-

Group 13.png
Group 14.png
Group 15.png
Group 17.png

IMPACT

“The usability study results depicted an improvement in:

  • Ease of navigation (66% increase)

  • Ease of finding actions related to task (66% increase)

  • Task completion time for creating a document (93% reduction)

  • Text alignment (89% reduction)”

There were also zero drop offs compared to two in the original usability study. Users also reported overall feeling more satisfied and likely to come back to the app for future needs.

Future work

The visual contrast of the app was checked using Stark and Adobe colors. Text color used in the app is #91918E and background color is #F9F9F8. The WCAG 2.0 recommends a contrast ratio of 4.5:1 for regular text.[WAI/WCAG 2023] However, upon analysis the screen revealed a contrast ratio of 3:1 which needs to be improved. Further, color coding can be used to separate shared vs personal documents as well as to provide users the ability to use color to lend organization to files. These could be a potential avenues for future improvements.        

“This project was an interdisciplinary collaboration between graduate students from user experience design, software engineering and engineering management backgrounds. It was a microsimulation of how real projects are executed and helped me better understand how one can communicate ideas and design rationale to different stake holders.”

FINAL Thoughts

I truly believe that each project teaches me something new. Here are a few things I gained from this project:

  • In true design thinking fashion, we iterated through many versions of the product. Some features held up during our initial user study and others didn’t. But failing fast and often helped us narrow the gap between what we thought the user needed vs what the user truly needed.

  • Through this project. I often found that good ideas do not necessarily come from one vocation or experience. Having a team that had people who specialized in different fields helped me explore many different ideas even if they did not come from me. It helped solidify the importance of collaboration in this project as well as helped me truly put the user’s best interest at the core of the design process.

  • Starting this project with no clear brief with three strangers sometimes felt scary. But the design process can often be that way. All the unknown we waded through acted as a way to truly explore without any hesitations or preconceived ideas allowing us to be brave and creative. And in the end, I am truly proud of what we achieved.