Your Music Network
Designing a Social Music Experience
Jul 2017 - Dec 2017
Summer 2017, I worked as a UX Designer intern at the design agency Fortify Group to explore new features and to improve the overall user experience for Revo.fm, a VC-backed music sharing app. I worked on the end-to-end design of several features and explored the visual style branding.
Crazy 8 Sketches
Agile & Lean UX
Adobe Creative Suite
Background: Revo & the client
Revo is a "social soundtrack" platform that lets users communicate with music as a means to express themselves, engage with playlists, and enjoy music with friends, which also defines their value proposition. As it continues to grow, the Revo team understands the importance of letting its users easily share music with people not yet using the app, which leads to my design question:
How can we create a seamless experience for users to share Revo content outside the app?
Who am I designing for
Facebook is too public... I'm friends with my mom and people I don't know that well. If I’m gonna share music, I want it to be with someone that actually gets it.
If you share the same music taste with someone, there’s this immediate bonding feel… Like “you are one of my people now”
As a parent, I am always trying to balance between allowing my kids space to discover the world on their own and keeping them safe
Why do people share
From academic research findings and user interviews, I identified the following motivating factors about why people share digital contents:
For good causes/beliefs
Based on our user research, we created and iterated on the user story, which eventually came to the following version:
As a music enthusiast, I want to seamlessly share music I like so that I can express myself and build connections.
For brainstorming and to avoid recreating the wheels, I looked at what the current UI patterns are available are trending. I personally downloaded and tried out 30+ apps related to music and/or social to study their sharing features first hand, while putting myself in the shoes of the users. Below are some of the sketches I created for brainstorming.
I used paper sketches to first quickly explore a wide range of design ideas. Through design critique and internal testing (hallway testing & dog-fooding), the most promising ones were selected and moved to the next round.
Design Iteration ONE
As shown below, I created wireframes and clickable prototypes for 2 use cases. Fidelity is kept low at this point to focus on interaction and allow for more open feedback.
Unsurprisingly, the first iteration is never the final solution. I put together a clickable prototype quickly and did user testing and presented for design critique. I identified the following issues and design insights:
The keyboard plugin for apps are rarely used, if at all. Most users are not aware of such feature. Even when they do, they were uncertain how to use it. Hence, this would be a low-priority feature.
The most common way to share contents on a screen is through screenshots.
Design Iteration TWO
Based on the learnings and critique from the first round of design, I refined the design and created 2 new approaches to the design that leverages users' behavior of taking screenshots:
Although I was able to tap into the "screenshots-" behavior of the users, there were still lapses with this approach. Specifically, I received the following feedback from users, which revealed subtle but noteworthy matters with the design:
Both the alert box and notification were able to help users achieve their tasks but were obtrusive.
The alert box felt like something went wrong, which was not appropriate for the scenario.
The notification also felt unnatural to users: "Don't you only get these when you are outside the app?"
Some users also pointed out that this type of suggestion felt too proactive and stressful, almost to a point of being "big-brothery".
Users found the short "tutorial" on sharing redundant and annoying — "I don’t need to be taught how to tap the sharing button". This shows the usability challenge here was not the learnability of this feature, which was what I was addressing in this design.
Inconsistent understanding of the text: do you call it a "photo", "picture", or "screenshot"?
Aside from users' feedback, as a designer, I also felt this design were sub-optimal. It did the job, so it's acceptable. But the experience itself was not desirable. So I set out to work on the next iteration.
Design Iteration THREE
After the last iteration, I spent some time to think about what it really means to solve the right problem for the user. I realized that what users wanted is to share something with friends, and the mechanism behind that sharing is not of interest to them. After some further experimentations and explorations, I came up with the following design that aimed to be more fluid and frictionless:
Having users tested out the new design, they liked how seamless this interaction was, and even commented it being "smart". From design critique, our team also liked how the new design turned out.
Nonetheless, I discovered a new problem that did not show in previous designs: about half of the users were not able to find out how to dismiss the thumbnail pop-up. Initially, I simply assumed that users would tap on the background (anywhere outside the pop-up) to dismiss the pop-up. However, usability testing showed that this step was not inherently intuitive to users.
This embarked my fourth design iteration on this feature. So the new sub-question becomes: how does one easily dismiss the thumbnail pop-up if one was not intending to share the screenshot?
Design Iteration FOUR
In the fourth iteration, I focused on creating a straightforward interaction to dismiss the thumbnail pop-up that was designed in the last iteration. In the end, I created the following 3 approaches that allow "dismissing" the pop-up.