BBC
We developed a platform for the creation of online quizzes at the BBC.
A quiz for 5 live that challenges players’ world cup football knowledge.
A quiz the BBC that celebrates the 40th anniversary of the Glastonbury festival.
We helped develop a travel vaccination Facebook application for MyVaccs
We worked on the architecture, design, & production of a secure ‘friend to friend’ file-sharing product called OnShare.
We worked with The Police Service Of Northern Ireland & Large on a community site for teenagers.
We developed the new Radio 1 and 1Xtra mobile website targeted at smart phones. Whilst the existing BBC mobile site did a great job at publishing content on a wide range of mobile devices, it didn't make great use of user interface capabilities of the latest touch screen devices. As part of this work we also launched new features such as messaging the studio for free, live audio streams and in page playback of track audio snippets.
The design of the web application interface was informed by the growing vocabulary of apps. We were brought together some of the responsiveness and consistency of using an app to a browser experience as well as finding mobile-friendly ways to display all the different kinds of media and content that Radio 1 & 1Xtra put out.
There was a significant challenge in designing a consistent interface that scaled and adapted to various resolutions of screen whilst maintaining an app-like, single-page feel. We worked to capture the personality of Radio 1 & 1Xtra while wrestling with issues of page-weight and pixel-density.
The user experience evolved through several iterations as we learned what features and journeys were most important to visitors. It was particularly interesting to explore how those priorities changed between the web site and the mobile web app.
The project consists solely of client side JavaScript, HTML and CSS. The data that drives it is derived from public BBC feeds in JSON format. We make heavy use of HTML5 elements such as the audio element as well as CSS3 animations. We used an alpha version of JQuery Mobile for the basic framework and customised it so that we could execute arbitrary code before and after page loading transitions.
We took performance into consideration as these devices are not desktops, even though they have ‘desktop’ browsers. CPU power is a real issue when rendering and animating pages. We found that if we employed bitmap backgrounds rather than CSS3 gradients, border opacity and multiple background images it massively improved the speed of rendering, animation and page scrolling. Where possible we used CSS3 animations rather than JavaScript animations because these are hardware accelerated on certain devices.