4Music

4Music is owned and ran by The Box – a team of music fanantics, their sole mission is to be vital for anyone who loves music and pop culture, offering more music than any other network across eight world famous brands – The Box, 4Music, Smash Hits, Kiss, Kerrang! Magic and Heat.

The Set Up

I was going to be working with Box, Channel 4, E4, Orange and Poke. Orange decided to sponsor the relaunch. All big companies with very impressive talents and amazing achievements. Gulp indeed! But to be honest, I was very excited to be given the oppounity to work with each huge names. I’m a big music lover, and so, design and music was a dream job.

The Old

The current website was very outdated and wasn’t able to keep up with the speed of the channel and its content. While the old website might of been on brand at some point, it felt like very old and lacked the dynamic feel of a modern website.

We had a couple of meetings with the top dogs to understand what they wanted and where the brand was heading.

The Idents

A bunch of idents in both film and still formats came through as the first glimpses to the direction of the new 4music branding. They wanted to go with these quirky backdrops that reflected the eccentric nature of the viewers and their love for Channel’s style. The challenge here was to try to understand this direction and how to integrate this into a design that was both useful and fun.

The Shapes

An all italic set of Foundry Monoline was the main typeface. This would be very tricky font to integrate, but I loved the idea of unorthodox style and how it can disrupt the nature flow of design. I wanted to use the angles in font as basis for the concepts. I latched onto the idea of combining the angle of the slant with sharp corners, could give it that modern and fresh look it needed.

10 degrees is where it all started

I started to play around with this angle – trying many different shapes to see if any could fit into the art direction coming out of the idents.

In the early dark days of the internet there was man with his 28K modern dialling into the deep abyss of the world wide web. A couple of decades later, the need to improve websites and digital products, came Lean. It comes down to a simple method. Get something out. Then work on it. But get something out of the door. Don’t spend 10 years perfecting the essence of its soul. It has no soul. Anyway, it was very interesting turning point for the Channel 4 development team and myself. As we ventured onto unknown territory, I quickly had to assemble all my experience and create a website that had all the important features.

Yes ladies and gentlemen, I would be the UX and Visual guy – kind of what they tried to do on X-files, to create a hybrid species that could withstand the black goo. Actually that’s a really bad comparison. Anyway. There was no UX resource and just little old me. My background has always been to solve problems whether I sketch, draw, or visualise in an array of beautiful slides.

The Features

I gathered the requirements together while taking on board the direction the TV channel was headed towards. What came out of it was the importance of:

The Components

I designed a bunch of components that could be used anywhere on the site and had their own behaviour, which was specified in scenarios.

The Article Types

Once the components started to take shape, I placed them inside article types that editors could use. Now it might feel like I was trying to completely restrict the editors ability to play around with the components but what I wanted to do was retain the integrity of the design – we all know how important that. You can’t just change the design of the pistons of an engine without having to change the holes they fit into.

After all the UX madness – I had to switch gears and move back into the land of visual creation. My thoughts were gearing the design towards a similar style to the on-air idents and graphics.

Out of all the shapes I created I went with the sharp corners as this matched the logo. Adding visual depth where possible to give it a three dimensional feel.

Menu example

Right-hand column component

Gallery example

This example of a gallery component has a “Listen now” feature, would allow users to access music content from Orange website. This one of the many ways we tried to tie sponsorship around content.

Final Designs

I had to create an array of templates that over the month changed according ongoing deal with Orange. The collaboration with Poke London was a great challenge as I felt I was able to pull my own weight against such a large agency.

This wasn’t just another redesign, but rather introducing a new way for Channel 4 to create within the digital space. New ways of working and archiving the goals in a sculptural methodology – slowly improving by craving new shapes with each pass. The final design wasn’t always the final website. It was an organically digital thing that lived and moved with the times – shaped by goals and results.

In terms of scale, we managed to create the website within 3 months from concept to development, that not only allowed editors to feel empowered with array of templates with but kept true to the identity of the brand.