I love Evernote, even though it's been getting some bad press lately, it is still the most versatile note storage system I've found. To flex my UX muscles I'm putting together a version that makes sense to me, a long time user of the mobile app.
Evernote is a great tool for tracking notes, images, thoughts, receipts, etc. I've used it for years since it's beta in the mid-00's. They have made great strides in the web and desktop apps over the years but I have always had a problem with the design of their mobile app. Mobile to me most of the time means in the car driving to and from work. It's around an hour for me, so it gives me time to collect my thoughts, record any todo's into my GTD system, and wax poetic on any subject.
Look at the image on the right - finding and tapping the tiny record icon is a dangerous distraction when driving a car.
I can honestly say I nearly had an accident trying to record a note using Evernote's app. So what I needed was an app that just made it safe and easy to record my notes into Evernote without potentially ending my life. (That is how our app SoundEver was born; check it out if you want the best way to record notes into Evernote.)
So what can we do to make one of my favorite apps better? Take a design journey with me as I try to resolve my issues
with Evernote, the mobile app.
Note: This is for the iOS version of the app only - had to start somewhere.
1 - Examine and Document Existing Features
My first task when I'm redoing a mobile app is to list out all it's elements in a spreadsheet. I want to see the scope of commands before I even consider what has to be done to make the app better for the customer. The original builders had those features in the app for some reason, so I investigate all aspects of the existing app architecture before I do anything else. Typically I'll use a spreadsheet for this as shown below.
I create this spreadsheet so I can wrap my head around all the things the app can do, and to look for duplicate entry points, redundant commands, and unwieldy menus and navigation structures. It is amazingly effective, especially when revamping websites that have "organically" grown into too complex and disjointed experiences based on multiple designers and/or no style guide. (I liken these sites to childhood treehouses, made up of old doors, window frames, and wood from a multitude of sources.)
Once I've studied the layout and feature set, it's time to decide what I really need in a mobile Evernote app.
2 - What are the Customer Needs?
This was the easy part in this case because the customer is me! I just don't like the tiny nature of the New item buttons, the difficult access on my iPhone 6S+, and the layout, which is awkward to use in one hand, especially on my iPhone 6S+. So I started culling the features I just don't need on the mobile version of the app Evernote has made the classic mistake of trying to cram every desktop feature into an interface that demands simplicity and extreme feature focus. For example, if I'm driving my car, I want to be able to barely glance at the app and start recording, or not at all (again, see SoundEver for iOS, where it has hands off recording features).
My basic needs for Evernote in priority order:
Record notes while driving and have a way to quickly switch notebooks and/or tags. So I can record ideas for work, thoughts for the books I'm writing, etc.
Look up stuff when needed (not when driving usually) for any reason in any place.
Take notes on a blank note page.
Review (read) notes and articles I've already stored in Evernote when I'm stationary.
That's it - other users might want to organize on the go or write long notes, but I find that cumbersome on the small form factor and rarely do it. And that's the key way to discover what you need to include in a mobile app - frequency of use. I think the late comedian George Carlin did a great bit about "stuff" (starting around 2:30 minutes in the video) that explains the way to narrow down what you need in a mobile app.
By the time end of the segment he has ONLY the essential stuff. In that analogy, his home is your desktop, and his friend's "friend's house on the other side of the island" is your mobile app.
3 - Whiteboard Sessions & Paper Sketches
Usually when I'm working on a brand new feature or product, there is a lot of time spent on conceptualizing and ideation (not sure where the word "ideation" comes from - I guess people were looking for a new word for conceptualizing). However if a product is already versioned and I'm just improving it, I tend to work directly with Sketch or proto.io or whatever prototyping tool I am currently investigating. (As an aside, I'm starting to review the latest versions of all the prototyping tools in other blog posts).
So for my Evernote Mobile Redux, I just took screenshots of each of the apps screen views, and used Copied or AirDrop to put them into Sketch.
For each screenshot from the EN app, I started to create a new version underneath it on the Sketch canvas. Then I can make artboards out of my revamp views to test on my iPhone. For quick view to view artboard linking in Sketch, Invision has added prototyping ability of a sort to Craft, their Sketch plugin. It is in beta as of this writing, and is pretty basic but for a free plugin for Sketch it works pretty well - you can connect your iPhone and just start viewing artboards linked together with various transitions.
4 - Wireframes and Prototypes
If I had done sketches or taken pictures of whiteboards as my first step for this project, I would have either done wireframes in Balsamiq or any one of the dozens of wireframe tools out there, or just used monochromatic representations of the whiteboards/sketches after pasting them into Sketch or OmniGraffle, for example. However this was not necessary for Evernote Mobile Redux, as my work in Sketch provided me with the resources I needed for my final app prototype.
For full blown live app prototyping I used proto.io because their new version 6 is excellent and took the lead from UXPin in my opinion. (My blog review of proto.io is here.) Using the prototyping app in conjunction with their iPhone app gives me real world validation to let me know if my new version of EN mobile sucks or not.
I created the following prototype in proto.io which has great sharing and embedding features. (This is a snapshot version, meaning as I work on the original it will not update in this post.)
My thought here was to make the new menu movable - different hands and different phones can take advantage of it.
Press down on the menu bar and a tool tip appears letting you know you can move the menu bar.
Once the tooltip has appeared you can slide the menu up and it will stop and drop above the Recent Notes item.
Drag it down again and it will be put back in it's original place. Keep in mind these are rough prototypes that I use with their app on the iPhone.
NOTE AS OF 16/11/22 - for some reason the prototype stopped responding as it should, which flies in the face of my positive review for Proto.io. But I'll investigate when time permits.