Design & Content © 2019 Taoxi Li

Revo.fm

​Your Music Network

Designing a Social Music Experience

Jul 2017 - Dec 2017

Overview

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.

 

MY ROLE

UX Designer

Visual Designer

 

METHODS

Crazy 8 Sketches

Competitive Analysis

Heuristic Analysis

Interaction Prototyping

Visual Design

Motion Design 

User Testing

Agile & Lean UX

TOOLS

Sketch

Framer

Principle

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
 

AMBER, 16

    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”

BLAKE, 20

SIENNA, 43

    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

Stay connected

Self-expression

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.

Design Explorations

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.

 

In this stage, because of the complexity of the interaction that contains different "conditions", I used Framer.js, a JavaScript-based prototyping tool to create a more realistic experience for the users. Further, creating the prototype in code also significantly assisted communication with the developers and thus reduced the overall cost for the team.