Redesign concept: Standard Notes for Android

I have tried many note-taking applications so far (OneNote, Evernote, Simplenote, etc) but I always faced issues that made me look for a new one. Lack of availability on different platforms, slow reaction time, expensive subscription plans, lack of encryption, login issues, complicated user interface – these are just some of the problems I experienced.

A while ago I found Standard Notes, a simple, fast, secure note-taking app that syncs across all my devices and also has a free version with all the essential features.

Standard Notes app on different platforms

All in all it’s an amazing app, the best one I’ve tried so far, but I discovered some minor usability issues, so I decided to play around with it a little and try to make it even better.

In the following sections you can see how I’d change the app’s user interface.

1) List elements

Current version (red) on the left and my version (blue) on the right

Problem

The list elements can get quite big (in height) in the current version, which means that one can only see 4–5 notes at once (and it’s even less if you have a device with a smaller screen).

Every bit of information has a separate row: tags, title, the note’s body text (which is actually two rows) and the date when the note was last modified. Also, pinned notes get yet an extra row on top of the list element (with a bookmark icon which might also be frustrating for some people).

Another minor issue might be that the last modified date is quite long because it goes like this on each note: “Modified Sat, 28 Jul 2018 21:39” — making the user interface a bit crowded.

Solution

To make these elements a bit more compact I reorganised them a bit: I moved the date and the bookmark icon into the row of the tags on top. People might be even more familiar with this arrangement since other popular apps’ list elements (Messenger, Gmail, etc) show dates there as well.

Original list element on the left and the redesigned one on the right

I also simplified the date format by showing the day and the month only instead of the whole package. Of course users would be able to see all the details when opening a note or when long-tapping on an element.

As for the note’s body text, I’d only show one row by default and give the users the option to show two rows or hide it completely.

2) List features and actions

Problem

The first thing I noticed was how the search works: it’s more like an iOS pattern. Android users might expect something slightly different here.

Current search function

Another issue I found is about filtering. If you tap on the hamburger menu icon you get the sorting and filtering options — which is a bit odd, since users might expect that they will see some kind of a navigation there.

Filters and sorting options in the current version

The first thing that one can see in this side panel is the Sort by options. Next to the chosen option there’s a checkbox which usually indicates that multiple elements can be selected — but it’s clearly not the case here: you can only sort the list by one thing. Thus the checkbox might not be the best choice here.

As for the Tags filter, it might make sense to be able to select more of them at the same time, but unfortunately multiple elements cannot be selected.

There’s an other section here which gives place to the Show only archived notes option but it might not be the place where users want to find it.

Solution

To make the search similar to the ordinary Android pattern I added a magnifier icon to the app bar. Tapping on that icon would change the app bar into a search bar as it does in many other Android apps.

Redesigned search function

I mentioned earlier that the pinned notes get a bookmark icon on them which might cause some frustration. Simply replacing the bookmark with a pin icon might solve the problem quite well, but I was experimenting with another solution.

I kept the icon but changed its function: bookmarking a note won’t pin it to the top of the list. It would just add the bookmark icon. But I also added a switch to show bookmarked notes only — something similar to what Inbox does with the pinned emails.

Actions that might work better (redesigned version)

Beside the switch and search I also added a filter and a more (three dots) icon to the app bar because I believe that people might find what they look for easier with these. (Also, I removed the hamburger menu.)

Tapping on the filter icon would show a side sheet on the right with the sorting and filtering options. I replaced the checkboxes with simple checks so that users would understand the concept behind it.

In the other (three dots icon) dropdown menu I added the Archive notes and the Settings since these are actions that people probably don’t use on a daily basis, so it’s okay to hide them a little.

Long-tapping on a list element shows a bottom sheet, which I redesigned a little to make it more convenient. I added icons so people could find the desired action faster — just by taking a quick look at the icons.

I also added the exact date of creation and the date when the note was last modified with detailed time stamps.

Bottom sheets: current one on the left and the redesigned on the right

3) Composing and managing notes

Composing a note and actions in the current version

Problem

So, composing a note is pretty easy: you just type it in and the app automatically saves it for you. However I believe that people might have a hard time finding the share, delete, archive and other actions here since they are currently located on the Options screen that you get when tapping the tag icon.

New tags can be added with a floating action button on the Options screen (under the tag icon) — but in my opinion it’s not the best solution. People might wonder what exactly the FAB with a + icon on it is good for since there are different content types on the screen (actions, tags and a link).

Also, there’s no way to see when the note was modified or created here, which might cause some frustration too.

Solution

The first thing that you might notice is that I changed the app bar to white to make it easy to understand that we’re not on the list page anymore, but we’re “inside” a note.

The new app bar when editing a note

I removed the Compose title, because I believe it comes without saying. The All changes saved label shows up there whenever it’s applicable.

Also I got rid of the Options page completely and found another solution to manage the notes and the tags.

I added some of the most often used actions right on the app bar (bookmark and manage tags) to make them easy to reach. The other (three dots icon) menu would show the actions that I believe people don’t use that often (share, lock, archive, delete). It also shows the date of creation and when the note was last modified. The Get web editors promotion also got place here.

Redesigned screens of composing and managing notes

As for the tags, first I thought that it would be a great idea to add an extra row above the title with them. These would be so-called “choice chips” — users would be able to select many of them by (swiping horizontally and) simply tapping on them if they want to add multiple tags. It would be a shortcut to make it easier for people to access tags.

My first idea of how to manage tags (probably wouldn’t work well)

Then I realised that people usually add tags when they create notes, and they don’t change it that often. Thus highlighting it like this (with chips) wouldn’t be a good idea, because when it comes to reading or editing a note it would take up too much space and make people frustrated.

This is why I changed it back to the way it was, and added the tag icon in the app bar. The only change I made is that I got rid of the original tag icon and created a new one with a hashtag. It’s consistent with what we have on the list page: tags are displayed as hashtags.

Hashtag icon for managing tags

Tapping on the hashtag icon would show a screen with a searchable list of tags where people could manage them (add new, delete, rename).

Epilogue

First of all you need to know that I really enjoy using Standard Notes and I’m thankful for the team behind it because they are doing an amazing job!

I wasn’t tasked with creating this concept, I just had some time to kill and wanted to see how I could redesign my favourite note-taking app.

Please note that I didn’t do any user interviews or usability tests, these solutions are completely based on assumptions and my experience with how people perceive other products. Thus these solutions might be completely wrong and might not work in real life scenarios with real users.

Anyway, it was very exciting to play around with this concept — I learned a couple of things and had a lot of fun while doing so.

I hope that it might give some ideas to the creators of this app.