YouTube Mobile Redesign
I wanted to take an app that I know and love, and elevate it using the skills I’ve learned so far. To push myself, I wanted it to be an app that everyone uses.
That’s how I decided on YouTube.
My earliest memory of YouTube is in 2009, when I would sneak into my dad’s office to watch music videos on my dad’s new BlackBerry. Ever since then, I’ve learned millions of useless skills, botched thousands of different recipes, and wasted hundreds of hours watching random cat videos thanks to the platform. That’s to say, I’d say I’m pretty familiar with the app.
Using my own experiences plus some research I did on YouTube, I wanted to see if I could improve the mobile experience, even if only by a little. Needless to say, I ran into plenty of obstacles but you can read more about that below!
My personal goals in tackling this redesign were to:
In terms of redesigning YouTube mobile, my primary goals were to:
Ever since YouTube launched in 2005, it’s been through lots of changes here and there, but the fundamentals have stayed the same: a free to use video sharing platform with millions of content creators.
In order to gain inspiration and better understand YouTube’s audience, I did some research. Using the app store, I read through countless reviews and noted important pain points that users would constantly mention. Then, I interviewed 12 YouTube users in person or through a call.
Some questions I wanted to answer through these interviews were:
For my research, I interviewed 12 YouTube mobile users, most of which are college students ranging from ages 18 to 24, in person or through a call. It was surprisingly hard to find a reputable study on YouTube’s age demographics, so it was hard to find out exactly what the distribution was. Nonetheless, I thought this sample was a decent representation of YouTube’s user base because, according to a Pew Research Center study, “95% of those 18 to 29 say they use [YouTube].”
In my interviews, I asked users how often they watch YouTube on a mobile device in a given week, and 66% said they watch it everyday and ranked it among their top 3 most used apps. An app that so many people use so often should prioritize making users feel comfortable, and good using the app.
I created some personas based on the users I interviewed, hoping to portray the typical user.
Using all of this information I gathered, I moved on to the next step: wireframing.
One of the ideas I wanted to implement was moving the channel icon carousel from the top of the screen to the bottom, where it is easier to reach. I also wanted it to have a scrolling mechanism that controls the main screen as well, but decided that too many moving parts can cause confusion.
Here is my first iteration of my idea to move YouTube categories to the search page. I quickly realized this layout wouldn't work due to the placement of search history, but I found a solution to that down below.
I made several more low-fidelity wireframes, but to keep things concise, let's move on to the real stuff.
People tend to subscribe to lots of channels. 66% of the users I interviewed are subscribed to over 50 channels. Some channels tend to upload many videos at a time, which can quickly overload the user’s feed with too much stuff, making the whole experience overwhelming and unfriendly. I’d rather not have to scroll through 18 different music video teasers of artists that I’ve never even heard of.
This is why I opted to implement horizontal video scrolling for each channel, essentially giving users more space to breathe and organizing channels’ recent videos into a more refined, concise package.
.gif)
I added a numbering system at the bottom right corner of the thumbnail to represent the number of videos a given channel posted in, say, the past week, and provide users visual feedback on which video they’re previewing.
While working on these animations, I was quickly hit with the realization that I had no expertise in animation, and although Figma offers basic animation features, it wasn’t advanced to the point where I could achieve what I had imagined prior to working on the prototypes. Additionally, these GIFs received lots of compression to work with the website, so please feel free to check out my interactive prototype here.
I’m sure that a bit more time and money could have helped me in the animation department, but being a full-time college student didn’t help my case there. With these limitations stated, onto the home page.
The top left corner is infamously the hardest spot to reach on a smartphone for most users. Being right-handed, it’s virtually impossible to one-handedly reach this part of the screen, especially with how big phones are these days. The tiny compass in this corner happens to open a menu where categories such as trending, music, and movies are tucked into.
Personally, I had forgotten of the existence of the trending page ever since this change was made; most of my interviewees proved to be in the same boat. Out of all the users I interviewed, only one knew how to get to the trending page. Yikes. Out of reach, out of mind.
.gif)
My solution for this was to display these categories inside the search menu below the search history. This solves two problems:
100% of the users that I interviewed said that they use the home page regularly, and one common complaint I found with the existing page was the lack of customization to each specific user. While the algorithm may be to blame for a part of that, I opted to add a ‘Continue watching’ card at the top to allow users to pick up where they left off on their most recent videos.
My reasoning for this?
People love to multitask.
YouTube as a mobile app is convenient for users because it allows them to watch videos while they cook, go to the bathroom, eat, etc. As many as 81% of students admit to multitasking when they do their homework, which means that people don’t watch videos from start to finish in one sitting. If anything, I know this from first-hand experience all too well. I drew a mini flowchart to map out how it always seems to go down for me.
Additionally, I opted to add just a bit more customization, allowing users to hide cards that they don’t use. In this mockup, the user hides the ‘Shorts’ card from view.
.gif)
As you can see, I also utilized the horizontal video swiping function on the ‘Continue watching’ card so that users can swipe through the videos they forgot about in the past few days without taking up extra screen real estate.
I knew coming into this project that it would be a challenge, and that certainly proved to be an understatement. From brainstorming to designing the interactive prototypes, some of my biggest obstacles were:
I mean, YouTube Mobile has been around since 2007, and since then their massive team has made thousands of iterations and improvements. To be honest, the app is pretty amazing, but nothing is perfect, and it’s my job to think of ways to attempt to make it better.
Although this project was a challenge to myself, I’m proud of my work and extremely glad I took it on. I learned many invaluable lessons throughout the journey, and working independently really helped me absorb all of them. From start to finish, knowing that I was executing the entire UX design process completely alone forced me to put myself out there and push my boundaries. And although at times it felt like I would never finish, I realized that user experience design is a constant and never-ending process that evolves with every step, every idea, and that it's a process I’m really, really happy to be a part of.
Again, try out my interactive prototype here!
