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.
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.
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 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.
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:
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.
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 we found:
Some issues arose on video templates and social sharing:
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: