Echo
Completed as a final project for Mobile App Development course.
Spontaneous audio recordings that help to live in the moment and remember life.
Team: Jay Won, Alana Depaz, Kellen Wang
Time Frame: 6 weeks
Tools: Swift, Procreate, Figma
Echo is a mobile application developed to help users live in the moment. Echos represent the past coming back at us, and I wanted to make this app to help us remember living through moments. At a random time each day, the user will be prompted to record an Echo, a 10-20 second audio recording tagged with its date and location. The app quizzes the user on their past recordings to increase mindfulness and provides features that log metrics related to their recordings.
I worked as a designer and developer during this project, coming up with the app concept and working to implement the app using swift.
Project Overview
Echo MVP Demo
This is my intensive walkthrough of the MVP for this project. See below for some of the breakdown and considerations that went into this project.
PROBLEM STATEMENT
How can we make it easy for users to save and re-experience memories?
One habit that I have while traveling is to open my voice memos app on my iPhone, and just hit record. I’ve found that there’s something about audio recordings that just unlock memories in a way that is hard to access in photos. While listening to my recording from a cab ride in Havana, Cuba from 2018 I can hear the radio playing afro-cuban music’s distinctive clave rhythm, I can feel the rough seat, and feel the heat of summer. Sound brings me back to Korea’s subway chime, a rainy day, or lunch with friends. These voice memo recordings have been a soundtrack to my life. This was where I realized that the ability to not just remember, but re-live moments, is such a valuable gift. This was the inspiration for this project.
After pitching this concept to my team, we decided to dive into the project.
DESIGNING FROM MY EXPERIENCES
DISTINCTIVE FEATURES
I quickly realized that our app’s advantage over other apps such as beReal and Voice Memos was its specialized interface and niche focus. The features that we came up with were based on 1) making it easier to record information than the voice memos app and 2) creating a focused interface based on sound’s unique features.
1) Pain-free data: Using automatic metadata to categorize recordings
The issue with the Voice Memos app is that, after you think of recording, you need to remember to stop the recording manually, and you need to type in the location and date. There is no automatic collection of data to remember what you are recording. We wanted to make sure that Echo 1) Tells you to record, 2) Keeps track of the locations, 3) Keeps track of the times, 4) Stops recording automatically, and 5) has an interface to log extra information easily.
2) Spontaneous recordings
Life is unpredictable, and as an app designed to capture life, it also needed to be unpredictable. BeReal is an app that uses this concept to its advantage, encouraging people to spontaneously take a picture. Echo strives to capture life in a similar way so that recordings are more authentic and true to the human experience.
3) Sound Specialization
Our niche was sound, so we wanted to think big about how we could use sound to transport a user back in time. Some features that we came up with were:
Quizzes: through random retrievals of past recordings, our users could quiz themselves to remember when and where they were when they recorded. Auditory memory requires mindfulness and the ability to imagine yourself at a given moment. By stimulating the mind of a user in this way, we can encourage them to remember the moments that they experienced.
While the app focuses on audio, people are by nature, heavily influenced by visual stimuli. This is why I had the idea to incorporate audiovisual elements: using soundwaves to create visualizations that link a visualization to the moment that you experienced. As an app based on immersion, Echo’s visual elements must connect to the experience of listening.
To summarize, Echo centers around:
1. Making it easy to document life
2. Encouraging the review of past moments
3. Creating a space centered around mindfulness and connection to sound
case study #1
BeReal.
BeReal is an app in which users can take a photo each day and see what their friends are up to by looking at their daily photo. This app has gained popularity as a social media app where users are encouraged to be a more authentic version of themselves.
Daily Notifications
Timer encouraging a user to capture the moment at hand
Friend Feed to encourage social interaction
Ability to look back at picture archive
Designed limitations to encourage authentic photos
case study #2
Apple Voice Memos
The Apple Voice Memos app has been a core app shipped out with iPhones since some of the earliest models. To record a voice memo, simply hit the red button to start recording.
Memos function around recording sound, specifically voices
Titling memos can be based on the time of recording, or with a custom name
Simple functionality and easy-to-use
Sound wave visualization while recording
It is easy to lose track of recordings in the grand scheme of your total recordings.
IMPLEMENTATION OF MAIN FEATURES
The main UI features that a user can click in the homepage are based around recording an Echo. Once a user has finished recording, their echo for the day will be filled in and shown to be completed.
A user can manually go back into their past and listen to their memories. Each Echo has automatically recorded metadata based around location, time, etc.
The app will periodically let the user take a quiz to try and place where they made a recording. This is a gamifying element that encourages the user to listen to past moments, as theres no value in just storing these recordings without making use of them.
Active States
While designing it was important to think about active states, and how to show the user that recording was being done. It was important to us to show that the act of recording was special, and we ended up using a pulsing shape to show this active state. There is room to explore in terms of generating special graphics for states of this app, but a deep dive into these features were beyond the scope of this project.
Sound Bytes
Sound Bytes is a feature based around being able to see your recordings in a visually compelling way. They are meant to add meaning to an audio file by analyzing basic features such as volume, pitch, location, and time of day, converting the recording into something that can be shared, and used to appraise different recordings without going into a recording and listening to each one. This means that the audio metadata should affect how each image looks, as seen to the right. Even location data may play into this feature, as seen with the naturesque color pallet of the far right example.
The challenge of a sound byte is being able to convert an audio file into something meaningful. In practice, this concept brings an audio file from .wav form and cuts it up such that it can be laid out on a square, then displays qualities of that recording into an image. While this feature would have added a lot of value, it was difficult to add it into the MVP due to the scope of this project.
ONE BIG PROBLEM: RECORDINGS AREN’T EQUIVALENT TO IMAGES
The idea of making daily recordings to remember moments is semantically quite similar to the concept of taking daily photos to remember those moments. However, I would argue that working with sound poses some unique challenges. Echo’s viability as an app not only hangs onto its functionality, but its intrinsic appeal with an audience. An app such as BeReal is inherently shareable and social, because photos are inherently shareable and social. While an audio can be shareable, it takes longer to process as you cannot ‘scan’ an audio such as you do with an image, and it is more difficult to share.
My solution to this idea is a ‘sound byte’, where recordings are analyzed and then given a shape + color. This is based off of different characteristics based on sound and location, such as volume, pitch, time of day, etc. This is special because it gives a unique ‘sound fingerprint’ to the audio that you record. This is a special and scalable idea because it can theortically be scaled in the form of weeks, months, etc. by summing your recordings for these time frames. A ‘sound byte’ is sharable, visual, and above all, has appeal to a digital audience, in the same way that a horoscope has an appeal to an audience. The byte can be used to determine the ‘quality’ or nature of a sound recording, and while not 100% accurate to a real life audio file, it is valuable because it gives a high level abstraction to something that is inherently hard to depict.
Lastly, the idea of an active state and inactive state is a concept we had to tackle in our app design. While taking a photo instantly captures the light waves at a small moment in time, recording an audio file captures the audio waves over a long period of time. During that downtime, we wanted to make sure that this idea of capturing audio was realized, and that the viewer could see how their audio was being recorded in real time, similar to how the audio wave amplitude could be seen while recording a apple voice memo. We chose to tackle this using animations via swift.
UNIQUE PROBLEMS: WORKING WITH SOUND; “SOUND APPEAL”
Balancing functionality with dreaming big was a challenge for this project. There are a lot of features that we weren’t able to develop fully, but it was more important to really nail the important levels of functionality for our MVP before going into some of the more creative aspects. There was a certain level of using the diamond design process of diverging out with ideas and converging in on sensibility based on the scope of time and project which I found to be valuable. Finally, as someone who was involved with conceptual designing of features and the actual coding of this project via swift, being able to make the leap from Storyboards and Figma designs to a MVP was a difficult, but rewarding experience. Overall, we pitched this project successfully for the entire class through a presentation.
CLOSING THOUGHTS