Music on Whatsapp

10 min read

PUBLISHED ON

10 January 2021

Music on Whatsapp

Odin Logo

ODIN

img

Odin Logo

ODIN

img

MY ROLE

Product Desgin, Visual, & Interaction Design

TEAM

Ayaneshu, Prasang, Vinyas, Chaavi, Akanksha

TIMELINE

April 2020

OVERVIEW

Design Studio is a campus group at IIT Roorkee that advocates for design. Within this group, members are encouraged to work in their preferred medium and even switch between mediums as they see fit. The group regularly conducts sprints for different design mediums, and during this particular instance, a 12-day design sprint was organized for product design.

This documentation captures the activities of the design sprint conducted by Design Studio, IIT Roorkee, during the lockdown in April 2020, predating the introduction of Facebook Rooms. The sprint involved addressing a specific problem statement, and the participants were divided into four teams named Shree, Sanjay, Leela, and Bhansali, each consisting of 5-6 members, including students ranging from the 2nd to the 4th year.

Team Leela, my team, collaborated virtually to devise a tangible solution for the given problem statement. Opting for the approach outlined in "Sprint" by Jake Knapp, we chose this method because it was our first virtual sprint, and using a proven methodology helped us efficiently navigate the process.

MY ROLE

Product Desgin, Visual, & Interaction Design

TEAM

Ayaneshu, Prasang, Vinyas, Chaavi, Akanksha

TIMELINE

April 2020

OVERVIEW

Design Studio is a campus group at IIT Roorkee that advocates for design. Within this group, members are encouraged to work in their preferred medium and even switch between mediums as they see fit. The group regularly conducts sprints for different design mediums, and during this particular instance, a 12-day design sprint was organized for product design.

This documentation captures the activities of the design sprint conducted by Design Studio, IIT Roorkee, during the lockdown in April 2020, predating the introduction of Facebook Rooms. The sprint involved addressing a specific problem statement, and the participants were divided into four teams named Shree, Sanjay, Leela, and Bhansali, each consisting of 5-6 members, including students ranging from the 2nd to the 4th year.

Team Leela, my team, collaborated virtually to devise a tangible solution for the given problem statement. Opting for the approach outlined in "Sprint" by Jake Knapp, we chose this method because it was our first virtual sprint, and using a proven methodology helped us efficiently navigate the process.

MY ROLE

Product Desgin, Visual, & Interaction Design

TEAM

Ayaneshu, Prasang, Vinyas, Chaavi, Akanksha

TIMELINE

April 2020

OVERVIEW

Design Studio is a campus group at IIT Roorkee that advocates for design. Within this group, members are encouraged to work in their preferred medium and even switch between mediums as they see fit. The group regularly conducts sprints for different design mediums, and during this particular instance, a 12-day design sprint was organized for product design.

This documentation captures the activities of the design sprint conducted by Design Studio, IIT Roorkee, during the lockdown in April 2020, predating the introduction of Facebook Rooms. The sprint involved addressing a specific problem statement, and the participants were divided into four teams named Shree, Sanjay, Leela, and Bhansali, each consisting of 5-6 members, including students ranging from the 2nd to the 4th year.

Team Leela, my team, collaborated virtually to devise a tangible solution for the given problem statement. Opting for the approach outlined in "Sprint" by Jake Knapp, we chose this method because it was our first virtual sprint, and using a proven methodology helped us efficiently navigate the process.

“If the feature needs an explanation, it’s not ready.”

Tale of the Pandemic

Due to the COVID-19 Pandemic, a nationwide lockdown was enforced, confining everyone to their homes. It has been several months, and the absence of parties and late-night music sessions with friends is keenly felt. The dynamics of fighting over the volume, debating on who gets to play the next track, suggesting songs, skipping to favorite parts, and singing together are yearned for, to be experienced once again.

As time has passed, everyone has settled into their personal spaces, and the initial excitement of the lockdown has waned. The once-thrilling long video calls with friends have turned somewhat bothersome, and the drive to be creative and productive has diminished. However, technological advancements have been instrumental in helping us navigate this challenging situation thus far, and they continue to evolve to meet the changing needs of users.

My Role in the Project

I contributed to the creation of the user interview questionnaire. During the user interviews, each team member engaged with the target audience related to the problem statement, gaining insights into their challenges, solution suggestions, and valuable perspectives.

Additionally, the team conducted a Competitive Analysis, where each member identified and studied two competitors, listing down all the features that could potentially be incorporated into our solution.

Collaborating with a 4th-year student, I played a key role in finalizing the user journey for our solution. Subsequently, I took charge of wireframing and prototyping the proposed solution.

Problem Statement

Listening to music together with our loved ones is truly a precious experience, but unfortunately, amidst this global pandemic, we are stuck in our homes, and we all know that sharing Spotify/YouTube links isn’t enough.

The problem statement was to ideate a digital solution that helps the users recreate a similar experience of listening to music and communicating in a room full of people while staying at their homes, while clearly mentioning all assumptions.

Starting with the Research

Setting a Long-Term Goal

Ensuring a shared understanding of the problem statement was deemed crucial for team alignment. To achieve this, a brief exercise was conducted. Each team member was tasked with jotting down five goals they aimed to accomplish by the end of the sprint. Subsequently, everyone was allocated five votes to endorse the most relevant goal(s). Through a majority vote, two goals emerged as the most prominent, and these were combined to articulate the long-term goal we aspired to achieve.

"Enable the users to stream music together and allow them to communicate simultaneously."

Defining a Target Audience

To streamline the scope of the solution, we opted to address the needs of a specific demographic—young adults aged 17 to 25 years.

This age group, known for their active social lives and frequent socializing, has been significantly affected by the restrictions imposed during the 2020 lockdown. Young adults in this age range are typically tech-savvy, open to new experiences, and have a strong inclination to explore novel concepts and solutions.

Talking to the Peers

We developed a comprehensive questionnaire for user interviews, and each team member engaged with their respective social circles to gather insights. Through conversations with friends, we documented users' pain points and suggestions.

The team then compiled and consolidated the interview data, extracting valuable insights to inform our further considerations.

questionnaire asked to the user

questionnaire

img

questionnaire asked to the user

questionnaire

img

What users said

User Statements

img

What users said

User Statements

img

Looking out for Competitors

In a one-day exercise, each team member identified existing products to address the problem, listing pros and cons. Findings were shared in the subsequent standup, enriching our understanding and informing our solution.

What users said

Competitive Benchmarking

img

What users said

Competitive benchmarking

img

What users said

Competitive Benchmarking

img

Insights

1

Mode of Communication

The most common way of communication in all the platforms was exchanging text messages across that platform.

2

Streaming Softwares

Many platforms streamed music and videos from third party software; majorly youtube and Spotify for songs.

3

Contributors in the Playlist

Popular platforms preferred multiple contributors to the playlist instead of a single DJ dictating the whole party.

Exploring Solutions

Everyone on the team was given six hours to sketch potential solutions using user journeys or pen-paper wireframe flows. Afterward, allowing everyone five votes to select the most logical and favoured flows. The top two flows emerged, leading to the development of a more refined and consolidated flow.

User Flows - Explorations

User Flows - Explorations

img

User Flows - Explorations

Competitive benchmarking

img

User Flows - Explorations

User Flows - Explorations

img

User Flows - Explorations

Ideated user flow

img

User Flows - Explorations

Competitive benchmarking

img

User Flows - Explorations

Ideated user flow

img

The Eureka Moment

After the final flow was made, we observed that this whole time:

"We were primarily trying to solve communication and then trying to integrate a music co-listening experience to that."

We aim to digitally recreate the nostalgic experience of listening to music in a room with friends and enjoying a good time together. The idea struck us: "Why not integrate a music-sharing and listening experience into an existing communication platform?" During our research, we identified three major platforms that people preferred:

  1. WhatsApp

  2. Instagram

  3. Facebook.

Our target audience showed a preference for group chatting and video calls on WhatsApp over Instagram or Facebook. To validate our assumption, we found supporting statistics:

  • One billion groups are in use on WhatsApp.
    Creating a new group for every music party is not a hassle.
    Onboarding friends to a party is straightforward, without the need to switch between different platforms.

  • There are over 340 million WhatsApp users in India alone and over 2 billion worldwide.

Based on this information, we decided to develop a feature that offers a music co-listening experience in WhatsApp. This solution addresses the problem of switching between apps, sharing invite links on a communication platform, or making calls for a virtual party.

Solution

“WhatsApp approaches problems in a practical way. We try to design and build features that are obviously useful. If the feature needs an explanation, it’s not ready.”

User Flows - Explorations

Feature Introduction

img

User Flows - Explorations

Competitive benchmarking

img

User Flows - Explorations

Feature Introduction

img

A few assumptions we made while designing

  1. Songs can be streamed on WhatsApp using a Youtube API.

  2. Every user has a google/youtube account and youtube installed.

  3. Whatsapp calls and video calls will be disabled for the people attending the party.

Creating a Party

We've replicated this scenario of that room filled with friends, grooving to the tunes played by in-house DJs, with everyone contributing their favourite songs on WhatsApp.

When someone initiates a party in a group, they assume the role of the DJ, having the ability to add or remove songs from the playlist. Participants joining the party become attendees, with the privilege to vote on the songs.

The group’s chatting interface splits into 2 parts:

  1. Chat — This is the usual chatting interface containing all the text, images, videos, etc.

  2. Party — This section contains all the songs being played and the music player as well.

For sorting the Playlist, there is an UPVOTE option. Everyone in the party will be able to vote on the song they want to listen to. The most upvoted song reaches the top of the queue and will be played next.

Creating a Party

vid

Creating a Party

vid

Room

Room

img

Room

Competitive benchmarking

img

Room

Room

img

Widget States

Widget States

img

Widget States

Competitive benchmarking

img

Widget States

Widget States

img

Add DJ

vid

Add DJ

vid

Deleting a Song

vid

Deleting a Song

vid

Joining a Party

You can join the party from the chat itself.

The play/pause and skip songs buttons will be disabled for attendees, ensuring a real-time experience where only the DJ can control playback. This access distinction between the DJ and attendees mirrors the roles of Admin and Group members, respectively. This design choice aims to prevent any disruption in the party and maintain the overall vibe.

Join a Party

vid

Join a Party

vid

Audio Player Details

Player Details

img

Audio Player Details

Competitive benchmarking

img

Audio Player Details

Player Details

img

When does a Party ends

  1. As soon as the last member exits the party room, the party ends automatically.

  2. When all the songs in the playlist are finished, and the DJs are not adding more songs, the party ends after a timer of 5 minutes. (We were not able to validate the time after which the party ends.)

Exiting a PArty

Exiting a Party

img

Exiting a PArty

Competitive benchmarking

img

Exiting a PArty

Exiting a Party

img

Party Ends Automatically

Party Ending

img

Party Ends Automatically

Competitive benchmarking

img

Party Ends Automatically

Party Ending

img

Communication during a Party

We restricted ourselves to text chats only and avoided video calls and phone calls as WhatsApp restrict the number of video call/call attendees to only eight. Another reason for the same is to handle the volume of individual members and their music, similar to discord.

We aimed to deliver a minimal function solution that allows the users to communicate and does not hamper the music co-listening experience at the same time.

Communicating during Party

Communicating during Party

img

Communicating during Party

Competitive benchmarking

img

Communicating during Party

Communicating during Party

img

Explorations

Position of the Music Party icon on the app

Final Position — We decided to place it in the pin bottom sheet.

Reason — Whatsapp is a communication platform, and the pin bottom sheet has the plugins for the chat, so the hierarchy of music party fits this.

Explorations of Party Icon

Explorations - Party Icon

img

Explorations of Party Icon

Competitive benchmarking

img

Explorations of Party Icon

Explorations - Party Icon

img

Party Room — Position of the party room as a tab or within the chat.

Final Position — We decided to create a separate tab for the music playlist.

Reason — We chose to go with separate tabs because it eases the switching between the Chat and Party so that one can simultaneously text and vote on different songs seamlessly. In this way, we were able to simplify the overall design for the music listening experience.

Position of Party Room

Position of Party Room

img

Position of Party Room

Competitive benchmarking

img

Position of Party Room

Position of Party Room

img

A validation to our solution is when Facebook introduced rooms for all the platforms; Instagram, Whatsapp and Facebook.

Future Scope

  • Video calls can be incorporated into the music co-listening experience during a party with an option to control each individual’s volume separately.

  • There can be more ways to add songs to the playlist (directly from the chat, perhaps). So, suggesting and adding songs to the playlist can be improved upon in the next versions of the solution.

What more this solution is serving

This feature can also accommodate the larger and more diverse user base, with the increased number of participants up to 256 people in a Whatsapp group. There can be many edge cases that need to be solved, but I think this solution covers a major chunk of the user base and their needs.

Final Thoughts

I believe that as a team, we achieved an outstanding outcome in reaching the final solution. The entire sprint was marked by numerous challenges and successes, and the journey was not as seamless as portrayed in this article. Despite the ups and downs, it was a valuable learning experience. Throughout the process, we had to discard several promising ideas, experiment with various methods, and tailor existing processes mentioned in "Sprint" to suit our specific needs, all aimed at enhancing the overall collaboration experience.

While acknowledging that "there is always a better solution than the existing one," similar to Facebook introducing rooms, I am pleased with the collective effort invested by the team during this sprint to deliver a satisfactory and well-thought-out solution within the given timeframe.

Read a more detailed version on Medium —

Read a more detailed version on Medium —