technocite homepage in a laptop screen

Technocité
Management Tool

Overview

Technocité is a training center that gives courses to job seekers but also to companies and school teachers.

The specificity of this training center linked to the Walloon training office (FOREM) is to offer courses based on design, visual or audio, IoT and programming.

Their current site was no longer in line with their skills. It was outdated, not responsive, not SEO friendly and the internal search engine could be greatly improved.

The image of the training center was suffering because of this.

The old website of Technocité
Thechnocité old website interface

Role

User Researcher, Web Developper

Ux research, Wireframes, Users journeys, Prototype, Ux design, Ui design, Front-end development

Background

Despites the fact that Technocité teaches porgramming, html/css and ux design, they prefered not to ask their students to create a website for them.

They wanted to make one with the internal teachers. To show what can be done. But the number of classes was increasing dramatically, thus the maintenance and upgrade was not possible.

technical courses at Technocite
Technocité classroom

The problem

The goal here was to find a way to create a portal that displayed the courses in a fancy way and gives all the needed informations on a separate page.

The actual website had a lot of urls referred in search engines but many were no longer going to be available anymore and therefore the risk was to lose all the benefit of this referencing with a new website.

A blog with testimonials of previous students and news articles about planned events or new kind of courses was mandatory to make the site more human centered and lively.

Technocité also needed an ERP tool to retrieve registrations and recollect prospects, who had expressed their interest, through newsletters. The exportation of this list to be reimported into mailchimp was also a needed feature that was laking in the actual website.

And of course a Back-Office was needed to manage all this.

Survey through Google Form
An example of results for one of the survey's questions

The solution

Except for the information of the lessons that would be kept between the two sites everything has been rethinked from scratch.

Redefinition of the personae, ideation of a brand new communication process, and collecting the needs of the lessons managers were essential.

The full process

This project is in the portfolio because it alone brings together a lot of Ux functions, and not only that.

The Ux research and analysis went through a collection of information trhough a Google form survey to identify users pains.

Survey through Google Form
the problems encountered by visitors were essentially always the same

Because this project took place during the Covid-19 quarantine, Fig Jam was a superb communication interface.

FigJam white board used to communicate with client and teams
All the contributors could intervene on the whiteboard together

The personae and users journeys were established with the client. Then the opportunities showed by themselves.

Personae and users journeys
Some of the user journey had to be redone several times in order to achieve a conclusive result

Card sorting and wireframes were obviously a mandatory step. They helped define the features that were really needed and the one missing in the actual website.

The wireframes for thechnocité
The prototyping was done on the wireframes in ordre to not lose time in the design process

A moodboard was presented to the client to help find the athmosphere that suits best the new identity.

Segment of the moodboard for Technocité
The moodboard has greatly facilitated graphic's decision-making

A prototype was submitted for approval, and very few adjustments had to be made thanks to the good work and team cohesion, brought by this collaborative process that is UX design.

The design was a really fun part, thanks to the latitude given by the client.

Design  for Technocité
These are the two fancy templates for the courses details

A small design system was given to the client to help him create new things after the end of the project.

But for the development team all the design system was provided through Storybook Js.

Small design system for Technocité
This design system was more like a graphic charter for the client

The erp management tool was tailormade to fit perfectly with the client's needs

The links that were going to be lost in the transition were listed. And 301 redirections have been put in place.

Listing of the lost urls
A listing of all the urls to redirect

The final product is an all in one tailored tool.

https://technocite.be/