Type

Strategy, Front-End Development, Interface Design

Launched

April 2012

Metro is the largest national daily newspaper in Canada, targeting youthful, active, metropolitans across traditional, web and mobile platforms. In late 2011, Metro approached Jet Cooper to redefine the experience for its flagship web property, metronews.ca.

Through the years, Metro News had seen a number of incremental feature, content and interface additions, but it was time to re-approach the experience from the ground up to respond to the growing demands of a maturing market of online readers. Metro News, more than ever, was also being accessed through a broad range of devices – mobile, tablet, desktop and everything in between – calling for the new site to be fully responsive as well.

With the redesign of the site, Metro aimed to increase mobile web traffic to the site by 50% and overall traffic by 25%. Additionally, Metro News sought to strengthen its brand as “news worth sharing” and increase its social pass-along rate by 20%. We buckled down and accepted the challenge with confidence.

Content Planning

Early content planning docs our team used to prioritize content across Metro News.

Our earliest exercise was to do a comprehensive audit of Metro News’ content inventory. Our main objective was to prioritize the content across all sections into one to three groups based on relative importance. This is an especially crucial activity for any responsive project as it helps us start to contrast what a focused experience may look like (i.e. on a tiny mobile screen) compared to a full-featured one (i.e. on a large desktop display).

Wireframing & Grid Planning

Initial wireframes for the Home (two different versions) and Article pages reflecting content priorities defined earlier.

With our Content Plan handy, we started building wireframes to support the content hierarchies we defined. Put simply, primary content needed the greatest emphasis on any given page, while secondary and tertiary content would be placed in less-emphasized areas like the sidebar.

Building a design system in this manner also enabled us to do early grid planning for our responsive system. Together, our designers and developers started drafting some general rules that would define how the interface would react to a scaling screen size.

Art Direction

With an initial set of wireframes hashed out, we began setting the art direction for the new Metro News. Working with a well-established brand like Metro meant that we placed our focus on extending and modernizing the visual system that had become a familiar icon for its existing readers.

To help us explore the art direction, we created something we call an Art Board to demonstrate how a series of visual decisions could work together.

An Art Board exploring various arrangements and treatments of copy, photos, buttons, icons and other support elements.

Typography played a crucial role in our early exploration. Readers came to Metro News to read news, after all, not to ogle at layouts and interfaces. We eventually found comfort in a type system that was bold enough to hold its weight with heavy-hitting headlines, yet friendly and comfortable enough to stay backseat to the content.

Early Prototypes

Early HTML/CSS prototypes built to test and further inform our responsive system.

Meanwhile, we kicked off development and used our initial wireframes to inform some early live prototypes built with HTML and CSS. Specifically, we were interested in seeing our grid system in action in a responsive environment. By testing on devices and scaling our browsers back and forth, we watched and noted when layouts broke, when content became cluttered and when exceptions needed to be added to our set of responsive rules. The insights gained from these prototypes went directly back into informing our design decisions.

The Design

Taking cues from our Art Boards, our final designs featured a friendlier, sleeker, and more importantly, more readable experience for the new Metro News site. A strategic use of negative spacing, visual hierarchies and systematic grids helped make even the heaviest of content pages feel light and comfortable to consume.

Our design system also supported a scalable set of content arrangements to enable Metro News to deliver new content swiftly and with a wide variety of standardized layouts, treatments and components.

Responsive Design: Doing It Live

We chose to produce static comps in Photoshop for only the major sections and only for a base screen resolution (desktop). The rest, including most responsive layouts, were crafted directly in code by pairing our designers and developers closely together to test and iterate in browsers and on a selection of mobile and tablet devices. This helped us stay lean and nimble, while ensuring we were making decisions in a live environment rather than a static one.

Launch

In early April 2012, the new metronews.ca was launched and unveiled to the public. In a few short months, Metro News found itself refreshed, refined and ready to deliver a new online experience to its readers.

And as only the second major publication in North America at the time to have a fully responsive site, Metro News was now truly armed to deliver rich local and timely news, whether their readers found themselves at their desk with their computer, in the kitchen with their tablet, or on the go on their mobile device.

The Outcome

Together, Jet Cooper and Metro captured the spirit of a leading newspaper brand and redefined what it meant to have a digital presence.

In the 6 months that followed, Metro News saw the following results:

  • Unique visitors to the website increased by 46%
  • Unique visitors to the mobile website increased by 100%
  • Facebook shares increased by 10%, Twitter by 90% and StumbleUpon by over 1700%

Visit Metro News