BBC Features PWA

A user-centric redesign for the five feature site series on BBC.com, encompassing a modernistic framework for improved accessibility, dynamic ad viewability and a better reading experience. Rebuilt as a PWA (Progressive Web App) and utilising new capabilities of the framework with a mobile experience in mind. We considered new ad opportunities, clear series signposting and priority to featured content.

My Role

I creative directed the project, leading on the user research, design and engineering. I worked synchronously with user research teams to better understand our current traffic statistics and analytics and ensured transparency with stakeholders throughout the project timeline. I also worked closely with the development team to engineer prototypes and ran project initiation and internal user testing workshops.

Research and Discovery

To ensure we were clear on the redesign objectives, we initiated a workshop to share ideas, outline business goals and any new requirements. We had numerous Editors join the workshop to give their insights, kicking off the session with a question to focus the team: ‘What are the outcomes you want to achieve?’.

We brainstormed a number of desired outcomes. From a strict prioritisation scoring exercise, two clear objectives emerged:

“Grow the digital audience for the BBC with a refreshed and modern design, and be able to provide flexibility of control to the Editors”

In addition to this, there was a business requirement to find new and interesting ways to integrate ad opportunities for clients to maximise their impressions. The main issue we uncovered with the current design was that templates ruled the look and feel of the articles – a content template (including in-line media), full-width gallery template (which was a new addition) and a video template. The new designs would change this by creating a modular-based system per article, where Editors could construct their own articles in iSite (Our backend publishing platform). A back-end developer would create the forms to enable Editors to do this.

In the project, it was vital to make things as easy as possible for the Editors. We wanted to develop a range of content templates that allowed for flexibility and consistency when building new features. We decided it would be best to consider a modular framework, where blocks could be constructed easily and stacked next, near or on top of each other with seamless slotting. This meant the Editors would be able to create their own bespoke articles in iSite and the pages wouldn’t be defined by a template type.

We decided we could create a set of reusable patterns which could be rearranged in different ways, serving different content while still preserving a sense of individuality to each story. There was also a desire to create a product that led the way in the cultural arena, and create an example that other editorials would want to emulate.

We defined our users and outlined possible personas, working with the research team to create realistic representations of our key audience segments. This was built from representations based on qualitative and quantitative user research, and web analytics from Optimizely. We prototyped some ideas for the product and mapped the emotional journey we were trying to create.

Since the last design was launched 5 years ago, many trends and new frameworks had emerged in the digital world and it was worth discussing these in detail. We considered using React, a JavaScript library for building user interfaces. It was efficient to use as it updated and rendered quickly, which was ideal for quick iterations. However, we decided to adopt a PWA framework for the redesign, as the benefits of its native app features superseded other options:

  • Push notifications
  • Full screen support
  • Extremely low data use
  • Fast, easy install
  • Shareable content; greater reach
  • Offline working and caching

We were also led to believe a PWA would increase page speed, which would allow users to view more articles and result in more impressions per session. Since PWAs allow for swiping interactivity and support for mobile gestures (similar to Snapchat-like mobile cards), we thought this would be a great benefit.

Prototyping

After whiteboarding sessions with the team, we started to map out the possible modules. Culling and cropping unnecessities enabled us to focus on the core modules we wanted to include, such as new full-bleed media galleries. Many of our ideas required animation or interaction. We used a variety of techniques, including sketching and cutting paper prototypes. We also quickly hacked prototypes in the browser with placeholder library assets to show how that interaction combined with their assets can evoke a powerful reaction.

I spent a lot of time conceptualising and integrating new ways to increase ad impressions by creating dynamic, fixable elements to the page. On the desktop view we had a lot more real estate to play with, where I could create a single column or ‘runway’ for MPU ad slots to fix on scroll. In between articles, we used ‘sandwiched’ or interstitial ad slots for leaderboards and parallax ads. Interstitial takeovers were also included on mobile, and larger billboard adverts were adopted into the desktop view.

One of the ways we reached collective agreement on prioritisation was by demo-ing designs with real devices. When the content needs to fit in the palm of your hand, you really need to test it and figure out what matters most.Throughout the process, we checked our assumptions. Even if we only had a quickly-made prototype, we made sure to test it.

 

You can view the collection of mobile wireframes here:


 

You can view the collection of tablet wireframes here:


 

You can view the collection of desktop wireframes here:

Design

Using the wireframes, I worked on the high-fidelity design. I started to create a design system, adding symbols, elements and styles. We also included the new font ‘Reith’, which was being rolled out across all the BBC platforms, as I thought this was a great opportunity to update the current system font we were using. It was a big improvement as the reading line was better, and made it easier to digest longer strings of text. With brand new typefaces and a clean minimal layout, the finished design is stylish and understated, with an emphasis on high-quality content.

 

You can view the collection of mobile designs here:


 

You can view the collection of desktop designs here:

We created additional white space, bolder typography and inspired iconography to showcase the feature-rich journalism. Call out boxes and quote cards were constructed, making use of the third column. This ‘open’ design made the whole experience a lot more breathable, with careful consideration for longer reading. The new visual language was also incorporated into the relaunch. The departure from the strong, solid colouring towards a more restrained, subtle palette employing generous white space was designed to provide a simple canvas that allowed content to take centre stage. We also developed a concept and strategy for branded content that complemented the new design and enhanced the platform – subtle enough, but consistent across the layout.

Discovering content and moving between articles was a vital part of the user experience. We designed new formats that worked with all imagery, whatever the size, so that the style remained consistent. The large visual teaser hero on mobile view draws users in, helping them to uncover new content and get lost within the platform.

Testing and Development

Before launching the new design, we held a number of internal user testing sessions. I worked closely with the web analysts to create scenarios and goals to achieve, such as finding certain media types and content. We ran 10 usability sessions (5 on desktop and 5 on mobile) with 9 users (3 females and 7 males, aged between 30-45). We tested:

 

“What do users think of the design, layout and usability?”

What we found:

  • The overall look and feel received very positive feedback, most users described the design as sleek, modern, clean, for young professionals.
  • Most users found it easy to navigate through the content, they liked the overall layout on index and story pages, and the font was said to be easy to read, although some users noted there was a lot of content to scroll through on index pages
  • When asked about ad banners, some general feedback from users admitted they found them ‘annoying’ when they appeared within the body text of an article on mobile, although they admitted they understood ads are a part of the mobile landscape. On desktop, users didn’t find the ads intrusive at all.

Some issues arose on video templates and social sharing:

  • All users expected to see the video at the top of the page, but some attempted to click through the hero image thinking it may be the video
  • It wasn’t obvious that the video gallery functionality was very clear to the users on both devices. All users thought the videos displayed in the thumbnails would be somehow related to the first video
  • Most users were able to locate the social sharing icon but some mentioned they would rather have the social networks buttons exposed (AB test?)
  • A few users weren’t sure whether clicking on the social sharing buttons below the pull quotes would enable them to share just the pull quote, or the entire article
  • Most users struggled to locate the ‘follow us’ buttons

From this feedback, I continued to make iterations on the designs, providing solutions for the issues exposed from the user testing sessions. This feedback proved to be invaluable to ensure we could improve the designs, and to create an enjoyable and memorable reading experience.

 

You can view the mobile prototype here:


 

You can view the desktop prototype here: