a selection of design work in progress

I'm Scott Byrne-Fraser, Creative Director of the user experience and design team who work alongside the editorial and product teams on BBC Sport's digital products.

This month we launched the redesigned sport desktop site, the first step in our digital journey in what is a massive year of sport in 2012. It's a large scale modernisation of the site and the first full redesign in almost ten years. My colleagues Cait O'Riordan and Ben Gallop have already given details of the relaunch. I would like to talk you through the design process used and provide details on our user-centred approach to creating engaging experiences for our audience.

In order to get a better understanding of how our audience uses media to follow live global sporting events, an external agency was commissioned to perform an ethnographical study of user behaviour during big sporting events. The Fifa World Cup 2010 was used as the core stimulus.

BBC World Cup 2010 website - the first time the sport site used horizontal navigation

The high level findings were:

• Consumption of "liveness" around sporting events consists of a patchwork of practices. Different types of media support different sides of the live sport experience.
• Sports events are deeply social affairs. Social atmospheres are now playing out online as well as offline.
• Sports events have many different rhythms. Use of media content and platforms adjust to this.

In addition to this the participants took part in a diary study, in which they where asked to record their participation in sport over a set period of time. They recorded when they use sport websites, watch sport on TV, take part in sport themselves and when they talk about it with their friends.

If you are interested in reading more about these studies and how we iterated the designs following feedback via user testing, my colleague Neil Hall, Executive Product Manager, discusses this in his post, along with details on the technical and product strategy.

User Personae

The data from the studies concluded that our audience can be broadly categorised into five user types. These are given the names General Sport Fan, Sports Obsessive, Banter, Intelligent Comment and the Main Eventer.

For each of these user types full user personae were created describing the general behaviour, interests and a typical user journey. Here are examples of the General Sports fan persona and intelligent comment user journey:

General Sport Fan - Paul, 24

an example of the user persona created for a general sports fan, showing details of the user behaviour

"Sports are just an important part of being British. Following sport is like breathing - you have to do it and you don't think about it. But my behaviour is not obsessive. I'll check things out if I'm bored or I see a link to BBC on Google or get sent a link. The BBC site is the natural choice for me to keep up to date with sports.

one of many example user journeys created, in this case an "intelligent comment" profile journey

Developing a UX Vision for the Refresh : Live Beyond Live

The editorial content of the site has always been a major draw and the reason the site is so loved by its many users. Our journalists do brilliant work every day with their impartiality, breadth of coverage, trust, and access to the world's top sporting events.

However people don't often realise all the great live coverage the site delivers, and there is a lot of it. There is live video coverage of many sports where we have rights as well as live text commentaries and radio feeds, not to mention the huge volume of sports stats available. The site just didn't feel very alive or capture any of the emotion we all feel about sport.

Nick Haley, then Creative Director, and now Head of UX&D for Sport & London 2012, built on the product strategy, using the audience research and insight to develop a UX strategic vision document which set the direction for this project and future sport projects in 2012.

The news approach is at the core of sport success with its impartiality, breadth and ease of use.

However news and sport are different. News happens any time, anywhere, any place. Sport events are scheduled.

rhythm of football content on the BBC Sports site

Sporting events and matches follow a rhythm. Before the event there is anticipation, during the game live action and after the game analysis and catch-up.

live page on the old desktop site

Live is not just the live coverage and commentaries but the heartbeat of the site itself. It should surface everywhere and anywhere a user is immersed on the site. We referred to this as "Live Beyond Live".

The strategic vision of "Live Beyond Live" focuses on two key areas which are crucial for sport and the BBC. They are:

• Live events - Anticipation, Event & Analysis
• Liveliness - Passion, Excitement & Participation

A set of Experience Principles were also created which helped to inform our thinking and also shape ideas as they were developed. They also worked well at facilitating a shared view of the new site across UX, product and editorial teams. These principles were:

• Encourage participation and show the buzz
• Allow quick and easy personalisation
• Show two sides to every story
• Bring data to life

• Provide engaging onward journeys

Concept Exploration

Discussing early scamps and sketches

With the vision for the project in place, work began on creating paper and digital scamps - rough drawings to convey the idea of the design - of the key pages of the site, which reflected the journeys created. At this stage, desktop, mobile and TV platforms were being considered. These scamps allowed us to quickly develop lots of ideas and rapidly validate them with the product, editorial and tech teams.

print-outs of the digital mock-ups of the design scamps

Information Architecture and the Horizontal Navigation

The left-hand navigation was very popular among many users. However it had a number of drawbacks. Changing clusters of links and the absence of a secondary level of navigation made it difficult for people to orientate themselves while browsing. Reported frustration when users were required to navigate back to the homepage in order to switch between sports was frequent.

To improve the situation the overall aims of the new navigation design were to:

• Provide easy access to all sports wherever the user is on the site.
• Provide easy access to major tournaments associated with the sport being viewed.
• Give the user a sense of the scope of what's available.
• Give the user a sense of their position within the site.
• A simplified navigation across the sport site.
• Consistency across all sports

The pan-BBC strategy on navigation defined in the Global Experience Language advises the use of a horizontal navigation schema. This creates consistency across the BBC's portfolio of sites and allows for a standard grid to be applied.

The horizontal navigation resolves the challenges of the vertical navigation. It allows all sports to be linked to from any page on the sport site. It also allows a secondary navigation bar surfacing deeper links to the section (tables, leagues, teams, and so on).

primary horizontal navigation,  showing how all sports can now be access at the top level from any page on the site

In-Page Navigation

Destinations linked to from the old left-hand navigation which are not classed as a sport, such as nation links and programmes links are now given prominent in-page promotion.

Contextual links have been added to items to show the nation, sport, league or team the link is associated with. This allows many possible journeys around the site.

examples of contextual in-page navigation on story pages

A New Design Language for Sport

The audience research told us that our users wanted the site to be updated and to feel more lively and energetic. We took on the challenge to bring the site to life with a new visual language.

Early visual concept designs for the sport homepage, that show some of the visual style which made it to the final design.

Colour Usage

Black text on yellow is how the BBC Sport brand is reflected on TV. This was represented on the old site, but not very prominently. A slightly toned down version of the colour is used in the colour palette. This became the basis for the colour palette as a whole.

Two colour charts used during the design process; the right-hand version led to the final colour selection

On the website a wider variety of colours are needed to signpost the different states and functions of the page.

Blue is used to indicate "Live". The blue chosen is vibrant, electric and energetic - to reflect the nature of Live. It complements the yellow and is of similar hue. Each is easily distinguished when side by side.

Rich Imagery

The pan-BBC GEL styleguide is very functional and adaptable. We used it as a starting point but expanded on it to add more emotion, passion and dynamism needed to reflect what sport offers. We turned to art movements and graphic designers who had designed for major sporting events to gain inspiration.

The use of background imagery and the overlaying of text on images breaks away from the stiffness of the rigid grid, adding energy and drama to the page.

BBC Sport image sizes, with caption positions

The Banner Illustration

To give each sport a personal touch, illustrator Alex Trochut was commissioned to create bespoke illustration for some of the key pages. He was chosen as his style of adding life to typography is a natural fit to the ambitions of the new design. We felt his work conveys the energy and emotion of sport, seen in his work for Nike training and Adidas.

The full Sport illustration - how many sports can you spot?

The Work Packages

Once the framework for the site was in place, the project was split into several work packages, often running in parallel. Each package was worked on by a team comprising of a UX and a visual designer, with the design director and creative director ensuring consistency between the teams.

At the start of each work package we ran a workshop with our colleagues in the product, editorial and development. This gave the design team chance to get a full understanding of the requirements from each area.

As with any design process the team started by sketching out the concepts, building on the early design scamps.

scamps

Detailed wireframes were created using Axure. This allowed assets to be easily shared between different teams and for quick working prototypes to be created and tried out. It also allowed us to share the designs with stakeholders for feedback before further iterating on the design.

early wireframes of the sport index template and a story page

Once the wireframes were agreed, the visual layer was added, based on the visual design language. This is where the pages really start to come alive and resemble the final output. It was also a time to fine tune the visual language.

football index page and a concept for the F1 live event page

These visuals were used for final sign-off on the design direction before being passed to business analysis and development team to start estimating the build work.

Here are a few examples of the work packages:

Homepage work package

The showcase of any site is the homepage. It should highlight the most important editorial selected news, the latest features and live events. It should also act as a gateway to all other sections of the site, from the individual sport to the nations sport homepages.

To allow maximum flexibility the top part of the page is designed with flexible elements in place which fit together like a jigsaw. This allows the page to flex between news and live content depending on on the priority of the day.

The homepage can flex between live and news depending on the schedule for the day

The page was structured to create zones for content types. The top news and live take priority at the top of the page, with further headlines running down the centre of the page.

Tables, Fixtures & Results work package

We know from our audience research, as well as reviewing our most trafficked pages, that there is a huge appetite for sport stats. We also know that there was disappointment at how they were presented. The aim of this work package was to create a series of templates and components that showcased data from our feed providers in a way that was delightful to the user and encouraged deeper exploration of the content, while maintaining ease of understanding.

wireframes and visuals of the new table functionality, allowing extra data to be shown

Live Scores work package

Live scores is a brand new feature for the site. We know that the highest traffic to our site is at peak sporting times, when users are looking for live scores and results for the day's games.

The aim of this work package was to create an engaging destination for consuming live scores. It would also act as a key driver to other areas of the site.

Wireframe and visuals of a our new Live Scores feature

Live Event work package

The live event experience is the location which brings together all the live coverage of a live event. The challenge for this template is to allow the level of flexibility needed to show many different combinations of content and onward journeys in one page. Each page could include many combinations of video, text, audio, images, Twitter feeds, stats modules and promotional links, as well as advertisements for our international audience.

When video is available, this is given the top slot on the page, allowing people to scroll past it if they are not interested in watching at that time. Real-time stats have been added in the right-hand column to supplement the text feed.

concept designs for the live event page

User Testing

Testing the new designs with real people is the only true way to know if the design is working. At key stages throughout the project we enlisted the help of usability and accessibility specialists to conduct in-depth qualitative user testing. These took place in London, Manchester, Edinburgh and for the international facing version of the site in New York.

Each set of testing involved closely watching how successful users were in completing tasks, based on the initial user journeys.

Results from each round of testing were analysed and recommendations on design updates were actioned and retested, as Neil describes.

Watch this Space

Over the coming months we will be building on what we've built so far. Not all our ideas have come to life for the initial release, but there is lots more to come in 2012. We will be iterating on the new design, taking stock of the feedback gathered and bringing in new exciting features for the Olympics and Euro 2012 which will be shared across the other sports. We're also working on mobile, tablet and iptv sport experiences but more on that in the future.

Olympics pages

The BBC Sport desktop redesign was a big team effort, and I'd like to offer a big thank you to the design team who were involved over the course of this project and all those who gave feedback and insight throughout the project.

Scott Byrne-Fraser is a Creative Director of Future Media User Experience and Design