PLAI (Site client)

Dans le cadre du cours de Design Web, j’ai conçu la maquette UI/UX complète du site internet pour un client institutionnel : le PLAI (Pôle Liégeois d’Accompagnement pour une École Inclusive). L’objectif majeur de ce projet était de créer une plateforme web à la fois informative, rassurante et fonctionnelle, destinée à accompagner les équipes professionnelles et les établissements scolaires vers une meilleure inclusion des élèves.

Le défi UX principal consistait à structurer une grande quantité de ressources pédagogiques et de modules de sensibilisation, tout en proposant un espace personnalisé sécurisé pour les membres du réseau.

Image vitrine de mon site client PLAI

Mes étapes

  • Analyse du besoin client & Moodboard : Le point de départ a été de comprendre les missions du PLAI et son public cible (enseignants, éducateurs, directions d’écoles). À travers le moodboard, j’ai cherché à définir une identité visuelle qui s’éloigne de l’aspect froid ou purement administratif. L’objectif était de dégager une atmosphère bienveillante, humaine, chaleureuse et résolument tournée vers le soutien.

  • Architecture de l’information & Wireframes (UX) : Face à la diversité des contenus (fiches sur les troubles de l’apprentissage, outils pédagogiques, annuaire), j’ai travaillé sur des wireframes pour simplifier le parcours de recherche. J’ai imaginé un système de grilles de cartes (cards) claires pour répertorier les ressources, facilitant la numérisation visuelle rapide pour un enseignant pressé. Un parcours d’authentification fluide a également été pensé pour l’accès aux espaces professionnels.

  • Design Visuel & Charte Graphique (UI) : Lors du passage à la haute fidélité, j’ai décliné les blocs de contenus avec un système de cartes colorées aux coins adoucis pour segmenter l’information sans surcharger les pages. Chaque type de ressource ou de trouble (Dyslexie, Dyspraxie, TDAH…) possède une lisibilité optimale grâce à des contrastes soigneusement étudiés.

  • Prototypage : Le prototype simule le parcours complet d’un utilisateur : de l’arrivée sur la page d’accueil à la connexion à « Mon espace » personnalisé (avec son référent attitré), jusqu’à la consultation approfondie d’une fiche de sensibilisation spécifique (ex: Dyslexie) ou d’une ressource utile (ex: Notebook LM).

Mon design

  • Palette de couleurs : Le design repose sur un fond crème très doux, limitant la fatigue visuelle, combiné à des blocs de couleurs pastels et chaleureuses (nuances de saumon, de rose poudré et de terre cuite). Cette harmonie transmet immédiatement de l’empathie, du soin et de la sérénité.

  • Typographie & Accessibilité : En accord avec le thème de l’inclusion, le choix des typographies, des tailles de caractères et des espacements a été pensé pour offrir une lisibilité maximale, un point crucial pour une plateforme traitant notamment des troubles de la lecture.

Design du site client PLAI

Fonctionalités clés

  • Accueil & Connexion : Une page d’accueil impactante présentant les chiffres clés, les missions (Informer, Accompagner, Conseiller…) et un appel à l’action clair vers le portail de connexion.

  • Mon Espace (Espace Personnalisé) : Un tableau de bord sur mesure affichant le profil de compétences, les dernières formations suivies, les ressources associées et un contact direct avec « Mon référent ».

  • Toutes nos Sensibilisations & Fiche Unique : Un catalogue complet des troubles (Dyslexie, Dyspraxie, TDAH, TSA…) qui s’ouvre sur des fiches détaillées incluant des pistes de réflexion et des outils concrets à mettre en place en classe.

  • Ressources utiles : Une immense bibliothèque numérique filtrable présentant des fiches d’outils (comme Eduaide.ai, Padlet, Quizizz) avec leur intérêt pédagogique et leurs fonctionnalités clés.

Conclusion

Travailler pour le PLAI m'a permis d'appliquer les principes du design web à un projet à fort impact social. Allier la rigueur d'une architecture d'information dense à une interface humaine, douce et accessible a été une expérience de conception UX/UI particulièrement enrichissante.