Digital design system

SAIT Polytechnic

I helped the Southern Alberta Institute of Technology take a component based design approach to their website replatform.

My roles

  • Content strategy
  • UX/UI Design

Collaborators

  • SAIT's web team
An iPhone with the sait.ca homepage diplayed on screen

The problem

Starting with Why

In fall 2021, SAIT began a content management system (CMS) replatform project for their public website. Their current CMS contract is due to expire in early 2022.

Although this kind of project is an excellent opportunity to overhaul content and design, a complete redesign wouldn't be feasible in the development timeframe.

SAIT's development team was focused on migrating the current website into the new CMS. They reached out to us seeking help with design because they were impressed by our work on Capilano University's website.

We worked with their team to see what could be improved within their time constraints.

The roadmap

What lay ahead

We identified potential areas for improvement through discovery workshops: Information architecture, program listings, and navigation design to name a few.

Solving each of these problems would require more time than we had.

So, we decided to focus efforts on organizing SAIT's nebulous collection of content components and enhancing visual designs in the process.

Our goals were to

  1. Improve usability for content editors in the new content management system.
  2. Create an updated and coherent visual design system to better showcase SAIT as a leading tech school.

Our process

How we did it

We started by collecting a list of all content components used across SAIT's website and catalogued the varying iterations.

This helped us decide which components to prioritize, and how they can be congregated into a simpler content authoring workflow.

From there, I plotted component content models after reviewing the new CMS documentation and began work on the designs in Adobe XD – SAIT's preferred tool.

The results

ta-da!

Design mockups

Below are some examples of the redesigned content components I worked on.

At the time of writing, SAIT is working on implementing these in their new CMS.

Example component designs for SAITs new website
A screenshot of the redesigned SAIT homepage
A screenshot of the original SAIT homepage
More example component designs for SAITs new website
A screenshot of the redesigned SAIT areas on interest slider
A screenshot of the original SAIT areas of interest slider
More example component designs for SAITs new website

But, design isn't only about visuals

It's about the details. We weren't just improving the look and feel for SAIT's audience, we were also making designs for developers to implement.

Mockups aren't enough to communicate all the intricate details of the designs.

To solve this, I created a content model spreadsheet to track our redesigned components and help guide developers through a content lens.

What's next?

There's more work to be done

A complete overhaul of a website for higher education doesn't happen overnight. Our initial design project with SAIT is only the beginning of a partnership that will grow over the coming years.

Home