Redesign Challenge (5/52):
YouTube for iPhone
I spend a pretty decent amount of time on YouTube. I’ve subscribed to dozens of channels covering a wide variety of topics; video game playthroughs, comedy shorts, astronomy lessons, and music videos, among others. And while I’ve been freed from the hell of commuting two hours to and from work every day, the time I spent on public transit have made me very familiar with the YouTube iPhone app.
With my redesign of Hangouts, I mentioned that Google has been on an updating spree, bringing Material design to many of their iOS apps. YouTube is one of the apps that hasn’t been touched yet, so I chose to redesign it this week with an approach that fits in with my Hangouts redesign.
Look and Feel
Much of the appearance of this redesign was already determined by my redesign of Hangouts. My goal when approaching the look and feel was to stay as consistent as possible, and explore how the app could be designed to feel like it was made by the same company, while maintaining each app’s individual identity through content and use of colour.
Typography, colours, avatars, margins, shadows, icons, and the overall navigation style are all carried across from Hangouts for the most part. In the “parallel universe” where my Hangouts redesign was created, the consistency between these common elements would serve the same role as Google’s Material guidelines do on Android, creating a cohesive and unified experience under a single brand, even when spread across multiple apps.
Of course, given the limited time available for each of these challenges, there isn’t really a set of guidelines I’m working from, and a lot of the decisions are ad-hoc; not ideal for working off of in future apps. The tab bar translucency, for example, works well within the context of Hangouts, but begins to look a bit muddy with lower contrast icons when paired with the darker YouTube content. Given some extra time a couple of weeks ago, I would have come up with patterns that were more robust, while exploring typographic hierarchy in more detail.
Besides stylistic changes to make the app more consistent with my Hangouts redesign, I chose to display content in a much more visual way than the existing YouTube for iPhone, similar to the approach taken by the current Android app. Particularly when it comes to a curated list such as My Subscriptions, the video thumbnail and title matter much more than the additional metadata. This was also an opportunity to simplify each cell to remove the three(!) overflow menus each.
Navigation Structure
Apart from look and feel, the most prominent change I made was switching the primary navigation to a tab bar. The existing YouTube apps (both iPhone and Android) use navigation drawers to hold top-level items, playlists, and your subscriptions for relatively quick access to most things. But it can be improved.
Note: Android is an entirely different situation, since tabs are used differently on the platform, and a nav drawer is part of the Material design guidelines, leading to higher adoption and discoverability.
The tab bar vs. navigation drawer debate has raged for centuries (or at least since Facebook and Path popularized its use), and I’ve historically advocated for both sides. But the more I think about the topic, the more I think it’s time to kill the navigation drawer on iOS for good. Here are a couple things to consider:
Information Architecture
The number one argument I’ve seen for using a navigation drawer over a tab bar is that the IA is too complicated to be pared down to 4 or 5 tab bar items. But in most cases, that’s not true. It’s a product designer’s responsibility to think through each navigation item. Can Settings and Account be combined? Do Tags need their own navigation item, or are they a filter in another section? Does Feature X need to be top-level? Throwing navigation items into a drawer is easy and requires little thought, while using a tab bar forces you to think about the relationships between those items and their relative priority. This leads to an overall benefit to the user; less clutter, less confusion, and primary sections available from anywhere with a single tap.
If you decide your information architecture is perfect, or you revise it and you’re still left with more than 5 top-level navigation items, you can still use a tab bar. Even if you have an unreasonable number of top-level navigation items *cough* Facebook *cough*, you can include a More tab and call it a day. Yes, in many ways it’s exactly like a navigation drawer, or perhaps the more aptly named “junk drawer”, but at least you’re still prioritizing and surfacing four primary sections that would have been hidden away otherwise, and giving a text label to the ambiguous hamburger or “…” icon.
Focus
Perhaps more importantly, though, is focus. Does your iPhone app need complete feature parity with your web app? Can your product’s features be grouped by context, and if so, do your users need Feature X in a mobile context? On a phone, where screen real estate is limited, the interface can quickly get crowded. Every feature you add, and every action you add, makes the app more complex by adding clutter. Again, it’s a product designer’s responsibility to think about each one and whether or not it’s worth the extra complexity.
The navigation drawer in the existing YouTube for iPhone is overwhelming. Having all playlists, all subscriptions, and even a “Best of YouTube” in the same list adds up to a lot of clutter. While I was exploring variations on the information architecture and section priorities, I decided the best approach for the iPhone app redesign would be to focus on content consumption. After all, Google has two separate apps for content creation and content management: YouTube Capture and YouTube Creator Studio. By focusing the primary app on content consumption, the navigation is simplified for the majority of users who will not be doing any kind of content creation.
With that in mind, I prioritized Home, My Subscriptions, Watch Later, and Playlists in the tab bar, because those are what I’ve found myself using the most when consuming content on my iPhone. The More tab could contain My Channel, Subscriptions List, History, or any additional features.
Video Playback
The only other screen I had time for this week was the video playback screen. Typically you’d watch videos fullscreen, with everything else hidden away, but for those times when you watch to watch the video while reading the video description, or torturing yourself by reading YouTube comments, I came up with a dark interface.
Just like watching TV with the lights on, or someone texting in a movie theatre, I find the bright interface during video playback in the existing YouTube app to be distracting from the content, particularly when viewing in a dark environment. Besides the dark UI, the majority of the playback page only has small tweaks: typographic changes, a larger scrubber for more accurate skipping, icons that match the style from my Hangouts redesign, and the status bar is visible when the video controls are being shown (surprisingly useful on a train).
Unfinished Business
I had started experimenting with ideas for continuing video playback while navigating through the app, but didn’t get to the point where I was happy with the result. Regardless, I thought it may be interesting to share here as part of the process. If you’re unfamiliar with the existing YouTube app, you can swipe down on a video that’s currently playing and it will continue to play from the bottom-right of the app.
The middle concept is similar to the existing iPhone app, but with a larger size given to the video. It also uses a radial gradient from the bottom-right corner of the screen to give better contrast over the larger, more prominent imagery in the subscriptions list.
While I was exploring the middle concept, I realized that there was so little space to the left of the video that it as well not be there at all, and that the real estate could be used for something more useful. The concept on the right is an extension of that idea, putting a blurred overlay over the subscriptions list and adding controls for the video to avoid re-opening the playback window unless necessary.
Both concepts feature a collapsing navigation bar when scrolling to allow for more content to occupy the screen real estate.
Conclusion
I really enjoyed this week’s challenge. It was interesting to be constrained not just by an existing brand, but by my own decisions made in a previous week. I was fairly busy during this challenge, and as you can tell from the unfinished concepts, I had hoped to design more screens. In fact, the last stretch of this week’s design challenge stirred up enough ideas that I may revisit this in a later week with additions or revisions. For example, I’d like to see how a dark UI throughout the app would look, continue down the video playback while navigating path, and maybe tackle the Home section. Regardless, I’m happy with how it turned out, and it fits nicely alongside my Hangouts redesign.
If you’d like to follow along, or if you’re reading this from the future and want to see what I’ve redesigned since the start of the year, I’ll be posting everything to my Weekly Redesign Challenge publication. Thanks to all those already following!
