Prototyping
Real Prototyping Sessions with Real Users.
We performed two real-time prototyping sessions to test out the interactive features of our application. Through these sessions, we were able to observe what sparked effective social interactions between users, receive feedback, and iterate accordingly to improve our application design for a more beautiful, human-centered experience.
Prototype V1
We utilized Google Sheets to facilitate our prototype. ​
For our first iteration of prototyping, we tried simulating the experience of using the app in a real-world environment. To see if the fundamental ideas behind MelodyMap could be used in order to facilitate social interaction over music, our team developed a mockup in Figma and presented different scenarios on the app via a slideshow. Users were able to participate using a shared spreadsheet so that our team could see how they might behave in different hypothetical situations that may unfold on MelodyMap.
For our prototyping event, users were introduced to MelodyMap and created mock accounts that would showcase their favorite songs. They were presented with different scenarios, such as needing a song to study at the library or cheering up a friend playing a sad song at sunset. Our users would choose songs to play and then react to other users’ songs with an image or comment, emulating the social interactions that might occur on MelodyMap. We then demonstrated how playlist curation could occur by walking through a Figma prototype, displaying a playlist’s creation based on the collective music taste of a friend group on a road trip together.
Prototype 1 Results + Feedback
During the prototyping session, we observed that users were putting in a lot of thought and effort into their song choices. This confirmed our hypothesis that there was potential for social expression through something as simple as the music you put on throughout the day. This was further supported by the wide variety of reactions sent to these songs, from humorous memes to supportive comments to a string of emojis. Along with the laughter in the classroom, this showed us this was an engaging and novel social experience, even with many of the users being strangers with each other.
After the prototyping session, we fielded feedback from our users with a survey to get their opinions on how to improve the design of MelodyMap. The main suggestions for change was the presentation; participants were confused by the spreadsheet, wanted to see a cohesive color scheme for immersion, and wanted a more engaging experience that focused more on the interactions than the tech behind them. However, we saw an overall positive round of feedback to the initial prototype, with many participants indicating that they enjoyed the ability to react to each others’ music and would enjoy a similar experience with their friends.
Prototype V2
We utilized Google Sheets to facilitate our prototype. ​
For our second prototype, we improved the experience according to user feedback.
First, we created a visual identity for MelodyMap with sleek, modern designs and vibrant colors being used for both the presentation and spreadsheet. This helped immerse the audience more, with the spreadsheet resembling the final look of the app.
Secondly, we streamlined the prototype experience, doing away with the login details and focusing more on the social experience; instead, users chose their favorite music genres, which they later used to group themselves and make playlists together. This replaced the non-interactive Figma demo in the first round and highlighted the ability for MelodyMap to foster spontaneous communities over a shared interest in music.
Lastly, we enhanced the scenarios to promote social interactions. We created three distinct scenarios that would evoke strong reactions, such as catching your friends listening to romantic songs together or your mom blasting EDM at the gym. This, along with accompanying each scenario with fitting music, led to more overall interactions and increased engagement with the prototype.
​
Prototype 2 Results + Feedback
By constructing a social setting that closely resembled how the app might be used in real life—from the look of the prototype to the use of music to the intriguing yet relatable scenarios—we saw a resounding success in this second prototyping round.
This round felt much more using the MelodyMap app on your phone than last round’s feeling of inputting text on a spreadsheet, and it showed: we saw a plethora of likes, reaction images, and comments from a variety of users sparked over these everyday song choices. We were able to see how different features of the app could be used without fussing over the technical aspects, even getting a glimpse of how real-world connections could be made over the app.
"I liked the social setting a lot more this time—it felt more like real life. The tasks were easy to follow and actively got students engaged with Excel."
"The engagement improved with every prompt, and giving multiple ways to react was a great choice. I also liked how you roleplayed the Figma feature this week—it added a nice touch of in-person engagement. "