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.
Option 1: Thumbnail dismissed automatically if no action is performed by the user
Option 2: Thumbnail dismissed by user swiping
Option 3: Thumbnail dismissed by user tapping outside / on the background
To determine how the dismissal motion should look like, I studied a variety of resources such as the Material Design guide on motion design, Apple's Human Interface Guidelines, Fluent design guideline, and Nieson Norman Group's studies for reference.
A snippet of code I wrote in Framer to prototype the design
How was the outcome?
To decide whether the proposed design solution was successful, I looked back at the goal we set at the beginning: creating a seamless experience for users to share content outside the app. I tested the final iteration of the design with users who used the old version.
In the old version, there was no way to share stuff outside the app. Now users could do so. The usability test also showed a success rate of 100% in our final round of test. Users commenting the feature as "smart" and "straightforward" also validated the design.
Thus, it could be concluded that based on both quantitative and qualitative data, the design was able to successfully achieve the goal it set out to achieve. Nonetheless, I do understand that no design is really "done", and I expect new problems to arise as the product is improving.
When I wasn't busy working on the above interaction, I took the initiative to do some visual design explorations. Below are the moodboards and visual assets that I created.
Visual Style 1: Cold/Gothic
Visual Style 2: Warm/Country
Besides the two visual styles I explored above, I also proposed allowing users to customize their personal "Revo" profiles. Being able to personalize this makes users become more emotionally invested in the app, thus leading to brand loyalty.
Reflection & Takeaways
Here are what I took away from this project, in addition to improved technical skills:
If I could do it again, I would set clearer success metrics in the beginning. We were not able to set a well-defined metrics in the beginning patricianly because of the scrappiness and fast-pace nature of designing for a startup.
I relearned the importance of identifying and questioning my own assumptions, especially when they are made unconsciously.
I also relearned the importance of truly understanding the problem you are solving. In this case, users' don't need to be taught how to perform an action (how to share something), they just want the result (their stuff is shared).
I have always valued craftsmanship in any design work. But through this end-to-end project, I developed further appreciation towards the tremendous amount of work and thoughts that went into a seemingly straightforward feature.
Choose the right prototyping tools for the right task
Although in the end, only one design was chosen, it doesn't mean the other ideas during the process were a waste of time. It is precisely those explorations that helped unearth the final outcome.
As a designer, it is imperative to keep oneself updated to what's happening outside one's own work and stay curious. Inspirations can happen anywhere.