Roku Design Exercise

Reimagining the BBC News website
October 2019

Project Overview

BBC News is a well-established, internationally recognized and trusted source of news, accessed by millions of users every day, on both global and local level.

The wealth of content is the main attraction, but due to the enormous amount of content and variety of users, it needs to be presented in a way that is digestible and parsable, and ideally personalized.  

In addition, because of the international nature of the BBC and wide variety of cultures the site caters to, the content and layout must be tailored to different regional markets, yet maintain an appropriate brand identity that users trust. 

Users & User Needs:
• People interested in global and regional news and events, potentially internationally-focused (as opposed to US-centric or local news)
• People interested in culture, travel, science and technology
• Mobile-based users (travelers, commuters, field researchers, etc) and more casual “morning news” users
• Possibly varying degrees of wi-fi strength/access (travel in remote areas, urban users)
• User mindset: Discovery/browse (vs task-focused or consumer-motivated users)

Business goals:
• User engagement
• Brand trust/credibility
• Monetization

Competitors:
• CNN.com
• Apple News

Design Critique

News websites deal with a huge amount of constantly changing content to curate and organize, which presents a massive design challenge — the overall user experience gets populated by journalists, as opposed to a UI designed around set content.

Such a vast variety of content attracts a vast variety of users, which is another significant design challenge: Users may want to “skim” or “dig”, or a combo of the two.

How can we allow users to easily scan for articles of interest, but also dig deep?

When I first landed on the homepage, my first impression was of feeling overwhelmed…  the content felt unorganized and it was difficult to mentally categorize what I was looking at. The information grid and hierarchy were not clear… when does a new topic start? Which pieces are sub sections? There seemed to be several different areas of content that are treated differently both visually and hierarchically. I was having trouble figuring out what topics and content are available to me as a reader.

How might we make the content more discoverable and digestible?

To ensure a more relevant user experience, we could allow the user to curate their own content. Apple News does a good job of this by prompting the user to choose topics of interest during the initial sign in and set up process. The topics are then persistently available and editable in a master sidebar list. In a previous project I worked on at Apple, we offered the user a similar questionnaire to help drive the suggested content, which could then be edited in the settings section.

How might we make the content more personalized and relevant?

The navigation bar contains tabs for different sections of content, a sign in option, and an exposed search bar: 

(I’m not sure what the sign in option allows, but I would like to see it allow the user to set their region, language, and topics of interest could be valuable not only to the user, but to developers and product owners.)

Sign in feels out of place… I’d expect so find it in the right top corner near search and other actions.

Some of the categories, such as “Worklife”, “Future” and “Sounds”, feel vague and meaningless.

How could we revise the language to be more human and intuitive?

The “More” tab brings up only four additional topics, which seems like an overkill of UI for a very small return:

How can we offer less, but more meaningful, options, rather than forcing the user to dig around?

It also feels odd that the nav bar changes from black to white when it’s expanded with the More button… I’m not sure why this decision was made — perhaps to differentiate between states — but it feels unnecessary in this case.

Clicking through the tabs, the nav, subnav, header styles and content width change with each section… tabs, banners and other global elements are no longer where they were before. The difference in styles and IA could be intentional branding variations, and/or a lack of consistency across each design group (Yahoo.com lacks this as well) but it could lead to confusion and loss of context for the user:

Monetization

Landing on the homepage, the first thing I noticed was the huge banner ad directly under the navigation bar. When I scroll down the page the ads scroll away, but so does my nav bar. While it’s of course important to balance monetization with an engaging user experience, I felt that the placement, behavior and treatment of the banner ads was distracting and a bit frustrating. Ad placement feels invasive to the reading experience, they jump and move around as I scroll, and at times cover content.

How might we allow for partner banners, without being invasive or distracting to the reader?

On other sites I’ve explored, I’ve seen controlled marketing ads that align with the company’s branding and message, so they can allow for sponsored advertisement without distracting from their brand or content. Placing their logo next to the partner’s logo can also help create trust and credibility for their advertiser. National Geographic does this well: 

Visual Design

Typography is crucial in a text-heavy product. As a well-known and trusted international presence, BBC has a particular challenge with different language scripts and cultural adaptations. Regardless of scripts and localization, optimal scalability and readability can be achieved using grids, alignment, font face & hierarchy.  

As it is, the website font treatment is inconsistent and not very effective. It feels a bit jumbled, tracking and leading choices are distracting in some cases, and headline text overlaying images is messy and hard to read and detracts from image quality (although it is space efficient).

(The current BBC.com website responds very well to changes in platform… when the browser window is resized, the fonts change and in fact the layout is much more effective as the window becomes smaller. I wonder if the user research they have done suggests a mobile platform is the priority?)

I mentioned before that I had a hard time understanding how to make sense of the content on the homepage. I would have like to see a clearer visual hierarchy and categorization of the content, so I knew what was available to me and how to get to what I was interested in.

BBC uses a color-coded and branding system to differentiate between the different high-level topics. However, on a black nav bar background, several of the darker blues and purples are difficult to see. Similarly, the color tag they use in the editorial space tends to get lost on an image background. I feel this is a missed opportunity to really use color in a way that helps users navigate the different kinds of content. Perhaps a bolder and consistent use of color within each section would help address this issue.

There seems to be different grids for different blocks of information, making it difficult to understand where content belongs. A more uniform, consistent grid would allow for flexibility, clustering of content and/or headlining standouts, choosing between images and/or labels — in general, would allow for presenting a wide variety of content. A good grid system creates a visual order and uniformity that could runs across all the BBC sites, allowing for variety while articulating a single, trusted brand experience.

How can we use visual design to ensure optimal scalability and readability?

Design Opportunities

In my revisioning of the BBC homepage, I have attempted to close the following gaps to allow for variety of content and ease of navigation, while ensuring a single, trusted brand experience:

How can we allow users to easily scan for articles of interest, but also dig deep?

How might we make the content more personalized, digestible and relevant?

How could we revise the language to be more human and intuitive?

How can we offer less, but more meaningful, options, rather than forcing the user to dig around?

How might we allow for partner banners, without being invasive or distracting to the reader?

How can we use visual design to ensure optimal organization, scalability and readability?

Some way we might address these gaps are:

• A palette of modules on a fixed yet flexible grid, with associated behaviors for different content types, allowing for a variety of article styles — breaking news, special editions, large photos and headlines as well as smaller bits of “soft” news, etc.

• A site map, or list of all site content, accessible above the fold would allow the user to understand what content is available to them, and how it is organized on the website. This could be done via a robust search feature, a button in the header, an exposed list in the footer, or all three.

• A “ticker” or other small reel across the top or in a sidebar with highlights, trending stories, weather, breaking news, etc could allow the “skimming” user quick access to important/trending information, above the fold and easily discoverable.

• For the “digging” user, related stories to the one they are currently reading are presented clearly at the end of the article, so the reader can go more in depth on that topic. (BBC currently allows for this with defined “tags” set by journalists).

• Banner ads are branded in BBC-approved style, and ads smoothly moves up and off the screen when I scroll down, with the nav bar staying persistently accessible.

• A clearer, more understandable naming system for content categories.

• Ensure a more relevant experience by allowing the user to personalize and curate their own content.

• Layout must be tailored to different regional markets, yet maintain an appropriate brand identity that users trust. 

• Ensure optimal scalability and readability using a consistent yet flexible grid, alignment, font face & visual hierarchy. 

• Better utilize color to help differentiate between categories of information.

Rough Sketches

Final Mockups

Thank you!