arrow-left

Back

Project Title

Sound Cloud App Redesign

Overview

SoundCloud introduces an innovative music listening experience tailored specifically for Iranian users. Within the realm of SoundCloud, individuals have the opportunity to immerse themselves in a diverse array of musical offerings, ranging from the latest Persian songs to renowned international tracks. This platform serves as a gateway to discovering and enjoying a rich tapestry of musical content.

Problem

As the company expanded, the need for a comprehensive app redesign became evident. Initially, all primary actions were conveniently accessible through the hamburger menu. However, with the growth and evolution of the company, it became imperative to restructure the app, thereby defining a new, more efficient framework for its functionality and user experience.

The Goal

We embarked on the development of a mobile music application with the primary objective of providing users with a seamless and user-friendly platform for discovering, searching, and listening to music playlists. Our focus was on crafting an interface that not only offered a clean and aesthetically pleasing design but also facilitated effortless user interactions, ensuring an enjoyable music listening experience.

Role

I was the Product Designer for this project, I collaborated with front end developers a project manager and other stake holders to design this product and I advocated strongly for a more user centric direction to the redesign.

Process

My approach to problem-solving is inherently flexible and tailored to the unique requirements of each project. It is shaped by a myriad of factors, including project objectives, business imperatives, problem complexity, time constraints, and various other considerations. Below, I will outline the specific process I employed to address this particular challenge.

Project Phases

Discover

Define

Ideate

Design

DISCOVER & DEFINE

Discover

Prior to initiating the ideation phase, I embarked on a comprehensive analysis of the existing design, carefully examining each page to gain a deep understanding of the product's core elements. Furthermore, I conducted a thorough assessment of user feedback and comments within the app store ecosystem. This multi-pronged approach allowed me to discern not only the strengths but also the pain points associated with the current design, providing valuable insights for the project.

Validating the Problem

Below are the key findings which validated the problem:

  • Challenges in Discovering Key Features.
  • Users don't feel emotionally connected to the application.
  • Excessive number of taps required for a straightforward action
My Proposal

From the discoveries, I proposed a few solutions around solving the user problems and they were;

  • Make the design more accessible by exposing key and significant sections to the user.
  • Introduce a modern feel and an elegant colour palette that induces a feel of relaxation.
  • Personalise the home screen according to the users interaction with the application. For instance,, Introduce sections like: Recently Released Songs, Popular Songs/Artists, Recommended Artist/Songs etc.
  • Restructure the Navigation and transition should be easily understandable, The primary aim was to reduce the number of clicks

IDEATE

From Series of Ideation with the team we were able to define a direction for the navigation.

DESIGN

Defining a Visual Style

Together with the Team we did research on colours and other visual dynamics to define a smooth experience.

Colors
Typography

Aa

Mulish Typography (Primary)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Defining the User Flow & Hi-Fi Designs

These flows serve as the foundation for streamlining the development workload and pave the way for the creation of more detailed, high-fidelity designs in the subsequent phases. Moreover, they prove invaluable for swiftly and efficiently identifying potential issues that may arise during the product development process.

Mid-fi Wireframes

Splash and Onboarding Screen

Upon launching the application, users will undergo an initial Sign-In or Sign-Up process, followed by an onboarding sequence, prior to gaining access to their default landing point—the Home screen. The Home screen features a persistent footer navigation bar, which provides users with four distinct tab options;

  • Home:
  • Discover:
  • My Music:
  • Profile:
Home and Discover Screen

In this section, I've included some screens showcasing the primary actions within this music app. The main screen serves as a hub for discovering new songs and artists, while the browsing page facilitates users in finding the specific song they're searching for.

Playlists and Player Screens

Users have the option to seamlessly continue their music listening experience either through the "My Music" screen or directly from an artist's profile page. The "My Music" page serves as a centralized space where users can explore their personal music library, conduct searches within their own playlists, and even create new playlists to curate their music collection.


Conclusion

Simplicity is a cornerstone of strength. As designers, we are frequently enticed by eye-catching, cutting-edge, and unconventional designs. However, it is imperative to remain anchored in the 'why.' Our foremost objective is to comprehend the user, their challenges, and subsequently devise a design solution that effectively addresses those issues