Refonte du site vitrine de l’ISCPA – Groupe IGS

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 créé des dégradés dynamiques qui les harmonisent et apportent du rythme aux interfaces. Ces dégradés sont devenus 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 sur 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.

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 »