New Feature For YouTube Music: A Case Study
Overview
As a new designer joining a team, you’ll often have to rapidly come up to speed on your products and users, and quickly iterate on proposed solutions under tight timelines.
Your other stakeholders will all have opinions, and you’ll have to get used to supporting your claims and finding ways to incorporate new features into the existing platform based on user needs.
Analyze an already existing and highly adopted app and incorporate a new feature into the existing product — YouTube music.
The purpose of this project was to practice adjusting quickly on a team with existing products. We were expected to analyze an existing product and incorporate new features into it. So I chose YouTube music because this is the app that I used the most. The user flow that determined the features I incorporated was helping a user customize a playlist. For this project, I had two deliverables: a low-fi prototype and a hi-fi prototype. I worked on a native android app ‘cos this was one I was used to.
Problem Statement
The problem I solved was the difficulty with customizing playlists both manually and using YouTube’s algorithm. I wanted to be able to carryout actions on multiple songs on the queue at once and also train the algorithm to not recommend songs from a particular artist.
Having a problem statement is important to this project because it made it possible to test the functionality of the project as well as the success metrics — increase in retention and referral rates.
Users & Audience
YouTube music was targeted at people who used YouTube to listen to music. I got my user research from Reddit. And from my findings, I would say that YouTube music users are very diverse so it is difficult to pinpoint who is who. And because they’re diverse there are varying opinions on what existing feature is appropriate or not. For instance, while some hate that YouTube music is basically YouTube, others like that they can view fancams or covers other than the music itself on YouTube music. Also while some people hate the audio-video toggle, some don’t mind it.
But I believe that the features I chose should benefit everyone
As this is an existing product, I expected that there would be an existing persona but I created a proto-persona that would help me with my project
Roles & Responsibilities
For this project, I was solely responsible for the user experience as well as user interface☺
Scope & Constraints
The timeline for this project was three weeks. User research was done in one week while the user interface was done in the two weeks left. Because I only had three weeks to work on the project, I chose to skip the mid-fi wireframes. If the project wasn’t based on an existing app it would have been wrong to skip mid-fi because it is the best screen for usability testing. But I performed usability testing on my hi-fi prototype
Process & What you did
Business Analysis
I performed a competitive analysis of YouTube music with Spotify, musixmatch and Groove music. Spotify as a music streaming app like YouTube music is a direct competitor. While musixmatch, a lyrics app and groove music, a windows audio player are indirect competitors.
I performed the competitive analysis to discover the features that YouTube music lacked in an effort to discover the problem statement (which I have already mentioned above). From the competitive analysis, I discovered that YouTube music lacks a lot of features. But, although I had not defined a problem statement by now, I had a hypothesis which was about having a feature that would be make performing actions on a music queue easier.
User Research
Because I needed to understand my users, I had a proto persona and user journey map
So I made Sandra into a ‘romantic’ student. She loves to daydream a lot and is studying maths in school. She would love to be able to quickly add songs she discovered into a playlist. She would also like to avoid music from artists that don’t suit her taste.
Here is a user journey of Sandra simulating how she interacts with YouTube music.
We could see from the user journey some problems she encountered, she couldn’t view the time duration of a playlist on the android app. Also, she couldn’t multi-select songs on the queue to remove them, she needed to remove them individually to do that. She also couldn’t avoid songs from a particular artist altogether.
Ideation
After the user research, I defined a problem statement, which I have already mentioned that ‘there is difficulty with customizing songs on YouTube music’. Now to ideate, I performed Moscow and user flow.
Because I had a lot of features already from feature competitive analysis, I didn’t need to brainstorm. Instead, I performed Moscow to find features that would solve our problem statement.
Note that the ones in the red were the only ones considered because they’re the ones utilised in the user flow.
Finally, I used created a user flow to implement the path I imagined our users would take to navigate through YouTube music in order to use the features to customize playlists
Having a user flow really made sketching the low-fi easy.
Prototype
I developed a low-fi, performed concept testing and then the hi-fi and usability testing.
Above is my low-fi prototype.
I performed three concept testings and one of issues they had was that they didn’t recognize the icons I added as features to the queue. I added an ‘hover’ feature to the icons (in the hi-fi prototype) so it would be easy to identify the icons. Note that this isn’t exactly hover since it’s on a mobile screen. But actually ‘hard-pressing’ since hover is difficult to achieve on a mobile screen
Another issue was that a tester (who is a spotify user) was not comfortable with how I constructed the multi-select feature.
He was expecting a radio button to show up to the left of a song after hard pressing the song. But this isn’t possible for YouTube music because hard pressing would bring up the properties of the song has shown above. So my method of creating this feature was maintained.
Another issue was that the prototype’s responsiveness didn’t imitate real-life so I tried to correct this in the hi-fi prototype
After this I started to build the hi-fi prototype. Because the product I was designing was already an existing product, I didn’t build a mid-fi for it.
Using the Atomic design principle, I built components for the high fidelity prototype into atoms, molecules and organisms.
The atomic components were those that formed the basis of the mobile app which I was building.
The molecular components were formed from the combinations of the atomic components
The organismic components were those that were combined from the atomic and molecular components and they made up the hi-fi prototype.
Now, permit me to reveal the hi-fi prototype…
Drum rolls please….
🥁🥁🥁🥁🥁🥁🥁
I performed two usability testings after building the hi-fi. And there was only one issue, there was no padding between the icons in the bottom navigation and their labels which I corrected.
Outcomes & Lessons
For this project, I understood the importance of components and instances, it was very easy to change components without tearing down the design.
YouTube music used a lot of 30’s — 30pt for padding some molecules, 30pt or 30something pt for the icons. Speaking of icons, they were at least 2pt thick
Next Steps
If I had to continue working on YouTube music, I would love to add internal search and filter features to the library.
And finally, I would really love to work for YouTube ;)
