A Redesign Of SoundCloud

A Redesign Of SoundCloud

Challenging myself on
how creative I am as a self-taught designer.

View Prototype

Platform

iOS

Roles

Visual Designer,

UX Researcher,

UX Writer,

Product Designer.

Tools

Figma,

Snagit,

Google Form.

Disclaimer: I do not work for SoundCloud. The point of view from this case study is strictly my own and is not reflective of SoundCloud. As a relatively new designer, I'm acknowledging that my vision might be overly ambitious and my skills are not incomplete too.

In an ideal environment, I would be working at SoundCloud where I would have access to the data and metrics to help influence the ideas and concepts generated. Until then, this case study is not meant to be comprehensive or exhaustive in any way.

Project Overview

Project Summary

This project is about redesigning a mobile application version of a music platform named SoundCloud - one of the world's most famous listening to music platforms. The application has problems with the User Interface and User Experience so a user has used this platform for 2 years since 2020, every day. Therefore, I decided to challenge myself by creating a redesign as a UI/UX designer.

A redesign will optimize the streaming experience, storing the user's audio and music on the app becomes easier and more convenient. Bringing a new look: more authentic, intuitive, and vivid than the application version at the time of the case study.

Role and Duration

Redesigning SoundCloud is personal project that I worked as a Product designer, a UX researcher and a Data Analyst. It's also is a challenge that I have set for myself.

The project was implemented in early January 2022 and wrapped in April 2022 (about 3 months).

I felt confused and difficulted from the very first step because I am a newbie, and my experience is not enough. Fortunately, I met some mentors through the Mentori Community, online Talk Shows, and UI/UX Design Inspiration posts on Instagram. They inspired me and helped a lot.

Goals

For Redesign

To facilitate a more engaging and seamless experience when it comes to music streaming.

To design the user interface to be more uniform, intuitive, and vivid.

To design through user empathy (Human-centered Design) and protect the DNA of the product.

For Personal Development

Learn how to:

Conduct and analyze user research, and create flow charts and wireframes.

Design, prototype, and craft animations through Figma,

Record prototype through Snagit.

To Complete my first design project from start to finish while sticking to design principles

Understanding Company

SoundCloud is one of the largest open music streaming platforms in the world, allowing to upload, store, explore audio content, and connect between the community of users and musicians.

Since its official debut in 2007, SoundCloud has owned a huge music store in terms of the number of tracks and global users in over the world. The platform offers both free and paid membership, available for desktop and mobile devices.

Design Process

The User Research & Data

Before I began my redesign project, I conducted a survey with 41 SoundCloud users to get a better understanding of whom I am designing for. What does a typical SoundCloud user look like? What are their reasons for using SoundCloud? What keeps them coming back?

The survey was conducted through Google Forms and the geographical scope is the Vietnam market.

Before I began my redesign project, I conducted a survey with 41 SoundCloud users to get a better understanding of whom I am designing for.

What does a typical SoundCloud user look like? What are their reasons for using SoundCloud?

What keeps them coming back?

The survey was conducted through Google Forms and the geographical scope is the Vietnam market.

Target Audience Demographics

Among the 41 SoundClouder I surveyed, there were 20 males and 21 females. The age of the male users ranged from 15 to 25 years old, while the female users ranged from 19 to 22 years old.

In terms of current occupations, there are: 12.2% are currently college students, 58.5% are employed, 5% are students and 1% are unemployed.

This was a specific example that represents SoundCloud's current user base 90% of SoundCloud users are under the age of 35.

Moreover, among 17 to 25-year-olds in Vietnam, about 5 - 6 out of 10 people will use SoundCloud.

I also asked them how often they used SoundCloud, which resulted in: 24.4% of users in the survey ranking SoundCloud in their Top 5 Most Used Applications.

However, there were only 17.1% of all samplers use SoundCloud every day, and up to 65.8% of users occasionally use the app. This has made me wonder "What impacted the SoundCloud usage frequency of the remaining 65.8% of people?"

And...

I asked the 41 SoundClouder I surveyed to describe SoundCloud by using 3 adjectives. What do they think about SoundCloud?

A total of 45 adjectives have been collected.

Top 3 adjectives used: Convenience, Variety, and Fun.

To get more information about their experience related to SoundCloud, I asked them about the SoundCloud feature that they used the most.

The highest figure was for Playing Music at 90.2%. The second was followed by Save Mu at 43,9% and Streaming ranked third at 7.3%. The fourth and fifth positions belonged to All Of The Features, and Uploading-Sharing Music at 4.9% and 2.4% respectively.

Personas of Typical SoundCloud User

Whom do you relate with more? Are you like Mr.Phuoc who uses SoundCloud's features occasionally to explore his favorite music genre? Or do you like Minh who uses SoundCloud to stay connected with his follower? Or both? Either way, I'll be designing with users like you, Mr.Phuoc, and Minh in mind.

THIEN PHUOC PHAM
Age: 25

Ho Chi Minh City, Vietnam.

Mr.Phuoc is an English Teacher, a Photographer, and

a Technology Reviewer.

Having the experience of listening to music and using SoundCloud for 3 years, he described briefly:

"The freedom, the artists' generosity with free souls.”

Mr.Phuoc uses SoundCloud every day to explore and experience his favorite genre: Indie.

He also keeps in touch with his favorites artist through SoundCloud's features.

MINH NGUYEN
Age: 22

Ho Chi Minh City, Vietnam.

Minh is the founder of the popular sneaker store in Saigon named The Sneakerholic, he is also known as a Photographer.

As a GenZ, Minh loves music and he has been with Soundcloud for 3 years, a long enough time to be able

to understand and know how SoundCloud has changed.

He uses SoundCloud every day as a tool for streaming, playing, and sharing music.

Besides, he also connects with his followers and his friends through Playlists.

The Problems

Before going into the problems, there was 20% of users in my survey thought SoundCloud's interface is not good-looking, intuitive, and vivid. There was another 20% of users think that the way SoundCloud displays functions makes them feel the app is difficult to use.

Furthermore, on a scale of 1-5, how familiar you are with arranging SoundCloud's features. 53.3% of people rated themselves 4 or higher and ONLY 17.1% rated 5/5-point.

Therefore, in this section, I will focus on finding out what problems make the user experience of SoundCloud
not good.

Besides, I also give a solution to the problem that is presented. I believe that small changes will make a big impact on this version of the SoundCloud redesign. "Less work, big impact".

Home Page

Let's take a quick look at the current setup of SoundCloud's Home Page. There were three major problems that
I noticed.

Problem 1: Content Overload and Unoptimized (Music Categories)

After opening the application, SoundCloud's users met with many Music categories on the Home Page, about 15 Categories. It's such a long scroll with no special or highlight categories to pay attention to users. Moreover, they might find it difficult to make choices because there are so many suggested Playlists/Tracks/Albums.

According to the research on Choice Paradox, more choices can actually lead to decision fatigue, less happiness, and guilt/fear of missing out on something important.

That's explained why 42,5% of SoundCloud users whom I surveyed, do not remember the Homepage of SoundCloud includes. Because there were so many music categories and nothing impressed them.

In addition, some music categories(SoundCloud Weekly, The Upload, Hidden Gems) were auto-created by SoundCloud which has the same experience listening and concept of content but they were not grouped in a category and put on the head of the Home Page. If It were done, I bet this would be helpful to get the focus and excitement of users every time they open the app.

For the Solution, I choose to integrate the same categories into a new music category.

Similar categories(SoundCloud Weekly, The Uploads, Hidden Gems) will now be in a new category that has been highlighted at the top of the page.

This helps the user facilitate a more uninterrupted experience.

Integrating auto-created Playlists by SoundCloud also personalizes users' experiences like an Endowment Effect.

Besides, they can easily give a choice for what they wanna listen to (Hick’s Law: Make Choices Easier).

I redesigned the playlist's cover which is auto-created by SoundCloud. And also put a label for seeing all playlists/tracks/ albums in some music categories.

Problem 2: Nonsynchronous Artwork Design (Music Categories)

Each playlist has its own artwork and it doesn't follow a design concept or design style at all.

Exactly, there was not any playlist artwork,

SoundCloud just put a track artwork of the Top 1 or Related track with most of the playlist.

Both auto-created playlists and other featured playlists were applied by this.

> I choose redesign music category artwork

The playlist artwork will now present more cleaner-looking, usable, vivid, and impression than before.

Since the human brain groups similar-looking objects together and perceive them as unified or complete(The Law of Similarity)

Playlist artwork is essential. Whether a user is embedding tracks on a blog or sharing to other Social Media, playlist artwork is what people see initially.

It's the first impression music makes even when people haven't heard it. So the artwork attached to a track should stand out and have a consistent design style.

Problem 3: Notification Page

Filter feature of Notification page, this function seems to not really crucial. As a user, I feel difficult to understand what exactly this function is for. Moreover, there was no direct interaction with notifications like Deleting, Blocking User, etc. Nevertheless, this would be a great chance to implement a new feature for this page.

> Swipe to interact directly with notification

By Adding directly 2 functions to notification(Delete, Follow, Block, and Remove Follower) and real-time notification categorization(New and Earlier) the notification page now be a more intuitive and more varied experience.

People just focus on what they receive from their followers and their community through interaction with Tracks, Playlists, or albums such as: Like, Share, Comment, etc.

Therefore, do you guess that they would take care of filtering notifications?

Search Page

Looking at the Search Page quickly, nothing here sparks the user's curiosity and discovery instinct other than the existing Search for Tracks, Playlists, Albums, or Artists.

However, I thought this would be an excellent opportunity to implement a new feature for this page.

> Scroll to explore directly a favorite music genre and more.

By adding this function, users can easily browse and discover their favorite music genres.

Since there might be many users who don't know what to choose to listen to when they get lost in the huge number of tracks, playlists, and albums or would like to discover a specific favorite genre of music.

This would make them stay longer with SoundCloud.

> Browse and delete the Search History

By bringing a new function, It can be seen simply what had been found before, and quickly re-find or delete it from the search history.

Stream Page

For the Stream page, I arranged various features to make it cleaner and more interactive easily(More about stream posts, the user profile, etc.) The information on Tracks/Playlists/Albums is also displayed shortly for reading. Now users such as Minh or Mr.Phuoc can follow more details about the activities of their favorite artists and follower without seeing messed-up information on this page anymore.

Library Page

The See more recently played feature was laid below a list of the recently played and the color of that label does not look good. It can see that users definitely feel hard to read and get interaction with this. (Speak-easy effect) People tend to trust words that are easy to read more than complicated phrases.

Besides, I asked 41 SoundCloud users How to enter their Proifle.

There were 34% of users picked the wrong answer and 22% did not know-how. Although SoundCloud displays a profile photo icon for users to enter their profile, they have to take one more step to get there.

Problem #2: Playlist/Album Page Organize Content

The information about Tracks/Playlists/Albums was displayed in detail and in sporadic. It makes the page content overloaded.

The play button of SoundCloud is not attractive since its color is white. As the Psychology of colors Color theory, Color is a powerful tool that can be used to signal attention, influence moods, and even trigger psychological reactions. Colors can have a huge impact on the emotions your users feel and they can also dictate their behavior when they interact with products.

More Spacing, More Elegence

For the playlists/albums page, I wanted to give the user interface more breathing room by adding more space and grouping/nesting similar items and re-listing the tracklist.

Besides, I also give this page more white space, It looks cleaner. White space has a significant impact on how design is perceived. It gives users a clear signal of where is the place they spent focus.

The play button is also changed, it looks more attractive and stimulated users than before.

Problem #3: Disjointly arranged content and features on Profile Page

SoundCloud has 2 types of user profiles, including an Artist Profile, and a Normal User Profile. In general, they all have the same problem of content arrangement and functionality.

Play all track features on the user profile page. Would you prefer to choose a specific playlist/track of users to play all they have(Recently PlayedTracks/Playlists/Albums)? That is not good for users but It's more suitable for an artist profile.

Normal users tend to create a playlist or track in vibe then their followers could give a choice. If they select Play All Feature, there would be nothing like vibe anymore. Moreover, SoundCloud has created a station feature for each user already. It seems to be not as interesting as listening to each playlist. So I'll focus on showing their playlist and recently played tracks.

To remedy this problem, the content structure of the artist profile page and regular users have been changed. Besides, the play all function in the profile of normal users now is removed due to its repetition and mismatch in this type of profile. Users can easily find and choose what they wanna listen to.

Music Play Page: Confusion Between
Music Playing Navigation And The Comments

Before I started this experiment, I reminded the users that they should not be looking at SoundCloud for this portion of the survey. Then I primed the user to visualize the interface of SoundCloud by describing to me the layout of a typical Music Play Page of SoundCloud from top to bottom. After describing the page. I asked them two simple questions.

Method

FOR MUSIC PLAYING NAVIGATION:

1. What would happen when you TAP in the MIDDLE area of the music play page?

Answer: Pause Track

2. From the music play page, where does it take you when you swipe from left to the right?
Answer: Previous or Next Track

3. From the music play page, where does it take you when you swipe from left to the right?

Answer: Previous or Next Track

FOR THE COMMENT:

4. How do you get to the track's comment?
Answer: Tap on the comments that appeared in the middle of the screen or
Tap the comment icon at the bottom area option of the screen.

Result

Overall Navigation Knowledge:

Only 44% of people responded correctly to both swipe responses.
46.3% got at least one correct, and 17.7% DO NOT know or remember to answer correctly.

65.8% of people responded right answer of what would happen when they TAP in the MIDDLE of the music play page.

For the comment interaction:

78% of people know how to get to track comments by clicking on the comments that appeared in the middle of the screen or the comment icon on the options bar.
22% DO NOT have the answer.

Additional fun facts and stats:

ONLY 11 out of 41 people interviewed got all four questions correct.
31.7% of people responded that when they tap in the middle of the music play page, they could pause the track and view the live comment tab sometimes.

The analysis of the results suggests that SoundCloud users have confused between music playing navigation and live comments/comments.

The music play page has two ways to navigate tracks: swipe to the left or right to change, tap directly on the screen to pause the current tracks then tap on buttons to change. Moreover, while the tracks were playing, live comments were displayed which happened from the start to the end of the tracks. If the users want to navigate tracks, they tend to interact confusedly with live comments.

Therefore, this would be a great opportunity for me to implement a completely new feature...

Directly navigate the track
with the music play navigation bar

By adding this feature, users now can easily give a choice of what they are into listening to through the Playing Navigation Bar.

I keep the current design of SoundCloud on displaying live comments and Tracks' waves.

This feature belongs to the DNA of SoundCloud,

I believe that there're many users who love it like me.

Besides, I also redesign the bottom navigation of this page, I grouped them in the playing navigation bar.

A Quick Reflection,

Going into this project earlier this January, I knew this would be the perfect chance for me to hone my design skills since I recently graduated from university. I want to pursue a career in UI/UX design so I figured the best way for me to learn would be to throw myself into a project and go from there.

Within the last 3 months, I was able to learn all the things I set out to know in order to deliver this project and so much more. I contemplated that the process of making mistakes and learning from them, no matter what mistakes you make, your friend is now a more complete person with those mistakes, that's what makes who you are now, so don't hesitate to experiment and make mistakes. Moreover, trying to learn how to do things faster, better, and more efficiently. The learning process is continuous throughout our whole life, just push yourself to keep going forward and face every challenge.

And that's a wrap, thank you so much for reading!