TIM 2020 website
- 7 weeks
- Entire redo, from A to Z.
Analysis, Conception, Design, Programming and Integration
Wordpress, 5.3.2, Figma, PHP(v7.2.9), TypeScript(v2.7.1), jQuery(v3.4.1), Sass(v4.13.1)
- 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
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.
Projects at the center of design choices
How could I harmonise the website colors to the different styles and colors of each student project?
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 :
- 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.
- 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.
- 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.
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.
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.
- 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
:focusof interactive elements (SCSS)
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.