BBC UX&D: Sport Medal Tables

Web & UX

In the mockup, there are three devices displaying the responsive medal table. The iMac is placed on the left side, while the iPad is on the right. The third device, a mobile device, is positioned in front of the other two. The mockup background has a turquoise colour.
Mockup demonstrating the medal table on desktop, mobile, and tablet

The Background

The brief was to create a single medal table that would work responsively across all screens and devices and be reusable for the many events the BBC covers.

From the user research of the 2012 Olympics medal tables, it was key to streamline the design, making the data accessible, easy to read, and engaging.

The Response

Designing mobile-first allowed me to tackle the challenges of space restriction. It was important to ensure that the same data and information would be available to all users - regardless of how they would access the medal table.

After several design iterations and user testing, a tabbed approach was created to allow users to switch between medals 'By Country' or 'By Sport'.

After establishing the table structure, I worked with the developers and explored the visual styling further. The design included country flags and sporting icons at a device width of 320px and above. An additional feature included using a row highlight colour to give the user's home country prominence.

The medal table can be reused for various events including the Winter Olympics, Olympics, Commonwealth Games, and beyond.

A zoomed-in photograph shows a mobile phone and a corner of a laptop resting on a wooden table. The mobile screen has the Commonwealth Games medal table open on it. The row that shows England is highlighted in a teal colour, depicting the user's home country.
Medal table on mobile
A zoomed-in photograph shows a tablet device and pencil resting on a grey sofa. The tablet screen has the Commonwealth Games medal table open on it. The row that shows England is highlighted in a teal colour, depicting the user's home country.
Medal table on tablet
An iMac is on desk with a keyboard and trackpad place in front of it. To the left of the iMac is a plant and white desk lamp. The iMac screen has the Commonwealth Games medal table open on it. The row that shows England is highlighted in a teal colour, depicting the user's home country.
Medal table on desktop