Voicenoted.

Hack the North is the largest hackathon that occurs annually in Canada. During this year's virtual weekend-long event, I collaborated with 3 other individuals to build a digital product within the time constraint of 36 hours. As a team, we worked together for the first time to ideate the product, create the prototype, implement the functionalities, and finally present our pitch.

After some secondary research, we identified an increasing trend in audio-based learning and content consumption. In fact, 74% of users state that they go to podcasts as a resource for learning new things. As such, we decided to focus our project on the question:

Due to the limited time constraint of the hackathon, conducting primary research did not seem feasible. Instead, we discussed our experience with audio-based learning among the team in order to brainstorm our solution. A common pain point is brought up:

Notetaking has long been an integral part of the learning process, however, there has not been a convenient way for people to take notes on audio format of information. Most platforms simply do not have a way for users to record meaningful clips of audio content, nor to integrate these clips into their customized notes.

We began to imagine a way to seamlessly integrate the functionality of notetaking into audio-learning experience. A mobile-first application is decided upon, as most users listen to podcast through their mobile devices. From here, Voicenoted — an audio notetaking mobile application — is ideated.

The main functionalities of Voicenoted are listen, write, discover, and organize. The user would listen to a podcast episode as they would with a typical podcast app. Once they hear a passage that they want to take notes on, they can record the timestamps create a customized note on an audio passage, called a voicenote. The voicenote is then organized into the user's personal library and available to be publically shared for others' discovery.

Three tabs are created to capture these functionalities. For each tab, a specific design question is asked:

The Listen Tab allows the user to listen to podcast episodes and write voicenotes. Since audio-based media is excellent for learning while multitasking, users will mostly likely be engaging in other activities. As such, we wanted to ensure that the notetaking experience is as conveneint as possible by ensuring that it could be done within a few clicks. We imagined 2 scenarios in which the user will be creating a voicenote. Depending on their situation, one could either create detailed notes immediately, or simply mark the timestamp and stash the voicenote into draft for later edit (ex. after they finish listening to the entire episode). With the transcribed audio clip, users can add text to an existing page of notes or create a new page to start taking notes. Audio transcript will be automatically transcribed with the podcast name, episode, and timestamp displaying underneath. However, if there exists an error in the generated transcript, user could edit it.

All voicenotes are organized in a Library tab. Initially created voicenotes are automatically added to a folder for the podcast ep or a drafts area, user can move them into other places later on. We considered that two of the most helpful ways to organize the voicenotes are by chronology, and according to the episode it cites from. Users can automatically load all the audio clips from a podcast episode into one document. Other than that, one can also create customized albums to organize their voicenotes in the way they desire.

We imagined that community-based learning can be facilitated if a user can make a voicenote public and the browse through other people's notes. For the Explore Tab, user can discover new episodes to listen to as well as discover voicenotes created by others. It also helps to include a frequency map to show which part of the podcast is mostly frequently noted by other users, so that one can jump to the most important sections of the episode. The voicenotes are sorted by popularity, and a user can easily bookmark a note they found interesting.

Having defined the lofi views, it is time to decide on the visual elements.

From the external inspirations gathered, we noticed that most color palette of these podcast apps fall on the dark or light end of the spectrum. For our application, we decided to incorporate lighter tones to combine of a sophisticated interface and soothing reading + noteteaking experience. For instance, a warm beige as the background colour and a forest green for the primary accent deliver a refreshing and composed visual effect.

Nunito is chosen as the Logomark font for its round terminals. From there, we also designed our app icon, which mimicked the shape of audio waves.

From here, we are able to flesh out our high-fidelity wireframes.

After designing a thorough prototype of the app, we managed to complete all our core functionalities using React, Node.JS, Express.JS, and Google Cloud Firebase. The final demo can be viewed here.

We worked as a team for the first time this weekend! We’re happy that we were able to delegate the work according to our different strengths and build a project over such a short period of time.

If given more time, we hope to conduct additional user research to streamline the voicenote creation, editing, and sharing functionalities. Laptops and desktops are popular note-taking devices, so we also want to refine our desktop app. Additionally, we want expand our potential use cases beyond podcasts and audiobooks, such as lectures and videos. Lastly, we also want to look into potential ways to integrate voicenoted into other podcast and audiobook platforms, such as Apple Podcasts, Spotify, and Audible. ✨