UX/UI/FE Website Redesign - Sound Cloud

Project Overview


Problem: SoundCloud’s desktop and mobile apps allow artists to listen and upload music, but are not active in helping artists develop their own brand or collaborate with fellow musicians.

Solution: By redesigning artists’ bio pages to appear more presentable and personable, we are adding an official collaboration CTA and a valuable networking component to the Soundcloud brand.

Tools: Miro | Figma | Adobe Illustrator | Adobe XD | Google Workspace | GitHub | Visual Studio Code

My Responsibilities: Heuristic Evaluation, Redlining, Problem Statement, User Statement, Value Proposition Statement, Competitor Analysis, Flow Chart Lo-Fi - Hi-Fi prototyping and Testing, Navigation and Home Page Coding

Timeline: 3 weeks - group project

Heuristic Evaluation Checklist

The heuristic evaluation showed:

  • appearance and aesthetics left much to be desired

  • numerous design boundaries distracted users from focusing on the artist bio and collaboration feature

  • SC had easy-to-understand content on their website, however, the information architecture was backwards.

Redlining

The redlining uncovered that:

  • Double navigation is confusing to users

  • Overwhelming white space and lacking color contrast

  • Small elements too distracting and often missed
...

Competitor Analysis

...

Learnings:

  • that Free with paid add ons is industry standard for music streaming services

  • Soundcloud and Soundstorm is similar, however SC is unique because it allows listeners and artists to directly communicate with one another via messaging

SWOT Feature Matrix

...

With SC being the oldest music listening and sharing application, it runs the risk of becoming outdated and unused. In our SWOT Feature Matrix, we were able to identify a niche that SC could fill that was not yet taken by our competitors: free, customizable, networking for artists of all calibers.

Proto Persona

...

We came up with a Proto Persona, who is a passionate, musician and wants to meet fellow artists to make music together. How could we serve his needs and solve potential pain points?

Survey Data

...

At 90.9% the Number One reason to use SC is to share music. According our survey data.

In addition we did a twitter survey and surprisingly discovered that majority access soundcloud on desktop - found the purpose to be to analyze stats and read messages which is unavailable on mobile.

Interview Card Sorting

...

We noticed commonalities across participant feedback. Among them was an Artist from Brooklyn - Andrew White. He kindly agreed to provide us valuable insights in a video interview with our group.

...

On our affinity diagram we came up with 6 different categories which helped us to synthesize all gathered information and create a user persona.

User Persona

...

The Affinity Diagram allowed us to create a new-and-improved User Persona based on traits and habits of our interview participants. Sonny Burnette, is a social individual who likes sharing his music online and is open to the idea of collaborating with others.

User Insight Statement


Sonny Burnette is passionate about music and spending his leisure time creating and posting his music on Soundcloud. Being that Soundcloud is used by many other musicians he knows and doesn't know, he often wishes there was a feature to discover artists who are open to collaborate.

Problem Statement


Soundcloud is limited in its tools it offers artists who seek collaboration. Whether direct message or searching via hashtag, many artists send requests to others and often hear nothing in return or have no idea how to start looking. How might we better facilitate collaboration among artists?

Empathy Map

...

After building our Empathy Map, we brainstormed key features that would “move the platform beyond music sharing.”

Feature Brainstorm

...

Our Feature Brainstorm resulted in more wishes than likes which meant we had to prioritize some factors over others.

Feature Prioritization Matrix

...

It turns out we were able to merge wishes and likes, in our Prioritization Matrix, to maximize the value and efficiency of the new features in our redesign.

User Journey Map

Scenario:


Sonny Burnette is a keyboard player who lives in LA. He shares his music on SoundCloud but craves more engagement with his audience and fellow artists. Sonny wonders about the features that can help him achieve his artistic, networking goals and feel supported by the music community.

Expectations:


  • Can update bio to look more professional
  • Receives monetary contributions from listeners
  • Can search for other artists also looking to collaborate (Emphasis on artist collaboration)
...

Value Proposition Statement


Solution features on the SoundCloud platform by giving the artist profile a more presentable appearance as well as incorporating a feature that would specifically enable them to connect with others seeking collaboration as well.

By redesigning the artist profile, collaborate to feature the experience for artists using SoundCloud will be more conducive to reaching out and collaborating with other artists.

User Flow

...

We spent a great deal of time mapping out our User Flow because we cared so deeply about creating seamless connections for our users. The easier it is to connect and collaborate, the more collaborations artists would be willing to do. We hope through word of mouth and firsthand interaction, that SC could sustain this business model in reality.

UI Style Tile

...

Lo-Fi Prototype

...
Link to: Lo-Fi prototype

Our initial prototypes had the collaboration feature located in the bio page. So if you wanted to initiate a collab with someone you first had to activate the feature in your own bio.. Then you would use the general search function and it’s filters to ultimately find a worthy stage partner. WE discovered that without OUR guidance to our testers, this was too many steps.

Iterated User Flow

...

At this time we revisited our User Flow and reassessed the path of utilizing the collab feature. We eliminated the need to visit your artist bio and built it directly into the primary navigation. In addition we gave the feature its own set of filters - independent of the ones found in the general search filters.

More User Testing

...

Testing Plan:

  • Objective #1: Navigate to Artist Bio Page
  • Objective #2: Collaborate with another Artist
  • Objective #3: Evaluate page wiring and button links

Hi-Fi Mobile Collaborate Feature

Learnings:

  • Hi-Fi testing revealed “Get Started” was initial click for all users.

  • Search Filters should operate independent of each other.

  • User cards still had too many options none of which were clear on how to collaborate.

Link to: Hi-Fi Mobile Prototype
...
...
...

Artist Bio Page Before

...
Link to: Hi-Fi Desktop Prototype

Artist Bio Page After

...

Here’s A quick snap shot of the home and Artist bio pages before and after the redesign

Front End Bootstrap Coding

...

Lastly, we coded a responsive page using custom HTML, CSS and Javascript within a Bootstrap template.


Link to: Sound Cloud redesigned website

Summary and Next Steps

  • Research showed 81.8% of people are very comfortable sharing music files electronically to collaborate.

  • In this regard, we will look at adding more localized filters to make Soundcloud a platform for artists to meet online first, and then continue to develop their relationships in-person.

  • Since 90% of artists use Soundcloud to share music, our hope with the redesign is that it can shift user mindsets to view Soundcloud as a networking app, in addition, to a streaming site.
...