Relay Calling: Creating the Next Generation Digital News Experience

Beacon is a new mobile first breaking and developing news experience from the Office of Digital and Design Innovation

Relay is a new ‘mobile first’ breaking and developing news experience from the Office of Digital and Design Innovation

The Inspiration Behind Relay

Although the tools used in reporting breaking news and developing stories have become staggeringly advanced (see LiveStream, UStream, Vyclone, SoundCloud, YouTube Live and Videolicious to name a few), the way in which digital media outlets display breaking news has not had a formal update in quite a while. If you’re looking at a desktop site when a big story breaks, the normal homepage layout is altered by including an extra large photo and a large headline font (read: this is important!). You click in and read a few lines about the story that is developing and see a notation and that you should “check back for updates.” At this moment, most users rush to their TV or dash to Twitter/Facebook to see if they can get more information on the breaking story, never to return to the initial Web or mobile site that they initially sought out. The media outlet that first informed a user about the story missed an opportunity to fully connect and engage with the user.

As the global audio/video lead at the Office of Digital and Design Innovation at the BBG, I challenged myself to create a breaking news product that would rethink how we displayed content around developing and breaking stories. The most basic purpose for this product (which we affectionately have named ‘Relay’) was that it would serve as an invitation of sorts to the user to engage with our coverage for the full development of a story and that its design would be focused on one event, free of distracting ‘related stories’ and trending content modules.

Learnings From the Boston Marathon Bombings And the Recent Navy Yard Shootings

During the Boston Marathon bombing incident in April, 2013, I scanned some of the larger news outlets to see how the story was being covered. Most outlets ran the ‘big story’ format described above: big font, big photo, “check back later” messaging. But did something different: they placed a live blog widget on their homepage as the central component. The use of the live blog widget did not provide the most visually interesting experience, but it signified to me that was reporting on this story NOW. The message wasn’t “check back later.” Instead, it screamed to me, “DON’T GO AWAY!” (Note: The Washington Post also placed a live blog widget on their home page in the recent DC Navy Yard shootings.)

Washington post site

The Washington Post site included a live blog widget on their site during the recent Navy Yard shootings.

Taking a page from The Washington Post and’s playbook, I thought about how we could create a breaking news experience that built on the immediacy of the live blog, but I also wanted it to have new design elements and functionality that are specific to mobile devices and alert systems to keep the user engaged with a story. We also wanted to provide tools that allow our journalists to react and report quickly on a story (also from mobile devices), but also ensure that the digital experience could expand and allow us to continue to add to the story as it develops over time. Finally, the design should immerse the user into the story; the experience should be focused on the most recent developments and be free from other distracting content.

The Four Pillars of Relay

In thinking about what Relay could and should be, I focused in on four ‘must have’ features that would make the product most useful to both our reporters and users during a breaking news or developing story situation:

1. Mobile First Design and User Flow

BBG mobile audiences are growing. Additionally, developing news events happen in off hours when users are not in front of their desktops but are instead reaching for their mobile phones or tablets for updates. So, ensuring that the Relay experience be optimized for mobile phones and tablets is critical. In ordering our development, we prioritized for tablets first, phones second and desktop last, and, in this case, the desktop and tablet experiences will be the same. Content needs to be responsive to screen size and interfaces need to be clean and focused, with minimal scrolling and navigation. We came up with the idea of using ‘timeline’ navigation on the bottom of the user interface that would eliminate wordy text links, but it would also allow users to go back and catch up with coverage that they may have missed.

Beacon timeline navigation

The Relay timeline navigation allows users to easily go back and catch up with coverage that a viewer may have missed.

Just as important as the responsiveness of the experience and the clean navigation is the need for focused design and smooth user flow throughout Relay. We tried to learn from some of the most popular mobile apps and mimic what works, namely having one piece of featured content per content ‘card’ (very much like the ‘one photo at a time’ experience of your favorite photo viewing program on your mobile device) and to give the user the ability to to swipe to the next piece of content (mimicking iTunes cover flow and the Newsy video app). If we succeed here, Relay should feel familiar and the user should be able to focus in on each individual new piece of developing content without a lot of extra distractions.

2. Speed Over Polish/Input Agnostic

There are countless fantastic news gathering, editing and publishing tools that work on mobile devices (Live Stream, UStream, YouTube Live and our Radio Free Europe’s PangeaGo to name a few of the video apps alone) that allow our journalists to react quickly and report without the legacy need of a film crew and satellite truck. After the fact checking and sourcing process is complete, a reporter on the ground should be able to react to a story and engage with our users. In creating Relay, we wanted to empower our journalists and be sure that it would be wired to accept reports from the latest and greatest tools that are available. That means we need to think ahead and strategically prioritize how we develop to make Relay compatible with the tools that are established now. Since we have reporters on the ground all over the world, we need to consider all the possible inputs as well as the fact that app availability and bandwidth may vary greatly. Making sure we build Relay to accept the full gamut of reporting, from simple text tweets up through rich live video streaming, is key to Relay’s success.


LiveStream is just one example of a technology that can help our journalists react and report on stories quickly.

3. Connect Users To the Story Through Alerts

After our fact checking and source verification, our reporters should be able to shoot and publish in real time using tools like LiveStream, UStream and PangeaGo. But the exciting part of live coverage really happens when users are brought back into the story as the reporting is happening. We are exploring several SMS and email alert solutions that will notify the user when new reports are starting and bring the user back to the experience. The user should also be able to configure how often they’d want the receive these alerts. We believe that if users are alerted to coverage as it is happening, there is an increased possibility that they can help direct our coverage in near real time. Which brings us to our last area of focus for Relay…

4. Engagement

Reporting the news in real time is an exciting proposition, but we’ve learned that simply reporting the news is not enough. Engaging with our audience and ultimately having them participate in news gathering and helping to direct our reporting is baked into the early planning of Relay. Clear placement of Twitter hash tags can help direct users to join the conversation with us and comment functionality allow users to discuss specific pieces of audio, video and photos. Content cards that feature polls can help us survey popular opinion from our users. Poll results will be relayed back to our reporters in the field and hopefully direct commentary and reporting. Relay also features editor message cards that can direct users to other interactive features during times of content editing and fact gathering.

Relay polls and Twitter are  features that will help us engage with our users.

Polls and Twitter conversations are features that will help us engage with our users.

Next Steps

We’ve done a great deal of work around planning out the feature set, design and experience of Relay, but we are also spending time testing the product as we build. Our initial round of testing was extremely helpful in helping us clean up the UI and it gave us insight into how real users would interact with the timeline navigation, content cards and more. Next up, we want to do field testing with our reporters and have them test Relay from the other side: the content creation side. There are still a lot of questions around how this product will be used: at what point do you start a Relay experience over authoring a basic news story? How will Relay experiences be archived over time? How can we make the Relay experience more portable so it can be viewed on social platforms? How will users submit content and have more interaction with our journalists and producers? Even with these questions (and others) outstanding, we feel that there is great promise in the product, both for our journalists covering the most important of stories and for the users who will hopefully become more and more engaged with our reporting.

What features do you think should be in Relay? Be sure to comment–we’re listening!

The following two tabs change content below.
Randy Abramson

Randy Abramson

Randy Abramson is the Director of Product Management and Operations for the Office of Digital & Design Innovation. Follow him on Twitter: @randyabramson.


  1. Son Tran Son says:

    I can’t wait to see Beacon go live! The recent tragic events at the DC Navy Yard demonstrated how current news outlets, while capable at delivering the latest updates, were missing the mark in having their audiences be part of the “news experience.” I think Beacon’s immersive goal will help achieve that.

    In the case of the Navy Yard shooting, having a map feature with live updates and informative pin drops would have been very useful. Being DC, live traffic info would have benefited many people in the area to avoid congested areas. And having tweets in the mix could enhance the up to the minute nature even further!

  2. Randy Abramson Randy Abramson says:

    Great suggestions, Son. I really appreciate your support for the projects and recommendations. The mapping feature sounds like a winner. We could work with the Google Maps API or Mapbox to create some great representations of events on the fly. Thanks again for commenting here!

  3. AAA says:

    This is pretty awesome! I agree with Son that I cannot wait to see this go live and start testing it.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *