Matthew Warland
St. Joseph Media
Design Direction, 2014 — 2017

Toronto Life Magazine

Toronto Life is the city’s preeminent publication for food, real estate and cultural news. In the lead-up to it’s 50th anniversary, the publisher initiated a redesign of the website to help it connect with its printed magazine as a brand, and establish itself as a modern digital publication.

I teamed with the digital product manager and print art director to plan, strategize and redesign the website. Collaborating with stakeholders in advertising, art, technology, and editorial, my focus was to bring the quality of the magazine to the overall experience online.

While working as creative director at SJM, my team and I also implemented constant improvements to and launched special projects like Neighbourhood Rankings and Best Restaraunts.

Our goal was to design an experience that is easy to read and navigate, “future proofed”, help advertisers better reach Toronto Life’s audience and apply a refined implementation of the typography and colour while keeping in lock step with the print edition.

As opposed to designing the site 'mobile first', we adopted an 'everything at once' approach, keeping the visual style, content hierarchy and editorial priorities front and centre throughout the process.

On article pages we gave a big boost to the type size and leading, incorporated ledes, and distinct visual styles to call out Q&A's, and other typographical furniture for a story.

It was important to accommodate the way users consume content today. We built a responsive, modular system to give the editorial team a full suite of tools to tell stories and structure information on the site.

Once deployed, these modules afforded us a great amount of flexibility in presentation on the site; what would usually be five or six very static templates that editors shovelled content into became a flexible design system that could be deployed for most editorial purposes, from the examples here to the award winning best restaurants article.

I Worked On

  • Product strategy & planning
  • Information architecture & wireframes
  • Visual design, & design system
  • Design direction of the website

The Team

To top ↑