Creating a more feature-rich voice memos app
The stock Voice Memos app in iOS works well, but it's pretty limited. As a (very amateur) musician, I found myself frustrated by its lack of ways to add information to your voice memos. If I came up with a little guitar riff, and wanted to remember what fret I had my capo on, or what pedals I was using, the only option would be to cram it all in the title. This was arduous enough that I usually just skipped it, and after a while, I ended up with a sea of memos named "New Recording X" with no hints as to what they contained. This also made them hard to find later on. It could take a long time to track something down, and when I did find it I sometimes struggled to recreate what I had recorded. I figured that there had to be a better way to handle all of this.
I thought about all of these issues and came up with a list of features that, if added to the Voice Memos app, would address my needs:
- Notes: Adding notes to a voice memo would allow users to remember whatever they wanted about a recording. I thought it would be nice to be able to include photos as well as text in these.
- Tags: Adding tags would be a great way to identify voice memos by type. For my purposes, these would be things like riffs, melodies, chord progressions, etc.
- Filter/search: Being able to filter your voice memos by tag, or search for text in their titles and/or notes, would make it much easier to find and rediscover recordings.
The more I thought about these things, the more I was convinced that I needed an app that had them. The question was if that app already existed, or if I would have to make it myself.
Surveying the Landscape
When scouring the App Store looking for a Voice Memos alternative, I found plenty of options, but nothing really fit what I had in mind. They generally fell into one of two categories:
There were plenty of apps that offered robust recording capabilities, but this was really their main focus. They often lacked even rudimentary note-taking abilities, and even the ones that did have these did not offer tagging or other features that would make memos easier to find. These apps did not have much more utility – for my purposes – than the stock Voice Memos app.
There were also many apps with excellent note-taking and tagging features, but they were not centered around recording audio. Some even lacked this ability altogether; to add audio to a note, you had to import it from another app. Because voice memos were not their main purpose, creating one tended to be a relatively cumbersome, multi-step process. I wanted something that would be easy to use and ready to go when inspiration struck.
Not finding anything to my liking, I concluded that I'd have to make my own.
I started by identifying all of the key features that I wanted my app to have:
- Quick recording: Creating a new voice memo should always be one tap away.
Tagging/projects: As well as standard tagging, I wanted to include "projects". These would be a bit like folders, and allow the user to group all recordings for a particular work together. This could have just been done with tags, but I liked the idea of separating attributes, which is how I've most often seen tags being used, from projects.
Notes: Each voice memo should have notes that could include text and photos.
Filter and search: Voice memos should be able to be filtered by tags, projects, and favorites, and searched by text (i.e., their titles and notes).
Import/export: The user should be able to share voice memos through a share extension in the standard iOS activity view. They should also be able to import audio into the app to create a new voice memo.
The first requirement that shaped the layout was the ability to start recording with one tap at any time. I decided to put the record button in a header at the top of the screen that would always be present. This made the most sense, since having the button anywhere else would make it harder to account for the keyboard whenever it popped up, like when adding notes.
(photos of header with blank content below)
Having established this as the anchor for the layout, I designed the home screen next.
(photos of iterations of home screen)
This was pretty straightforward. It needed to include a list of the user's voice memos, and the entry for each needed to show the information that, at a glance, would be most relevant to the user. I put the "filter" button – the one that allowed the user to select tags, favorites, or a project to quickly view this subset of their voice memos – in a prominent place at the top of the screen, since this was a key feature of my app, and one that would differentiate it from other available apps.
I tackled the filter screen next, which was also relatively simple.
(photos of iterations of filter screen)
After that came the screen for an individual recording. This proved to be the most difficult part of the project by far.
(collage of all the different designs)
The challenge was to design to a screen that incorporated a lot of information (date, title, tags, notes, favorite status, etc.), and provided the ability to edit this information, as well as play back the audio, share the recording, and conduct other minor interactions. It needed to display all of this without being cluttered, confusing, or unintuitive.
(photos of iterations of first attempts)
My first attempts successfully packed in all of the information and capabilities I was looking for, but ended up feeling cluttered and kind of sterile. They looked overly functional, and even though the app was meant to be a utility, it felt boring to use. It didn't need to be awash in graphical flourishes, but it needed something. I had thought about including visuals of the audio waveforms, but didn't really want to since I was doing all of the coding myself, and generating these was beyond my level. However, adding them seemed like the best way to give the app some visual interest while sticking to its core functionality. I was able to find a third-party solution, so I did the work to add them in.
(photos of iterations with audio waveform)
It was beginning to look better, but I ran into a usability problem. With the waveform and player both at the top of the screen, the notes field was pretty cramped whenever the keyboard appeared.
I looked for different ways around this, including shrinking the player when the notes were being edited, but the notes still felt too constrained. I finally decided to move the player to the bottom of the screen, and this solved the problem. I had tried to avoid this because it meant that whenever the keyboard was visible, the player was covered up, but in the end I found this tradeoff to be worthwhile. The speaker audio button in the top left (which toggles between playing the audio through the speakers and through the receiver) was still accessible; if the user needed to quickly kill the sound, that would do the job.
(photos of version with player at bottom)
The final step I took was to group the least frequently used functions – changing the favorite status, sharing, and deleting the voice memo – behind a dot menu. I normally don't like to use dot menus, since they tend to hide features from users, and can be a sign that the design has gotten too complex or needs to be re-imagined. However, in this case I decided it was worth using one. It fit well with the rest of the elements on the screen, and the tradeoff between hiding some minor features vs. presenting the user with every bit of functionality at once was for the best. It cleaned up the screen nicely, and didn't sacrifice any capabilities.
(photos of final iteration)
I released AudioFile on the App Store earlier this year, and while it is still a work in progress, I have really enjoyed using it. It makes managing voice memos much easier, and I have found that I am recording them more often as a result. It still feels a little utilitarian for my tastes, and I would like to add editing capabilities like those in the stock Voice Memos app. However, I wanted to go ahead and get a working version complete and out into the world, and I am pleased with the result.