Article Redesign
Task
At The Dallas Morning News, we redesigned the template used for article pages. We strove to create a more immersive reading experience for our readers. By giving the reader a better article experience, the redesign gave readers easier access to the content they cared about, improved readability, and improved trust between the reader and the newsroom.
Overview
The old template for articles was outdated and last designed over 6 years ago. The same template was used across all types of content like breaking news, stories about art, and opinion columns. This caused confusion in the importance of certain topics over others and also caused a sense of redundancy for our readers.
The layout was very cluttered and difficult to read due to a number of interruptions. Our users were not staying to read our content. The readers were getting distracted by ads, recirculation content, and a general lack of good page flow. Our users were not getting a specialized experience for exclusive content and felt like they could get the same experience elsewhere.
We wanted to improve page views, time on page, page performance and increase engagement and conversion opportunities.
Strategy and Alignment
A series of feedback sessions were conducted internally with the newsroom, sales, subscription team, and audience teams. We also conducted a reader survey where members could give us open-ended feedback. We gathered all the feedback and brainstormed the features we wanted to keep, improve on, and remove from the article template.
Trust & Engagement
Build a better relationship between our readers and the newsroom.
Navigability
Make it easier and faster to find interested topics and content.
User Experience
Make the experience of our content better and feel unique.
Optimization
Make things less cluttered, more responsive, and faster.
From there, we defined the journey we wanted users to take when they landed on the article page. There are three different types of user groups that would have different journeys depending on their subscription status. The decision to show non-subscribers the article for free, show them a registration form, or a paywall was also defined in the user flow.
Product Design
I designed a new template with all the pain points of our internal and external users in mind. The audience is primarily on mobile and we wanted to shift our designs to be mobile-first. We focused our design changes on the desktop and tablet experience since both featured a side bar. By removing the sidebar from both layouts and shifting to a single column layout, we were able to achieve the same reading experience from mobile to tablet to desktop.
The navigation was also redesigned to incorporate different elements depending on what subscription status the user had and where in the article reading journey the user was on. For registered or anonymous users, the navigation featured a subscribe button to remind the reader of the subscription offers. For those who were already members, the subscribe button got replaced with an ePaper button, which led them to a subscriber benefit of the e-edition of the newspaper. Once the user started scrolling on the page, an article navigation comes into view to remind the user about several engagement features like gifting articles and commenting.
Another main element of the redesign was re-configuring the ad map. Before, the ads did not have a visual separation from the content and would appear quite often. This was a very disruptive reading experience for the users. A subtle design change of adding a light gray background and separating it completely from the article body helped bring more visual hierarchy and proved to be less of a distracting experience. By visually separating the ads and also removing the sidebar, it provided our advertising partners the space and ability to use more premium ad types.
The Result
-9.91%
Reduction in ads without any loss of ad revenue
+4.73%
Increase in average reading time per page
+4.09%
Increase in average engagement time per page
