Background
The Pierre Elliott Trudeau Foundation contacted us to re-design of the PETF website. Their old site was on an antiquated Drupal system and their current site didn’t work on mobile. They were looking for a full brand overhaul but after reviewing their logo and assets, we determined that they were perfectly good items they just needed a design system to keep their visual language consistent.
Together with the client, we agreed to develop a design system that would cross web, social and even print media and a full website overhaul including UX strategy and visual redesign.
Process
I led the digital visual identity workshops with the foundation stakeholders and we used the findings to identify the pain points with their existing brand and site so we could address them in the redesign.Working with the Senior UX designer and front-end developer, we established a pattern library that would work for both the current site and any pages the client may need to add in the future. This design system eventually expanded from regular tokens and components to over 20 patterns and extended to social media and print mediums.
In the end, I created designs for over 12 dynamic pages of the site. I also worked with the senior UX designer and front-end developer to make sure we complied with the best UX and accessibility practices using a mobile-first approach.

Moodboard

Design System

Component Library











Other Mediums
This design system eventually evolved into social media and print as well as their online web presence.


Website
If you’re interested in checking out the site you can visit it here: