Project Name: Life
Project Description:
Our project, Life, is aimed at reigniting childhood memories through sound. We wanted to play on the nostalgia that is increasingly common during the COVID pandemic, but to cover not just nostalgia for pre-pandemic days, but for the always-too-short journey of life. We wanted to use sound to trigger memories in every user who comes across our page. While we initially considered only having memories up to early adulthood (the stage our group is currently in), we wanted the site to be a holistic experience for all who visited it. Our concept is a ‘scroll’ through the walkway of life, where sound brings to life the pictures that at first glance, may not trigger as much emotion as a multi-sensory experience. Younger users might feel nostalgia for the childhood sounds of tv shows and computer games, while older users might connect to sounds of working life.
Process: When brainstorming for the project, the idea behind Life actually stemmed from the concept of nostalgia that is so widespread with the COVID pandemic. As the pandemic has made us long for the sound of an airplane taking off, or a crowd of people speaking at a party, we wanted to use this realization of nostalgia and apply it to an aspect of our life that we sometimes forget, the sounds in our lives that accompany our growth. As memories are often tied to visuals, we wanted to use this audio project to tie memories to a different sense; the auditory sense. This gave us the idea for Life.
In terms of the illustration, initially, we wanted to create a version of a male’s life and a female’s life, and the viewer could choose between which life they wanted to listen to. However, we felt this approach would be a bit exclusive. Thus, we decided to create only one life with a unisex-style illustrations. The final illustrations portray either a boy or girl so the viewers can all relate to the piece. We tried not to use blue or pink as they associate a lot with gender. Instead, we used neutral colors such as yellow and grey to make the illustrations seem more interesting. The small illustrations of the objects were inspired by the objects that we remember/use throughout our daily life.
In terms of the audio, deciding on the sounds which we wanted to collect was fairly simple. Although we all grew up in different backgrounds, surprisingly, we had some common denominators for sounds that took us back to particular moments in our lives. The process of collecting the sounds was slightly more complicated. The process of collecting audio was centered around our creativity as we intended to record as much of the audio ourselves as we could. When recording the audio, we found that sometimes the object being alluded to in the audio doesn’t produce a sound close enough to the ‘traditional’ expectation of that sound. This meant that sometimes using the actual object to which we were referring was not always possible. As a result, we had to often combine sounds to achieve a sound that clearly indicated an action. An example of this was the pill bottle popping open and medicine being taken out. The pill bottle didn’t produce the clear cartoon-like pop we were looking for, so we had to opt for using a bubble gum container instead combined with a crinkly material and more objects to create the effect. The combination of sounds in audacity was a little more complicated as we blended each sound into the other so creating fluidity between the sounds was important. We ordered sounds in a way that could create a narrative of sorts and blended them into each other. We avoided using a transition between each sound as this would disrupt the memory-inducing effect we wanted the audio at each stage to have.
In terms of the generic layout and the styling, we decided to present the narrative in a vertical scroll as an aim to help users travel with sound as they scroll. Because there were 5 main stages of life and therefore 5 images of a person, we felt that there would need to be a smooth transition between each of the images. In order to achieve this, we decided to place the smaller images in a separate div and let them emerge from the screen as they scroll through parallax scrolling. Different parallax speeds were added so that the small objects would appear on the screen at different times, as if they were flying mid-air. Going with the same color palette, we made different shapes such as circles and rectangles using CSS and assigned them different opacity levels. We also implemented the parallax scrolling on these to add more depth to the website and illustrations, and provide visual elements that connect the images well together.
In terms of UX, we tested the website multiple times and posed doubts and questions about every single element on the webpage. As a result, we added an element where the cursor would change to the pointer when hovered over clickable elements, instructions on the top for the cassette, animations on the cassette so that the users feel more inclined to click it, audio instructions as an introduction in the beginning, and scroll bar at the top so that users know how much of the narrative is left.
Reflection/evaluation:
Overall, the project came together quite similar to our initial idea. Had we had more time, we might have created a longer track for each stage, however, the short time frame might have ended up being beneficial as the sounds we chose are general enough to be meaningful to almost everyone. We ended up choosing the most valuable sounds that connect to memories, as opposed to creating an experience that might have been too specific and made our project less relatable and personal to the audience.
We also thought it would be interesting and meaningful to display the journey of life and the accumulation of memories through a progression bar fixed at the top of the page. This way showing the richness and significance of all of our memories and experiences. Initially trying to implement this idea we thought of making a year counter, that would increase as we scroll down the page ending up on the max year value that we would code in. However, we soon realised that using the scroll parallax the year count feature would pose problems as there is an unequal spread of space between the 5 stages of life (on the webpage). This results in the baby showing up as 15 years old (which might be a little too old for the average user) and a similar problem being displayed for most stages. Plus, us coding in a set number would force the user into some sort of bracket. Thinking about it, we realized that using similar code we can create a progress bar that would display the passage of time and doesn’t assign numerical values/limits to the stages of life.