Muxic a song listening app — UX Case Study

8 min readNov 2, 2020

We all know the importance of music in our life . Sometimes , it feels like we are incomplete without music and this is actually very true because you can observe this by yourself that in any mood we prefer to listen music , whether we are happy , sad , cheerful etc , we just want to listen music .

My Design Process

Understand

So , from this step our design process or we can say design thinking starts as you may know that design process depends on the project of how big the project is , how much is the budget of that project or how much time is given to complete that project .It depends on many other factors which we will skip for now.

Now let’s come to what I am designing so as the title suggest , I will be designing an app from which we can listen music seamlessly anytime and anywhere

Research

I interviewed 4 people and asked them some of these questions :

How much hours do you listen music per day ?
Which are the apps you currently use to listen music ?
What are the features you want in a music listening app or are there any problems that you face while using one of these apps ?
Do you have any favourite artists which your particularly listen to, everytime you open a music listening app ?

So , some of the responses that i got after interview were :

These 4 users use song listening app for 3 hours / day on an average
The top two apps that they mentioned were spotify and jio-saaavn
The features and problems described by them were :

· User Interface should be smooth

· They face a lot of problem in getting a proper song suggestion because the song suggestions is not that great

· Another problem that was faced by everyone was not having sleep mode feature in front of their eyes as they find it difficult to turn on the sleep mode and set sleep mode reminder in other apps

4. Here majority said yes

Now based on the responses of the user I tried to figure out the problems and it’s s olutions

Problem & it’s solution

1. As so many of users use music listening apps for hours n hours then i have to come up with an user interface that is very dynamic , pleasing to the eyes as well as very easy to use also

2. Another problem that users were facing was not having sleep mode at the right places and to solve this problem i thought to add new action key at the bottom app bar

3. We all know that some people are very moody and they need everything according to their mood and in our case , the users also want to listen music according to the mood they’re in , that’s why we added a new section where they can browse music according to their mood

After completing the interviews and figuring out the problems and solutions i jumped to the next step in my design process

Getting Inspiration

For this app to be successful , I tried to get some inspiration from the best music streaming app — Spotify and along with that i have also checked another app which is Jio-saavn and these two apps were also used by the users i interviewed

Analyze & Ideate

The first step that i usually do in this phase is to create user persona

User Persona

Creating Persona’s is really one of the most important step in a design process as this basically helps designers to understand for what target users we are making the product and along with that it also helps UX’ers to stay focused on what we have to create and what are essential things we have to add or make changes . So for this , I created two persona’s . Let’s look at them

Storyboard

Storyboards are really essential in the design phase as this let us know the day to day life of the user and also let us and other understand how the story will flow . Basically it allows us to see the potential problem that the user was or is facing. Here i have the storyboard of Mohit Raj who is a software consultant

User Flow

The importance of this step can’t be explained in words as without user flows we can’t really decide of what screens we have to design for our app. And , User flows also helps designers to show the steps that user have to take to complete a particular task . This flow is or can be shown to the client and developer team that we are working with and, if they want any changes then they can tell the designer and after that designer will make the necessary changes.

This is the basic user flow that i will be working on for this Muxic app. After having all the necessary assets i started to draw some sketches which i will show you the next step

Sktetches

Having some ideas in the mind is really good and for this app i got a lot of ideas and i tried to work on that . In all the sketches i made , the two things i tried to do was to make the user experience of my users better and solve the problem that they were facing in other music listening apps. After drawing all these sketches i moved to the next phase which is design

Design

After getting all of the users insights , preparing sketches , knowing all the problem and it’s solution faced by the users . Now was the time to get into the main designing part.

In this phase i focused on the user interface of the app and for that i designed wireframes , prototypes .

Wireframes

Showing all of the wireframes is not really possible and that’s why i will show you some of the wireframing screens of my app.

These wireframes are really important because this allows clients(as well as team members) to provide feedback earlier in the design process

The wireframes that i have designed here are high-fidelity. It includes all of the screens like launch , onboarding , login , signup , favourite artists , home screens etc.

Prototype

Now this was the time to covert our wireframes to prototypes . Here, i will try to explain some of the screens of my mobile app so that you can understand better of what i’ve done in this step

Launch, Onboarding and Login

These are the first four screens that the user will land into when they open the app after installing. The first screen is the launch screen and the others are onboarding , login screen.

The logo on the launch screen is also designed by me.

We include onboarding screens in the app because they let the users know about what are the functions and features of the app. And as you can see here i have provided CTA’s button in the onboarding phase because it will let user to skip the onboarding if they want and can go to the login , signup screens.This will provide them a better user experience.

Signup & Selections

Here i asked users of what are their likes and what they , who they want to listen the first time they will open the app and that’s why i asked for the song languages they prefer to listen and also tried to ask them their favourite artists in this step. The user interface that will come after this step will include their selections that they have made here.

Home Screen

This is the home screen of the app . And as you may or may not know that this screen tells the user of what you have , what are things that are present in your app that’s why arranging content in this screen is one of the most important task .

Here i also tried to solve the problem of not having the songs by mood feature that my users were talking about in interview. So to add that feature i included a songs by mood section where you can listen songs by your mood you’re in.

Let’s check some other screens as well

Song Play & Set Timer

Sleep Mode feature was also a problem for some of the users and to cope up with that i added another action key in bottom app bar. This thing was also mentioned in the problem & it’s solution step.

And the other two screens are Song playing screens where you can see the timings of your songs and can download it , as well as shuffle the song etc. In lyrics i have provided automatic slider that will go down according to the lyrics played . This will help people know about how much is the lyrics left .

Playlist & Search

These all phases & steps helped me to design this Muxic app. If you have any suggestions related to this UX Case study then please let me know in the comment section . I will try to improve it . And yes this was my first story/article on medium and i am glad that i have done that . Hope many more to come❤