Xbox Music+Videos App (concept design for windows 8)

I present to you a media player concept design for Windows 8 (metro environment). This concept is based on the design guidelines provided by Microsoft for a touch friendly and mouse+keyboard friendly application.

The basic design inspiration came from the Zune Desktop App and from Windows Phone 7. I tried my best to find the balance between aesthetic detailing and the actual functions of the app.

My idea started with the realization that Microsoft should combine their music and video app and brand it with Xbox as they do right now (but separately). I took a week to brainstorm how to best combine both these features in a manner that seems natural to navigate through and use.

This concept detailed below is what I came up with after spending a full week thinking, sketching, designing, testing, re-designing, detailing, and finishing.

Music+Videos:

This app should be named Music+Videos as these are the main two types of media Microsoft wishes to market through this app.

Before further explanation I need to make clear that the Green I used is not the Xbox green. It is a mixture of the Xbox green and a different green I used to achieve balance when it is pinned to the start-screen as the Xbox green is too bright and stands out too much, whereas the green of games tile in Windows 8 is too sharp.

I borrowed the amazing Animation Microsoft used in their Windows Phone 8 Games app and tried to replicate it in Photoshop and ended up with a sweet GIF showing how the live tile will look when the app is not in use and also while a song is playing.

Note* if a movie is playing and paused, it will show in the live tile instead of the song and the bottom left icon of a headphone will be replaced with the video icon. Same applies if a podcast is playing. These images below are GIFs please open them to view the animation.

4v39jc_medium

via i50.tinypic.com

Qqeauu_medium

via i46.tinypic.com

02livetilerunning_medium

via img836.imageshack.us

Frontend:

This is the main screen of the app. This screen is kept as simple and functional as possible. It looks pretty much like the Video app in Windows 8 right now because the way they advertise the marketplace items was almost perfect.

The main different here is the "History" area. These tiles are the last items played from the "Collection". The very last item gets a special tile, in this case a tile with the artist and the album both in view. Clicking it or any other tile opens the view window of an Album or a Movie.

The Main design problem I wanted to solve was to find a way to show the MAIN PLAYBACK CONTROLS in the app in every screen and section of the app so one can easily change songs irrespective of where they are in the app or what they are doing in the app.

Note* the extra space in some tiles is because I wanted these tiles to accommodate more information found in video clips or movies. I want to use the same tile for music and video.

01frontend_medium

via img203.imageshack.us

02frontendalbumclick_medium

via img834.imageshack.us

Collection:

When you click the "collection text from the frontend you are transferred to this screen. Now you are in the COLLECTION area.

The main headings allow us to move between music, video, or podcasts. And the further Headings on the far right allow us to tweak the content and filter it according to our needs.

The collection opens in the albums view by default but each of these would be configurable in the settings charm so you can set the default to what you use the most.

In the album view the albums are sorted so they can be scrolled horizontally. (All such listings are scrolled horizontally and can be scrolled by using the mouse to click and drag).

01musicalbums_medium

via img189.imageshack.us

02musicalbumsclicked_medium

via img22.imageshack.us

In songs view clicking a song, tapping it will bring up the menubar from below allowing us to do any function shown in the image below. Multiple songs can be selected with the same method.

But what's different here is that a tap+hold will play the song immediately and the same if double-clicked with a mouse or double tapped with the spacebar.

03musicsongs_medium

via img35.imageshack.us

04musicsongsclick_medium

via img832.imageshack.us

05musicsongsclickmultip_medium

via img545.imageshack.us

03songclickanimation_medium

via img42.imageshack.us

In artists view here i show how the alphabets can be used to jump forward or back to a particular alphabet just like in WP7.

06musicartists_medium

via img26.imageshack.us

07musicartistsjumpto_medium

via img248.imageshack.us

This is where the fun begins. I really wanted to differentiate how artists view works. How it works right now in windows 8 is really messy. I wanted it to be very easy to navigate. So i created this concept where clicking an artist will take us to a new screen. A screen of the artist where we can clearly and cleanly view all of their songs or albums. Or go back by the back button. The images below are self explanatory.

08musicartistsalbum_medium

via img849.imageshack.us

09musicartistsbio_medium

via img716.imageshack.us

Now onto something very important. The playlist function right now doesn't really make much sense as it needs us to be in a specific place for it to work properly. To fix this my controls bar allows us to show the playlist ANYTIME from anywhere within the app.

We can also pin the playlist and it will stay there as long as we want it to be. The rest of the app will size accordingly. The playlists can be easily saved with that save button next to it and clicking on a song plays it. swipe to the right to delete it from the playlist.

10playlist_medium

via img255.imageshack.us

11playlistpinned_medium

via img600.imageshack.us

Moving over to the videos side will also reveal a new method of presentation. This method in design is exactly the same as the ARTISTS ALBUM view but it is sized according to the standard poster dimension and shows all the important information right there. It is easy and fast. Same will be true for the TV heading. The other heading on the other hand will be different. As it will be housing normal videos it will work exactly like the songs view.

Note* if while watching a movie we click the back button the movie will pause. And where ever you are in the app you can resume the movie buy just clicking that small screencap at the bottom left of the MAIN CONTROLS area. It will take you straight to the movie. This control, when playing a song, will work differently. It will instead open the current album playing so u can choose any other song from it or add more to the playlist.

12videosmovies_medium

via img694.imageshack.us

13videosmoviesclicked_medium

via img255.imageshack.us

14videosmoviesplaying_medium

via img22.imageshack.us

Marketplace:

I choose to color the marketplace white so it contrasts the collection. This will make it easy to identify if we are in the marketplace or in our own collection because as you can see the Design inside will be pretty much the same for finding media.

Note* the search charm will work just like it does but it will search inside the current Heading. (searching from the frontend will search everywhere).

01musicalbums_medium

via img59.imageshack.us

02videosmovies_medium

via img404.imageshack.us

Conclusion:

I went on to design this because I don't like the current app at all!. The other reason was so I can show Microsoft how inconsistent they are across different apps and how their finer graphics are not as polished as they could be.

Note* the graphical elements and size of text all around the app will depend of the DPI of the display. This concept is designed to be best usable with a 100DPI.

for comparison. On a Surface RT the app will be scaled to 150%. So instead of 7 songs we will see 5.

P.S. Please view all the images in full size. Try to set them up as a fullscreen slideshow on a 14-inch ultrabook to feel how it might be to touch.

UPDATE: Here I have scaled the UI using same resolution but for a 10 inch display like the Surface RT. This is how the app will look on the Surface RT if the UI and touch sizes are kept exactly as they are in my earlier design for a 100DPI screen.

Artistscaled150_medium

via img812.imageshack.us