Smule Karaoke: Music Sharing Experience Re-Design

The Design Challenge

In this design challenge, I had to study and understand what my users mean by "sharing of music" and what are the pain points and unmet needs they experience. 


I then had to redesign their existing music sharing experience and provide them with a design solution that will attempt to alleviate the pain points and eradicate their unmet needs. 

The challenge I tackle in this project is to:
 

Redesign the Smule Karaoke application so that the search for a perfect singing partner is an efficient, easy and a delightful experience for the user.

Key Drivers of the Challenge

​​

  1. The users love singing duets and collaborating with other singers instead of singing a solo number.
     

  2. The users mentioned that on several occasions they had spent a lot of time, searching for the song they wanted to collaborate on with someone. At the end of it, they had not found a singing partner that they would like to sing with.
     

  3. In order to decide what singer partner to collaborate with, the user needs to hear each and every recording of that song that is sung by another singer. Several times, after hearing all the singers, she does not like the quality of any. This whole process is frustrating.
     

  4. After spending a lot of time in searching for a good singing partner for a song, the entire exercise turns out of be futile as at the end no singing partner has been found.

    As a result, the users simply drop the idea of collaborating for that song. The users now go ahead  recording a solo number instead of spending their time searching for a duet they really want to sing. 

The Design Process

The various phases followed in the design process and the activities in each phase are illustrated in the image below:

Research

Two rounds of Research:
 

  1. In the first round of research, the main intention was to find out:

    •  What my users mean by “sharing of music”

    •  What products do they use for the same

    •  What are the challenges they face?
       

  2. In the second round of research, I had already defined what it meant by “sharing of music” in my users’ perspective, the product that they used. Now the focus was in digging deep and empathize with my users to find their unmet needs and pain points.
     

Each Research phase was broken down into the following four activities: 

Research

Planning

Research Goals

Types Of Research

Research Participants

Research Timeline

Research

Conducting

Primary Empathy Based Research - in person and telephone interviews

Research

Data Collection

Audio Recordings

Detailed Notes

Research Debrief

 

Common User Behavior

Pain Points

Unmet Needs

  1. Research Goals:

    • Round 1: To figure out what do my users mean by “sharing music” and what products do they use for the same.

    • Round 2: Find out what are the unmet needs and the pain points my users experience while they attempt to sing a duet on Smule.
       

  2. Types of Research:

    • Empathy Based Primary User Research
       

  3. Research Participants: 

    • Round 1: 5 interviewees

    • Round 2: 3 interviewees
       

  4.  Research Debrief

    • Organized the primary research data and drew some commonalities, unmet needs and pain points from the same
       

    • Commonalities between the Users

      • Genuine love for music and singing. 

      • Looking forward for a relaxing and joyful time while collaborating with other singers

      • Time constraints i.e. does not have time for elaborate searches pertaining to karaoke tracks, singers to partner with etc.

​Pain Points

  1. Finding that satisfactory recording is a time consuming, tedious and frustrating process. 

  2. Listening to each track for selecting a singing partner makes the user feel impatient. 

  3. Each track has a plethora of  information points like: karaoke track uploader name, karaoke track quality rating, singer’s name, other collaborators, open to join or not, number of days left to join, number of likes, number of comments etc.

  4. Finding people whom I would like to follow (for future collaborations) is like searching in the dark

  5. Lengthy scrolling, Unsorted, Uncategorized invites

  6. Sharing: Public and Private. In private sharing, make it more detailed, more classified so that I can share with a set of people. =

  7. Maintaining a list of followers and a list of the people I am following gets very messy after a certain usage. 

  8.  No idea on what basis the recommendations of other singers, karaoke tracks, join invitations, recorded songs are given.

Research Synthesis

Based on the data that was collected out of the research, an empathy map, a persona and a storyboard were created.

“For a particular song, finding a recording I would love to join, is like finding a needle in a haystack!”

Persona

Empathy Map

Empathy map was created based on the data collected from the research. Direct quotations and statements helped to develop empathy towards the users and their requirements.

“There is more joy in sharing. The more people you get to together as a community to support the same thing, the more motivated you are to do more”

“I care about the voice quality and singing quality of the other singer I am collaborating with. I should really like it in order to go ahead and record with him or her”

Define

How Might We..?

As a very first step towards defining the problem, I came up around fifteen HMW statements based on the results of the research. The top three that I found the most interesting and of greater value are noted here:
 

  1. For a particular song, how might we make the search for the perfect singing partner, efficient, easy and delightful for our users?

  2. How might we make the process of finding other singers that the user wants to follow for future collaborations, a lot less random than it is today?

  3. How might we make the presentation of the recordings such that the metadata associated with it like the name of the song, the name of the singer, the name of the karaoke uploader etc. is very clear and pleasant to the eyes?

Ideation

I took the first two HMW questions into ideation. 

Crazy 8 technique: With each ideation round lasting for 5 minutes, each idea in a round was sketched in around 40 seconds. With each round, I kept on iterating & improving the previous ideas or came up with totally different ideas.

Story boarding

“It is wonderful to listen to a short singing clip while choosing a singing partner! Also, seeing the singer’s profile makes me feel very comfortable singing with him or her.”

Interaction Design

User Flow

The story boarding gave away the user flow of this particular task at hand.

Task: User finds a perfect singing partner for collaborating on a given song.

 

The user flow is associated with the digital product we are designing. Each page in the user flow matches with the site map, making the understanding of the flow very clear with respect to the actual pages that will be designed for the site. This is helpful to both, the designer and the developer.

Wireframes

The user flow was then translated into a set of wireframes representing the screens of the app and thus giving a rough idea on how the task on hand will be completed by the user as she interacts with it.

High Fidelity Designs

High Fidelity Prototype

SMULE Redesign: Before and After

This section compares and points out how exactly has the design changed in terms of improving, enhancing and introducing new features and new design to uplift the user experience.  

Songbook

Before

After

  1. Consistent and standard information about the track:
    Song Name and Movie Name. Since the same song can be a part of different movies, albums, remixes etc. this design helps the singer know what song is this precisely.

    The original design does not have uniformity regarding the track's information: could be the movie name, the singer name, the album name etc.

    Removed the description (loaded with emoticons) that the uploader provides because it marred the visual appearance as well as coherence.

     

  2. Karaoke track uploader:
    Included the label: Karaoke Track By which is not there in the original design. When seen in a larger group, along with join invites and recorded songs, it gets highly unclear what this name means.
    Is s/he the track uploader, the singer looking for invites, the singer who has already recorded this song?

     

    Provided a proper name of the uploader instead of a user name that sort of acts to hides the identity of the person.
     

  3. Included a good quality picture for the track.
    It works as the immediate identifier of the track. The picture does not have any text or any symbols on it.

All Options for a Song

Before

After

  1. Introduced a separate heading for the song name and the movie / album name. It is important to know what album or movie this song belongs to since there can be multiple versions of the same song and there can be multiple songs with similar names.
     

  2. JOIN LIVE: Notifying the singer that there is an ongoing opportunity to collaborate LIVE with somebody at that very moment.
     

  3. Song Information Card: Introduced a card giving out the important details along with the poster of this song. The poster and the details work like a primary record in a database. The people who upload karaoke tracks, who pass out invitations to join or the recordings need to not have this entire or the part of information repeated again and again in different formats.
     

  4. Songs vs Karaoke tracks: Existing application terms the Karaoke tracks as Songs which was confusing for my users.
    In my design, I have renamed it to “Karaoke Tracks” so that it is identified correctly.

     

  5. In the newer design, each Karaoke track maintains a standard format: 

    •  All map to the same picture

    • Contain the same information like the Song Name and the Karaoke Uploader Name.

      This greatly reduces the visual and mental load and confusion. In the existing version, each track has different information and a different picture causing my users to comb through the details carefully.
       

  6. Notification: A new feature to notify the user if a new karaoke track gets uploaded for the song. This adds value in the case where the user is not happy with the quality of the existing Karaoke tracks or wants something more.
     

  7. Singer Badge: A new concept of having a singer profile and a singer “level” has been introduced. The badge level shows how “pro”, how popular, how new the singer is which gives an indication to the user searching for a collaboration partner.
     

  8. Short Clip: In order to check how the other singer sings, instead of sitting through the track from the beginning (through the music), the user can hear a 30 second clip which gives a demonstration of the singers voice and notes.
     

  9. Notification: A new feature to notify the user if a new collaboration invite gets created, so that in case the user did not like any of the joining invites s/he can wait for a new collaboration request to get created.
     

  10. Request to sing again: The recordings that have already been created by the singers - you can request the singer to again sing the same song so that this time you can collaborate with him or her.
     

  11. The layout of the recording panel has also been changed to make it more visual and user friendly. The older design allows the user to add any details in any format. The new design removes this as all the information of the song is now mapped to the Song Information Card.
     

  12. Notification: A new feature to notify the user if a new recording gets created in case the user likes the voice and wants to collaborate with that singer again
     

  13. Singers who sing similar songs: A new feature where you will be matched to other singers based on certain criteria and the choice of the song you want to sing. Those singers will pop up in your list and you can invite them to sing this song.
     

  14. Inviting people whom you follow to sing this song so that you can join them.
     

  15. Sing with the original recording: A new feature where you have an opportunity to fill in your voice with the recording of the original artist of the song
     

  16. Other songs from the movie: Finally if the user is still dissatisfied and has not found any alternative to sing this particular song with a partner, s/he can choose a different song from the same movie / album. The chances are high that the other songs from the movie/album are of interest to the user given that the lyricist, music director and playback singers could be the same.

Singer Profile

Before

After

The color of the header in the new design reflects the color of the badge the singer has.
 

  1. Know the singer more: The newer design gives an opportunity to know the singer more since the singer can provide various social media links. Through this the user can find more about the singer and not feel that she is singing with a total stranger.
     

  2. Singer Badge: Gives an idea about the level of the singer, for example, how new, hold old, how professional, how amateur the singer is.
     

  3. About Section: A new section giving a lot of information about the singer is provided. This helps the user in getting matched in terms of their common musical interests.
     

  4. A well written review, whether a positive or a constructive, provides a wealth of information about the singer’s singing style, attitude, collaboration technique etc. It can be helpful to the user who is looking for collaborating with him.

Product Feature Highlights

Here are the different feature highlights that will create an efficient, quick and delightful experience for my users.

 

 

All the design ideas thought of and implemented through this design, highly increase the chance of finding a singing partner in an efficient and an enjoyable way!

 

One of the most important factor that helps in creating a delightful, pleasant and satisfying experience for the users, is the content. I have made couple of important changes to the way content can be added and the quality of the content:
 

  1. The pictures that are used for the karaoke track, collaboration invites and recordings:


    In the existing design, the pictures used by the karaoke track up-loaders, singers, collaborators and the recordings for a particular song were all different, of not good quality in terms of identifying / representing the song or the movie/album, with text written on the image and not zoomed out or in in a proper way. This gives quite a chaotic visual appearance to the page that listed all the options to sing / listen to a particular song.

    Through the new design, I have attempted to bring in a uniformity and visual appeal in the appearance by choosing a single picture representing the song with no written text.

     

  2. The amount of content permissible to upload for the track uploader, solo singer and the collaborator  for each song they are dealing with:


    In the current design, every individual user, be it karaoke track uploader, singer or an inviter does not seem to have any restriction on the amount of details he or she can provide for a particular song. It seems all this information is mapped to a single field e.g. “Description”. So for the same song, users would have written different details (loaded with emoticons and punctuation marks).

    Through new design, I have created restrictions on what all information can the users enter. This makes several entries of the same song - look like the same song!

     

  3. The concept of a MASTER RECORD for each song to which all other entries for that song map to:
     

    In the current design, each entry for one song, be it in the form of a karaoke track, a solo recording, a collaboration invite, a duet recording etc., looks like an independent entry with no commonalities. It is hence difficult to visualize that all these different entries are actually related to only one song. If I see this from the backend perspective i.e. database persisting, it looks like each of these are a different, independent record with no mapping to a single primary record.
     

    Through new design, I have introduced a master record that exists in the form of the song card that is displayed on top of the page. It has all the details, the song name, the movie/album name, the singers, the musicians, the lyricists, the poster of that song etc. Every other entry for that song will map to that master record. The users will be able to add only limited details like the user’s name, movie name etc. They will hence reuse all other information from the master record.

 

 

 

 

The layout is very clean and uncluttered. The uncluttered part has been achieved by organizing song information and having restrictions to what users can write about the song. This makes the actions of browsing and searching very efficient, very focussed and eliminates any distractions and visual fatigue.

Design Ideas

Content

Layout

Usability Testing


Task

Search for a particular song and attempt to collaborate with another singer for the duet

Testing Goals

To gather data that will serve as an input for the successive design iterations and design decisions to make the design align closely with the end-user’s expectations and requirements.
 

    1.  To have a list of the user feedback associated to:

      1. Persona pain points that were attempted to be addressed via this design version

      2. Persona unmet needs that were attempted to be addressed via this design version

      3. New user pain points that surface during testing

      4. New user needs that surface during testing
         

    2. To find out how was the user’s overall experience of using this website with respect to features, interactions, content etc. to complete the task at hand:

      1. Extraordinary: A list of things the user found extraordinary

      2. Normal: A list of things that the user found normal (as in seen in every other clothing website)

      3. Frustrating, Confusing: A list of things that the user found frustrating, confusing or plainly did not like it.
         

    3. To obtain the end user’s perspective on the application’s LEMErS
       

    4. To uncover any areas that were not considered as pain points or unmet needs or in general while making design decisions

       

Test Findings

Next Steps

I would like to reach out to Smule UX and Product team and share the design solution I have come up with. I am curious to know and understand their viewpoints and arguments behind the existing design. 

Summary

It was indeed a different and an enjoyable experience to understand an existing real life product and make the design suggestions and changes within a constrained environment of existing design and functionality. Throughout the process as I gained more insights and I thought of more design ideas, I was wanting to convey the same to the SMULE UX / Product team :) I am very happy and satisfied with the ideas I have come up with. I would certainly like to hear what the Smule product thinks!

Next Case Studies ...

IndianRailways_1x.png

India By Rail

Designed an experience of booking Indian Railway tickets, specially catered for the foreign visitors and tourists from the overseas.

TheFashionStreet_edited.png

Fashion eCommerce Website Design

Designed a clothing website and an online shopping experience for people who look for a great variety in clothing, affordable prices, great promotions and a clean, structured browsing and filtering experience.

GardenMum.png

The Garden Mum

Designed an experience which helps in diagnosing health problems with the plants, provide solutions, identify the plants as well as come up with a complete planting guide and care tasks for each and every plant you wish you plant!

Aditi Oza 2019