What should a note-taking app from Proton look like?

Role: Sole Designer

Tools Used: Figma

Context

On April 10, 2024 Proton announced that they had bought Standard Notes with future plans to bring its note-taking services to Proton users. I created a concept for Proton Notes to examine what this would look like as an addition to Proton’s product suite.

Initial Thoughts and Research

Proton Notes’ aesthetic and layout needs to be cohesive with Proton’s other products like Drive, Calendar, and Mail.

First I analyzed the Information architecture of both Standard Notes’ web and mobile apps. Then I made a common element layout diagram of Proton’s products to see which elements are unified across the suite. To reconcile Standard Notes’ IA with Proton’s common layout and enhance usability some changes needed to be made.

Proton Notes’ aesthetic and layout needs to be cohesive with Proton’s other products like Drive, Calendar, and Mail.

First I analyzed the Information architecture of both Standard Notes’ web and mobile apps. Then I made a common element layout diagram of Proton’s products to see which elements are unified across the suite. To reconcile Standard Notes’ IA with Proton’s common layout and enhance usability some changes needed to be made.

Proton Notes’ aesthetic and layout needs to be cohesive with Proton’s other products like Drive, Calendar, and Mail.

First I analyzed the Information architecture of both Standard Notes’ web and mobile apps. Then I made a common element layout diagram of Proton’s products to see which elements are unified across the suite. To reconcile Standard Notes’ IA with Proton’s common layout and enhance usability some changes needed to be made.

Proton Notes’ aesthetic and layout needs to be cohesive with Proton’s other products like Drive, Calendar, and Mail.

First I analyzed the Information architecture of both Standard Notes’ web and mobile apps. Then I made a common element layout diagram of Proton’s products to see which elements are unified across the suite. To reconcile Standard Notes’ IA with Proton’s common layout and enhance usability some changes needed to be made.

Standard Notes desktop

Proton product suite

Changes

1. Proton Notes should have notebooks. Standard Notes uses a clever tag & folder system but it’s confusing to the average user. Notes go in notebooks, so Proton Notes will abandon the tag/folder system in favor of a notebook and tag system similar to Evernote.

2. On Desktop, allow for side-by-side editing of notes. The Proton suite features a sidebar similar to the Google suite. In it you can access Calendar, Contacts, etc. Naturally, Notes should be added so it is accessible while using Proton’s other products. But if we keep it in the sidebar when the user is using Notes in the main window, then they can effectively get a side-by-side view of different notes rather than jumping between notes as in a conventional note-taking app. This is useful for notes that have related information like a recipe and grocery list.

3. Get rid of note types. Standard Notes has Super Notes, Spreadsheets, Authenticator, and Plain Text note types. This is unnecessary and confusing. Spreadsheets and Authenticator can be moved into different products and Plain Text is superseded by the functionality Super Notes so it is the only note type that should be carried over into Proton Notes.

4. Use a universal search bar. Standard Notes separates searching for tags and notes (within the selected view) into different search bars. But users are becoming accustomed to a single search bar for everything. We use one search bar to enter website urls, search the internet, and, recently, even ask AI questions. Moving all search functionality into one text field is not only affordant but also unifies the layout with the rest of Proton’s products.

5. Create a new logo for Proton Notes. Proton needs a new logo for its latest addition to the suite. It borrows the design rules from the other logos to form a simple, note icon.

1. Proton Notes should have notebooks. Standard Notes uses a clever tag & folder system but it’s confusing to the average user. Notes go in notebooks, so Proton Notes will abandon the tag/folder system in favor of a notebook and tag system similar to Evernote.

2. On Desktop, allow for side-by-side editing of notes. The Proton suite features a sidebar similar to the Google suite. In it you can access Calendar, Contacts, etc. Naturally, Notes should be added so it is accessible while using Proton’s other products. But if we keep it in the sidebar when the user is using Notes in the main window, then they can effectively get a side-by-side view of different notes rather than jumping between notes as in a conventional note-taking app. This is useful for notes that have related information like a recipe and grocery list.

3. Get rid of note types. Standard Notes has Super Notes, Spreadsheets, Authenticator, and Plain Text note types. This is unnecessary and confusing. Spreadsheets and Authenticator can be moved into different products and Plain Text is superseded by the functionality Super Notes so it is the only note type that should be carried over into Proton Notes.

4. Use a universal search bar. Standard Notes separates searching for tags and notes (within the selected view) into different search bars. But users are becoming accustomed to a single search bar for everything. We use one search bar to enter website urls, search the internet, and, recently, even ask AI questions. Moving all search functionality into one text field is not only affordant but also unifies the layout with the rest of Proton’s products.

5. Create a new logo for Proton Notes. Proton needs a new logo for its latest addition to the suite. It borrows the design rules from the other logos to form a simple, note icon.

1. Proton Notes should have notebooks. Standard Notes uses a clever tag & folder system but it’s confusing to the average user. Notes go in notebooks, so Proton Notes will abandon the tag/folder system in favor of a notebook and tag system similar to Evernote.

2. On Desktop, allow for side-by-side editing of notes. The Proton suite features a sidebar similar to the Google suite. In it you can access Calendar, Contacts, etc. Naturally, Notes should be added so it is accessible while using Proton’s other products. But if we keep it in the sidebar when the user is using Notes in the main window, then they can effectively get a side-by-side view of different notes rather than jumping between notes as in a conventional note-taking app. This is useful for notes that have related information like a recipe and grocery list.

3. Get rid of note types. Standard Notes has Super Notes, Spreadsheets, Authenticator, and Plain Text note types. This is unnecessary and confusing. Spreadsheets and Authenticator can be moved into different products and Plain Text is superseded by the functionality Super Notes so it is the only note type that should be carried over into Proton Notes.

4. Use a universal search bar. Standard Notes separates searching for tags and notes (within the selected view) into different search bars. But users are becoming accustomed to a single search bar for everything. We use one search bar to enter website urls, search the internet, and, recently, even ask AI questions. Moving all search functionality into one text field is not only affordant but also unifies the layout with the rest of Proton’s products.

5. Create a new logo for Proton Notes. Proton needs a new logo for its latest addition to the suite. It borrows the design rules from the other logos to form a simple, note icon.

1. Proton Notes should have notebooks. Standard Notes uses a clever tag & folder system but it’s confusing to the average user. Notes go in notebooks, so Proton Notes will abandon the tag/folder system in favor of a notebook and tag system similar to Evernote.

2. On Desktop, allow for side-by-side editing of notes. The Proton suite features a sidebar similar to the Google suite. In it you can access Calendar, Contacts, etc. Naturally, Notes should be added so it is accessible while using Proton’s other products. But if we keep it in the sidebar when the user is using Notes in the main window, then they can effectively get a side-by-side view of different notes rather than jumping between notes as in a conventional note-taking app. This is useful for notes that have related information like a recipe and grocery list.

3. Get rid of note types. Standard Notes has Super Notes, Spreadsheets, Authenticator, and Plain Text note types. This is unnecessary and confusing. Spreadsheets and Authenticator can be moved into different products and Plain Text is superseded by the functionality Super Notes so it is the only note type that should be carried over into Proton Notes.

4. Use a universal search bar. Standard Notes separates searching for tags and notes (within the selected view) into different search bars. But users are becoming accustomed to a single search bar for everything. We use one search bar to enter website urls, search the internet, and, recently, even ask AI questions. Moving all search functionality into one text field is not only affordant but also unifies the layout with the rest of Proton’s products.

5. Create a new logo for Proton Notes. Proton needs a new logo for its latest addition to the suite. It borrows the design rules from the other logos to form a simple, note icon.

Proton Notes desktop concept

Mobile

On the mobile side, I created a new information architecture to be more cohesive with Proton’s mobile apps. I designed the Notes mobile app with a mobile-centered layout. The buttons for Search and Menu are still at the top but are accessible via swiping down or from the left edge, respectively, for quick access and easy reach.

Standard Notes

Proton Products

Standard Notes' mobile information architecture

Standard Notes' mobile information architecture

Common layout elements in mobile Proton apps

Common layout elements in mobile Proton apps

New Proton Mobile Information Architecture

New Proton Mobile Information Architecture

This layout is cohesive with the rest of Proton’s mobile apps. Although I did make one significant change that should be propagated to the other apps as well. Instead of the menu screen pushing in from the left, it moves in as an overlay. This makes the distinction between the menu and the main window clearer in dark mode. I also added a gradient at the bottom of the menu to indicate the presence of additional options outside of view.

Proton Notes mobile concept screens