an image with the Voice Notes icon on the left, followed by three screens displaying different parts of the app.

Voice Notes

Voice Notes

Voice Notes

Voice Notes is a concept I designed after years spent growing tired of not being able to find a great voice recorder app on Android. There wasn’t yet an app that had an uncluttered, well–thought, modern UI, and there certainly wasn’t an app that would help you manage your recordings alongside things like written notes or other media. So, I decided to design an app that had just that and would allow you to write notes or time–stamped comments to accompany your voice recordings for your record or others. 

Voice Notes is a concept I designed after years spent growing tired of not being able to find a great voice recorder app on Android. There wasn’t yet an app that had an uncluttered, well–thought, modern UI, and there certainly wasn’t an app that would help you manage your recordings alongside things like written notes or other media. So, I decided to design an app that had just that and would allow you to write notes or time–stamped comments to accompany your voice recordings for your record or others. 

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 organization and filtering

For organization and filtering

a screen displaying the notes inside of a voice recording in Voice Notes
Notes
Notes

For writing anything you'd like to accompany a recording

a screen displaying comments in a voice recording in Voice Notes
Comments

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

a screen showing the audio trimming feature in Voice Notes
Audio Trimming

To clean up your recordings after you've recorded them

a screen displaying the choices of audio formats for people to choose from, alongside other settings inside Voice Notes
Audio Formats

To allow for a diverse set of use cases for the audio recordings

To allow for a diverse set of use cases for the audio recordings

Design Decisions

To streamline the main interface of Voice Notes, I took care to ensure that actions that were relevant to the app itself were kept in the bottom toolbar on the landing page, while actions that were relevant to the notes themselves were all contained in the card for the note. To help the record function stand out from the background, the floating action button (FAB) containing it is punched into the app’s toolbar at the bottom of the screen.

The note cards themselves display information relevant to the organization of the notes (date and time metadata and tags), as well as a play/pause button and a scrubber for controlling audio playback from the notes list itself. 

To streamline the main interface of Voice Notes, I took care to ensure that actions that were relevant to the app itself were kept in the bottom toolbar on the landing page, while actions that were relevant to the notes themselves were all contained in the card for the note. To help the record function stand out from the background, the floating action button (FAB) containing it is punched into the app’s toolbar at the bottom of the screen.

The note cards themselves display information relevant to the organization of the notes (date and time metadata and tags), as well as a play/pause button and a scrubber for controlling audio playback from the notes list itself. 

a screen displaying a list of notes in Voice Notes
a screen showing notes attached to a voice recording in Voice Notes

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.

Staying consistent with the bottom navigation in the landing screen, I introduced new interface elements throughout the app from the bottom of the screen. I used bottom sheets for most selections and a modified bottom sheet for adding a comment to your audio recordings. 

Staying consistent with the bottom navigation in the landing screen, I introduced new interface elements throughout the app from the bottom of the screen. I used bottom sheets for most selections and a modified bottom sheet for adding a comment to your audio recordings. 

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 Voice Notes color palette, on black and white

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.