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

[Zain Adeel]

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.

via i50.tinypic.com

via i46.tinypic.com

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.

via img203.imageshack.us

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).

via img189.imageshack.us

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.

via img35.imageshack.us

via img832.imageshack.us

via img545.imageshack.us

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.

via img26.imageshack.us

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.

via img849.imageshack.us

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.

via img255.imageshack.us

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.

via img694.imageshack.us

via img255.imageshack.us

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).

via img59.imageshack.us

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.

[Knife Party]

Wow, nice design (Y) Isn't it a bit ironic how you are able to design such gems yet MS spouts such garbage apps? They can't adhere to their own design principles....

[Sikh]

Much better than the official ones. I find the official ones "messy". Maybe they hired an android developer to deliver those :D

Lmao, nice

[phunkymunky]

there already was a good template to use for xbox music, it's name was Zune!

[Osiris]

Nice design and very detailed, a tip of the hat to you good sir and a wag of the finger to MS...its amazing with all the templates they had to work off MS missed the mark so much,

Since its unlikely MS will pick up your design and actually make this how about you work with the VLC or XBMC boys to bring this to us on some platform :)

[zhangm Supervisor]

The MS devs really ****ed up the default apps.

Anyone else really love that 500 ms lag between right-clicking on something and having the playback control buttons slide up?

[Zain Adeel]

you wont have to worry about any lag here :) the reason the main controls are always present. So one can swiftly change songs or pause them.

Thank you everyone for appreciating my effort. If i knew how to code. I would have taken it on myself to make this in some kind of app with no backend. just graphics and animations and such so one can see how it might really work.

[ACTIONpack]

Looks really good. I'm designing a concept myself that I will post in later tonight. :-)

[j2006]

Thanks for this concept... it looks wonderful! The Xbox team really need to get their act together. It almost feels like they were rushed to put something together quickly. Zune was designed perfectly and just worked the way it should work, so they should have simply followed the design for that as you did. I hope they take note and update that app and FAST.

[Zain Adeel]

Looks really good. I'm designing a concept myself that I will post in later tonight. :-)

would love to see it.

Thanks for this concept... it looks wonderful! The Xbox team really need to get their act together. It almost feels like they were rushed to put something together quickly. Zune was designed perfectly and just worked the way it should work, so they should have simply followed the design for that as you did. I hope they take note and update that app and FAST.

yea I hope so too. Its the only app I have to use because zune has started messing up with my songs (its not recognizing artists of most songs for some reason) :(

[ACTIONpack]

would love to see it.

I'm halfway done. I'm at work now, so I can't work on it at the moment. I have a similar look like yours with the Zune layout but will iTunes layout as well because there are some stuff that iTunes does a really good job at like the podcast. But it will have the Windows 8 theme.

[Zain Adeel]

I'm halfway done. I'm at work now, so I can't work on it at the moment. I have a similar look like yours with the Zune layout but will iTunes layout as well because there are some stuff that iTunes does a really good job at like the podcast. But it will have the Windows 8 theme.

I checked the new iTunes but I didn't see the podcast part.. I just checked the new album view thingy but it wasn't really working. IT was just eye candy.

[ACTIONpack]

You need I candy to make ppl use It.

[Zain Adeel]

You need I candy to make ppl use It.

the eye candy lasts just a few days. Or a week max. After that you start to see its disadvantages. Like how the album view opens at different places for each album and it at times make the user scroll to see all the songs.

[MikeChipshop Member]

You need I candy to make ppl use It.

God no, this is the problem with a lot of software.

You need a good balance between usability and eye candy. Eye candy alone leads to horrible to use software.

Good Job Zain, must say it looks very nice and very usable. Team up with a developer (if you're not already) and get this made, i'd pay!

[Guest xiphi]

Microsoft really should hire this guy. Time and time again he's made some really awesome designs that outshine MS's own.

[Zain Adeel]

God no, this is the problem with a lot of software.

You need a good balance between usability and eye candy. Eye candy alone leads to horrible to use software.

Good Job Zain, must say it looks very nice and very usable. Team up with a developer (if you're not already) and get this made, i'd pay!

Thank u. Yup I was trying to find that balance here. And if MS open up their stores here I might pick this up and learn to code. Make apps and such. Bring my design to use.

[MorganX]

My only recommendation, and it's a strong one, build in-app search. Do not use the OS Modern Search. That is all. And allow direct selection and same context menu options on search results.

[Zain Adeel]

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.

[phunkymunky]

that does look awesome Zain!

much, much better than the xbox music app.

i'd love to see this in action!