Header News App

BBC News App

Personalizing News to a Global Audience

In 2014, BBC engaged me to help design their largest update to the globally recognized BBC News app.

The project aimed to introduce several new features, including:

• Surfacing all ‘Top Stories’
• Personalizing news topics and allowing users to follow them
• Integrating all BBC News videos
• Enhancing the overall reading experience

My role was central to both the visual design and interaction design, shaping how users engaged with the app on both iOS and Android platforms, which at the time was pushing the boundaries of navigation models on native apps.

I was also deeply involved in user testing and worked closely with iOS and Android developers, fostering a collaborative environment that motivated us all to deliver the best possible experience.

Team

Ben Gammon, David Man, Adil Hussein

Skills

User Research & Testing
Stakeholder Management
Product Design
App Design (IOS & Android)

My role

UX Designer, Visual and Interaction Design

Timeline

Q2-Q4 2014

Location

Broadcasting House, Central London

Design Process

Background

The ambition of the News Editorial team was to find the right balance between established user behaviours and the level of discovery.

With the team I worked closely to explore the anatomy of content and therefore visual language, and ways in which we could easily move between what might be fleeting interests, as of by following the constant exposure to world changing events.

Before we got deep in build, we sketched ideas that I was then glad to rapidly prototype, either in after effects or in paper format. We were able to test a variety of them, and iterated on the insights.

BBC News App Workspace

Early Concepts

To help understand a vertical interaction behaviour I took on a quick motion behaviour test; this was pitched to all senior stakeholders and engaged interest for this to be explored further.

It later led to the product moving towards a rollerdex as prime navigation, a direction that was tested thoroughly on IOS platforms.

The proposition however was meeting a shift in preference, with some users loving it as very innovative and refreshing, whereas conservative users showed stronger reservations.

Example 1
Behaviour animation to get started.

Example 2
Rollerdeck test with content

Example 3
Developed Rollerdeck with CTA.

User Testing

We tested the designs iteratively before making any decision.

Some of the central themes was if users preferred the radically new navigation (rolodex), whereas others sensed this was a step too far.

With the overall weighing of this feedback we adjusted according to the larger voice, to take a few steps back and explore tab navigation.

Article-Design

Item Page (Article/Video)

Both the article and the video page are the bread and butter of the product. The differentiation was very conscious, utilising the most reader friendly approach to a single article versus pulling out video content with a dark, to tie in with the wider visual language familiar from iplayer and video experiences.

Top Stories & Landing Pages

A heavyweight statistic of users are interested in the BBC's prime editorial set of News Stories, known as Top Stories. The Design caters to include all of the editorial content available on BBC News landing page, offering a much larger offer of content than previously available.

The design considers the categorization and grouping of sections, such as Magazine Features, a Video Section and the Gallery section.

Portfolio 2017_2560
top nav retina

IOS Navigation

Working closely with the IOS developers I guided the visual design as well as the nature of the motion design.

The logic to include a secondary navigation, included getting a very high at a glance view of 'My News' as well as giving intuitive access to settings, as not to clutter the rest of the nav.

Global launch

The BBC News App went live in January 2015 for both Android & iOS in a global launch, and has per BBC stats reported to be downloaded at the time 27 Million times.

The BBC wrote this article to tell the story why the redesign was important.

Portfolio News White

Other Projects

2023

Once-in-a-Decade Brand Revamp: Fresh, Contemporary & Human

2020

Centralizing Commodity Market Critical Data

2016-2020

Analyzing Commodities at Sea

Let's Connect

© VANDERSAULT 2024  |  LONDON