SoundCloud Redesign

Soundcloud is an app for listeners to discover new and unique music and share with others. It also enables creators to upload, promote, and share audios.

The goal is to solve app’s pain points and create a more engaging mobile app in a way that’s easier for users to understand and more straightforward to discover music. Find a solution to help users to interact with creators or friends better and increase the amount of users to upgrade their account.
Timeline
10 weeks
My Role
Competitive & User Research, UX/UI design, Prototyping
Tools
Figma
Project Overview
The Problem
The existing app makes it hard for listeners to find new or unique music that matches their taste. It also lacks interaction with friends and creators. Here are the following main problems:
• No filter or suggestions for users to search in the searching page.
• Streaming icon is confusing on the bottom nav bar.
• Discover page leaves users confused and suggestions don't fit their tastes.
• Profile page is not easy to find.

The Solution

The solution for this mobile application is to create a more personal experience for users through discovering music, searching songs and interacting with others. I added the social media aspect and upload feature to connect artists and their listeners, I want to create a more engaging user interface to make users feel more personal and the music categories can be customized to match their tastes.

Competitive Analysis

To understand the space, I explored the competitor music apps people commonly use. I downloaded each app and tested them to see their user flow and how they inspired their listeners through their design.

Persona

After getting insights from user feedback and research, I created two user types which are younger listeners from age 17-25 years old and independent artists/creators. I decided the main user persona for the redesign is the young listener consumers because the discovery of new music and community are very important to them. This helped me to make better design decisions that will meet the user's needs.

Customer jouney map

I created a journey map to help me visualize the steps of my target audience take based on the scenario in order to accomplish the goal.

Here are two areas of opportunity I found in my journey map:
1. Let users search by different genres, artists, or new music. Adding music suggestions would help users to search quickly.
2.  Add the recommendation and new release music section for users at the top of the homepage to make discover more personal towards users and pick the options that are most appealing to them.

Wireframes

Usability Testing

During our usability testing process, I find it really helpful based on a lot of the feedback my classmates provided. I got to see different perspectives on how I can improve my usability not only visually also functionally.

Testing Scenarios

You're a big fan of Tame Impala and you want to discover his new songs. You use Soundcloud to search for the artist and play the latest tracks.

KJ Analysis

Based on the KJ analysis results, here are the prioritized lists of outcomes. We break them down into four categories. These helped me to understand what are some most important outcomes that I should prioritize, it also helps me to generate ideas and brainstorm quickly in a very short amount of time.

1. User Interface
Increase the text size for some of the screens.
Focus more on visual hierarchy.

2. Button/Layout
Change The lighting button for the stream feature.
Add a play button in the music player.
Add the bottom bar for the artist page as well.

3. Function

Include lyrics or comments in the middle of the music player screen.

4. Icon
Placement and the icon matters.

Final Prototype

Homepage

I changed the order of the categories and made the layouts more consistent. Users will see the trending music at the very beginning and the recommended music by their favorite artists. I embedded the message feature for users to talk with friends or other creators. This design makes the discover more personal towards users and make it easier for them to navigate.

Library Page

Since users couldn’t easily access their profile, I made the profile section more obvious for them to view their information. I added a call to action section at the top of the page to attract more users upgrade to premium plan. When they click the plus button, they can choose to upload a track, create a playlist or record a track which is more accessible for them and other users can quickly discover more unique music.

Artist Page

Now Playing Page

Next Steps

Lyrics on/off option
I’m planning to include lyrics option for them to turn it on or off in the setting to create a better experience for user.

• Stream Feature
Users were not sure what the lighting icon means in their original app. I added the name under the icon but I’m planning to redesign this page as well so it's more straightforward for users to understand what they can explore in this feature.

• Implement record a song feature

In order to create more interaction with the creators, I would want to implement the record feature for listeners to record their track and upload to the platform.

Reflection

Overall, I learned the importance of usability testing. It is hard for us to tell the real problem without letting other people test the product. I’ve noticed many problems that I did not think of when I’m designing.  Especially the KJ methods are really crucial when dividing them into groups and identifying which is the prioritizing the problem. This is very useful for me to know the most necessary thing I need to improve. If I have more time during the usability testing, I would create more sticky notes and categorize them better.  I would spend more time reflecting on the user flow during the time they spent testing my app.