Mobile first

Capitalfm.com is well over due a revamp. It has performed exceptionally but the site is creaking at the seems and visually doesn’t reflect the brand so well. In addition to this the experience on mobile is hard work. The big old website is a nightmare to navigate on hand held devices. Global radio has iOS and android apps but they doen’t offer the best experience or showcase the content as well as it could. We were set the challenge to go responsive.

We already had the framework (a 12 column grid) in place which but the question was where to start? I worked with our resident UX expert Cath as we tore apart the existing Capital FM site for the good the bad and the ugly and armed with the good we did some user testing.

It quickly became clear that our superfans were also phone super-users. It made sense to tackle mobile first then move onto desktop.

The prototype

We held sketching workshops with the stakeholders. I set to work on a new look and feel for the new site. It was such a big step forward that in order to get buy-in from the business we got to work on a prototype. I worked with a UX expert to turn the wireframes into a working prototype using Intuito. This was a great way to work as we were quickly able to find opportunities to get from one point to another with a focus on the contextual navigations (pink buttons).

As with all great protoypes not everything is clickable, have a play, it’s probably best to use the primary nav to find your way around.

The final designs

The mobile site is due to launch any day. Until then, here are a few visuals of how it is going to look:

Desktop wireframes

I left Global Radio before I was able to get my hands on the desktop version. Out of curiosity I spent a Sunday afternoon thinking about how the mobile experience could be translated into desktop and before you know it the wireframes are being sketched out.

I based the wireframes on a parallax style header which is consistent with the behaviour of mobile. On the homepage the now playing info is displayed and is hidden as the user scrolls down. I also wanted to make an impact with some show stopping content on the homepage. Historically there has been pressure to get content high up the page which has meant little space for our impressive photography or to showcase new exciting editorial content but hiding this on scroll means you get the best of both worlds.

1. Carousel at 100%

2. User scrolls down…

3. The carousel height is locked at 50%

The designs

This is my first stab at designing the homepage. I’ll be revisiting these again soon on another rainy Sunday afternoon…

1. Carousel at 100%

2. User scrolls down…

3. The carousel height is locked at 50%

The whole set

Leave a Reply