Refonte du site vitrine de l’ISCPA – Groupe IGS
Quoi ?
Refonte UI/UX du site responsive en Mobile First, création d’une nouvelle direction artistique et conception d’un Design System
Comment ?
Figma – Figjam – Routine Agile – Ateliers idéation – Tests utilisateurs (Guerilla Testing)
Le Groupe IGS rassemble plusieurs écoles privées proposant des cursus et formations variés (journalisme, finance, immobilier etc.), encadrés par les règles imposées par l’État (Qualiopi).
Ma mission de Designer UI/UX a été d’accompagner le client dans la modernisation technique et design de l’ensemble des sites du Groupe.
Avec une quinzaine de sites prévus au total, les enjeux d’harmonisation, de cohérence et de gestion quotidienne ont été placés au cœur du projet.
Nous avons mis en place une usine à sites, permettant une conception commune pour les composants design et le socle technique.
Mon travail s’est orienté sur l’ISCPA, l’école de journalisme/communication/production du Groupe, qui a servi de point de départ et de référence pour l’ensemble du projet.
Mise en place du Design System
Le Design System est un élément central dans la réussite globale du projet. Conçu pour optimiser la mise en place de l’usine à sites, il a fourni un référentiel commun à l’ensemble de l’équipe pour le Design et le Front, permettant ainsi de travailler sur une base cohérente et alignée.
La méthode que j’ai proposée s’appuie sur l’Atomic Design : les composants basiques servent de fondations pour construire les composants plus complexes, jusqu’à aboutir à une structure de page complète.
Un Design System “parent” a été conçu pour établir les standards globaux, des atoms aux templates. A partir de cette base, des Design Systems “enfants”, un par école, connectés au Design System principal, ont été créés pour s’adapter aux spécificités de chaque école (couleurs, fonts).
Le Design
J’ai orienté le Design vers la fluidité de lecture et un accès direct à l’information, aussi bien sur mobile que sur desktop. Des blocs clairement identifiables, des contenus pertinents et des dégradés de couleurs dynamiques renforcent la compréhension et facilitent la navigation de l’utilisateur.
L’expérience utilisateur
Les personas définis ont orienté l’expérience utilisateur autour de 2 enjeux majeurs : l’accès rapide aux informations des différents cursus et la simplicité de prise de contact avec l’école. Dès l’arrivée sur le site, l’utilisateur est guidé vers les formations grâce à trois entrées propres à l’établissement, soutenue par une navigation sticky. Ces parcours sont aussi visibles tout au long des pages via des sliders dédiés.
Les tests réalisés auprès un panel d’étudiants (Guerilla Testing) ont montré l’importance, lors de leurs recherches de formations, de pouvoir contacter une école facilement. J’ai mis en place un bandeau sticky en bas de page regroupant les différents modes de contact. Cette approche permet à l’école de générer davantage de leads et des prospects qualifiés.
