Refonte du site vitrine de l’ISCPA – Groupe IGS
Quoi ?
Site responsive – Mobile First – UI/UX – Direction artistique – Design System
Comment ?
Routine Agile – Atelier idéation – Guerilla Test
Groupe IGS est un groupement d’écoles privées qui proposent des cursus scolaires et formations dans des secteurs 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 son souhait de moderniser, tant sur le plan technique que design, les sites de chaque école.
Une quinzaine de sites au total étant prévus, nous avons donc pris en compte rapidement l’harmonisation et la gestion au quotidien. Cela s’est traduit par la mise en place d’une usine à sites (tous les sites sont construits autour des mêmes composants et du même socle technique).
J’ai travaillé tout d’abord pour l’ISCPA, école de journalisme, communication et production du groupe, ce site étant la première pierre de l’ensemble du projet.
Mise en place du Design System
Le Design System a été mis en place afin de gagner du temps dans la conception de l’usine à sites. Il a permis aux intervenants Design et Développement Front d’avoir une base commune pour la conception
La méthode que j’ai proposée repose sur l’Atomic Design : les composants les plus simples construisent les composants plus complexes et ainsi de suite jusqu’à obtenir une structure de page complète.
Un Design System “parent” a été conçu pour établir les normes pour l’ensemble des composants des différents sites, des atoms aux templates, puis des Design System “enfants”, un par école, reliés au Design System “parent” ont été créés pour s’adapter à chaque école (couleurs, fonts).
Le Design
J’ai orienté le Design vers la facilité de lecture et l’accès à l’information, aussi bien sur mobile que sur desktop : des blocs identifiables, des textes pertinents, et des dégradés de couleurs vibrants mettent en confiance l’utilisateur.
L’expérience utilisateur
Les personas définis ont orienté l’expérience utilisateur sur 2 points primordiaux : l’accès aux infos des différents cursus et la facilité de contacter l’école. Nous avons donc décidé de guider l’utilisateur vers les formations facilement dès son arrivée sur le site avec 3 entrées propres à l’école, ainsi qu’une navigation sticky les mettant en avant. On les retrouve aussi tout au long des pages dans des sliders dédiés
Les Guerilla Tests réalisés sur un panel d’étudiants ont montré l’importance, lors des phases de recherches de formations post-Bac, de la facilité de contact d’une école. J’ai donc mis en place un bandeau sticky en bas de page regroupant les différents modes de contact.
Cela permet aussi à l’école de générer des leads plus facilement.