Role: UI/UX Designer, App Developer
Date: September 2018 - December 2018
Links: Website, Concept Video, Medium-Fi Prototype
Rechords was a quarter-long, three-person project that was created for CS 147: Introduction to Human-Computer Interaction. Assigned to the travel-themed studio, my team and I chose to focus on memories and emotional journeys as forms of time travel. After conducting interviews and going through the needfinding process, we came up with Rechords, a mobile application that taps into the emotional connection between music, memories, and locations.
At some point in your life, you must have been listening to a song that brings you back to a specific moment in your life. This relationship between music and memories makes up the core of Rechords, which allows users to attach songs to memories and locations, ultimately creating a music journal. Users are able to share their “rechords” (i.e. the combination of a song, a memory, and a location) with friends, family, and the public. Through this project, we hoped to provide people with a streamlined process of recording memories, giving people a better way to remember.
With our focus on emotional journeys and memories as a form of time travel, we began our needfinding, talking to a diverse group of individuals with the goal of finding a need that we could meet. During our needfinding interviews, we asked our participants various questions about memories, such as "what is your favorite memories and what makes you think of it?"
After doing our needfinding interviews, we defined some point-of-view (POVs) and how might we (HMWs) statements. For instance, one of the POV/HMWs we came up with goes as follows: "We met Jiamin, a millennial who chooses not to capture photos to remember her memories. We were amazed to realize that she doesn’t take photos because she feels it disrupts her ability to live in the moment. It would be game-changing to give her a non-disruptive way to capture her memories. How might we create a new way to capture memories that doesn’t include taking a photo?"
Next, we held a brainstorming session in which we jotted down as many solutions as possible. The idea for Rechords came from one of the solutions written for the previously mentioned POV/HMW statement. The solution was to provide a public playlist that allows people to associate music, memories, and places.
To gauge the interest in this solution, we created an experience prototype and conducted a few of user tests. We simulated a playlist-making app using paper and Spotify. We first had the testers write a song they associated with their current location and then the reason (i.e. memory) behind their choice. After “submitting” their entry, they were given a playlist of songs that others associated to the same place. If they clicked on a song, they were presented with the memory associated with it.
The three people that we had test our prototype enjoyed the overall concept and expressed great interest in reading others’ explanations for a song choice. Seeing their excitement for this idea encouraged us to proceed with the concept as our project for the class.
With confidence in our idea, we proceeded with initial sketches that allowed us to explore different ways to execute our solution. For example, we considered using headphones to implement our idea. In this scenario, we defined actions for certain interactions users can do with headphones, such as turning a knob on the headphones to go through memories and pressing down to start recording a memory. Another idea that we had was a "Shazam wearable," which was essentially a smart watch interface. Because we wanted to implement a mobile app, we converted these two ideas into mobile interfaces.
We took different components of these two ideas to come up with our initial interface. Particularly, from the headphones interface, we liked the idea of allowing voice recordings instead of strictly written memory descriptions. From the smart watch interface, we enjoyed the create-a-memory form and the intuitive playlist design to browse through memories. After identifying the features we liked from each interface, we created sketches of task flows for creating, viewing, and sharing a "rechord."
Following the creation of our sketches, we built a low-fi paper prototype to use for early usability tests. The main insights that we made from this set of tests are the following:
As a result of these insights, we created a 'Shazam' screen as the first screen on the 'New Rechord' tab. On this screen users had to Shazam a song or search for a song before being taken to the create-a-memory form. For the medium-fi prototype, we made the written description optional and replaced the inbox with a 'Friends' tab on the user's profile.
.png)
To create our medium-fi prototype, we used Figma and InVision. Feedback on this prototype was gathered through heuristic evaluations from our classmates. The main piece of feedback that we received was that our design needed a personal touch, since our current UI lacked any branding outside of the typical iOS aesthetic.
This piece of feedback led to the most drastic change to our project's design throughout the entire quarter. It was at this point where we came up with the vinyl record and album motifs as well as the color-scheme. With this new UI, we began developing our high-fi React Native prototype.
In addition to playing active roles during the needfinding, brainstorming, and sketching processes, I also was the main person to create the medium-fi prototype. Prior to the UI used in the medium-fi prototype, I had created multiple mockups to propose different designs for the project. After receiving feedback from the heuristic evaluations, I led the polishing of the vinyl and album design.
As one of the two developers for Rechords, I implemented roughly half of the components. On top of my frontend contributions, I implemented the entire Firebase backend of the app, defining the structure of the database and connecting to the frontend to allow for functionality such as saving a rechord and sharing rechords.
%202.svg){kind=small}