YouTube Music redesign
This project was a part of the Advanced Web Design course. I was tasked to work on any streaming platform and revamp its user experience. I chose YouTube Music to study its performance against competing platforms like Spotify and Apple Music.
Current state of the platform
YouTube music currently has a mobile application, a desktop website, and an iWatch application. The UI is pretty clean and straightforward. Some of the platform's prime features include video mode, song lyrics, and library management. However, the freemium version does not have essential features like background play and song downloads. The Sign-in process and onboarding are easy since almost all users have a Google account.
Do people use YouTube Music?
Referring to a global survey of music streaming services, YouTube Music does not hold a high share of users/customers. It is preceded by its competitors like Spotify, holding the highest share in the music streaming market. Other platforms like Apple Music and Amazon Music also win over YouTube music in the market game.
What's not working?
I use Spotify. To get a feel of YouTube Music, I started using the mobile application for a week as a casual listener. Therafter, I conducted a design audit of the mobile and desktop platforms. This provided me with the service's shortcomings, and opportunities of design interventions. A few things were noted right away.
SWOT analysis
To map the insights into why users don't prefer YouTube Music over its competitors, I laid out the strengths and weaknesses of the service, taking into consideration the overall experience of music streaming.
Experiencing music is a personal experience that varies for each individual. The way people explore and enjoy music changes depending on their motives and the user's environment. To gain insights into these goals, needs, and challenges of music streaming, I surveyed and interviewed people who use ANY music streaming service.
Survey
I surveyed to collect quantitative data related to the music-streaming behaviors of different user types. The survey captured patterns of how users explore their music and consume content on various streaming platforms. A majority of participants explored new songs and genres suggested or shared by their friends.
Interviews
To gain a deeper understanding and to empathize with the target audience, I conducted Contextual Inquiries with people who stream music on a regular basis. Observing the users and interacting with them on their music streaming behaviors gave deeper insights into their needs and pain points. I got to know the channels they use to explore music, and which aspects of the platform are the most valuable for the users.
"What are my friends listening to?"
From my interviews, I mapped out the various data points collected in my interview and bucketed them into common themes. The most valuable insight that I gained from the interviews and survey data was that users want to know the songs their friends are listening to. They desire to have similar musical tastes so that they can enjoy songs with their gang!
User personas
The primary research gave insights into the categories of users. There were 2 major segments of music-consuming behavior on platforms like Spotify and YouTube Music. These were - The Casual Listener and the Artistic Musician. The two user segments had varying needs and challenges when streaming music online.
JTBD - Job to be done
These two user segments clearly have different motivations for using YouTube Music. Hence, the solution must cater to both of their needs in order to attract more users. I mapped out the jobs to be done in order to satisfy both of the user needs and make sure they get what they are looking for in YouTube Music.
Ideating for the Users
Experiencing music is a personal experience that varies for each individual. The way people explore and enjoy music changes depending on their motives and the user's environment. To gain insights into these goals, needs, and challenges of music streaming, I surveyed and interviewed people who use ANY music streaming service.
Ideation
After defining the user needs and identifying opportunities for design interventions, I went to the whiteboard and sketched out a few ideas that would satisfy those needs. The two most desirable of them were - Party mode for listeners, and tutorials for artists.
Feature 01 - Jam session
Today's generation likes sharing everything with their friends, including music! So why not enable them to do so on YouTube Music? The Jam feature lets users listen to and enjoy songs with friends from anywhere. They need not be together to do so. Distance won't users of YouTube Music from enjoying songs, just like jamming with their friends.
Feature 02 - Tutorials
The other persona was of the artist who wants to upgrade his/her musical skills. Providing links to music tutorials will help the musicians to generate better content on the platform. Local artists will be willing to use YouTube Music for this feature which will lead them to uploading content on the platform. This will bring more data, and as a result, more users to YouTube Music.
Feature list
The two ideated concepts could come in multiple shapes and forms. In order to scope the elements included in these concepts, I bucketed various features into the MoSCoW framework, listing down the primary, secondary, tertiary, and unwanted features which I had ideated.
Site flow
The site flow is a combination of a sitemap and a user flow. It shows the various pages and content of the new UI along with the various paths a user can take to reach the desired location on YouTube Music.
Wireframes
Login
Song preview
Home
Jam session
Friends list
Jam chat
Home
Friends list
Jam session
Jam connection
Tutorials
Tutorial videos
Moodboard
Music has a warm feeling, depicting a calm and rhythmic nature. I wanted to capture that feeling in the moodboard for YouTube Music. I selected warm shades of amber-orange, blending with YouTubes brand color - red creating a soothing gradient and giving a warm feeling to the mood board. The warm color palette will make YouTube Music stand out from competitors like Spotify and its cool hue - Green.
UI kit
Mobile UI
Home screens
Friend's profile
Jam screens
Explore & Tutorials
Web UI
YouTube Music on Apple Watch
As a part of the course, we had to design the streaming service on a non-mobile/web platform and adapt the interface of our novel features (Jam, Tutorials) according to the use case of the thrid device. I chose the Apple Watch interface.
Why use a smartwatch for YouTube Music?
-
Youtube Music has an existing application on Apple Watch, which has basic functionalities related to the streaming service. These could be used to leverage the new features being proposed.
-
A Smartwatch will enable an on-the-go music experience allowing users to control the music without taking their phones out while listening to their favorite songs.
-
The novel features proposed, like Jam sessions and Group chats, can be provided as quick actions on the smartwatch, providing a pleasant experience for YouTube Music's users.
Apple's WatchOS guidelines
Before designing the UI, I read the guidelines provided by Apple for Smartwatch interfaces. They helped me scope the list of features and decide on what elements to keep in the Watch UI. Some of the important guidelines included things to avoid while designing a smartwatch UI; the loading animation is NOT desirable in a smartwatch UI as the user has to hold their wrist up while the action is in progress.
Feature list
The Mobile and the Web UI had selected features catering to their use-case scenarios. Similarly, the YouTube Music application on Apple Watch would require different features catering to users' experience while using the watch. Scoping the features for the Watch UI was a challenging task. I considered various aspects like - button sizes, font sizes, readability, and angular views. I bucketed the necessary features into the MoSCoW framework, similar to the scoping of the Mobile UI features.
Watch UI
Always on display
Home screen
Song player
Friends list
Jam session
Adding a song in Jam
Jam chat
Quick reactions
Usability testing
I wanted to test whether the designed UI was working as intended on the actual Apple watch. Using a plugin, I mirrored my prototype on an Apple Watch and tested it with five users. Having the users navigate the prototype on an Apple watch gave valuable insights into what's working and what's NOT working with the designed UI.
Test findings
The usability testing showed compatibility issues. Global elements of the WatchOS, like 'time', overlaped with some of the UI elements. Apart from the visible changes, I could validate the design decisions to make sure the UI elements worked as intended.
Finding 01
Overlapping elements :
The 'Jam connect' button on the home screen and the 'member profiles' on the Jam chat screen were overlapping with WatchOS's global clock element in the top right corner.
Finding 02
Button size too small :
The action buttons on the Jam screen were too small for the finger tip to touch. The Apple watch was not recognizing the touch on these buttons and hence, I increased their sizes.
Validation
Visibility of song-time indicator :
I designed the song-timing indicator to appear above the finger as the user forwards or rewinds a song by dragging the timeline. This worked perfectly as intended - the users could easily read the song's timing.
