Briefing

News Application

February 2015 Product Design Install it now @ www.briefing.rocks

Origins

Briefing started with a simple problem. An itch in need of a scratch.

My friend, Tom (a fellow designer) told me that he often felt out of touch with news and current affairs—a sentiment I shared.

How could this be the case in 2015? There’s never been greater access to the news and yet we felt more out of the loop than ever.

We realised that the problem was the sheer amount of news. So we set to work distilling it.

– News apps overflowing with features –

Focus

We benchmarked existing news apps and found that most offered vast feature sets and endless stories in an attempt to do more than the competition.

We focused on doing less.

We envisioned a single screen app, showing the top news headline for each category and nothing more. One glance and we’d be up to speed.

– Even our icon underdid the competition –

Scope creep

But what defines a “top” news story? The most recent story isn’t necessarily the most important. Relevance and importance are tied to engagement and consensus. If many people are reading about the same story via multiple sources, then that would serve as a good indication.

So we gathered a list of news sources from around the world, batted around the idea of a liberal-conservative slider, before stopping and reigning the idea in. From nowhere we were talking about a news aggregator based around a complex algorithm! We didn’t even know if the app was a good idea yet.

– We managed progress, bugs, ideas & a roadmap using a single Trello board –

Keeping it lean

So we took a lean approach and decided to build a prototype based on a single news source: the BBC. The crux of the idea was the single glance concept and we needed to validate this as quickly as possible.

We eschewed the difficulties of native iOS development and the limitations of prototyping tools and decided to build a webapp that users could install by adding to their homescreen. We wouldn’t be shackled by the restrictions and red tape of the app store, nor held back by the limitations of a prototyping tool. We could build rapidly, test and iterate.

Our prototype would live and breathe and the learnings we’d get to from putting it into the hands of real users would be all the more compelling for it.

– Early prototypes –

Framework

We were keen to see how far we could push a webapp. Homescreen apps like forecast.io had made waves back in 2013, and we were excited to see what webapps on iOS7 and 8 could do.

I built a working prototype in Framework7 in an evening. I took the BBC’s top 50 news stories RSS feed and passed this to Yahoo Pipes, which output a JSON file to be loaded into our prototype with javascript.

The URL of each story was then used to distinguish which category it belonged to, and the headline of the highest ranking story in that category would be shown. This way we could be sure that the headlines appearing in the app were absolutely the most important.

We had a prototype. It was small, it didn’t do anything more than it had to and it didn’t demand too much of your time. We named it Briefing.

Feedback

We started using Briefing immediately. We shared it with our friends, family and colleagues too. As we used it more and more the headline started to feel a little too brief. Our users confirmed this. Some asked us to link through to the full story too, but there was a happy medium sat in the JSON—a single line summary which we displayed when you selected one of the headlines.

– User testing told us that the app could be more than headlines and still stay true to it's purpose –

Other feedback saw us differentiate each category by colour. We’d previously had an iteration with icons for each category that had felt like visual noise, but colour felt right.

We also moved from the utilitarian Helvetica Neue to the more characterful Texta.

– Briefing's colour palette, harmonised by overlaying the base colour (Tomato) over each variant –

The delicious soft shade of red – HTML colour “Tomato” – had remained throughout though, and became the app’s defining visual signature.

Onboarding

We’d talked our testers through the process of installing the app, but with real users there would be no such luxury.

So we created an onboarding screen that would direct mobile safari users to the “Add to homescreen” button at the bottom of the screen using an animated arrow.

Desktop and tablet users would be instructed to view the page on a mobile to install the app.

– The onboarding screen for mobile safari on the left, tailored to the in-app webview on the right –

The extra mile

We also provided specific onboarding for another unique scenario—the in app webview (see above).

Opening the link in an app like Twitter or Facebook – two of our primary marketing channels – would display the onboarding page in an in-app webview, a view that doesn’t contain the add to homescreen button. So we utilised the user agent string to target this specific scenario and instructed users to display that page in mobile Safari instead.

It was a small change, but one that would have a huge impact on the initial user experience of Briefing.

– Briefing as of September 2015 –

You can install Briefing today @ briefing.rocks