Wilfrid Laurier University: Custom CMS

Content Management System for Special Reports :

Helping create an editorial blueprint for departmental continuity in post secondary institution.

UX Researchers and UI Designers with the Web Content, IT: Development, and Communications: Graphic Design teams all worked together to implement the Most Viable Product for the Content Managment System while continuously updating their online Style Guide.

The Ask

It is difficult to create brand continuity across departments in a large institution such as a university. 

Wilfred Laurier University wanted to create a Report Template to be used across departments for special, interactive, and engaging content. Creating seamless design ensures that content meets brands standards as well as Web Content Accessibility Guidelines ( WCAG).

As Earth Day approached, our first test editorial template was focused on Water in Urban, Rural, and Indigenous communities.


As a consultant, a large part of my role was to work with stakeholders to develop the MVP.

Content Creation: UX

Each department has access to the content management system (CMS), Cascade, similar to WordPress. As the lead User Experience and User Interface designer on this special project one of the main goals was to determine which tool (eg. Colour, Size, Font, Headings, Media) would be accessible to departments via CMS. 

Content Consumption UI: From Mock-up to Final

We began by breaking down each module into sections.

The Web Development team had begun to develop modules they would like to include in the Report Template. Due to limitations it was important to establish what our Minimal Viable Product (MVP) would be.

Working through each section of the report template, there were multiple factors considered.

Key blocks or modules that the team established to include were:

  • Hero to include video
  • Social media links
  • 1, 2, and 3 column text fields
  • Ability to include images and media
  • Interactive/drop down sections
  • Pull-quotes

Slider Module

The most difficult component to work through was the Slider Module. In this module we wanted to create content that was interactive but also clear and concise. Due to the limitation of the back end coding we went through many iterations.


Using stock icons to create GIF’s we were able to create an engaging visual element with out adding increase loading time.

This simple solution helped alleviate some of the interactivity issues our team was trying to solve.

Style Guide + Inspiration

World Water Day

We used source images for inspiration and our colour pallet for the test editorial template for World Water Day.

Wilfred Laurier University: Style Guide

While Laurier has a concrete Style Guide for their print media, their Online Style Guide was missing elements and needed to be updated with the latest project.

The updated Online Style Guide used Material Design, font awesome icons, and current brand standards, built on their current Online Style Guide. We considered how it would be incorporated into Content Management System (CMS) and used for future web based projects.

For this project we primarily focused on incorporating responsive pixel perfect standards for the Online Style Guide and specifics for this featured project.

Ultimately the Online Style Guide is a living document and should be treated as such.