AudioFile
Creating a more feature-rich voice memos app
The Problem
The stock Voice Memos app in iOS works well, but is 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, say, 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.
The Idea
I thought about all of these issues and came up with a wish-list of features that would solve my problems:
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 add photos as well as text to 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 excited I was about the prospect of an app that had them, so I decided to dive into the project.
Research
First, however, I wanted to make sure that there wasn't already an app out there that did what I wanted. When scouring the App Store looking for such an alternative, I found plenty of options, but nothing that fit what I had in mind. They generally fell into one of two categories:
Recording Apps
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.
Notes Apps
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.
Design
Features
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 together all recordings for a particular work. This could have just been done with tags, but I liked having separate ways of designating attributes (which is how I've most often seen tags used) and works.
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.
Layout
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 putting the button anywhere else could pose a problem whenever the keyboard popped up, obscuring or covering it.
Having established this as the anchor for the layout, I designed the home screen next.
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 allows users 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, and only underwent minor changes from initial concept to final design.
After that came the screen for an individual recording. This proved to be by far the most difficult part of the project.
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.
My first few attempts (seen above) successfully packed in all of the information and capabilities I was looking for, but ended up feeling somewhat 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 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 for generating them, so I did the work to add it in.
The screen 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.
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 ended up fitting 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.
Summary
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, and gotten good feedback from users. 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 audio editing functionality like that of 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.