BBC Sport Responsive
Brief
Over the last few years BBC Sport has been gradually rolling out it's responsive website. Mobile users were making up around 60% of our visits, so now was never a better time. We also wanted to be responsive for the Rio 2016 Olympics as there were big expectations on numbers after London 2012.
My role was to lead the UX on redesigning all of Sport's index pages which included big hitters like the homepage and football index. Past redesigns for BBC Sport and BBC News have been met with an abundance of negative feedback. Therefore managing the impact of change was my number one priority. I needed to ensure what we were trying to achieve had good feature parity and was introduced gradually rather than a big bang release.
Process
The BBC Sport website is the biggest online sport destination in the UK. There are hundreds of editorial staff using it as a system to create content day to day. I was effectively changing the way they did certain things so communication was vitally important throughout this project. I started by gathering requirements from internal stakeholders and carried out audience and competitor research followed by creating user stories. I was in a multidisciplinary team of around 25 people.
A pattern library was absolutely essential. It allowed developers and myself to create modular components before assembling the page and was a familiar way of working during my time in CBeebies. A lot of the design was done on paper whilst sitting alongside a front end developer. This allowed the team to quickly react as we took on feedback from internal stakeholders and user testing.
The indexes went through many iterations of design whilst beta testing. Once we served the new layout to 100% of the audience there was inevitably going to be some negative feedback but in comparison to number of users it was minuscule. We had essentially snuck out a redesign without many users noticing which was seen as a massive success internally and more importantly put us in a good position to build upon going forwards.
Responsive indexes: taking a mobile first approach I worked with all disciplines to come up with a content hierarchy for each index whilst considering feature parity with the existing website.
Responsive indexes: everything I created was considered at a modular level which allowed us to assemble pages quickly. Examples of promos (above) and colour palette (below) from the BBC Sport pattern library.
Responsive indexes: Cricket and Rugby were the indexes I started with. These had many iterations over their beta period.
Responsive indexes: lab based user testing was carried out before going to beta. The themes I focussed around were reaction to change, moving to a wider grid, content hierarchy, content density and general usability.
Responsive indexes: how might we's were generated after the initial lab based user testing to tackle some of the feedback received.
Responsive indexes: the main objective for the redesign was to keep the experience as familiar as possible and to manage the reaction to change. After beta testing Cricket, Rugby and F1 I tackled the Homepage and Football index.
Olympics: the responsive work that I have undertaken over the last year and a half was mostly in preparation for the Rio 2016 Olympics. The new responsive indexes gave us a good foundation to build upon.
Olympics: the responsive indexes were reused for Rio 2016.
Olympics: browsers to BBC Sport for Rio 2016 were higher than London 2012 with a larger percentage using mobile.
Whilst index pages was part of my role, I also had to lead on our data pages. Horse racing for BBC Sport was very basic but a popular destination. Competitor analysis highlighted how others were offering a lot more information before and after races. I set out to create a fully responsive results page but also saw it as an opportunity to re-think the offering.
Horse racing results: I created a matrix looking at the data competitors show before and after a race. The audit helped give me a good starting point as to what information could be included.
Horse racing results: lab based user interviews allowed me to gather insight into the data that's important to users and it's priority on the page.
Horse racing results: making sense of the all the feedback I had during lab based user testing.
Horse racing results: final designs launched as a beta in November 2016 for user feedback before releasing to 100% of the audience.
