Back to projects

TIM 2020 website

Project introduction

  • Individual
  • 7 weeks
  • Entire redo, from A to Z.
The Cegep Sainte-Foy's Techniques d’intégration multimédia (TIM) program trains students to become actors in the web industry, by learning web design as well as programming and integration. For the 2020 version of their website, they wanted it to be in their image : up-to-date and inviting, with a certain emphasis on user interaction and immersion. As this was a one person project, I really developed my analytic capabilities and pushed further my problem solving aptitudes.

My roles

Analysis, Conception, Design, Programming and Integration

Technologies/tools

Wordpress, 5.3.2, Figma, PHP(v7.2.9), TypeScript(v2.7.1), jQuery(v3.4.1), Sass(v4.13.1)

Full code available on GitHub

The goal

  • Present the 2020 graduates, as well as their projects
  • Present the TIM experience all through the program
  • Give a future student all the information needed
  • Give a potential employer all the necessary information on the internships available
  • Let users contact the people in charge of the program's different aspects

User needs

After completing interviews with potential users, what came through most of all was the idea to "see" rather than "read" what's going on in the TIM program. That's how I decided my focal point for my version of the website : student projects.

On the admin side, we were tasked with giving them an interface that gave full control, even to a non-programmer webmaster. They also wanted to be able to modify quickly and efficiently, while having all pertinent information bundle together.

User diagram (client side)
User diagram (admin side)

Projects at the center of design choices

Dilema :

How could I harmonise the website colors to the different styles and colors of each student project?

Many projects by many different people meant a certain visual cacophony. To try keeping everything harmonized, I decided to isolate a color coordinated to each project.Any time a project is shown, I use that color for different éléments in the interface (decoration, graphic éléments, colors for links, etc...) I also chose a black and white theme, to maximise the visual harmony of the site.
Exemple des maquettes de différents projets avec les couleurs associées pour chacune.
An individual color per projet: solution to keep a visual harmony

I linked, withACF, an hexadecimal color code to each project. Now found in the database, I could use a PHP call to show the right color on screen, depending on the project.
Capture d'écran de la page des réalisations.
In each page, the custom color is changed dynamically depending on the project shown with PHP (in this example, each link has the project's color).
Capture écran de l'outil de couleur créé dans Wordpress.
The ACF field created in the admin interface gives a lot of freedom to the webmaster when choosing a color.
The landing page is where I really decided to go all in with the one-color-per-project concept. With each refresh of the page, a new projects is shown randomly, and the color of the background changed accordingly. This page is voluntarily sparse in information, having a more graphic purpose meant to bring people in. To implicate the user further, a button lets them change the project shown (manually refreshing the page)..
Capture de l'accueil du site.
By clicking the 'Une autre' button, users can change the project shown on the landing page.

Content layout

In a very content-heavy website, the density of information can become overwhelming. I wanted to find a way to treat the information graphically instead of literally. To do so :

On the program description page
  • A video reel plays in the header section (with custom controls so the user can stop/play the video)
  • I reworked certain texts to shorten them without loosing important content, and prioritized graphic organisation when possible
  • The program details are found in a slider paired with a pie chart, letting the user interact with the content, and showing the information only sections at a time.
Capture d'une section de la page Programme.
The different disciplines that make the program are recapped with keywords, paired with a visual representation of their importance (in percentage).

The slider in this section was modified from the standard slider in the glide.jslibrairy. I added event listeners on the controls so that they would activate the animation of the piechart at the same time the slides changed. The graphic elements comprising the chart are svgs, directly in the html, whose visibility is toggled when needed throughadded classes with TypeScript and jQuery.
Capture d'une section du code typescript.
The whole typescript code can be found for consultation on my github repo, in the file Visionneuses.ts
On the internships page The content is differentiated, depending on the clientele :
  1. Higher part of the page - Futur students
    • Certain texts rewritten to make the work charge lighter.
    • Geometric shapes are used to organise the content, as well as color splashes.
  2. Lower part of the page - Employers
    • All pertinent information grouped together and synthetized
    • A contact form was added directly in this page. If the employers have all pertinent information and the possibility to write right away, without leaving the page, I think it makes it more probable that they will actually do it.
Capture du contenu de la page des stages.
Content is divided with each clientele in mind, and all pertinent information is grouped together for easy access.

User control and accessibility

We were asked to add a sorting functionality to the projects page. But 24 graduates, with up to 4 projects each, meant about 96 items on the screen at once... That's a lot of information to comb through.

Dilema:

How could I help the user find what he was looking for easily, while letting him personalize his experience?

By programming a detailed filter functionality instead of a simple sorting one, each user could really get what they we looking for. After reflexion, I stoped on five filters that cover broadly all information wanted.

For the graduate and session filters, all the necessary information could be found in the default database provided. But for the other filters, I added fields with ACF, where the administrator could add or remove filter tags for each projet.

Les options retenues pour pouvoir filtrer les réalisations sont : par diplômés, par session, par discipline, par mots clé, ou encore par type de projet.
Five filters let the user change the projects shown, depending on what they are looking for.
Capture des champs pour les filtres, sous forme de boîte à cocher.
In the admin interface, the custom groupe 'étiquette' lets the admin associate specific filters for each project.
To visually lighten the filter menu on mobile devices, I chose a vertical organisation, with an accordion type system for each element.
Maquette des filtres vus d'un écran de téléphone intelligent.
On the other hand, the same organisation became to busy on larger devices. After a few tests, an horizontal display as well as tabs for each element seemed optimal.
Maquette des filtres vus d'un écran d'ordinateur portable.

Accessibility is something I always try to implement in my projects, and I gave particular attention to the filter menu in this regard. After a few tweaks, it is completely accessible for keyboard-only users. Here are the steps taken :
  • Make all interactive elements 'tabable' (HTML + TypeScript)
  • Make the hidden elements for each section of the menu 'non-tabable' (TypeScript)
  • Add immediate focus in the list of options once a tab is selected with the keyboard (TypeScript + SCSS)
  • Add a visual aid on :hover and :focus of interactive elements (SCSS)
*** You can test the responsive and accessible result of the filter menu with the interactive Codepen example bellow.

Voyez ce pen par Marie-Noëlle Grant (@Marienoelle) en cliquant ici sur CodePen.

Conclusion

After completing the TIM 2020 website project, I feel like I've learned to work better with a project's limitations, as well as problems met on the way. Instead of fighting those limitations, I embraced them and used them as guides to complete the project. I sure makes the starting process a little slower, but in the end got my using my creativity a lot more than usual, in the design phase as well as programming/integration. This project was also challenging, since it was the first time I realized a project of this size alone. I'm now much more confidant in my adaptation and learning abilities, and I learned to know myself better in a professional context.