BBC.com Redesign

A complete redesign of the BBC.com worldwide homepage, accessible on all viewable formats from desktop to mobile and in all regions to an international audience. The goal was to construct a responsive website solution to open the service to the rising numbers of mobile and tablet users. The requirements were to introduce new and effective ways to dynamically increase ad viewability and CTRs for commercial value, and maintain the BBC’s stringent use of accessibility rules and guidelines to accommodate for all users and disabilities.

My Role

I took creative lead in constructing a responsive solution with a stronger focus on dynamic ad features, improving viewability and impressions on buyouts, but also ensuring that the design aligned to the unique correspondent-led, in-depth journalism central to the BBC brand. I was heavily involved in the research process, working with web analysts to better understand the usage statistics and to determine the way best to improve the current experience. I also conceptualised ideas, digitised the wireframes, engineered early prototypes and constructed the finished designs ready for translation. I also worked with analysts and development teams to successfully launch MVT testing hypothesis and A/B testing.

You can view an example Trello board here:

Research

In research findings and data analysis tests we ran on the current version, desktop and mobile users tended to present goal-driven behaviour and would typically navigate to large sections and modules of information. By contrast, tablet users demonstrated a more leisurely and open approach to information consumption that pointed to a visually-rich, linear solution.

By working with analysts on the .com team, we managed to extract useful user data on the current website to gain a better understanding of behaviour and usage patterns.

“The data showed that users would dwell considerably on the homepage to find content, but would not scroll far down the page – this was suggested by the warm areas from the heat map and the high levels of CTRs on the top level of content”

Further down the page, users were clicking through to content they considered interesting from the top module, or not finding content and dismissing the page (monitored by the increase in bounce rates from the site).

We shared this data analysis in our project initiation workshop with all stakeholders, discussing our findings and considering ideas to improve the issues in the new design. In addition to this, we constructed personas and user stories based on the needs and goals of our users, and started to whiteboard some ideas. There were many business goals to consider, such as ensuring the video module had a higher prominence on the page than before, with a request to improve the usability of it. It was revealed in findings in the research stage that we had a considerable of users not engaging with it. There was also a commercial requirement to improve ad viewability across the homepage.

Prototyping

Early concepts and prototypes were constructed over the course of the research, where we could make informed decisions on the user experience and layout of the site. I reconstructed the entire layout with the focus on mobile and scaling up to tablet and finally desktop view, enabling bigger and more engaging modules, such as video and image galleries, to fill most of the real estate. Learning from underlying user motives and patterns through analytics research, I constructed various concepts and engineered prototypes to share with stakeholders and the wider team, improving on the issues we had experienced previously.

I took these ideas and started to conceptualise a page structure and hierarchy in low-fidelity. The structure was led by business requirements to ensure that current / regional news was at the top, world news was on a second tier module and that a waterfall of various modules – sport, weather and feature – was included.

I also had to consider maintaining the company’s high level of accessibility and ensuring best ad viewability for commercial value. Various rails were constructed for a dynamic, fixed approach where the ad space would fix the user’s scroll behaviour and then anchor at the bottom. This was an elegant approach to ensure ad views were maximised but did not depreciate the overall user experience.

The insights also enabled me to build an experiential browsing mechanism, driven by story headlines and modules with high-quality imagery. This made it easy for users to casually digest and motivate through different stories. The addition of bigger, more striking headlines and removing abrasive elements such as long article lengths and confusing news modules made the site look much cleaner, bolder and hierarchically correct. Various iterations of the design were completed, as we stepped further towards a site which encompassed the optimal user experience, married with a harmonious integration of ad space.

Desktop View

Building the layout with a modular framework enabled me to make quick considerations and iterations to present to the wider team. Blocks could be moved quickly if there was a demand for higher prominence. Although mobile was considered first, we built the desktop view as the first in the set, as statistics showed that more users were digesting content than on responsive variations.

You can view the collection of all the wireframes here:

Tablet & Mobile View

The medium to small device layouts reacted in a stackable style, with news blocks taking up full-width where necessary. I also had to consider the dynamic ad lanes, where the ad would still fix to the page when a user scrolls downward. This became harder still when considering the mobile view, but we decided it could still adopt the same style, with a smaller column for the advert to sit. We ensured that the user would still be able to tap and scroll through the page, ensuring that the well wasn’t too tall and unusable.

You can view the collection of all the wireframes here:

Video Module

Shown below are various states of the video module. We found in current usage statistics, that users weren’t engaging with the video module or the content. It was quite obvious that there were many reasons for this. The heat map suggested that users were not scrolling deeper down the page, so the module itself was too buried and finding content before they reached it. The preview image for the video was overbearingly large, and the UI was so similar to other content modules, that again, users were dismissing it for news content.

In the wireframing stage, I ensured that the module was moved up the page hierarchy, the image was 40% smaller, and I also increased the number of video content. Clear signposting on ‘watching’ and ‘up next’ were added, as well as clearer video titles. The play function icon was also moved to the middle to make it more obvious. I made sure that in the high-fidelity stage, the module and the global UI would be darker, delineating the module for a better viewing experience. Social sharing tools were also added as a business requirement. We made sure we tracked numbers on the number of shares.

A new style set of UI elements was considered, and I had to ensure the layout would still work with buy-outs, takeovers and ad placements from stakeholders on the page, ensuring it harmonises with the overall look and feel. I ensured the designs gracefully responded to other devices, such as larger and more common screen sizes, tablets and mobile. Page module sizes and style elements had to be considered, ensuring they stack accordingly. Layout constraints were accommodated for and I ensured design treatments were consistent across all platforms.

Testing and Performance

Going forward post-launch, we integrated a user testing framework to ensure we could manage statistics and learn behaviours from our users, and continue optimising the design. We also decided it would be beneficial to create and schedule MVTs across the homepage to continue improving the overall experience.

“Since the redesign, the worldwide identity has been successfully updated and the new visual language incorporated into the relaunch”

The departure from unnecessary and restrained integrated modules to a more open, platform-utilising window space was designed to provide a simple canvas that allows the content to take centre stage. Page views, unique visitors to the site and ad impressions have increased dramatically since the redesign went live, with the BBC.com homepage experiencing much higher CTRs and dwell time. Since launching, we have also found users are engaging with content in a deeper way, with video impressions and overall dwell time increasing from the improved experience of the video module. This suggests that users are watching content for longer periods than they were before.

If you are viewing this outside of the UK, you can view the live site here: