Creative Director Ben Gammon / Geogia Muir / Ryan O'Connor
nior UX Designer David Man
UX Designer Joachim Falck-Hansen
Information Architect Adil Hussein 
IOS Tech Lead Keith Moon
Android Tech Lead David Simkins

DESIGN PROCESS

Wireframes | User Journeys | Paper Prototyping | Digital Prototyping | User Testing | Visual Design & Specifcations | Development Support

After the first edition of the BBC News App in 2010, BBC News wanted to overhaul with a full redesign of the App with the following criteria:

1. Surfacing the entire offering of the Editorial News / Top Stories
2. Personalise your news, allow users to follow topics
3. Introducing all of BBC News Video offering
4. Better Reading Experience

The News App has an estimated reach of over 10 million in the UK, and over 25 Million users worldwide.

I led the Visual Design workstream for the App for mobile and tablet for both iOS & Android Platforms, targeted at UK and Global Audiences.

I worked on early concepts, exploring interaction design models, using sketches and paper & digital prototyping frequently to move and test ideas quickly.

As a Visual Designer I was responsible for the Top Stories Index, Article and Video Page Designs and Navigation; all of which were continually polished through user testing until launch.

Throughout the project, I worked closely with the iOS & Android team unifying the design patterns, ensuring the interaction models were solid and waterproof.

Conceptualising

As a team we explored mulitple ways to balance the presention of discovery versus established and expected behaviours. Most started on whiteboard, post its with a series of rapid digital prototypes.

We were able to test a variety of them, and iterated on the insights.

Early Concepts

A rapid illustration to understand a vertical interaction behaviour; this was pitched to all senior stakeholders and met interest. 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. 

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.

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.

Design Deliverable

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 download 27 Million times.
 

[unex_ce_button id="content_hbuazyqg5,column_content_7cgrzjjeo" button_text_color="#000000" button_font="bold" button_font_size="24px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#transparent" button_padding="100px 60px 100px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="https://www.vandersault.com/work/platts-app/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]PLATTS IOS APP[/ce_button]
[unex_ce_button id="content_hbuazyqg5,column_content_c9f9wto1v" button_text_color="#000000" button_font="bold" button_font_size="24px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#transparent" button_padding="100px 60px 100px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="https://www.vandersault.com/work/bbc-three/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]BBC THREE[/ce_button]