Matthew Warland
University of Toronto
Website Design

University of Toronto Alumni Magazine

University of Toronto Magazine publishes ideas from U of T faculty, students, and alumni that tell the stories of Canada’s largest university. I led the product strategy and website design of its first major redesign in ten years.

The result is a responsive, modular design system, powered by WordPress, that puts the ability to create custom index and article pages in the hands of the magazine’s small team.

Homepage overview

University of Toronto Homepage University of Toronto Homepage University of Toronto Homepage

Mobile Homepage

After a series of workshops reconciling the needs of the publication and audience we produced product requirements, a revised information architecture, and publishing strategy to guide how the site would be designed and why.

University of Toronto IA

Information Architecture

The editorial team’s small size meant they would need a flexible system of content type modules they could mix-and-match to curate articles, index and topic pages, or automate them based on taxonomy giving the user a highly curated experience.

University of Toronto Modules

Module Wireframes

Once the content types were settled, we established the visual style in tandem with the redesign of the printed magazine. We used Beaufort for headlines and decks with GT America for functionality and wayfinding, and Tiempos Text as a body typeface for articles.

University of Toronto Type University of Toronto Color University of Toronto Icons

Typefaces, Colors and Mobile Icon / Favicon

University of Toronto Modules

Fullscreen Top

University of Toronto Modules

Splitscreen Top

University of Toronto Article

Story Page

University of Toronto Article

Story Page

University of Toronto Article

Story Page

University of Toronto Article University of Toronto Article University of Toronto Article

Story Page on Mobile

University of Toronto Search

Search/Subnav

University of Toronto Utility

Utility Page

I Worked On

  • Proposal, timeline, scope & budget
  • Project plan and strategy
  • IA, wireframes, visual design, & design system
  • Design direction of the website and build

The Team