Kavya's UI/UX Portfolio

HOME

WORK

ABOUT ME

DIGITAL ART GALLERY

June 2024 - September 2024

PROBLEM

"You should listen to this song!" you text your friend along with the song link. A couple days later, you ask them what you thought of the song, but your friend tells that they have forgotten what song you sent them.

Today, sharing music with friends is quite a limited process. Users share music simply by sending the link to a song, or just by word of mouth if the streaming platforms differ. Even after sharing music, friends would usually forget to listen until many reminders later.

"You should listen to this song!" you text your friend along with the song link. A couple days later, you ask them what you thought of the song, but your friend tells that they have forgotten what song you sent them.

SOLUTION

So how do we solve this?

WeJamzz! is a responsive mobile and website experience that provides an intuitive and quick music sharing experience between friends subscribed to the same or different streaming platforms, and allows users to view and share trends in different musical genres and artists.

Created through the Google UX Design Professional Certificate Program.

SKILLS USED:
Figma, UI/UX Design, Wireframing, Prototyping, User Research

Prototype Link

So how do we solve this?

Created through the Google UX Design Professional Certificate Program.

SKILLS USED:
Figma, UI/UX Design, Wireframing, Prototyping, User Research

Prototype Link

Mobile Experience

Mobile Experience

Website Experience

Website Experience

HOW DO PEOPLE SHARE MUSIC WITH OTHERS?

Before coming up with an idea of what benefits this music sharing app will provide, I needed to understand what people found frustrating with this process.

I surveyed people between the ages of 18 and 30 in order to understand their interests, levels of listening to music, and how they go about sharing music with people.

While conducting this research, I assumed that the people I interviewed listened to music and loved sharing music all the time, but realized my interviewees had different levels and views about sharing music with their friends.

This inspired me to create a mobile app that encourages users to share music easily.

Before coming up with an idea of what benefits this music sharing app will provide, I needed to understand what people found frustrating with this process.

I surveyed people between the ages of 18 and 30 in order to understand their interests, levels of listening to music, and how they go about sharing music with people.

This inspired me to create a mobile app that encourages users to share music easily.

1

Users found it difficult to share music with people on different streaming services (e.g. Spotify users sharing with Apple Music users).

2

People that users share with often forget to listen to the song.

3

Users cannot share a specific part of a song and have to send timestamps separately.

4

People that users share with often do not know the artist/genre.

VISUALIZING THE USER

Conducting the user surveys allowed me to understand my target audience better, as well as their frustrations and what they want in a music sharing app. This led to my two main personas, John and Kate, allowing me to define more closely my users' needs.

John

John is a 20-year-old full-time undergraduate student who listens to music very often and loves to share new music with his friends. He often uses the "share link" feature but he wants to find a way to share music with people who are subscribed to a different platform.

Kate

Kate is a 30-year-old full-time employee who loves to play music on Spotify, When she wants to share music with her friends, she plays it in the car for them. She wants to find a quick way to share music to people and to be able to share one part of a song instead of the whole thing.

USER JOURNEY

The user personas and stories provided me with a plan to design WeJamzz!, and in order to solidify that idea, I crafted the my personas' journeys through the experience using user journey maps.

These journey maps illustrate the process of each persona creating an account and doing a specific action (select songs to send, and selecting parts of songs to send).

The user personas and stories provided me with a plan to design WeJamzz!, and in order to solidify that idea, I crafted the my personas' journeys through the experience using user journey maps.

These journey maps illustrate the process of each persona creating an account and doing a specific action (select songs to send, and selecting parts of songs to send).

Mapping out the flow of John’s user journey revealed the benefits of having an easy-to-use, step-by-step process of sharing songs with friends, and allowing users to make connections with friends.

John's journey:

Mapping out the flow of Kate’s user journey revealed the benefits of making sure that features are viewable and easily accessed by the user.

Kate's journey:

PROBLEM STATEMENT

Mac is a part-time employee, full-time student, and a music lover who needs a quick and easy way to share music with his friends because sharing music is a frustratingly limited process and leads to forgetfulness.

Mac is a part-time employee, full-time student, and a music lover who needs a quick and easy way to share music with his friends because sharing music is a frustratingly limited process and leads to forgetfulness.

GOAL STATEMENT

The problem statement then led into my goal statement, which kickstarted creating the user experience for WeJamzz!:

WeJamzz! will let users quickly and easily share music and music trends with friends in different ways, which will affect how people connect with each other by allowing them to have a special platform dedicated to sharing music. We will measure effectiveness by analyzing how many times people share music with others.

WeJamzz! will let users quickly and easily share music and music trends with friends in different ways, which will affect how people connect with each other by allowing them to have a special platform dedicated to sharing music. We will measure effectiveness by analyzing how many times people share music with others.

FLOW

After conducting a quick competitive audit, I mapped out WeJamzz!'s user flow, which covers the simple steps in sending a song bucket to a friend, starting from a search feature, then adding a song to the bucket, then choosing a part of a song to send, then sending it to a friend.

FEATURES: narrowed down WeJamzz!'s features.

FEATURES

ACCESSIBILITY

quick sharing
minimal and intuitive app design
option to select language

SHARING

send parts of songs

create chats with friends
quick sharing
notifications/reminders for songs sent
trending news in music that users can share with each other

BROWSING

song/genre recommendations
create a “bucket” of songs to add to before sending

THE DESIGN

To kick off the design, I began sketching the features to get a sense of what the app would look and feel like.

For the main homepage, I sketched out different ideas and starred the components that I liked that most. However, the overall framework I decided for the homepage would have:

A carousel displaying a song of the day (based on the user's interested, a trending artist, and a trending genre

To kick off the design, I began sketching the features to get a sense of what the app would look and feel like.

For the main homepage, I sketched out different ideas and starred the components that I liked that most. However, the overall framework I decided for the homepage would have:

A carousel displaying a song of the day (based on the user's interested, a trending artist, and a trending genre

1ST PROTOTYPE BEFORE USABILITY TESTING

The homepage displays a trending song/artist/album, followed by a search feature and recommended songs based on genres and artists that the user has favorited.

When the user adds songs to their bucket, they can view it and select a part of each song that they want to send. These steps allow the user to send all the songs, including specific parts, to their friend.

I also added a feature that allows users to explore trending news about specific genres and artists, and easily share these with friends. This addition would encourage users to engage with and share a broader range of content beyond just songs, through shared interests.

1st USABILITY STUDY

To understand how my users navigate through the main features, I conducted a usability test on the lo-fi prototype with the purpose of answering these main questions:

How long does it take to add songs to a bucket and share it with a friend?

Is there any part of the experience where the user gets stuck or confused?

How long does it take to send a music article to a friend?

MAIN INSIGHTS

1. Based on the theme that for some users, it is not immediately clear where the song bucket is, an insight is: users need better cues for the location of the song bucket.

Based on the theme that: some users are unsure of what the song bucket is, an insight is: users need a short tutorial on what the song bucket does.

Based on the theme that: users were interested in integrating with streaming platforms, an insight is: users need a way to connect their streaming service account to WeJamzz!.

Based on the theme that: few users wanted to save their favorite songs/parts of song, an insight is: users need a way to save and view their favorites on the app.

DESIGN

THE HI-FIS

LINK TO FINAL MOBILE PROTOTYPE

LOCATING THE BUCKET

The first priority was to design a better way for users to understand where the song bucket was located and what to do with it.

When the user adds a song to their bucket they are prompted to click on the bucket icon in the top right corner.

VIEWING OLD SONG BUCKETS

Users also expressed wanting to view their old song buckets that they have sent, along with when and who they sent them to.

This allows them to keep track of their history of song buckets and reuse songs from before as well.

Users also expressed wanting to view their old song buckets that they have sent, along with when and who they sent them to.

This allows them to keep track of their history of song buckets and reuse songs from before as well.

VIEW FAVORITES

These mockups display a way for users to save and view their favorite songs.

After favoriting a song from the homepage, the user can view their favorites from the profile screen.

2ND USABILITY TEST - HI-FI PROTOTYPE

For the second usability test of WeJamzz!, I wanted to test the usability of these features:

View the song bucket and select a part of a song
Find the trends/news page, and send an article to a friend.
View messages, and view a song bucket that you received.
View profile and view liked songs.

And finally, I wanted to study the users thoughts and feelings about using the app as a whole, and if there were any suggestions for improvement.

MAIN INSIGHTS: Since this was the second usability study, there were minor changes I needed to make for the second iteration of the mockups.

SONG PART SELECTION

To make part selection easier, selecting by the lyrics would be more helpful.

Before, the user could only select the part using the audio waveform visualization, but I thought it would be more useful to include lyrics so that they can select the part they want easily.

Before

After

VISUALIZER

For accessibility purposes, some users wanted a way to view the lyrics at the same time as the song after receiving the bucket. The visualizer therefore provides a way for people with hearing disabilities to experience the song in a visualizer, via a youtube video and lyrics.

DESIGNING THE WEBSITE

To kick off designing an accessible website experience for WeJamzz!, I first created a rough sitemap that outlines the structure:

HI-FI MOCKUPS

The first text on the homepage summarizes the product as a whole: “Share music and trends with friends”, followed by a brief description of the website and a button to sign up.

Popular artists, genres, and articles take up the rest of the homepage.

FINAL PROTOTYPE

TAKEAWAYS + NEXT STEPS

TAKEAWAYS

An interviewee quoted “I really like the idea of this app, I’m really excited to see what new features you come up with in the future!” Music is something that binds all of us, and a sharing app that allows people to share their musical interests with friends will have a great impact.

What I learned: Considering accessibility taught me to design for specific needs and think of perspectives other than mine. I learned to brainstorm features based on user research and keep their thoughts and feelings in mind while designing.

Going back, I would iterate more on the bucket feature to generate more ideas for uniqueness, and make it more appealing for users to use.

NEXT STEPS

Since we now live in a world of AI, I would like to explore how I can incorporate an AI bot that provides music recommendations to users tailored to their preferences. Additionally, the bot could also provide recommendations on songs to send to their friends based on their friends’ preferences.

Kavya Verma

Contact

kavya.verma@gmail.com

Kavya Verma

Contact

kavya.verma@gmail.com

Kavya Verma

Contact

kavya.verma@gmail.com