UXDI: Week 4+5 Retrospective: Integrating a new feature in Soundcloud

Darvinder
Darvinder
Oct 11, 2015 · 10 min read

This was our first group project and it was one of the best learning experiences of my life.

We worked in a team of 3 and I was fortunate to work with Krista and Lana.

The Project: Integrate a feature in Soundcloud that allows users to collaborate on playlists online with other users in real-time.


Phase 1: Discovery and Research

As a team we discussed how we were going to work together and used resources like Trello, Slack and Google Drive to keep track of our work and communicate.

We decided that we would take ownership of a certain task and get back to team to discuss the research findings which helped shape our wireframes, features, layout and many other things which will be mentioned below.

Competitive Analysis:

We researched direct competitors of Soundcloud in the online music streaming industry to find out what the best practices are, compare features, analyze business models, who their target audience is, etc to get a deep level of understanding of where our brand — Soundcloud, stands in the market.

We did competitive analysis for 9 competitors (Spotify, Youtube Music Key, Youtube, Hype Machine, Mix Cloud, Apple Music, Band Camp, Google Play Music & Amazon Prime Music) were really surprised to find that the collaborative playlist feature was only supported by Spotify and it was only available on the desktop version. We saw an area of opportunity here which could help us increase usage of the Soundcloud app for the current users via this feature and also attract new users to Soundcloud. That being one of the main business goals (apart from improving paid membership) and users wanting to collaborate playlists online — this was a win-win.

Comparative Analysis & Design Inspiration:

This is the process in which we compare competitors who are not directly related to our brand but provide the service/feature we are focusing on. We found out that there are other apps which focus on this feature and we were able to take some inspirations from them like how they worked, what extra features and options they had and how they were allowing users to collaborate music.

Here’s the funny thing, most apps we tested for comparative analysis were streaming songs from Soundcloud. So it was really interesting to find out that this feature will really help the Soundcloud users to collaborate playlists within the app itself and won’t have to download another app for the same.

We purposely didn’t take any design inspirations from other apps/websites as we wanted to integrate this feature according Soundcloud’s existing design standards.

User Research

We drew mind-maps and topic maps to figure out who our target user is? We came up with two main categories — DJs and Listeners and brainstormed it further to realize that our main target user is a DJ (in a vague sense ranging from a professional to a casual music enthusiast who loves to create and share playlists). This helped us make our screener survey(a survey done, mostly online, to find people who fit our target user and getting in touch with them. Most people are screened out, hence the term screener).

Just kidding! lol

This was the moment when we realized who are target user was. This along with the user interviews helped us create our personas which will be discussed later.

This was the screener we sent out using our social media (mainly Facebook). We were looking for people who made playlists and listened to online streaming music.

The Results:

We received 84 responses out of which we interviewed 11 people.

We got a lot of insights from these interviews. We found out that many users feel many passionately about their playlists and in order for them to collaborate with others, there was a level of trust wanted to have with that person first. They also shared that they like to set their set list/playlist offline before the event for the same reasons.

They also shared that when people played their music in a public setting, they hated DJ nazis but at the same time didn’t like it if anyone started playing some music which was not in sync with the party theme/mood.

Some user quotes:

John(music enthusiast)- “I don’t like using Soundcloud because he can never find his favorite music on it!”

Mitch(professional DJ) — “I was a big fan of Soundcloud but ever since they started taking off music from their servers for copyright reasons”.

We gathered the data from these interviews made sticky notes with one observation each and visualized the data in the form of an affinity map. These insights helped us create our two personas.

Most uses liked creating playlists on the desktop — wwl

they made predetermined playlists — wwl

they want to collaborate with people but only with the ones they trusted — wwl

Personas

Personas are archetypes created based off of the user interview. The purpose behind creating them is to have a realistic and reliable representation of our key target audience/users.

Based on the data we gathered from our user interviews we made two personas. Luke and Brendan.

It was fun doing these user interviews as most times we find out very interesting things about the pain points most people and discover areas of opportunity for improvement. This was totally true in this instance as well.

What we learned:

  • Competitive and comparative analysis is an essential tool to get a deep level knowledge of the project we are dealing with and not re-invent the wheel.

Feature Prioritization:

We came up with 67 features and we had to prioritize them on the basis of the MOSCOW method (Must Have, Should Have, Could Have and Won’t Have) and an affinity map showing which features would take less/more effort on the x-axis and which features would be essential/nice to have.

Phase 2: Sketching and Ideation

Job/user stories & storyboards

‣ Which are the specific tasks users need to complete?

The specific tasks our users needed to complete were-

  1. Easily navigate and find this new feature on the desktop website
  2. Create a Party Playlist and add songs to it either by using Search, their Likes or their Playlists
  3. Invite their existing friends on Soundcloud or social media and also having the ability to have a shareable link for the Party Playlist
  4. Tap on the like — ♡ button next to a song to affect its ranking in the playlist

‣ How can we clearly communicate these steps?

By sticking to the Soundcloud Design Standards and integrating this feature where it is most likely for users to find (based on user testing and familiarity with the website). This will be discussed more in the below section.

Rough sketches

Quick rough sketches are life savers! We went through several iterations discussing the things we should include and exclude based on our user research and feature prioritization. Most of the below ones didn’t end up in the final desktop wireframe as we came up with further iteration and tried fitting them in so it would look like an integrated feature.

Rough sketches for the desktop
Rough sketches for the app

This was one of my most enjoyable parts of the whole process. We, as a team, came up with brilliant ideas which we could not have on our own. Having this idea formulate with the help of others was and come to its fruition was a beautiful thing to watch and experience.

Some things that we always kept in mind while designing and iterating our wireframes:

The interface will look very similar to the existing Soundcloud interface. We are integrating a new feature not adding one.

The best way to test and iterate quickly was to use paper prototypes and do medium fidelity (basic wireframe) usability tests using Invision

Phase 3: Narrowing Scope and Structure

User flows:

Comparative User Flow:

We analyzed the number of steps needed for a user to achieve a set goal of creating a collaborative playlist and inviting friends. This helped us immensely because we had a good set of inspirations for features we could have and the best practices being followed by our competitors.

How do we refine our possible ideas down to a specific set of core flows which fit the time
available?

We figured out as a team what the MVP (Minimum Viable Product) was.

MVP = Have an integrated feature for creating collaborative playlists (Party Playlists) which enable users to create them, add songs / members and set preferences

User Flow with our added feature:

Scenario:

Upon discussion we decided that we will be linking the user stories and scenarios of both of our personas. Luke will be the DJ who creates the playlist in the first part on his desktop and Brendan will use the playlist at the party on his mobile phone. (Please refer to user story image in Phase 2)

Sitemap + Appmap

Doing sitemaps for this project was a bit different. Usually we make them to get a holistic idea of where everything is (as a part of content inventory) but in this case it not only helped us in content inventory but also helped us to know exactly where our new feature will go (marked in orange below). This was an integration so we made sure that it fell into the right hierarchy making it easier for the developers to add this in.

Phase 4: Prototype and Testing

The responsive mobile website directed the users to download the app so we made our final prototype on mobile. Since the creation of the playlist was not a feature used while collaborating (just the initiation), we made a medium fidelity wireframe for showing the process. We would create a high fidelity one as a part of our next steps.

Prototype

The below video shows the medium fidelity desktop wireframe we created:

High Fidelity Prototype for the app:

Prototype link: http://bit.ly/1LpTStq

Usability Studies:

We did usability tests with 5 people using our medium fidelity mobile prototype and we found out that our design decisions were in line with the users.

Tasks:

  1. Add a song to a Luke’s Party Playlist
  2. Like a particular song in the playlist

Test Findings:

  • All users were able to complete the given task successfully
  • It was a good experience overall for the users
  • The Add Song Button was easy to find
  • All users intuitively clicked on the heart button to like a particular song in the playlist

‣ How do we effectively evaluate our solution with target users?

  • By addressing their needs and eliminating their pain points. In Luke’s case, his hesitance to add people to his collaborative playlist is taken away by having a shareable link which he can only send to the people he trusts and whose musical tastes are inline with his own
  • Brendan now at the parties does not feel like the person playing the songs is being the DJ nazi as he gets a say in the playlist

‣ Multiple prototype iterations + How should we improve our design based on the feedback from users?

Our initial prototype test findings showed us that the users hated the initial popup we had to greet the new users to the playlists. We had another popup showing each time the song was added. We got rid of that based off of our usability tests as well.

Next Steps:

  • More research and user testing to see what are the next set of features we could include to make Soundcloud even better
  • Include more features from the website into the app
  • Do more usability testing for the desktop wireframe and create a high fidelity one

Some thoughts:

I was fortunate enough to work with two awesome ladies Krista and Lana Dai and I cannot thank them enough for sharing their knowledge and experience with me. They are rockstars and I hope I get to work with them again. This was one of the best learning experiences of my life.

Critical thinking and research has been one of my weak skills and seeing Lana do her magic was a truly educational experience.

Krista! I was amazed by every design she made. I used to think I am a pretty good visual designer. Nope. Just an amateur. She’s the real professional.

Kudos guys.

Let’s make P4 even more awesome!

Darvinder

Written by

Darvinder

UX Designer | Researcher who loves taking pictures, riding his Boosted Board and indulging in DIY.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade