22tracks

It’s not everyday you get to work on a product you really love. It’s even more rare that you get a chance to redesign it. But that’s basically what happened when we were approached by 22tracks to design and develop an alternative to their hugely popular music curation website.

http://22tracks.mvtest.net [opens in new window]

VICE Media and UM orchestrated a collaboration between 22tracks and IE -part of bigger campaign- to imagine a version of their site that was optimized for IE11′s impressive new feature set, especially the WebGL support and multi-touch support. We were brought in right at the beginning to look at the core qualities of both website and browser and reassess 22tracks.com based on our findings. There followed an intense design phase where we looked at how we could really optimize the user experience for touch while preserving the simplicity and function of the existing 22tracks website. And all this within a fully responsive HTML5 framework that would adapt to multiple devices. We organized the playlist browsing and track-related functionality into two opposing drawers that allow users to perform multiple contextual interactions while keeping the music pumping.

22t_01

The center-piece (literally), is a dial device that contains the usual track controls but also a 360 degree way to tap through the 22 tracks of each playlist and also an outer circle which allows users to scrub through each track by swiping around a dynamic equalizer-type graphic. While we finessed the intricacies of the UI we also began concepting an audio-visualiser that would accompany the music. We wanted this to be graphically minimal – taking cues from the existing 22tracks look and feel – and really and truly responsive to the music. We also wanted it to be interactive, partly to showcase the multi-touch capabilities of IE11.

22t_02

We decided on a direction we called ‘Blobs’. Amorphous distorted circles spawn from the center of the player and then float off around the screen, pulsing and moving to different aspects of the music. Different blobs react to different frequencies, certain types react in different ways to others and they are all effected by gravity and the tilt of the device’s accelerometer. Users can grow new blobs from their finger tips, pinch, stretch and pluck existing blobs as well as inflating them to bursting point (whereupon they explode into 22 ‘blobdules’ (see what we did there?) – all without missing a beat. Ultimately this was a significant design and technology challenge. This kind of experience is not normally something that happens in browsers, let alone multiple browsers on multiple devices. And it’s got blobs in it.