Design Focus

Voice Notes was designed to be a simple, straightforward app. Initially, however, I thought it would be great to have things like in-line media for notes, an advanced audio trimming toolset, an in-app sharing system that synced notes between users, transcriptions, and more. After sifting through all of those, I determined that these core features that would define the project:

Tags

For writing anything you'd like to accompany a recording

Comments

To add a sticky-note to any moment of a recording

Audio Trimming

To clean up your recordings after you've recorded them

Audio Formats

Design Decisions

Inside the note page, there is a waveform of the audio file displayed underneath the note’s title and date and time metadata. There are also buttons to edit the note by adding a comment, adding a tag, trimming the audio file, and exporting the audio file right beside a FAB for playing and pausing the audio. Underneath those controls are the written notes and comments to accompany the audio recording.

Motion

At the end of the design process, I explored using motion to help tie together some connections between the different pages throughout the app. 

Recording Flow

Creates a fluid transition connecting the new recording FAB in the landing screen to the stop FAB in the recording screen, finally to the FAB in the note screen. Also introduces the audio waveforms and note title, and connects them to the same elements in the note view.

Landing to Note

Helps enforce the relationship between the elements in the voice note cards and the UI elements inside the voice note view, like the FAB, title, and metadata.

Landing to Search

Clarifies meaning between the notes being introduced in the search process, including the search bar, note cards, and the transformed bottom bar.

Notes to Comments

There's very little side-to-side swiping in Voice Notes, but in this interaction the horizontal movement is emphasized to match that interaction. This prototype also shows the different interactions with the comment cards.

Note to Trim Audio

Makes a simple task of what could otherwise be a jarring, stock transition. Emphasizes the consistency of the recording waveforms and the action arrangement beneath the waveforms.

Edit List

Just a clean transition between the list states.

Visual Design

When I begin any design project, accessibility is a priority for me. I spend time early on making sure that the colors I use don’t just look great together, but also work well in contrast with each other and have their own uses on black and white. The primary blue contrasts very nicely on white, while the secondary green works very well on black. There are three shades of both the primary and secondary colors, and I swapped them in the light and dark themes for a high–contrast look.

The dark theme was originally going to be a dark grey theme, but late into the process, I decided to explore a blue version of the dark theme to embrace the very branded look of the app. In addition to bringing more cohesion to the color palette, this move also made the app look calmer and more inviting than the standard, cold grey backgrounds.

When I was crafting the personality of the app, I aimed for something that felt like a smoother, moodier version of Clippy from the old Microsoft Office suite. This inspiration was directly acknowledged in the empty state illustrations in the app. To add to the near–retro vibe, I used icons that felt like they were from the early 2000s or so, and used typography that gave it a sleek, but older look. The headlines all use Work Sans, and the rest of the type used Inter. In addition to selecting the typefaces, I wrote the code required to ensure that the implementation of the typography was as near to the original designs as possible. For shape, I decided to make use more heavily–rounded rectangles throughout the app’s design to replicate something I’d imagine is like the record button on a camcorder.