My team produces a huge range of infographics that accompany our daily online news stories and we also do the UX design for larger stories such as this.

Four years ago I followed the elections closely on the BBC and getting the chance to design for them this time around has been incredible.

US Elections on mobile

A lot of people worked very hard on this project but the team's greatest achievement (though there are many I'm proud of) has to be our mobile design success.

The design brief for the 'news story that brings the web to its knees'

The design challenge was to create an engaging and informative experience for the US Election results that would work across all mobile, tablet and desktop platforms and be consistent with TV.

The main focus of this was showing national and state-by-state presidential and congressional votes in an easy to understand yet visually exciting way.

US Elections has been described as "the news story that brings the web to its knees". It's a big worldwide story that only happens once every four years which means technology has moved on sufficiently enough that the last version can't just be dusted off and reused.

For this election there was no question that we had to create a great experience on our mobile site.

From the beginning of the creative process mobile was on the agenda and by presenting mobile designs at every team catch up we were able to make sure it never became an afterthought.

Designing responsive mobile results pages

This approach not only fits into the development (as the screen enlarges more content is added thus the smallest devices get the lightest pages) but it also fits into people's mental models.

People expect a streamlined view on the mobile which is often relying on a data connection, with a more in-depth solution on their desktops which have greater screen real estate and usually a better connection.

The page that required the most design effort was the results page. There was a long list of requirements from detailed state results to congressional overviews.

I started by creating a post-it note board of everything the page must, should and could do and then began wireframing the modules.

Helene wireframes the results page

We initially experimented with versions of the results page that didn't have a map but we found it was a reference people were so accustomed to that we couldn't drop it.

The map is tricky because the size of a state often is not representative of how many votes it has. Montana is massive yet only has three votes so a map can be dominated by a party colour when actually the opponent won.

I decided to introduce a bar to the top of the page to give a more accurate snapshot of the election score.

As we moved forward we realized we wanted US Elections to have a singular home.

Previously the index, results and live updates page have all been separate pages. By tabbing all the content under the 'scoreboard' banner we were able to ensure users wouldn't miss all that was on offer, or they could choose to quickly check the latest tally if they just wanted an overview.

This score snapshot above in-depth tabs was especially effective on mobile.

State icons

I also wanted to give the site a bit of character so along with designer Nina Monet we gave each and every state an icon. These were things that the state was famous for and although only a small detail on the page it was fun to read people's tweets about them. [N.B links to external site with strong language]

Taking the designs worldwide

As this story is of interest worldwide we worked closely with World Service. Designers Nour Saab and Charlotte Thornton adapted our designs for over 20 languages.

World Service face difficult challenges. For example words in Russian are often much longer and don't fit the spacing allocated for the English words and Arabic reads right to left so the whole page has to be flipped.

Charlotte spent many days sitting with the developer - the ideal way to work I believe - making sure the design and development were aligned.

The results page in Arabic

Final thoughts

The benefit of this project was that regardless of the user's device or language there was a consistent US Elections home with a 'scoreboard' overview above the tabbed index, results and live page.

Although not fully responsive it's close. The mobile site has a clear relationship with the desktop. We had 16 million unique visitors to the site of which 30% were on mobile proving our mobile first approach was worthwhile.

This project had the support of the Visual Journalism team and I'd like to send a big thank you to everyone who helped make it a reality. It would be great to hear what you thought of the site.

Helene Sears is the editorial designer for UX&D.

My team produces a huge range of visuals including all of the daily charts, maps and infographics that accompany our online news stories.

We also work on longer interactive features which have ranged from visually explaining the Eurozone crisis to a calculator that tells you where you are on the global pay scale.

Recently developer Steven Atherton and I did a first for BBC News: we created an infographic using parallax scrolling - a technique originally used in 2D video games to create a 3D look and feel.

James Bond: Cars, catchphrases and kisses on BBC News

The subject we chose was a feature about the James Bond movie franchise reaching its 50 year anniversary - not urgent or the highest priority - but a good place to experiment.

Designing 'James Bond: Cars, catchphrases and kisses'

Watching our TV designers create motion graphics using After Effects reminded me of parallax scrolling.

Inspired by their work I came up with the idea of building an infographic using this technique which involves multiple layers of visuals programmed to scroll at different speeds.

I wanted to use parallax not because of its popularity but because I felt it would lend itself exceptionally well to the James Bond content.

The motion effect creates the feel of the opening credits and it would also allow me to showcase the epic visuals of the films.

First I built a prototype.

A couple of years ago I worked with Ste Everington, a UX Designer for BBC iPlayer, who had built a parallax site for his own project so I knew it could be done, though my code skills are basic at best.

After reading this tutorial I took parts of the code, redirected it to my images and then did some basic calculations to work out the alignment figures (where the images should go).

I was then able to get a prototype together in Dreamweaver (yes Dreamweaver, I did say my code is basic).

Helene working out the coding for the infographic on Dreamweaver

It took me less than a day to make something that was strong enough to convey the idea.

Building 'James Bond: Cars, catchphrases and kisses'

Having built my prototype by eyeballing distances, it was fascinating to watch developer Steven Atherton work and build the page mathematically correctly.

The first major stumbling block was interaction of the parallax background with the BBC News page.

The manipulation of the DOM elements gave the impression that the whole page was in parallax.

Sometimes this created odd gaps between images and at others the content would drift up - at one point we had Sean Connery in the masthead.

Then came the next round of challenges: making sure it worked on older browsers - all the way down to IE6, that the EMP (audio clip players) would scale down to 256 pixels wide and that the whole thing would also work on tablets.

Steven's first thought was to create a viewport to contain the parallax, but a few initial experiments showed that while this was technically possible it wasn't a great user experience.

The solution seemed to be controlling the animation speed more precisely and easing the animation early thus hiding unsightly overlaps with the masthead.

To handle adverts or introduction text being inserted we captured the distances dynamically and had the animations interact accordingly.

The animation starts slowly as the user scrolls down the page and speeds-up once the top of the feature hits the top of the users' browser window, eventually stopping altogether when the footer aligns with the bottom of the feature.

It was much easier to make corrections by sitting with Steven and using Firebug as opposed to the much less agile method of sending him annotated images from Illustrator.

Our solution for older browsers and for tablet was to disable the JavaScript and flatten the graphic and for places in the world that can't load the EMP it's simply stripped out.

Helene does some basic calculations to work out the alignment figures

When it launched the response was overwhelmingly positive. The vast majority of comments that came in were about how great it was we were using big bold visuals and how much fun the page was.

We did have a couple of comments about the fact it's not on the mobile site and that it's a very heavy page to load at nearly seven megabytes.

The size isn't a huge surprise considering the graphic was 13,000 pixels long - we normally try to stay no deeper than 620 pixels and at the moment all of our content is stripped out of the mobile site. It's a complex problem that we are working hard to resolve.

Meanwhile one of my colleagues in World Service was working on an innovative feature that also pushed the boundaries of the page.

Nour Saab and Steven Conner designed a feature on the importance of the Latino vote in the United States.

The page progressively reveals the content as the user scrolls and its development presented similar challenges to our parallax feature.

It was fantastic to see the evolution of the designs and to have another designer experimenting with code.

Going Forward

Our experiments with parallax scrolling and with other HTML5 techniques are barely scratching the surface.

First and foremost we are about telling the story.

Using parallax scrolling for the Bond feature allowed us to present information in an engaging way that enhances the content without overpowering it and we'll be looking for ways to use this approach again on bigger news stories.

There is much more to be done as more and more of our audience is coming to us via tablets and smart devices which present a whole new set of challenges for us as infographic designers.

This project had the support of the Visual Journalism team, and I'd like to send a big thank you to everyone who helped make it a reality.

Helene Sears is the Editorial Designer for UX&D.