All Work

TLA - Quarterly Offerings

Problem

The Triangle Learning Academy (TLA) was an internal learning platform for employees at Canadian Tire, Mark's, FGL (SportChek), Party City, and PartSource. It provided free access to various resources and materials, empowering employees to develop personal and professional skills. In 2020, TLA introduced quarterly themes to organize content, such as Adaptability in Q1 and Diversity, Inclusion, and Belonging (DIB) in Q4. To support these themes, we created "Quarterly Offerings" pages that compiled all recommended courses, resources, and workshops related to each quarter's focus.

First quarterly offerings page. It's a page with many cards in 5 sections.
Final quarterly offerings page. Notice the toggable descriptions.

Atomic Design

To serve that much content in a digestible way, I first sketched out some possibilities and prototyped them with the team. After several rounds of feedback and refinement, while deepening my understanding of the issue, I decided to use cards as the basis for the page.

Added a sticky navigation that would let users jump to their relevant area. This nav was below the introduction section.

Each card has certain characteristics that describe what the user is clicking on, in a short amount of space.

  1. An icon to represent the type of modality the resource is in, followed by the text for that modality. The icons are from the Unicons set.

  2. The title of the resource.

  3. A short description of the resource. There was a bit of a UI challenge to fit enough space in for the description to be accurate.

  4. The action that the user will be doing to consume the resource.


Sections & Navigation

A card would belong to a section of the page.

Each section would have a title and background image. The text was removed later for the sake of simplicity. The cards that belong to the section overlap onto the background image to denote that this set of cards belongs to the section's header. The layout around the sections served to guide the user to content on the page.

The sticky sidebar uses the intersection observer Javascript feature to highlight the section of the page that's currently in the viewport.

Added a sticky navigation that would let users jump to their relevant area. This nav was below the introduction section.

Implementation

In the Q1 and Q2 version of these pages, the page was created using WordPress and the Advanced Custom Fields plugin. I would generate the HTML using this setup and then manually paste it into our platform.

Managing all the information became a huge time drain for the team, as we had to maintain a large spreadsheet and track tasks in Trello. One of our managers found a Trello plugin that enabled custom fields, and we also discovered that the information could be exported, which helped streamline the process.

To save the team time and consolidate all of our information in one place, I set out to find a way to utilize the exports Trello provided. I learned about handlebars.js a templating engine that uses JSON. After a lot of experimentation, I found that by exporting a Trello board as a .csv and converting that file to JSON, I could use the JSON data to populate the page.

Results

After implementing all of these process improvements, I saved several hours in Q3 and Q4 for myself and others on the team. This page was a major driver for content consumption within the organization.