Short Case Study:
Noteworthy UX/UI Design

Crafting Noteworthy

Overview

Noteworthy is a minimalist note-taking app. It allows users to take multiple kinds of notes such as text notes, checklists and voice notes while keeping everything as simple as possible.

The design brief for this project was posted very short notice and had to be finished within a few hours. There entire process including the animations took around 8 hours.

Contents

Click on the keyword to get to this part of the case study directly.
Low-Fidelity WireframesMid-Fidelity WireframesMockupsInteraction

Purpose and Context

The project was completed as part of the CareerFoundry UI Design course.

Design Brief

A new client has asked me to build a note-taking app à la “less, but better.” This client has not worked with a UI designer before, so they haven’t prepared any of the information I normally receive regarding UX deliverables, and since the request is urgent, I needed to work within this constraint. The client has requested that I deliver high-fidelity wireframes for 5 screens so they can pitch the concept to their investors. They expect the wireframes to be shaped by functionalism, meaning they are clean, simple, and that I design with “less is more” in mind.

Tools

The project was engaged with the help of the following tools:

  • Sketch (Wireframes, Final Designs & Mockups)
  • Flinto (Interactions)

Low-Fidelity Wireframes

In this project time was crucial and nearly all the time needed to be invested into the deliverables. Therefore I began sketching very low-fidelity Wireframes to have the ability to ideate quickly and try out as many ideas in a fast pace. When finished, I already had a basis for my mid-fidelity wireframes that I could build on – this saved me a lot of time. The pictured wireframes are the very last ideation of what I came up with in this phase.

Mid-Fidelity Wireframes

As previously stated the low-fidelity Wireframes already gave a basis to act on quickly and therefore the creation of the mid-fidelity Wireframes didn’t take a lot of time. These wireframes were mainly used to check out the usability of the app on a phone screen. This revealed some crucial points that would influence the final designs.

Final Designs

The UI for this app was supposed to be as minimal and functional as possible. With feedback and testing of the mid-fidelity wireframes in mind a few elements were heavily changed for the last design stage.

One example is the navigation menu and the included submenu that lets users add new notes. While the first idea of having a backdrop and a small context menu above the button was a viable option, the disruption from the mainscreen felt too hard. The new version features a rotating menu that keeps the disruption from opening the menu at a very minmal level while still being noticeable enough so the user recognizes a change on the screen thanks to the background color of the menu.

Another small example is the delete button that slides into the screen when making a swipe left gesture on the note the user wants to delete. The touch area for this button was too small in the first two wireframes and therefore was enlarged for the final design.

Interaction

To give the client an idea of the behavior of the app, I also included two animations that would visualize the interaction much better than static screens can.

Rotating Menu

Deleting a Note

Thank you for your interest!
Do you like what you just saw?
Then let's talk!