• Home
  • Design & UX
  • Other projects
  • About me
  • Lets talk
Stevey
  • Home
  • Design & UX
  • Other projects
  • About me
  • Lets talk
radius buttons faq image.png

Background

Following the BBC's Online Creative Review it was decided that BBC News would close their local index pages and replace these with an improved experience for discovering and consuming local news content across the BBC.

The goal

To have more users use their location to discover local content and consume it more often.

Requirements gathering / Planning

It was decided early on in the project that whatever we designed and built, we would do this as a staged approach. After gathering the requirements for the project from all stakeholders, I created a UX plan with a timeline to show how and when we would execute our work alongside this staged approach. This gave everyone in the team visibility on what our next steps would be. I ensured our timeline covered design research, ideation, prototyping, user research, design and mark up in time to meet our deadlines. I then set up a Trello board to capture some of these smaller tasks and I began to allocate the work to team members so we could get started on the work.

An example of a planning session with the project stakeholders

An example of a planning session with the project stakeholders

Screen Shot 2018-03-06 at 18.35.47.jpg

Phase 1 - Frontpage slice

The first phase was to replace the local news section of the BBC News frontpage, which was itself in the middle of a refresh. We allowed users to find a location themselves and add it to their homepage or use geolocation to surface the location we thought they were in - using cookies.

Screen Shot 2018-03-06 at 19.11.21.png

I worked with a design researcher to commission and carry out user research on this to ensure the component we designed was usable and made amends where appropriate.

TownHall_LocalNews_28022017.011.jpeg

Phase 2 - Location topic pages

Looking at the current local news offering it was clear we weren't being as efficient as we could be, for example users could access local news content from two areas within the BBC News website - on the local news index pages and live pages.

Initially I had led a separate piece of work creating automated topic pages for the BBC News website, these were very simple pages made up of a topic title and an automated stream of most recent BBC news stories tagged to the topic page.

The second phase was to merge both the local news index page and the local news live page into one.

TownHall_LocalNews_28022017.002.jpeg

Location about to get more granular

Instead of providing local news content for BBC News regions and counties, we were now on the verge of being able to offer local news to cities, towns and villages.

TownHall_LocalNews_28022017.003.jpeg

One of the many challenges we faced was how to encourage users to get more news from the area and surrounding areas they are in. From various editorial trials we found small villages were not being tagged with much content so as a user going to the pages on a daily basis - they would not see many news stories.

Radius to discover the local news around you

Through a technical spike the team identified a way around this was to introduce location by radius. This satisfied lots of business and user needs including when more granular locations don’t have enough content. The user can just increase their radius and get more news around them. We also looked at options of bringing in content from local news sources around the area.

Workshops to enhance user experience using radius concept

With this all in mind, I set up and led a series design sprints and workshops to use radius and make the best user experience out of the data content we had. 

We started to ideate some ideas around enhancing the user experience of these location topic pages… we started sketching many ideas, before settling on some common themes - sliders / maps / filters / tags

03Nov2016_Radius_FurtherInvestigation-23.001.jpeg
news_curatedcollections_02.jpg
03Nov2016_Radius_FurtherInvestigation.001.jpeg
03Nov2016_Radius_FurtherInvestigation.002.jpeg

User research sessions helped refine concepts/designs

We then mocked up our sketches in Sketch and ran some rapid research sessions in Crawley, Sheffield and Salford to put forward our ideas and let users inform us what works and doesn't work for them.

TownHall_LocalNews_28022017.006.jpeg
TownHall_LocalNews_28022017.007.jpeg

Editorially selected content at the top of the page

The designs needed to cater for editorially selected content from the topic tags so that editors could highlight the best and most important stories of the day per location. Editorially and technically there were some challenges here as it would not be possible for an editor to update 30,000 + pages, so we needed to work with the technical team to work out an algorithm that was automated. Users found this editorially selected content really useful, as they wouldn't want to miss the important news from the day.

TownHall_LocalNews_28022017.008.jpeg

Local users didn't find maps useful

From testing we were able to get an MVP topic page ready for build. Interestingly during research sessions things like the maps weren’t working - things like filters were favourable.

Accessibility issues with slider

We found that users didn't really have a preference for sliders over buttons when trying to change their radius. Through the design process we found it difficult to create a fully accessible slider - so we went live with the buttons.

remember location_Page_17.jpg

Final designs

This page is full of re-use an important part of our work for the wider UX&D team it includes the search component, a stream, a 5 slice promo plus some new components like the radius buttons. The local news pages went live in 2017.

TownHall_LocalNews_28022017.009.jpeg
TownHall_LocalNews_28022017.010.jpeg

itsmestevey.com