Big FT

by FT Labs,

It is now common to see huge digital billboards on roads and at train stations displaying rolling news from organisations like the BBC, Sky News or Reuters. But since digital billboards are limited to non-interactive content without audio, they actually make ideal platforms for newspapers like the FT.

We set about designing and building a UI designed for viewing FT news in a non-interactive (non-scrollable) environment where the viewer is expected to have a very narrow field of view of the screen (because the screen is expected to be large but very far away).

And here it is…

the big view

Rather than billboards (which are technically known as ‘digital outdoor media’), we chose initially to focus on a design for the screens that populate office lobbies and workspaces all over the city, starting with our own.

FT customers often work in corporate offices with huge video walls, simply tuned to a rolling news channel like CNN or BBC News. This is a terrible user experience, because news channels don’t make much sense unless you can hear the audio. Our hunch was that these customers may jump at the chance to put some high quality content on their screens that suited their environment.

Among many inspirations was seeing the Sky News display at Kings Cross Station every morning.

Incentives started quickly piling up, particularly the very imminent completion of the sale of the FT. Across the company, all media was being scoured for the phrase “A Pearson company” to be replaced by “A Nikkei company”, including the stale and sad displays in the entrance foyers of our main building.

As a matter of course, big.ft.com makes full use of the most excellent in-house repository of all things style and branding, Origami. The code sits in github.com/ftlabs/big-ft and is Node.js, running on Heroku.

Small and close vs big and far away

What we were attempting was not simply making a responsive display. We wanted a non-interactive display which worked when viewed, or glanced at, from a considerable distance, with some similarities with but also fundamental differences from small screens such as smartwatches and smartphones. This meant cutting right back on the quantity of information usually presented on FT pages, with no scrolling, but still retaining a useful view. The basic content was to include some headlines, an image or two, and a horizontally scrolling ticker. The ticker attracts attention, and allows for more article headlines.

For layout, simple is best, and we settled on a single article image with the top 3 article titles (lifted from FT.com‘s homepage) and the remainder of the homepage article titles in the ticker. With the FT banner at the top, a 50-50 split width-wise for the image and the lead titles, and the ticker scrolling beneath, we were set.

Challenges

Articles without images. If there is no image for an article, it can’t be displayed in the top three.

Cropping. This was less avoidable. We settled on cropping to fill the image space on the display, and trust that the FT followed the standard practice of leaving crop gutters on an image (the Economist specifies the outer 15%) in order for the main image content to survive most croppings. Indeed, most of the images which come through have cropped ok. The alternative was to have the black bars top and bottom (of either side) which is never a good look.

A juddery ticker. This came and went as a noticeable problem. When we tried the low-power devices to drive the display screens (such as an Intel Compute Stick, or even a Raspberry Pi) it was not great, but the Dell Optiplex Micro, and recent Mac mini models were mostly ok.

Scaling the text size. We wanted to make each view as good as it could be, and this entailed altering the font size to fill out the area allocated to article titles. A bit of javascript dynamically calculated (by brute force) the largest font size that would keep the lead article titles on no more than two lines each, fully within the bounding box.

Orientation. We had initially assumed office display screens were always landscape. On-site research in the premises of some amenable B2B clients indicated a big range of office screen sizes, orientations, and placements. Somewhat to our surprise, several office screens were mounted in portrait mode, perhaps in a corridor, and would be viewed quite close up.

Portrait View

Screen types. We wanted to ensure we could cater for real installations of screens, so we needed to establish what screen types and browsers were in use. We created an endpoint which logged UserAgent and sundry details on the server, and requested our clients first point their screens to that endpoint.

Timezones. A common feature of office displays, we could finesse a list of timezones to highlight the locations of FT offices around the world. Additionally, a simple dot picks out the timezone of where the screen is situated. In running the display just in our London office, it became apparent, belatedly, that establishing the correct screen location and local time was not to be taken for granted. All of our screens disagreed on local time, for starters. In the course of trying to debug why a PC in Tokyo insisted it was in the timezone of Seoul, we added the ability to specify a timezone in the URL. Again, we found the setup on the local PC was at odds with reality, and was only made apparent via our display.

Visible artefacts whilst updating. The content is derived from the current top 10 articles displayed on the FT.com homepage. The transition when content actually changes (or the page is first displayed) was not seamless, with a noticeable blanking of the screen. And was born the interstitial, a curtain to hide the fetch and render of the new content. It also gave another opportunity to grab people’s attention with the swish, and remind viewers that this is FT content.

URL. Not at all a challenge. big.ft.com was immediately and obviously the right answer.

Clients

The very first client, and the reason for the rush, was our own Comms team wanting a good, non-Pearson-branded display in the main office entrance foyers in time for the big handover.

the new improved reception screen

We worked with some amenable B2B clients who were willing to give us some time and feedback on having the FT display on the premises.

We were most pleased when our new owners, Nikkei, asked to put big.ft.com up on their very large, very curved main entrance screen in Tokyo. No pressure there. A brief hiccup with their display PC insisting the timezone was Seoul, and all was well.

the even bigger, curved view