The Sydney Morning Herald & The Age App

Employer: Fairfax Media/Nine Entertainment Co.
Role: Senior Product Designer | Product Lead

In 2018, Fairfax Media's Australia Metro Publishing arm pursued the opportunity to supplement its Metro Web products with a light-weight app offering subscribers efficient access to Top Stories when time was limited, such as during their morning commute. This evolved into what is now a complete news experience on Android and iOS devices through a universal app.

This section details the process of ideation, research, design and delivery of the first and second versions of the app.

Ideation and research for a catch-up news experience
UI Design for Version 1 - Headstart
Ideation and research for an expanded news experience
UI Design for Version 2 - Universal App

A news “head-start”

With the opportunity to get something to market that satisfied a lean "catch up" news experience in mind, we (two designers, a product owner and research lead) developed two distinct concepts to stimulate conversation with subscribers and validate our "news-as-to-dos" ideas. Our hypothesis was that readers wanted to catch up on news at certain times, regardless of their depth of reading.

The two concepts where:

Like Tinder, but for news

The first concept took cues from dating apps, allowing readers to swipe through stories quickly to dismiss, save, or read in the moment.

Inbox, for news

The second concept was inspired by email applications, allowing reader to save, dismiss and preview stories from a scrollable feed.

No plan survives research

After interviewing subscribers, it became clear they hesitated to 'utilise actions such as 'dismiss' stories for fear of missing out on related topics in future. In the swipe-able prototype, subscribers found it particularly hard to decide which story to read, as they needed to see all of the day's top stories to compare their level of interest.

More importantly, we learnt that "catching up on news" differed for different readers, depending on their personal topics of interest. Some considered “Top Stories”, “Local”, and “Business” as critical, others, “Top,” “Local”, and “Sport”.

Therefore, a new concept was informed.

My News

After further ideation, we developed a simpler, list oriented approach. This time, we introduced the "My News" feature, allowing subscribers to pick and choose topics and order them.

Thus, version 1 of the app was born.

Producing the design for delivery

I was responsible for detailing UX, designing the user interface, adhering to brand and GEL guidelines, and producing detailed specification for development. This included the production of many prototypes to help explain animation requirements for app gestures.

Headstart app home screen states

Headstart app my news states

Headstart app articles, meter, paywall and settings

The animation prototypes doubled as marketing assets, as seen in the App Store video below, which showcases the app features and benefits:

Expanding the experience

While the Headstart app satisfied catch-up news needs (and was featured as the App Store's App of The Day soon after release), it didn't satisfy all news needs. There was more opportunity to increase subscriptions. Unmet reader needs included the ability to deep-dive into all topics, access popular print-only insert content, and access the puzzles available in the older iPad version and printed newspaper. The puzzle functionality was also crucial to decommission and migrate the existing premium subscriber base from the older app.

Understanding news-reading sequence habits

Building on Version 1, we considered how we might expand the content and utility of the app. It was clear the news reading experience should device agnostic and have all content and features available on all formats. It was less clear how best to sequence the user flow once all the content, games and supplementary media were included.

We presented prototypes to subscribers in interview sessions to better understand their reading flow habits. What emerged was clear insight that reading habits steered towards:

First, I'll look at what the newsroom deems important.
Then, I'll dive into my topics of interest.
Finally, I'll look at "once a day things" such as crosswords or podcasts.

This led us to the three tab structure of: "Top Stories" and news categories; "My News" and "More", which housed peripheral content available to premium subscribers. Like so...

Then the design was produced for delivery

I was responsible for detailing UX, designing final UI adhering to brand and GEL guidelines, and producing detailed specification for development, which included mock animation requirements for app gestures.