The brief

During some rare quiet time at Global Radio we decided to run a test to see how quickly we could take our most recent website classicfm.com and reskin it for a new brand. I pleaded the case for xfm.com as the site at the time was hosted by a third party company, incredible difficult for the managing editor to maintain, failed the accessibility tests at every turn and was so off brand it was almost criminal.

This poor old website hadn’t been updated for nearly 5 years so I was very happy to get my hands on it.

Wireframes and research

At the time there were no current style guidelines for Xfm so this was a fantastic opportunity to give the brand a proper revamp. The existing grungy look didn’t suit their new audience, whilst they didn’t want to lose their student, indie and rock music fans there was a new audience of young professionals, new DJ’s promoting hip-hop and electronic music. It was time for a cleaner look and one which wouldn’t date too quickly (should it be another 5 years before the next redesign).

The plan was to move the Xfm site to the same content management system and version as Capital FM and Classic FM so we had to reuse functionality that existed on those sites. We needed to decide on a layout as a starting point to get new content ready for the site release, the flexibility of the modular grid means that changes can be made easily and there have been some lovely updates since the site went live.

Based on the classicfm.com website grid I created these quick wireframes to explore different layouts and image sizes available on the new homepage.

click images to view in browser

Keeping it simple

My plan for Xfm’s new website was to go simple and bold. I knew that in the short time frame there was no time to make mistakes. Going for a strong font and colour palette allowed the visual style to evolve overtime but also should the look and feel need to change it would just take a simple CSS task to do the job. I chose Oswald which is a lovely bold font which has the benefit of being quite narrow which is great for our fixed width site. I was really excited about being able to use the yellow from the logo to compliment the green. I chose a light grey background as pure white background became very distracting. along side the solid black, yellow and green.

The next step was to ensure the accessibility was good. The old design was impossible to read and navigate with inconsistent styling and tiny text which used to really annoy me so I really enjoyed creating the new typography rules.

Here are the typography and colour guides I created for the site development tasks:

click images to view in browser

The final steps before launch were to get the iOS and android apps ready for release, logos cut for TV and DAB devices, approval of the new Xfm emails and one final bit of promo for the reception area of Global Radio HQ in Leicester Square to share the good news that after 5 years Xfm had ditched the grunge and had a brand new website and apps to be proud of.

Xfm

We had a really positive response to the new website, I was really impressed by how supportive their listeners are. Here’s my favourite tweet from launch day:

Here are the final designs of the website and apps:

Leave a Reply