Canadian Geographic

Logan main summit snow covered mountain peak with vast open blue sky

Digital transformation of a 92-year old magazine


The second most-read Canadian magazine, Canadian Geographic’s online experience paled in comparison to the print edition. Embarking on a transformative digitalization roadmap to increase engagement, subscriptions, donations, and advertising, Canadian Geographic’s first step was a new, flagship website.

Rethinking the digital publication from the ground up, Strut leveraged digital opportunities to surface content and bring it to life in ways not possible in the printed issues. This includes a collection of powerful tools facilitating search and organic browsing, serving relevant stories to a reader curated from 10 years of articles, and creating an online experience that feels familiar to readers of the physical magazine.


  • Website Design & Development
  • Information Architecture
  • Digitalization Strategy
  • UX / UI Design
  • Animation


Designing for the future with the past in mind

With an over 92-year legacy, we felt a responsibility to honour the print version of the magazine within the website design. The home page reflects the magazine’s covers, with a full-screen feature photo and large, centred logo to emulate the Canadian Geographic masthead, which shrinks into the nav bar as a reader scrolls into the home page content. Design elements like black text against white, drop caps, and a serif font for body copy express the editorial nature of the magazine.


One trailhead, many paths forward

We designed multiple content blocks to customize the presentation of articles on the home page in order to improve user experience, and increase reader interest and engagement. This is achieved by organizing a mix of article types by categories and topic tags to provide a multitude of entry points for the reader.


Bringing out the online explorer in everyone

One of our primary goals is to increase a reader’s time on the site, so we developed multiple ways to promote exploration. Most visitors enter the site through organic search, so the basic tactic is to serve up a selection of directly related content and suggested articles of interest-based on the categorization of the reader’s initial article.

Layering additional tools for exploration, the main navigation encourages browsing by featuring topics of interest at the top of each page, category tags are placed at the end of each article, and readers can search by past issues of the magazine which populates online articles found in that specific print edition.

The star of this site, however, is the powerful search functionality which presents results as an automatically curated “landing page” for the search term instead of the typical results list approach. This page displays the most relevant stories first, then organizes results by content category tags such as Wildlife, Kids, Mapping, Travel, People & Culture, Places, Photography, Articles, Podcasts, and more — all presented in a visually rich manner


Mapping a storyline

One of four article page templates created to support Canadian Geographic’s brand approach to storytelling, map articles like this one on Toronto’s Broadview Hotel intertwine a text article with mapping and images. Scrolling through the story centres and highlights locations on a map, and likewise, clicking on a location jumps to the relevant content within the article. 


When the pictures are the story 

Big, beautiful photographs are an integral part of Canadian Geographic’s storytelling and brand. The magazine has an impressive roster of amazing professional photographers, along with 70,000+ amateur Photo Club members capturing breathtaking glimpses into everything Canada. Photo story pages minimize the width of the text column to maximize photos on the right, while clicking on an image opens a carousel view with full-size photos and accompanying captions.


Making Canadian Geographic accessible for everyone

As part of our core belief in an internet for everyone, the Canadian Geographic website, like all our builds, meets at minimum the WCAG-2 AA standards. Typography was carefully considered due to the amount of long-form content. High-contrast text, optimized font sizes, and clear information hierarchy address both accessibility and scannability — since designing legible text for users with disabilities is also more user-friendly for the majority of readers who skim online text content. Additional accessibility features include easy keyboard navigation, and alt text and captions for images.


Sweating the small stuff

This flagship website contains a lot of little details to improve the users overall online experience in subtle ways, including:

  • Subtle brand impressions such as quick compass rose animations when the hamburger menu or search tray opens.
  • As a reader scrolls through an article, its title pulls into the sticky nav for reference which is especially handy for longer articles.
  • The back-to-top button fills to indicate the reader’s progress within an article.
  • Always-present sharing tools for articles, and the ability to share pull-quotes directly to social channels.
  • Canadian Geographic admins control on which pages and where on a page advertising appears.


View other case studies

Glenbow Museum

Curating the art of user experience

View Project
The Endometriosis Network Canada

Spreading awareness about endometriosis across Canada

View Project
Back to Showcase
No Results