tl;dr
I led a small design team on a complete redesign of Evernote's web app, an app used by millions of people around the world every month. We dramatically simplified the user experience, focusing on core interactions, speed, and simplified navigation. Making it beautiful in the process was just icing on the cake.
Oh, and we were also recently nominated for a Webby.
"Evernote redesigned its note-taking web app, and it's gorgeous"
-The Verge
A bit of historical context
Circa 2011
When I began working on the web app in 2011, it was a pretty close clone of our Windows app, which meant the user experience didn't feel native to the web, some features were lagging behind, and the UI was in need of an update.
Through 2014
We made some substantial improvements over the course of a few years, but the UX still largely resembled that of a heavy desktop app, rather than a lightweight, modern and native web app.
Our primary goals of a redesign
- Create an experience that is consistent with our other award winning apps.
- Be a great landing pad. Many users access Evernote on the web only after using our other apps. This should be a fluid experience.
- Be a great native web app. Take advantage of the platform, which means it is accessible everywhere, and focuses on light interactions.
- Focus on finding things fast and taking a note quickly.
- Speed. The app should load quickly and help people perform a variety of key actions quickly.
"The new version is so clean and uncluttered that it makes me want to take more notes, keep track of my day, post notes to social media, and attach more files to keep my day from spiraling out of control."
-Inc
A new simplified experience
Write, Find & Chat
When users are in a web browser, they are often working with multiple tabs open, may be on a public computer, or may have slow internet access. Focusing on quick, lightweight actions was the best experience for them as well as users coming from other platforms.
A focus on writing
We wanted a quick writing experience that allowed you to focus on writing without distraction. As soon as the browser loads, your cursor is in a new note, and all you have to do is start typing. It couldn't be any more simple than that. Once you start writing, the rest of the UI melts away, helping you focus on your words. Editing tools only show up when you need them, and other insertion tools are tucked away on the right.
Find what you're looking for - quickly
When a user goes to search for something, they have cognitively left their current context, effectively saying they can't find what they are looking for on the screen. We wanted to use this cue from the user to offer them a full screen experience to help them find what they are looking for in that moment. This full screen search experience clears away the clutter, but it also allows us offer more unique search suggestions and results in the future.
Browse your notes
Browsing is an important part of finding what you are looking for. I wanted the navigation to be super simple and clear. All of the core navigation was put into one sidebar. The sidebar is wider when the app launches, with labels so the core UI elements are always subtly reinforced (labels also appear on hover). At the top, you can see the three primary actions - add a new note, search for something you already have, or chat with someone.
Panels open and close with a delightful animation to show things like a user's list of notebooks. On a more practical note: after talking to our developers, I realized one of the reasons our previous app's slowness was the loading of big lists of things like notes, notebooks and tags. By not showing these lists immediately when the page loads and pulling them in via lazy load, we were able to see huge improvements in perceived speed, which is absolutely crucial for a modern web app.
Work Chat
Over 70% of people that use Evernote do so at work. When you are in the context of working on a project with someone else, being able to talk to that person easily is crucial.
We designed Work Chat to be a seamless experience right inside the content you already have. You work on something in a note for a bit, and then share it to a friend or coworker. They can comment and send you messages right away.
By removing the barrier between the message and the content of the message, users are able to have a much more fluid experience and get more done with more people.
