Role: UX Designer, App Developer, Project Manager
Date: January 2020 - March 2020
Awards: Best Overall Project
Links: Website, Concept Video, Hi-Fi Prototype
MUSE is a continuation of one of my previous projects, Rechords. MUSE is a social media platform that uses the emotional connection between music and memories to improve the act of remembering. By attaching songs to visual relics and written descriptions, users create multidimensional records of their favorite moments, allowing them to later muse about those moments more vividly.
For CS 194H: User Experience Design Project, I worked in a team of 4 to test and iterate on the existing Rechords hi-fi prototype with the goal of having an app-store-ready project by the end of the quarter. We are currently waiting to have our Apple Developer submission approved before giving the world access to MUSE!
When reviewing the hi-fi prototype from Rechords, the new team knew immediately that we wanted to change the design. Though the original colors were chosen to give a relaxing and calm vibe to the app, we decided that they were quite dull and wanted to give MUSE a fresh and more vibrant interface. As a result, we came up with three new colors and combined them into a gradient, which we felt added vibrance without taking away from the feeling of serenity.
After defining our new color scheme, we made some minor alterations to album cover motifs and began discussing the possibility of integrating animated album covers by allowing users to upload videos. We also began brainstorming ideas for the 'Explore' screen as the gray boxes from the Rechords UI was quite boring and plain. (Check out the Rechords UI!)
In addition to feedback received by our instructor, James Landay, and our peers, we conducted usability tests to determine sore spots in our UI. While having study participants perform our three main tasks (create a memory, view a memory, and share a memory), we witnessed them struggling with creating a memory and identified some bugs that resulted from leaving the code base untouched for over a year. It is worth noting that we had removed the tab labels prior to conducting the lab usability studies.
To address the difficulty of creating a memory, we identified the root cause to be the fact that the Rechords task flow required used to choose a song before being taken to the 'Create a memory' screen. We decided to simplify this task flow by taking the user directly to the 'Create a memory' screen when they click on the center tab, which we decided to change to look more like a button to bring more emphasis to this integral task. Users were then able to choose their song in the 'Create a memory' screen. This alteration proved to be more intuitive during our field usability tests that we conducted later in the quarter as the task completion time and number of errors significantly decreased.
We were lucky enough to be able to test our app at a place where many memories are made, Disneyland. While waiting in lines, we tested our app to gain more feedback on and make more observations about the user experience. Though the new task flow for creating a memory proved to be more intuitive, we found a new issue with viewing a memory.
Similar to the Rechords UI, the 'View a memory' screen consisted of a vinyl record hidden behind an album cover, which we chose to keep because we enjoyed the fun interaction of flipping the cover and tapping the record to the front. However, after seeing our participants struggle with figuring out how to flip the cover to view the memory description, we realized that it was time to fully part ways with our record motif ( 😭) to provide a more usable interface.
Another observation that we made during our field usability tests was that users tended to search for their memories in the 'Explore' page by song. At this point, users were only able to search by locations. However, since our app is centered around music, we knew that we had to implement searching by song as well. This observation helped us come up with our new 'Explore' UI, which displays memories based off a user's most recently used song and location.
During the quarter, we had a UX designer visit our class to give feedback on each of the class projects. After showing her our UI, her main piece of feedback was that our UI felt cluttered, especially the header on our 'Profile' screen. We again struggled with parting from another quirky motif in our design, the white bar that overlaps the purple header and the white body. However, after forcing ourselves to play around with ways to declutter the 'Profile' screen, we ended up finding a new UI that we liked and decided to make the shift (bye-bye to our beloved overlapping white bar. . . at least on this screen).
Because I was the only person to have worked on Rechords, I naturally became the team leader while working on MUSE. This led to me taking on the role of project manager, assigning tasks to my teammates and being the one to lead discussions on design changes. As a result, I played an active role in the UI/UX design of the project, working with Figma to create mockups that would later guide my implementation. I was the designated note taker during our usability study and tests, which helped me when guiding design conversations.
As the only one on the team who knew React Native, I was also the lead developer. At the start of the quarter, I walked through the existing code base with the team and provided sources for them to learn React Native. I was primarily responsible for the Firebase backend since I had led that during Rechords, but also made significant contributions to the frontend, implementing the our initial new UI and overseeing the remainder of the frontend development. Specifically, I programmed the new 'Explore' page, Profile Header, and updated the Firebase organization to make pulling from the database smoother in the 'Explore' screen. I also attempted to use the Spotify API to play music from within our app, but due to some issues with the API and it being unable to recognize the active Spotify session on the user's phone, I had to remove this code and simply have the app open Spotify and play music.
%202.svg){kind=small}