App name
Earworm
About
Project type
UI, UX, Concept
Platform
Universal Windows App
General
Earworm… this was a music app that I wanted to do when Zune got canceled and the new Xbox music app sucked big time (the music app on Windows Phone still sucks… Groove is a bit better but visually bland). Unfortunately we cancelled that too.
So before the whole poject vanishes in the abyss of some archive folder I thought to share it. Here are some of the screens and concepts I made for earworm.
Logo & the visual appearance
S ee, back when Zune was around (#RIP) I thought it was the prettiest music app/player around. Hardware wise it was the Zune HD, which was never available outside of the United States but was very sexy. On the software side it was something completely new and fresh. The UX didn’t follow any of the known design and usability patterns. The mantra was that “content is the king”. So instead of stuffing you all kinds of 3D buttons, thousands gradients and leather stitched ornaments in your face, the interface had very basic designed elements and mostly just beautiful pictures related to the content you were consuming at the moment.
Zune app on Windows Phone 7/8 era in particular was an advanced version of the vision. So I wanted to keep the colorful vibe that Zune had and expand it a little in earworm.
The logo itself is a custom font with purple, reddish, blue and pinkish colors/gradients. The whole app would be dark with bright gradients and purple as the main color.
Startscreen panorama
Startscreen is basically a 3-sided panorama. The first pivot is the main page. It has a “My top five” section where you can pin your favorite artist, album, songs, playlist or a genre. If you don’t feel like picking your favorites yourself, you can let earworm pin them based on your music preferences.
Below the favorite section is the “new music” strip. It shows all the new music that you added lately.
The second pivot of the panorama screen is the “recently played” list with all your music that you listened to lately. You also have the option to clear the list.
The third and the last pivot is the shortcut section for your artists, albums, songs, genres and playlists. Earworm was also supposed to be linked to Xbox Music (now Groove) so you could buy and stream all the stuff from there also.
Artist view
The artist view has two options how the information is displayed.
The first one is a grid of tiles with photos of the artists. The tiles would also move/flip in order to show more info about the artist.
Second option is a regular list view with an artist thumbnail and their name next to it.
Artist view grid
Artist view grid – animated
Artist view list
Now playing panorama
For the “now playing” screen I wanted to to something more useful than just a regular interface with the playback controls. So this part also became a panorama with two additional pivots.
The main screen has all the controls needed plus some neat shortcuts like a bio about the current playing artist, liking the song, add it to a playlist, pin it or share it on a bunch of social and music networks. To keep the Zune spirit alive I added and small pulsing gradients at the bottom of the screen. The idea was to have it represent an equalizer. So it moves according to the music.
Second pivot has the music video to the playing song (if available) and a few other videos from the artist. There’s also a section for the related artists.
Third and last pivot is the gig part. It displays or the venues your artist is playing at based on your location. There would also be the ability to buy the contert tickets straight out of earworm.
Different visualizations and examples how the screen bahave with different pictures and backgrounds. The easiest thing to implement was to set a few layers. The base layer is the main generic earworm background that consists off a few gradients on solid purple. Next layer would be the artist picture at 80% opacity. The third layer are the gradients that move on top of the picture but still under the content. The gradients had a randomly generated pathfinding, morphing and movement.
Miniplayer
In the earlier concept phase I implemented a miniplayer that would stick at the bottom of the screen whenever you have a song playing. Giving it more thought I decided against though. Windows Phone have this nice feature where you just press a volume button and the audio controls just pop out from the top of the screen. So this made the miniplayer kinda redundant. Nevertheless this is what it looked like.
Lockscreen support
One more of the visually great things Zune had over other music apps was the lockscreen support back in Windows Phone 7/7.5 but especially the screensaver mode in the Windows desktop version of the app. It was just so stylish and pretty…
I needed to implement something similiar and a bit more polished. So here is my version of the lockscreen support.
Microsoft
Band support
I have to admit that I was hot to get a Microsoft Band until it was said that it won’t come to Germany in the first Version. I still wanted to see what it would look like to have a small supplementary app on your wrist but having the main one going on your phone. On the Band you’d get the basic functions like music controls and content exploring.
By the way the Microsoft Band 2 was released almost a couple of months ago and it still isn’t available here in Germany… By the time it comes over here there should already be a third one out 🙂
This way there is no real way to test any apps in real life, which doesn’t make sense to invest any money or time for me to try to come up something for the band. As awesome as it would be. Microsoft, make it happen!
