Refonte du site vitrine de l’ISCPA – Groupe IGS
Quoi ?
Refonte UI/UX Mobile First, portée par un Design System Atomic scalable
Comment ?
Figma – Figjam – Routine Agile – Ateliers idéation – Tests utilisateurs Guerilla Testing
Le Groupe IGS regroupe plusieurs écoles privées proposant des cursus post-bac variés dans le journalisme, la finance, l’immobilier, etc. (formations encadrées par l’État via la certification Qualiopi).
Le contexte : les sites internet des différentes écoles étaient obsolètes, tant sur le plan technique que design.
La solution envisagée : mettre en place une usine à sites afin de partager des bases techniques et design communes entre la douzaine de sites du Groupe.
En tant que Designer UI/UX Senior, mon rôle a été d’accompagner le client sur le projet pilote : l’ISCPA, l’école de journalisme, communication et production.
Mes objectifs : poser les fondations Design via un Design System, moderniser l’identité visuelle, améliorer et simplifier les parcours utilisateurs et booster les demandes de contact.
Mise en place d’un Design System scalable
Le Design System, la pierre angulaire du projet
Véritable colonne vertébrale de l’usine à sites, le Design System a fourni un référentiel commun aux équipes Design et Front.
Objectif : travailler sur une base cohérente, alignée et évolutive, pour accélérer la production tout en garantissant une qualité homogène sur l’ensemble des sites du Groupe.
Une méthode basée sur l’Atomic Design
La méthode que j’ai proposée s’appuie sur l’Atomic Design de Brad Frost : les composants les plus simples (les atoms) servent de fondations pour construire des éléments plus complexes (comme les « molecules » et les « organisms »), jusqu’à aboutir à des templates de pages complètes. Une approche modulaire qui favorise la réutilisabilité et la maintenance à long terme.
L’architecture « parent/enfant »
Un Design System « parent » a été conçu pour établir les standards globaux, des atoms aux templates.
À partir de cette base, des Design Systems « enfants » (un par école) ont été créés pour s’adapter aux spécificités de chaque entité (notamment les couleurs, les typographies, et l’identité visuelle). Connectés au système parent, ils héritent automatiquement de toute mise à jour, garantissant une cohérence globale sans sacrifier la personnalisation.
Un Design moderne, ciblé pour les étudiants
Cette cible, très utilisatrice d’internet mobile, a guidé l’ensemble de mes choix en terme de direction artistique : modernisation de l’image de l’école pour susciter l’envie d’en savoir plus, tout en conservant les couleurs historiques (mauve et orange) imposées. Plutôt que de les utiliser brutes, j’ai conçu des dégradés dynamiques qui les harmonisent et apportent du rythme à l’interface. Ce dégradé est devenu la signature visuelle du site, déclinée sur différents éléments graphiques.
Enfin, la typo « Lexend » garantit une lecture fluide, aussi bien sur mobile que sur desktop. L’ensemble repose sur une structuration visuelle forte, avec des blocs de contenu clairement identifiables et aussi le respect des contrastes RGAA, assurant une expérience accessible à tous.
Une expérience utilisateur orientée sur l’information et la conversion
Des personas pour cadrer les enjeux UX
La phase de recherche utilisateur a permis de définir trois types personas représentatifs de la cible :
- Le bachelier à la recherche d’une formation post-bac (ex : journalisme),
- L’étudiant en réorientation, cherchant à changer de voie,
- Le parent qui cherche des renseignements pour son enfant.
Cette segmentation a fait émerger deux enjeux UX majeurs : offrir un accès rapide aux informations des différents cursus et simplifier la prise de contact avec l’école, deux leviers directement liés à la performance commerciale du site.
Des wireframes et des ateliers de co-conception pour valider les parcours
Les parcours utilisateurs ont été simplifiés lors d’ateliers de co-conception, menés avec la Product Manager, le Product Owner et la responsable contenu. J’ai conçu plusieurs wireframes pour explorer les options et prendre les décisions collectivement pour mettre en place les meilleures solutions possibles.
Par exemple, dès son arrivée sur le site, l’utilisateur est guidé vers les formations grâce à trois entrées principales correspondant aux grandes catégories de cursus (journalisme, communication, production). Chaque entrée mène à une landing dédiée regroupant les formations associées (Bachelor, Mastère…). Une navigation sticky et des sliders contextuels maintiennent ces parcours accessibles, pour réduire les points de friction tout au long de la visite.
Des tests pour valider l’efficacité du nouveau site
Pour valider les hypothèses, j’ai mené une session de Guerilla testing auprès d’un panel d’étudiants, à l’aide d’un prototype interactif. Le protocole a reposé sur un scénario comparatif : trouver une formation puis contacter l’école, réalisé d’abord sur l’ancien site, puis sur la nouvelle version.
Cette approche a confirmé LE besoin clé : prendre contact avec l’école facilement pendant la recherche. Le bandeau sticky regroupant l’ensemble des modes de contact a su parfaitement répondre à ce besoin.
Résultat : un déploiement réussi, servant de base technique pour l’ensemble des autres sites. Le tunnel de conversion optimisé a généré +23% de demandes de contact sur les 3 premiers mois, et des prospects plus qualifiés pour les équipes de l’ISCPA.
Verbatim
« Sur l’ancien site, je dois cliquer 7 fois pour trouver la formation qui m’intéresse, ça va beaucoup plus vite sur la nouvelle version ! »
« Sur le coup, je n’ai pas compris, j’ai cliqué sur la page de contact, je suis arrivée sur une page avec plein de texte et un petit bouton de contact tout en bas, je ne l’avais même pas vu, c’était pas très clair. Sur le nouveau site les boutons pour contacter sont toujours présents, c’est plus simple »