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.
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:
For organization and filtering
For organization and filtering
For writing anything you'd like to accompany a recording
To add a sticky-note to any moment of a recording
To clean up your recordings after you've recorded them
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
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.
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.
At the end of the design process, I explored using motion to help tie together some connections between the different pages throughout the app.
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.
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.
Clarifies meaning between the notes being introduced in the search process, including the search bar, note cards, and the transformed bottom bar.
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.
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.
Just a clean transition between the list states.
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.