Stuff Mastheads

In 2023, Stuff introduced digital versions of The Post, The Press and Waikato Times newspapers to align with the shifting media consumption trends and harness the benefits of online platforms. The new websites run in a subscription-based model, similar to traditional newspapers, but adapted for the digital age. By incorporating a paywall, the websites deliver a strong value proposition: exclusive, high-quality, local news accessible to subscribers - anytime, anywhere.

For the MVP (Minimum Viable Product), I focused on a design that prioritises simplicity, accessibility and ease of use. The clean interface and intuitive navigation ensure that users, regardless of their technical and non-technical abilities, can effortlessly find, browse, and read articles. This design, complemented by minimal advertising, aims to provide an enjoyable user experience, which is crucial for converting free readers into paying subscribers.

By prioritising ease of use, the MVP establishes a strong foundation for gathering user feedback, which will help shape the product and guide future enhancements tailored to the audience's needs and preferences.

Post MVP Improvements

Updating the Article Page

A year after the initial launch of the masthead sites, we’ve focused on enhancing the article page to boost user experience, engagement, and trust, ultimately aiming to retain and attract more subscribers. Here are the updates I implemented:

  1. Breadcrumbs - Added at the top of the page to show users their current location within the site and provide links to navigate through different sections
  2. Publisher information - Included the article publisher's name at the top (if not by the masthead site), clearly indicating it as a tappable link to encourage users to explore more content from that publisher
  3. Read time indicator - Added to inform users of the estimated time required to read the article, helping them decide whether to read it now or save it for later
  4. Image credit position - Adjusted so that image credits are displayed on the same line as the captions, optimizing vertical space
  5. Author byline - Revised to clearly indicate it as a tappable link, allowing users to easily browse additional content by the author
  6. Bottom tab bar - Introduced to provide convenient actions such as:
    • Back navigation - Easily return to the previous page
    • Listen to the article - Enable users to listen to the article while multitasking
    • View and post comments - Allow users to share their opinions and read comments from others about the article.
    • Save article - Allow users to save the article for later reading
    • Gift article - Offer subscribers the option to gift the article to non-subscribers
    • Share article - Allow users to easily share the article with their peers
    • Adjust text size - Enable users to increase or decrease text size without leaving the site to change their device settings
  1. Related stories - Added a list of related stories to help users discover and read more content connected to the article
  2. Link indicator - Added next to the publisher’s logo at the bottom of the page to show that it links to the publisher’s site, enabling users to explore additional content from that publisher
  3. Add/view comments button - Included a Comments button at the end of the article to remind users that they can comment or read existing comments, encouraging greater engagement
  4. Topic tags - Added tags to help users find and browse content related to the same topics as the article
  5. Author bio - Included an author bio to establish credibility, build trust with readers, and provide an option to explore more content by the author
  6. Bottom tray for comments display - Implemented a bottom tray to easily view and post comments without losing the reader’s place in the article.

In addition to the above improvements, I’ve also made a few updates for larger screen sizes:

  1. Condensed site header - Implemented a more compact version of the site header to elevate the content higher on the page and reduce scrolling
  2. Reduced heading font size - Decreased the font size of the heading to lift the content further and cut down on scroll
  3. Sticky 'action bar' - Added a sticky 'action bar' to the left side of the page, so it remains visible and accessible as users read through the article without being distracting, enhancing user engagement

Styling Opinion and Analysis Articles
Opinion article styled differently from a standard news article

As part of the article page update, I’ve also created a distinct styling for Opinion and Analysis articles to address the issue of readers struggling to differentiate between news and opinion content. Previously, despite having 'OPINION:' written at the beginning of the article body, readers were not quickly able to identify whether they were reading news or opinion. This unique design aims to make it easier for readers to recognise opinion and analysis pieces, allowing them to approach them with the appropriate perspective, distinct from factual news.

For these types of articles, I've highlighted the author’s name and background at the top to emphasise that this is their personal viewpoint. The center alignment of the text also provides a visual cue that these articles differ from traditional news content. I’ve also incorporated a drop cap at the beginning of the article to enhance visual interest and further signal the distinct nature of these pieces compared to standard news articles.

Revisiting the Paywalls

As part of enhancing the user experience on the Masthead sites, we also re-evaluated the sites' paywalls. The existing ones did not provide enough information and required users to go through a complex subscription process before they could continue reading the article. This friction often led to users abandoning the process and not completing their purchase. The current setup, where users are taken to a separate page full of subscription offers and details, can be overwhelming when the user's primary goal is to be able to access and read the article they were on as easily as possible.

To address this, I redesigned the paywall to present subscription options more clearly and simply right from the start, in the article page. This streamlined approach aims to reduce the effort required for users to subscribe, increasing successful subscription acquisitions and allowing users to continue reading with minimal interruption.

Driving subscriptions on complimentary articles

In addition to an improved paywall, I also saw an opportunity to encourage subscriptions before users encounter the paywall. By reviewing other subscription-based sites, I discovered that we could inform users when they are reading a complimentary article and suggest that subscribing would provide unlimited access to all content. This gentle reminder also alerts users when they are about to reach their limit, offering an additional prompt to subscribe.

Contribution:
Research, UX, Wireframing, UI, IxD, Prototyping, Design System