Rapid Development of a
Simple Note-Taking App
OBJECTIVE & OVERVIEW
A new client has asked for a note-taking app à la “less, but better.”
CHALLENGE
This client has not worked with a UX/UI designer before, so they haven’t prepared any of the information normally received regarding UX deliverables, and since the request is urgent, it’s expected to be completed within this constraint. The client has requested high-fidelity wireframes for 5 screens so they can pitch the concept to their investors. They expect wireframes to be shaped by functionalism, meaning they are clean, simple, and are designed with “less is more” in mind.
SOLUTION
Dieter Rams gave us the 10 Timeless Commandments for Good Design, and I tried to adhere to at least a few of these when approaching this project. My goal was to make a note-taking app that was useful, aesthetic, honest and easy to understand, with as little "design" as possible without sacrificing beauty.
COMPETITOR ANALYSIS
Pressed for time, I kept my competitor analysis minimal, while still striving to be as thorough as possible. I turned to Apple Notes and Microsoft One Note for my main points of functional and stylistic reference. I’m a regular user of Microsoft One Note, mainly due to the cross-platform compatibility of the app (I can take a note on my MacBook Pro and it automatically syncs with my iPhone, iPad, or Android device). I also referenced Google for icon style and flare.
In terms of “less is more,” Apple Notes is about as minimal as they come. If you’re looking to take notes, that’s great—because that’s pretty much all it does. However, it’s lacking in visual flair of any kind. This minimalistic approach works perfectly for Apple’s brand, but the client for this project isn’t Apple, and minimalistic functionality doesn’t have to translate to a drab, uninviting style.
Microsoft One Note
Microsoft One Note, on the other hand, is loaded with bells and whistles. There are notebooks, and within the notebooks, there are color-coded tabs, and within the tabs, there are individual pages… Excess features and choices aren’t only confusing to users, they also can take a toll on how useful or great your app can truly be. Don’t get me wrong, it works, once you understand where everything is and what everything is intended to do, but it can be a tad overwhelming when all you want to do is take down a simple note or make a grocery list. However, in regards to the note-taking interface, itself, it's clean and simple and organized quite nicely.
Apple Notes
WIREFRAMES
The wireframes came together quickly and organically, first as low-fidelity paper sketches, and then as digital mid and high-fidelity wireframes. The required screens were rather simple, so the iterations were few. The most noticeable iterative changes would come later in the form of colors and textures in the final UI.
 |  |
|---|
VISUAL INSPIRATION
Inspiration can come from many sources, and for me, it's often found in my everyday life. In this instance, one of my main sources of inspiration was a vintage 1960s era typewriter that I inherited from my grandmother. With this in mind, I decided to use a typewriter-esque font for the main headers, and slab-serif fonts are perfect for such a task. Based on the two main competitor apps that I examined, as well as a handful of others that received a cursory glance, I decided to stay on trend and use a clean sans-serif typeface for the main notetaking section of the app. For colors, I decided on a bold pairing of salmon and blue, which scored well in a preference test through UsabilityHub.
A/B TESTING
Still pressed for time, this simple usability test was the only real user testing I did before presenting the requested screens to the client. That said, the results were positive and I was able to apply this style and coloring to the rest of the screens.
STYLE GUIDE
The client requested "less, but better; this didn't mean I had to sacrifice beautiful styling elements. Styling elements also have a purpose: styling. When defining the styling elements, I gave careful consideration to how many I included and how to use them. As mentioned, I chose a bold pairing of salmon and blue for the colors and a combination of a slab-serif font and a clean sans-serif font for the typographical elements. I also borrowed the textured-paper style utilized by Apple's Notes, and the clean, fine-lined icon style found throughout Google's suite of apps.
FINAL UI
Below you'll find the final set of screens that were presented to the client.
 |  |  |
|---|