Design process for a new article page

In the Digital Product team at Torstar we use design and user insights to elevate and optimize the experience of reading news online in new and innovative ways. We use Design Thinking, a framework that helps accelerate creative processes and solve business problems to help us come up with innovative solutions for new products and to improve our existing ones. We recognize that great products are created only when we truly understand our customers.

Before: article page before it was re-designed

In September 2018, a core team from three different departments came together to do a deep dive on the article-page experience. We set a vision, explored what success would look like and examined how our competitors addressed similar problems. Our research led us to interviewing experts from inside and outside the company (including a data scientist from MIT who has dedicated his research to understanding the online article page).

We sketched, debated, prototyped and interviewed customers to see if we could improve the experience of reading our online content while supporting our business goals of delivering great journalism, driving digital subscriptions and generating online advertising revenue.

the not-so white board

In the Design Sprint we worked together to create a clearly defined long term goal. The stickies and notes in the image above shows the thinking that went into the creation of that goal, on the left.

Paper prototypes taped to the wall, gallery style

After some intense brainstorming, the team combined their ideas into paper prototypes. Here we see some of the Sprint Team’s work taped to the wall. We used dots to vote in order to see what ideas were resonating.

interaction ideas

An important part of a Design Sprint is validating the ideas with real customers. We invited Star readers to come in and tell us what they thought of the new ideas and designs. This led to some further iterations and us realizing that after getting the design details right, the interaction design details were equally important so we layered that work on too.

After: article page redesigned

Overall we utilized Star-specific brand elements including the Torstar font, and existing design patterns to establish visual tone unique to Torstar properties. We took visual cues from the print product to better align brand equity across all mediums. A stronger visual presence was created by improving readability and how we display media. We also improved the UI component scale to look more contemporary and refined but remain clean.

Additionally we have a new mobile first nav, AODA support including larger fonts, better contrast, optimal line lengths for reading on all devices on all orientations, in-brief overview for “scanners”, hidden captions to reduce scroll depth, support for Trust Labels.

With this redesign we have been able to enhance the overall reading experience. By redesigning our article pages we hope to entice users to stay on the site for much longer than had been before. The longer our readers stay with us, the more opportunity we have to learn about the kinds of content they want to see, and then give them more of that content.

Improved Business KPIs

Bounce Rate:
Time Spent:
Ad viewability: