Case Study: Canadian Auto Dealer Website

Client Background

About the client

Canadian Auto Dealer is the national trade publication for Canada’s new car retail sector. It reaches dealer principals, general managers, and the suppliers who sell into them, combining a print and digital magazine with ongoing online news coverage. The publication is produced by Universus Media Group, which also publishes the French-language edition, Affaires Automobiles, for the Quebec market.

In publication since 2005, originally in both print and online formats
A French sister publication, Affaires Automobiles
25+ industry columnists and contributors
Published by Universus Media Group Inc.

Visit Website

Where We Started

The challenge

The previous iteration of the Canadian Auto Dealer website was reaching the end of its life, with an unviable upgrade path, and a very manual approach to managing on-site advertisements. Along the way, we also needed to address some significant page load performance issues.

With the site being a living and breathing content machine, new articles were being published daily. That made for a more challenging task of migrating over a decade’s worth of old articles. On top of that, everything needed to be built to work in both English and French.

Advertising placements that were difficult to manage and inconsistent across page types
A large catalogue of archived articles that needed to be reorganized, yet also maintain their SEO value
Code performance issues that made for slow load times on most pages
The site needed to be built for both the English and French versions of the magazine
The site search tool was providing irrelevant results

How We Collaborated

Design process

1. Original website

The previous website was fairly simplistic with limited mobile usability. Advertisements were static and very clustered within the layout.

2. Design brief

Leaf Design worked with Universus to plan out all aspects of the website. Special attention was paid to how and where advertisements could be integrated.

3. Wireframe

Creating a custom designed grid structure for the wireframe was critical to ensure that advertisements fit the content in a natural manner.

4. Final design

As a result of meticulous planning, we were able to develop a high-fidelity design that stayed true to the wireframe.

The Results

Our solution

Mobile-first design

As part of the visual redesign of the site, we took a look at the existing Google Analytics data. What it showed was that user engagement was significantly lower for mobile users. And at the same time, the data indicated that the number of mobile visitors was steadily increasing. So it was imperative that the site be designed with the mobile user in mind. After all, traffic sells ads, and mobile traffic was becoming the largest source of visitors.

Advertising management

Given that the magazine’s revenue comes directly from selling advertisements, the existing manual approach to ad placement was not feasible long-term. We began by integrating the AdSanity tool as the back-end ad manager. However, the built-in functionality was not flexible enough for the client’s needs.

Advertising “zones” were set up on each page template, and the available ad types were configured to fit the zone’s physical screen dimensions. Through the use of custom fields, we enhanced the back-end to allow for custom fields for each advertisement. This allowed us to connect desktop and mobile versions of the same ad, so that they could both be served at the same “rate”, depending on the visitor’s type of device.

As well, custom functions were built to randomize the selection of ads for a given zone. This randomness, combined with the length of many of the pages, required a de-duplication feature to be built to prevent the same ad from being displayed multiple times on a page.

Enhanced on-site search

Out of the box, the default WordPress search tool is very simplistic. If it finds any of the keywords entered, it displays a link to the article. However, for multi-word searches, this means bringing up hundreds of articles. And the worst part is that they are organized only by date, not relevance.

To combat these irrelevant results, we implemented an enhanced search plugin that allowed for a more “Google-like” search experience. Compound word searches allowed for Boolean operators, keywords were highlighted in result listings, and most importantly the results were ordered by how relevant the article is. So an article that had a keyword in its title and several within the body of the article was listed much higher than an article that had only one occurrence in a footnote at the bottom.

Multilingual support

Because the two websites (Canadian Auto Dealer and its French sister-site Affaires Automobiles) operated on different domains, a single WordPress website wasn’t possible. Combining the two languages into a single magazine website would have meant losing the SEO efforts that had been built up with whichever domain was folded in. So our traditional approach of using WPML was not appropriate for this project. Instead, we built a shared theme that could be applied to both sites and could handle either language.

Performance improvements

Post-launch, significant efforts were undertaken to optimize the load times of the website. This included a combination of manually optimizing the codebase using the WP Optimize plugin, modifying the headers, minifying the CSS and JavaScript code, and finally reviewing all PHP code to run in an optimum manner. The result was an A+ score on the GTmetrix performance tool.