String theory

String Theory's mission is clear: “To help people listen to whatever music they want, whenever they want, wherever they want—in a completely legal and accessible way.” In order to help String Theory improve engagement and retention in the app, String theory wants to expand its capabilities. For this project, I designed an in-built messaging feature in order to help people connect with each other through music. This would help people share music and playlists through the same app.

Project Overview

Challenge

To seamlessly create a music app that allows users to share music on the same app. It would help expand the app's capabilities and help users to connect with each other on a deeper level through music.

Role

UX , UI designer

Time

3 weeks

Task

Sollution

An in-built messaging feature that would allow users to sync their contacts and text other users.
A feature that would allow users to share their music and playlists on the same app.

Designing a new in-built messaging feature for String Theory

Tools

Figma , Miro

Design Process

Product
Definition

Research

Analysis

Design

Product Definition

The Problem

Music apps are all about listening to music or listening to a great podcast. But music apps could be a lot more than that. What if people could text in the same app they listen their music to? People tend to share tracks or playlists from their music app and share it via different social media platforms. My task was to seamlessly create a music app that allows users to share music on the same app, that would help expand the apps capabilities and help users to connect with each other on a deeper level through music.

The Task

Our task is to create a platform that helps user to text in the same app they listen their music to. The user should be able to share their music (tracks) and playlists in an easy manner without using any other app.

Research

Provisional Personas

Now that I had a better understanding of String Theory's task, I wanted to start exploring and identifying who their target users might be. By creating provisional personas, I was able to quickly start empathizing with people who used music apps and gain a basis for who I would conduct user interviews with to validate this information.

The Explorer

(25-30 yrs)

Goals

Listen to music in the background while he is doing something else.
Discover different genres of music.

Pains

Paying for the premium tier service.
Streaming services overplaying the same songs again and again.

The Fangirl

(18-24yrs)

Goals

Listen to her favorite artists.
Share her favorite music to friends.

Pains

Doesn't get notified about the new releases of the songs.
Has to switch apps to share music.

The Survey

I conducted surveys via Google forms and interviewed few of my friends and family members who listen to music. Some of these people were obsessed with music and always have a ear phone plugged in like me but others listened to music couple of times a week. Below I share the questions that were asked in the survey and my situational prompt to better understand the music hearing triggers.

My first job was to ask the right questions by asking the users what they think of the current music app. Throughout the interview process I wanted to get the most honest answers while avoiding false validations.
My second job was to include questions related to the in-built text feature, and how it would help the users.

(The above table shows how I made changes to my questions to get
honest answers from the users)

Survey Questions

Do you currently listen to music via a app? If so which one do you use.

What are your favorite features of the music app that you currently use?

How often do you share music or your playlists to other users via different apps?

Tell me the last time that you shared music from the current music app that you're using?

How interested are you in the music industry?

How useful would it be have an in-built messaging feature on your music app?

How many artists from the music industry do you follow?

How important is the sleep timer feature in a music app?

At what time of the day do you listen to music and what are the activities you do whilst listening to it?

These questions help me discover behavioral triggers and
current patterns of users listening to music

Affinity Diagrams

An affinity diagram is a card slotting exercise that helps makes sense to a large quantities of data. For me, this whole process was inspired by Cody Hebert, a well known UX designer. I conducted surveys and interviews and took requests from the designers and put them on post-it notes to synthesize all the data.

Analysis

User Personas

I created a user persona that accurately represented who I am designing for. This persona helped guide my decisions along the design process to make sure that the solution I am designing is centered around our users.

Brainstorming

In the next step, I started the brainstorming process. I used Abdul's experiences with other music apps and started working on ways I could help make a great music app for everyone.

Design

Project Goals

After coming up with different solutions for the main problems identified, I started to lay out the strategy in terms of how these solutions would be implemented. I started by clearly defining the project goals to understand what we’re trying to achieve through implementing these solutions.

Business Goals

User Goals

A music app with a wide range of quality music.

To be a top-notch Music app.
Expand Social capabilities.
Help people by providing them best quality music.

To share music and playlists on the same app.
To know the happenings of the music industry.
A in-built messaging feature to share and chat with people

Provide people with an easy share feature on the app.

Design

User Flow

Now I wanted to take an even deeper look into the overall user’s journey while interacting with the new features. In order to more deeply empathize with the user, I created a user flow to explore the scenarios the users would be in and the different paths and decisions they would encounter when trying to complete the key tasks defined.

Abdul wants to share his playlist to his friend from work. Abdul is using the new share and text feature on the String theory app.

HOME

PROFILE

SELECT PLAYLIST

TAP ON THE SHARE BUTTON

SYNC CONTACT

CLOSE APP

SEARCH CONTACT

SELECT CONTACT

TAP ON THE SEND BUTTON

TEXT THE CONTACT

Abdul has now shared a playlist to his friend and texted him on String theory music app by syncing his contact.

Wireframes

Once our simplified versions of the user flows were created it was now time to create the wireframe for the app. This helped us to discover potential components to create within the design and experiment with different controllers.

Textures & Colors

I have always tried to bring the physical world to my digital space in my design process. To do this, I put myself in the shoes of the customers and try to observe them and try to understand what makes their experience delightful. For this music app I came to know how important a app with vibrant colors would make. A simple yet fresh color was my primary focus .

Typography

Open Sans

Regular, Medium, Bold

UI Colors

#B100CE

#FFFFFF

#000000

#C4C4C4

Textures Used

High Fidelity Mockups

With the above given typography, color palette and textures chosen, I have dropped images which are suitable to the frames and designed out a subtle and simple UI for the String Theory music app.

The Solution

My task was to create a messaging feature right here in the app where people could talk about music and also share their music and playlists via the same app.

Low fidelity wireframes

Step One

The first step was to add a hamburger menu on the top right corner when the music or the track was playing. The menu would contain many features in which the share button would be included. The share button would allow the user to share music or playlists on the same app and via other apps.

Step Two

My next task was to find out a way through which users could sync their contacts from their mobile phones and message other users from their contacts. The sync button helps the users to sync their contact. The user could message all the people from their contacts who are using the app.

Step Three

High fidelity wireframes

High fidelity Mockups

Project Reflection

I faced new challenges during this project that I haven’t faced before - seamlessly integrating and creating new feature into the design and designing for a mobile application that I wasn’t entirely familiar with.

Through this project, I learned the importance of really diving into studying the design and flow of the application to introduce a new feature in the String theory music app. Doing research on the background and how the app evolved was also key to identifying the best solutions for the problems at hand.

Adding Features

After the first version of the app has launched, I would observe how people are using it and work on updating priorities and adding new features to the app.