UI/UX Case Study: Notes App — What if you could use Notion to take quick notes offline?
I fell in love with Notion in 2020. So much was out of our control back then that having a tool that allowed you to organize every little detail of your life and work felt soothing and empowering at the same time.
And after stumbling upon all the Notion resources by Ali Abdaal and Thomas Frank I was hooked — I couldn’t shut up about how amazing Notion was and how much more productive I was when using it.
I still love Notion and I think it is one of the best tools there is to organize your work and personal life. However, we got out of the lockdowns and we started moving about the world again. And with that, my relationship with Notion changed.
For various complex technical reasons Notion does not support an offline mode. Up until this point, this was just a nice feature, an option to have, but with travel back in our lives, it is quickly becoming an absolute necessity.
Whether you are sitting on a plane with plane mode switched on, or enjoying an off-the-grid van life weekend on the beach, or having a bad internet connection while working from your parents’ house, not being able to access your data is one of the most frustrating feelings our globalized work life has to offer.
And this is the idea behind this project. I’m aware of the difficulties (or impossibility) a Notion offline mode presents to its creators, but a light note-taking app might be an elegant workaround to a problem we’ve all had as Notion users at some point this year.
Another issue the current Notion mobile app has, is how sluggish and complex it is. This makes it practically unusable for capturing quick notes on the go. This case study is just an idea of how this can be solved.
Description
A mobile-only app used for capturing ideas quickly and syncing them automatically with a Notion database.
My Role
- UX Design
- UI Design
Tools Used
- Figma
- FigJam
- Notion
Understanding the Problem
Notion is a great all-in-one platform for organizing your work and life. It’s almost the perfect tool to keep you and your team productive and in sync.
The purpose of this case study is to suggest a possible solution to the two major issues Notion has — taking notes quickly and accessing them offline.
Challenge
Notion can be used in many different ways — note-taking is just one of the many app functionalities. As a result, using the Notion mobile app to capture ideas on the go is slow and complicated.
The first challenge is to design a simple app for Notion users they can use to capture ideas quickly and effortlessly on their mobile phones.
Another issue Notion has, is the fact that it is an entirely online app. Offline functionality has been highly desired and anticipated by many users for years. Unfortunately, the way Notion is built might never allow a full offline mode without making serious engineering changes first.
This means that, for the time being, if a user does not have an internet connection there is no way for them to reliably access their notes. This wasn’t much of an issue when Notion first gained popularity during the lockdown, but it is now.
During the pandemic, users usually had a secure internet connection at all times. But now that global travel is picking up again, the lack of an offline mode might render the app useless when traveling.
The second challenge is to create a note-taking app that stores information locally and also syncs to a Notion database.
This might not be the ideal solution a full offline Notion mode would provide, but it will be a useful and reliable workaround that will allow people to keep using at least some of the Notion features when on the go.
Goals
- Imagine an elegant, simple and efficient way for Notion users to take notes on their mobile devices.
- Imagine an app with offline functionality and syncing options, so Notion users can access their notes at any time.
Requirements and Restrictions
- The most important requirement is to keep the app simple. Notion databases have an abundance of options such as filters, sorting, adding countless properties, etc. Since the goal of this app is capturing notes, not organizing them, not all of these functionalities will be needed.
- Another requirement is to take the user through an onboarding process that prompts them to choose a Notion database to sync with the app.
- The app should look and feel like Notion so Notion users don’t have to learn or get used to a new UI or design system.
Research & Analysis
As of July 2022, Notion had over 30 Million users around the world. Even if we assume that all these people live in the developed world and have an excellent internet connection, there’s still the problem with the overly-complicated process of taking a simple note.
To understand why the mobile Notion app isn’t great for taking notes on mobile devices, we need to take a closer look at the step-by-step user flow:
The simplest path is this: Open Notion → Open note database → Create note.
This sounds simple enough. However, the number of options available on and off screen is a sure way to lead even long-time Notion users to decision fatigue.
In addition, the Notion app loading times are sluggish and even the simple 3-step process takes approximately 20–30 seconds to complete. When the need to navigate within the database is added to this process, it might take a whole minute.
This might not seem like a lot of time but it is too long when you have an idea you need to jot down during a meeting and also when compared to other apps. Creating a quick note in Google Keep, for example, takes three steps and less than 10 seconds.
There are plenty of amazing note-taking apps out there. Each has its strengths and weaknesses and each user can decide what works best for them.
The goal of this case study isn’t to come up with a better note-taking app than those already available on the market, but to imagine what a great Notion note-taking app might look like.
The comparative analysis above provides us with the following conclusions:
- The note-taking process must be of 3-steps (Open → Create New Note → Write)
- The notes must be available offline
- The notes must be synced with a database in the Notion app so they can be opened on all platforms and devices and edited there
- The app must be free
- The app should have some organizing options, however, they need to be kept as few as possible. The Notion desktop app already offers great filter, tagging, sorting, etc. options, so the app doesn’t need to do the same.
Here are the simplified user flows for the one-time onboarding process and for taking a simple note.
Personas
Notion users are mostly students and young professionals aged between 17 and 35 years old. I have chosen two personas, based on several active content creators and YouTubers who offer insights into how they use Notion in their work and personal life.
I compiled two personas from all of them — one for a teenage student and another one for a successful content creator.
Molly — 19, Full-Time Journalism Student
Molly is a first-year journalism student. She is currently writing a weekly blog on Substack, pitching her articles to big-name newspapers and magazines, and lending her writing skills to several non-profit organizations fighting for LGBTQ+ and women’s rights.
Likes:
- Legible fonts
- Flash Poetry
- Van life and living off the grid
- Vlogging about her life at uni
- Connecting the dots between random events and ideas
- Activism and doing good
Needs:
- A place where she can store all her ideas and tell them apart
- Simplicity so she doesn’t have to learn how to navigate yet another complicated new app
- A way to work on her current articles offline
Hates:
- Wasting time on her phone when she can be writing or having fun with friends
- Unnecessarily complicated tech stuff making her feel dumb and helpless
- Losing ideas and work because of tech glitches
Mark — 31, Productivity YouTuber
Mark is a highly successful YouTuber. His main channel just hit 1M subscribers and he and his team are still producing two high-quality videos per week. Mark is currently traveling, writing a book, and looking for his next big adventure.
Likes:
- Minimal design
- Working paper free
- Traveling
- Using his time efficiently
- The freedom to work from anywhere
- Simplicity and clarity
Needs:
- To be able to capture ideas while in meetings, on flights, or anywhere else
- To be able to differentiate between video ideas and book ideas
- His team needs to be able to see his notes on the Notion desktop app so they can sort and edit them
Hates:
- Loading times and lagging technology
- Not having access to his information when the internet connection is wonky
- Wasting time looking for workarounds
Scenarios
Since Notion’s audience mainly consists of teenagers, this case study is focused on Molly’s persona. Nevertheless, I included scenarios for both Mark and Molly. Different as they are, they lead to the same two issues — lack of offline mode and too complex interface for taking a quick note.
The first scenario is Mark taking a note about a video idea he has shortly after boarding a plane from Singapore to Vienna.
The second scenario is Molly taking a super quick note about an article idea during an inspiring guest lecture.
Sketches & Wireframes
The app is made out of 22 screens. However, this is an MVP version — the final solution might require a few additional screens.
There are three categories: onboarding, notes and settings.
Prototyping a Solution
Design System
The main goal of this design system is to look and feel like Notion so the user doesn’t need to get familiar with a new UI.
Fonts
The app uses just one font — Inter. It keeps the layouts clear and clean. In Notion, a user can switch between three fonts — sans-serif, serif and monospace. However, the app doesn’t need this as a feature.
Colors
Notion uses six main colors on their website — black, dark grey, light grey, white, red and pink. The colors in the second row are for the category tags only.
Components
Buttons, icons, navigation bars and cards are the main components of this note-taking app. They follow the design used by the Notion website and the Notion mobile app.
The Solution
The final solution is a simple-looking but extremely useful app Notion users should be able to start using seamlessly and without any tutorials.
Mockup
The user experience begins with the onboarding screens, where the user is prompted to sign up, pick an avatar, and sync their notes with a Notion database.
Once the user is signed up and the notes app is set up to sync with a specific Notion database, the user can take notes by clicking the plus button. The 3-step note-taking flow applies here.
The user can add tags to each note, which automatically sorts them into categories. This is the only sorting available in the app. For more, there is always the desktop Notion app, with all its bells and whistles.
Favorites and Archived are also tags, that can be accessed directly from the home screen.
If a user wants to make changes to their profile or synchronization settings after the initial onboarding and app setup, they can do so through the profile icon in the upper right corner of the app.
There are three types of settings — account info, synchronization settings, and app settings.
Prototype
This is a simple test prototype. The next steps would be to connect all the screens, create micro animations showing all menu interactions, and to test the prototype with users.
Evaluation & Conclusion
Key Takeaways
- There are a lot of note-taking apps out there but they all have similar issues. Either they don’t sync with a desktop version, so there is no easy way to sort and edit your work, or they do have a desktop version and carry too many features from it to the mobile app.
- Most of us use our phones to capture ideas, not to edit large bodies of text and this is what the mobile version of a note-taking app should focus on.
- Even though it is unlikely an app such as this will solve the Notion’s lack-of-an-offline-mode issue, it would be a useful addition to the digital toolkit of any young professional seeking to improve their productivity.
Next Steps
This is an MVR version that, after vigorous user testing, can be expanded to include a dark mode, UI variations for people willing to experiment with colors, multiple database syncing options, and more. The only requirement for the app is to stay light, simple and true to the 3-steps-10-seconds note-taking process.
Conclusion
As a Notion user, and also a paying Notion customer, the decision to move away from Notion wasn’t an easy one. However, not being able to access my work offline was a deal breaker for me. I still love Notion and I hope an offline feature, be it as simple as this app, will be available soon, so I can return to an app that helped me so much during the last two years.
Thanks for reading!
