Concept
Media players are going out of fashion. Recently we saw Microsoft kill off Windows Media Center for Windows 10 because of a total lack of users. This project aims to take the idea of a Media Center and revitalize it for the information age.
The idea behind the media center is to take all of your media, which would be otherwise thrown around in files all across your computer, and throw them into one interface where you can binge-watch everything you own.
This was back before the days of YouTube, Netflix, and Spotify. These were the days of MP3 files and CDs and DVDs. These were days where you couldn't search for (just about) anything that you wanted and it would come up and you could watch it.
Back then, it was a great idea. Playing media through the desktop was often a rather clunky experience, with compatibility problems and media player difficulties and all that. A single, beautiful, unified interface was legitimately an improvement.
My objective was to design a media player around the new era of media consumption rather than throw it out the window, one that kept the idea of a central interface to consume media, but was updated for the modern user. Let's get into it.
The idea behind the media center is to take all of your media, which would be otherwise thrown around in files all across your computer, and throw them into one interface where you can binge-watch everything you own.
This was back before the days of YouTube, Netflix, and Spotify. These were the days of MP3 files and CDs and DVDs. These were days where you couldn't search for (just about) anything that you wanted and it would come up and you could watch it.
Back then, it was a great idea. Playing media through the desktop was often a rather clunky experience, with compatibility problems and media player difficulties and all that. A single, beautiful, unified interface was legitimately an improvement.
But now we live a world of streaming media from the internet. Media is subscription-based rather than bought piece by piece.
My objective was to design a media player around the new era of media consumption rather than throw it out the window, one that kept the idea of a central interface to consume media, but was updated for the modern user. Let's get into it.
Contents
Click to skip! (Presently that happens to be broken, sorry)
Concept
Contents
Stations (Concept Cont.)
Design
Stations Part 2 (Design Cont.)
Spotify
YouTube
Conclusion
Spotify
YouTube
Conclusion
Stations (Concept: Continued)
There's my solution to the new media consumption mode of streaming through different websites, and I'm calling them Stations.
A station is a streaming service, such as YouTube, Netflix, Spotify, etc. You can have separate logins for each station, which is tied to the account or profile that the whole player is logged into. It can be a free or a paid account - all features of the service, whether it be playlists, comments, likes, follows, subscriptions, whatever - get carried over to the Media Player interface from the full-featured one, just in a different style, so you get the full experience no matter what.
 |
| Sign in to Spotify |
Design
Okay, so we've got the concept down. Now let's focus on the fun part! (For me, anyways.)
You may have noticed that we somewhat adhere to Material Design guidelines. This is because the Media Center was initially a part of the Windows 10 Google project, where we mashed up the best of Microsoft and Google and made an operating system out of it. But somewhere along the way, I decided to take the media center out of circulation for a while to experiment with some non-material-design elements, such as nested sidebars:
"I decided to take the media center out of circulation for a while to experiment with some non-material-design elements..."
The idea of nested sidebars was actually stolen from inspired by George Kvasnikov's brilliant Google News Redesign.
Our execution was actually quite a bit different from Kvasnikov's, focusing on different problems. We found that, when we had vertically collapsing/expanding sidebar items, like in most interfaces, the sidebar quickly became crowded. This kind of sidebar is also not too mobile-friendly, as the menu is constantly changing vertical height and jerking about the screen. So we replaced it with menu items that expanded to the side. (As inspired by Mr. Kvasnikov.)
"Instead of expanding vertically, which cluttered the sidebar, we expanded sidebar items horizontally, which was more visually appealing and mobile-friendly."Now let's talk about some of the specific station interfaces.
Stations, Part 2 (Design: Continued)
Spotify
Starting with something you've already seen: Spotify!
First, a disclaimer: I've never actually used Spotify before. I listen to just about all of my music off of YouTube. (Ads are annoying, but I'm too poor to pay $10 a month just to listen to my favorite songs. I'm a New Yorker. Oh, wait...) So designing an interface for Spotify was a unique challenge. It was a fun experience.
I focused on channeling Spotify into a Material Design tab system. Recommended was like the Overview screen in the actual Spotify player; then there were New and Popular, and then organizing by Artist, Album, Genre, and Playlist, as in actual Spotify.
You can see the Spotify-colored but obviously material-design-y play bar at the bottom of the interface, that hovers over all the interfaces with what is presently playing, so you could browse through YouTube and listen to a song at the same time.
That's really what the media center is all about - forming a habit for one place to go for all your media consumption. Instead of opening up a new tab to search for that song, just switch back to your media player, fire up that song, and go right back into typing that essay.
"...one place to go for all of your media consumption...just switch to your media player, fire up that song, and go right back to typing that essay."You can tell that I'm an illegitimate designer in that I didn't actually do any use case polling :P But that's often my own use case, such as right now, while typing this blog post; I have a YouTube tab open, playing some Rob Cantor songs.
Back to the Spotify interface! Here's a refresher, this time on a tablet:
You'll notice the giant cover picture behind the tabs.
This was one of my collaborator's ideas. The purpose is to draw attention and immersiveness to the interface.
On the right hand side of the interface, you'll see a search bar, a refresh button, and three dots for more options. These items will be hovering over almost all of the interfaces in the application, providing universal as well as in-station/app search, refreshing of the page, and any other options such as to report content. Also one of my collaborator's ideas. And at the bottom consistently is that play bar I talked about earlier.
YouTube
Let's move on to another interface, YouTube!:
The YouTube interface really focuses on the content rather than whatever else YouTube focused on. Newer video platforms like Vessel look quite a bit different than YouTube, with full-width videos and generally more video and less text. This YouTube concept is designed with that in mind.
On the homepage, you'll find four tabs that more or less correspond to the four tabs in YouTube's present mobile interfaces - what to watch, "trending," subscriptions, and my channel. You're not missing out on any functionality here.
There's the search interface. The grid layout, as I said earlier, has more room for content rather than text and descriptions and view counts and whatnot, and it's really focused on the core experience.
When you get into the player, however, you'll notice there's no lack of features. Below the player and title there are stats and buttons for the channel, to subscribe, share, like, comment, and the view counter; below this are three tabs for information such as the date published, category, and description; related videos for related videos; and comments for verbally beating the crap out of people.
The sidebar expands even further, too, with links to the three main pages: Home, Now Playing, and Search.
So that's about it for the YouTube interface. You'll notice that there are a lot of similarities between the Spotify and YouTube interfaces, but they keep their unique character and functionality, and that's what the media center is all about.
Conclusion
The idea behind the project was to form an interface for all of your media consumption purposes, under one design philosophy (material design) but that supported the modern media consumption sources - that is, streaming.
But more importantly, as I said earlier:
"[start quote]
That's really what the media center is all about - forming a habit for one place to go for all your media consumption. Instead of opening up a new tab to search for that song, just switch back to your media player, fire up that song, and go right back into typing that essay.
"...one place to go for all of your media consumption...just switch to your media player, fire up that song, and go right back to typing that essay."
[end quote]"
My design is a solution to all of these problems, one that revitalizes the media center and makes it a legitimately useful tool.
Thanks for reading, everyone. Be sure to tell me what you think in the comments below, or share if you feel like it's worthy of sharing! :D
