Visit the URL
UX Design Lead - The BBC World Service Responsive Project is a major initiative to develop a single responsive design solution for BBC News across all devices from feature phone to desktop.
The challenge
The key deliverable for the first phase of the project was to design a mobile-first MVP (minimum viable product) for the first 5 language news sites (which included right-left and non-western fonts) whose design components would then form the basis of the remaining 22 languages. The first of these languages was to be launched within the 4 month project timeframe.
This was a complex and challenging task, not least because of the requirement to serve feature phones in addition to more sophisticated devices.
There are significant proportions of users within some of the World Service's demographic for whom smartphones are simply unaffordable, hence the feature phone is widespread.
Feature phones generally don't support javascript and have support only for native fonts, which can cause challenges with rendering.
At this time, a BBC (English) News responsive MVP already existed, but there were many components that would be required specifically by World Service, so the first task was to carry out a UX gap analysis between what existed and what was required.
An innovative solution
Given the nature of responsive design, working with fluid layouts as opposed to fixed pixels, the most efficient way to work is to design in the browser, rather than the traditional choice of Photoshop. This is a major step change for many designers.
I conceived and directed the design and build of a front end prototype framework that would serve as the foundation for all design work going forwards. This prototype enables a developer to work from a designer's Photoshop visual, coding fast and dirty to get the design working in the browser.
Of course, traditional Photoshop visual were still required for stylistic purposes and to allow stakeholders the opportunity to see the design direction and feed back on it, but there was no need for them to be pixel perfect. This meant that they could also act as high fidelity wireframes, eliminating any need for low-medium arrows and boxes.
More efficient working practises
Using the prototype, iterations and tweaks can be done in the browser, with the designer and developer sitting side by side. This makes for a much faster production process, improves designer - developer communication and has the huge benefit of allowing stakeholders to interact with the design components without having to commit to weeks of possibly wasted work.