Le collège Cambrian, une institution postsecondaire de renom dans le Nord de l’Ontario, se retrouvait devant un défi : son site web daté était difficile à gérer et nuisait au recrutement.

Afin d’améliorer l’accessibilité, d’uniformiser la gestion des contenus et pour renouveler son image, Cambrian s’est embarquée dans un processus exhaustif de renouvellement d’image et de refonte de son site web. L’ancien site web, techniquement et visuellement encombré, frustrait ses utilisateurs, dont bon nombre étaient de potentiels étudiants, qui peinaient à trouver des informations essentielles sur leurs programmes d’étude. Lors d’un sondage, 69% des répondants ont indiqué avoir de la difficulté à naviguer sur le site web, soulignant davantage son inefficacité. De plus, l’infrastructure datée ajoutait aux frustrations internes, et nécessitait une refonte complète afin de mieux soutenir les efforts de marketing et l’expérience globale des utilisateurs du site.

On a entrepris la refonte du site de Cambrian avec des objectifs clairs :

• Prioriser le recrutement étudiant avant tout
• Assurer l’accès aux informations essentielles, et en particulier celles concernant les programmes
• Répondre aux divers besoins d’une clientèle interne et externe, dont les parents, le personnel d’orientation, les employés potentiels, les partenaires, les donateurs et les anciens
• Bien rendre compte de l’atmosphère invitante et chaleureuse de Cambrian
• Faire de l’accessibilité une priorité fondamentale afin d’assurer une expérience équitable pour tous les utilisateurs du site.

Recherche créative

On a mis l’accent sur le processus créatif dès le début du projet afin d’en assurer le succès. Dans la conceptualisation et la construction d’un site web, on croit que tout est possible. Alors qu’on réinventait l’expérience utilisateur en plein milieu de renouvellement de marque, il était essentiel de mener et de présenter une recherche créative exhaustive afin de bien définir notre direction. La synthèse de ce travail a permis aux équipes respectives de Studio123 et de Cambrian de s’entendre sur une vision et un concept communs.

On a d’abord analysé les sites web de tous les collèges de l’Ontario afin d’identifier les tendances et les façons dont Cambrian pouvait se démarquer. Ensuite, on a élargi notre recherche afin d’inclure des références internationales pour davantage d’inspiration. Cette recherche nous a permis d’échanger, de débattre et de bien réfléchir avant de nous lancer dans le processus de design.

Notre équipe s’est servie d’analyse, de réflexion stratégique, de design éclairé et de programmation ingénieuse afin d’atteindre les objectifs du site web. Parmi des dizaines d’améliorations importantes, en voici quelques-unes dont on est particulièrement fiers : 

Navigation paritaire

On a priorisé une navigation intuitive qui fonctionne de manière optimale sur toutes les plateformes. Lorsque les utilisateurs se familiarisent avec un site web, ils se souviennent de sa disposition et de sa logique de navigation. On a conçu l’interface de manière à ce qu’elle demeure constante d’une plateforme à l’autre pour faciliter et rendre plus agréable l’expérience de ses utilisateurs. Assurer une expérience uniforme et continue d’une plateforme à l’autre nous était important.

Un système de navigation en paliers

L’un des plus grands défis de ce projet était de ventiler la complexe architecture des contenus de manière digeste et intuitive. Notre approche était de concevoir un système de navigation en paliers qui met en évidence les sections les plus utilisées du site web, en distinguant des sections secondaires ou tertiaires afin de guider les utilisateurs vers leur destination. Cette solution désencombre les menus et assure de ne pas accabler l’utilisateur par une surcharge d’informations. Notre recherche a mis en évidence l’importance d’une expérience équivalente sur les plateformes mobiles et traditionnelles, chose que cette approche réussit avec brio. 

Un volet de navigation intégré permet aux utilisateurs de trouver l’information recherchée rapidement

On a conçu un volet de navigation qui guide l’utilisateur de manière transparente, peu importe s’il navigue à partir d’un téléphone, d'une tablette ou d’un ordinateur. Ce menu survole les sections et permet ainsi à l’utilisateur de repérer rapidement l’information recherchée. Il sert également de repère, et suit l’utilisateur au fur et à mesure qu’il passe d’une section à une autre. L’utilisateur peut faire défiler le menu en cliquant, en trainant du doigt, ou en défilant à l’horizontale. Il y a aussi un bouton permettant de voir toutes les sections d’un seul coup d’œil.

Cherche et trouve

Les participants de groupes de réflexion souhaitaient une fonction de recherche modulable leur permettant d’évaluer simultanément de multiples programmes selon des critères précis tels que le champ d’intérêt, les diplômes, la méthode de livraison des programmes, la date de début, et les programmes qui accueillent les étudiants internationaux. Cette approche profite à l’utilisateur en lui présentant des informations selon ses préférences. On nous a indiqué que si certains étudiants savent très bien ce qu’ils cherchent, d’autres ont besoin d’être accompagnés davantage dans leurs recherches. La composante « cherche et trouve » répond aux besoins des deux types d’utilisateurs, et met en valeur la diversité de l’offre de cours de Cambrian.

Coocoo, coup d’oeil!

Nos premiers essais avec l’architecture des contenus ont révélé l’importance de rendre accessible l’ensemble des programmes. On a voulu guider les utilisateurs, tout en validant régulièrement leur parcours pendant leur navigation. Ainsi, on a créé une composante « coup d’oeil » qui permet aux utilisateurs de voir des informations essentielles avant d’aller plus loin. Cette étape intermédiaire permet aux utilisateurs de s’assurer qu’ils sont sur la bonne piste au lieu de devoir faire demi-tour.

De plus, cette fonction fournit une façon de gérer les sections avec beaucoup de contenus. En nous servant de la composante « coup d’oeil », on a pu réduire l’espace accordé sur les contenus moins importants afin d’assurer des pages concises, mais sans priver l’utilisateur de ces informations additionnelles.

Programmes retenus

On a travaillé fort pour rendre le site pratique pour les futurs étudiants. En se souvenant que les étudiants comparent souvent l’offre de programmes de plusieurs institutions, on a conçu un système qui leur permet de rapidement identifier et sauvegarder les programmes qui les intéressent. Cette nouvelle fonction utilise des témoins pour stocker ces informations sur l’appareil de l’utilisateur, ce qui lui évite de devoir créer un compte d’abord. Cette fonction a été bien reçue par les étudiants.

Une nouvelle marque

En même temps qu’on créait ce nouveau site web, Cambrian entreprenait un renouvellement de son image de marque afin de refléter sa nouvelle vision d’avenir. Nous avons travaillé de très près avec son équipe de marketing en lui offrant des conseils et des rétroactions quant à sa nouvelle marque. Afin de l’améliorer davantage, on a conçu un élément visuel avec des déclinaisons cohérentes à travers le site web, les réseaux sociaux et les matériels promotionnels imprimés. Cette fenêtre en biais, inspirée par le bouclier de la nouvelle image de marque, dirige l’œil et permet de mettre de l’avant des photos ou des vidéos de manière créative. Le bouclier en biais est devenu un élément caractéristique qui véhicule efficacement l’identité du collège Cambrian.

Développement

Notre équipe de développement a proposé de nombreuses stratégies technologiques pour maximiser la polyvalence et la puissance du nouveau site web de Cambrian. En voici quelques-unes :

WordPress sans entête

L’équipe de Cambrian était déjà habituée à WordPress. Au lieu de repartir à zéro, on a choisi de bâtir sur ce savoir institutionnel. Ça vaut la peine d’améliorer ce qui fonctionne déjà. Une importante mise à jour dans cette nouvelle mouture du site web est qu’il fait usage d’une architecture WordPress « sans entête ». Cette approche permet de profiter du système de gestion de contenus de WordPress tout en le séparant de l’interface utilisateur, offrant plus de flexibilité à notre équipe. Cela accélère notamment le développement, mais aussi les mises à jour et permet d’utiliser WordPress comme le répertoire central de contenus de plusieurs plateformes externes au site web. Cette configuration augmente la rapidité, la flexibilité et l’adaptabilité future du site web, et assure que ce dernier continuera d’évoluer au même rythme que l’offre éducative de Cambrian.

Pont de données pour l’intégration API

Nous avons créé un « pont de données » sur mesure. Sa fonction principale est de synchroniser les données entre l’API interne de Cambrian, qui contient des données essentielles dont les informations d’inscription, des dates et les frais d’inscription, ainsi que notre instance « sans entête » de WordPress. La synchronisation est automatique et s’opère régulièrement à des moments prédéterminés, assurant que le site web demeure à jour sans nécessiter d’intervention manuelle. Cela permet aux rédacteurs de se concentrer au lieu sur l’amélioration du site web. Depuis la mise en œuvre du pont de données et la mise en ligne du site, sa fréquentation a augmenté de 330%, ce qui souligne l’impact qu’a l’exactitude des informations du site sur l’engagement des utilisateurs.

À la fine pointe

Être à l’affût des nouvelles technologies n’est pas juste tendance; c’est essentiel dans le milieu  postsecondaire. C’est pour ça qu’on a mis le paquet lors de la refonte du site de Cambrian. On a construit le site avec React en nous servant de Next.js et lui avons intégré des outils tels que Radix UI et Tailwind CSS. En choisissant d’héberger le tout sur Vercel, une plateforme d’hébergement sans serveur, on assure que le site se charge très rapidement, qu’il s’adapte parfaitement même lors des sommets d’achalandage comme la période des inscriptions et qu’il répond aux besoins numériques exigeants imposés par les corps étudiants et professoraux. Nous avons conçu une présence numérique pour Cambrian qui lui permettra d’affronter les besoins changeants du milieu de l’éducation.

Résultats

Dès le lancement du site, les résultats de ce projet étaient très positifs. 

• 330% d’augmentation de fréquentation du site web
• 125% d’augmentation de pages vues
• 41% d’amélioration de la performance pour les appareils mobiles
• 99% comme résultat de performance sur ordinateur de bureau
• 23% d’amélioration totale selon les mesures de PageSpeed Insights
• 35% d’amélioration du référencement (SEO)
• 18% d’amélioration de l’évaluation d’accessibilité
• La fonction « programmes sauvegardés » a été particulièrement bien reçue et a rendu plus conviviale l’expérience des étudiants potentiels

Leçons apprises

Pendant la durée du projet, on a appris l’importance de : 

• La conception centrée sur l’utilisateur. Miser sur leurs besoins et rétroactions améliore l’engagement et la satisfaction des utilisateurs
• Choisir des technologies souples. En nous servant de technologies modernes et adaptables, on améliore la performance et la durée de vie du site web.
• Viser haut. « Visez la Lune. Même si vous la ratez, vous atteindrez les étoiles ». Chercher les meilleures pratiques mondiales et parmi de nombreuses industries nous a permis de découvrir des méthodes de gestion et de présentation des contenus novatrices et efficaces. En étudiant plus que les compétiteurs immédiats et les pratiques régionales, on a été inspiré à adopter de nouvelles approches et à ouvrir de nouvelles voies.
• Inspirer les gens. L’atteinte de bons résultats nécessite un réel travail d’équipe. Faire une véritable analyse des procédés existants nécessite de l’honnêteté, de la transparence et la volonté d’accueillir de nouvelles idées. L’équipe de Cambrian a entrepris ce voyage avec nous avec enthousiasme. Elle avait hâte de créer et de mettre en œuvre les nouveaux systèmes que nous avons conçus ensemble. Ses développeurs étaient toujours prêts à travailler avec notre équipe, et son équipe de gestion s’est engagée à prendre des décisions difficiles, à rassembler les avis de nombreuses parties prenantes internes, à rassembler des contenus et à informer la haute gestion du progrès. Le plus important, c'est le plaisir qu’on a eu à travailler ensemble. Les gens inspirés alimentent les projets inspirants.

Conclusion

La refonte du site web du collège Cambrian a répondu aux défis institutionnels et s’est conclue par une augmentation importante de l’engagement des utilisateurs et de la fréquentation du site web. Nos contributions à l’image de marque et aux outils technologiques ont non seulement amélioré le fonctionnement du site, mais ont aussi réaffirmé l’image vibrante et accueillante de l’institution.