Les PEP Grand Oise
Conception UX et UI du site Web de l'association Les PEP Grand Oise pour l'agence Tanaguru.
Ce que j'ai fait
- Recherches utilisateurs, ateliers UX, personae
- Arborescence, wireframes, gabarits de contenu
- Maquettes graphiques et guide de style
- Intégration HTML, CSS et WordPress
Le client
Les PEP Grand Oise est une association dont l’objectif est de soutenir les enfants en situation de handicap et/ou de retrait scolaire, et de les épauler, eux et leurs familles, en matière d’accompagnement social ou médico-social. Association 1901 à but non-lucratif, elle est affiliée à la Fédération Générale des PEP (FGPEP) reconnue d’utilité publique depuis 1919.
Le projet
À partir d’une identité graphique préexistante, les PEP Grand Oise souhaitaient se doter d’un site Web permettant de mettre en avant ses actions, mais également de présenter le travail de sa vingtaine d’établissements. Du fait de son engagement et de son affiliation auprès de la Fédération Générale des PEP, reconnue d’utilité publique, ce site se devait d’être accessible et conforme au RGAA4.
Le budget alloué au projet ne permettant pas de mettre en place une équipe complète, mon rôle fut transversal, de sa conception UX à sa mise en production. Bien que très fortement conseillée de notre part, la mise en place de deux séries de tests utilisateurs a été déclinée par le client.
1 Ateliers UX, analyse des besoins, personæ
J’ai facilité plusieurs ateliers UX avec les parties prenantes en amont du projet, afin de recueillir les besoins et premières idées concernant ce projet :
- Atelier recueil des besoins, personæ et définition du MVP (Minimum Viable Product) ;
- Atelier Arborescence & Gabarits de contenu.
Points-clefs
- 6 personæ correspondant aux différents besoins des publics de l’association ont été identifiés. L’un des personæ et son user story a finalement été écartée, en phase de conception.
- Le MVP du site devait comprendre 4 pages statiques, et être mis en production moins de deux mois après son kickoff.
Extrait des personæ
Jean, 42 ans
Jean est le père de Noa, 12 ans, élève de 5e. Jean vient d’être muté à Compiègne, où il va donc s’installer avec sa famille. Il connait le réseau des PEP pour avoir fréquenté celui de Gironde, et souhaite se rapprocher du Service d’Inclusion pour Aveugles et Malvoyants des PEP Grand Oise pour préparer au mieux l’installation de Noa dans son nouvel environnement scolaire. Il consulte souvent Internet sur sa tablette pendant ses trajets en transports en commun.
Attentes vis-à-vis du site :
- Clarté de l’information et de la présentation des missions ;
- Les démarches à effectuer pour une prise en charge ;
- Les démarches à effectuer suite à une notification de la Maison Départementale des Personnes Handicapées ;
- Des informations sur sa place dans la liste d’attente ;
- Accessible sur mobile et tablettes.
Eva, 17 ans
Eva vient est lycéenne à Cergy-Pontoise. En tant que personne sourde, elle sait qu’elle peut bénéficier d’aides pour ses démarches administratives et dans son insertion scolaire et professionnelle, mais elle est un peu perdue. Un enseignant lui a conseillé de se rapprocher des PEP Grand Oise.
Elle passe beaucoup de temps sur Internet mais elle est frustrée dans ses recherches car les informations à destination des adolescent·es sont souvent présentées sous formes de vidéos non accessibles.
Attentes vis-à-vis du site :
- Des informations sous forme de texte ;
- Des explications concernant l’accompagnement dont elle peut bénéficier ;
- Des explications concernant les démarches administratives qu’elle peut effectuer ;
- Services à contacter clairement identifiés, et un moyen de communiquer avec eux par écrit ;
- Accessible sur mobile.
Sana, 28 ans
Sana est la mère de Gabriel, 5 ans, et de Louise, 3 ans.
Sana élève ses enfants seule et la maladie de son fils Gabriel l’empêche régulièrement de se rendre à l’école. La directrice de l’école maternelle de Gabriel a conseillé à Sana de se rapprocher des PEP Grand Oise, afin de bénéficier de leurs conseils pour demander une aide à la scolarisation à domicile adaptée. Sana consulte Internet sur son ordinateur de bureau et sur son téléphone mobile.
Attentes vis-à-vis du site :
- Des informations concernant l’aide à la scolarisation à domicile ;
- Services à contacter clairement identifiés ;
- Les démarches à effectuer pour une prise en charge ;
- Les démarches à effectuer suite à une notification de la Maison Départementale des Personnes Handicapées ;
- Des informations sur sa place dans la liste d’attente ;
- Accessible sur mobile et sur ordinateur de bureau.
Michel, 65 ans
Michel est médecin. Il est adhérent des PEP Grand Oise. Il souhaite être informé des activités de l’association pour suivre l’évolution des décisions stratégiques prises lors des CA.
Attentes vis-à-vis du site :
- Être informé des actualités de l’association et des établissements qu’elle gère ;
- Des informations concrêtes sur la manière dont les fonds sont utilisés ;
- Des informations sur les projets et actions de terrain de l’association ;
- Pouvoir mettre à jour son adhésion ;
- Accessible sur tablette.
Alicia, 35 ans
Alicia est enseignante, fraichement arrivée à l’école primaire Prévert, à Beauvais. Elle connait encore peu le fonctionnement des PEP, mais ses collègues l’ont encouragée à se renseigner sur l’association et les services qu’elle propose aux établissements. Elle consulte Internet durant ses moments de pause, sur son ordinateur portable personnel et son téléphone portable.
Attentes vis-à-vis du site :
- Des informations sur les projets et actions de terrain de l’association ;
- Des informations sur le mode de fonctionnement de l’association, quant aux démarches à entreprendre ;
- Obtenir un soutien pour les enfants de sa classe ;
- Obtenir un soutien pour elle-même, dans sa pratique professionnelle ;
- Services à contacter clairement identifiés ;
- Accessible sur ordinateur et téléphone mobile.
2 Conception du MVP (Minimum Viable Product)
Le MVP devait être en ligne très rapidement pour correspondre au calendrier établi par le Conseil d’Administration de l’association. Les pages de ce mini-site reflètent cette stratégie : une page d’accueil, une page « Nos établissements », une page mentions légales et une page accessibilité. Leur contenu a été particulièrement soigné, afin de :
- correspondre aux attentes du CA et des principaux partenaires de l’association ;
- préparer la conception du site final : la totalité des contenus des pages d’accueil et « Nos établissements » devait être réutilisables, afin de ne pas surcharger le budget.
La page établissements a demandé un travail de design éditorial très poussé, au vu de son contenu détaillé : elle liste la vingtaine d’établissements de l’association et leurs coordonnées. Le problème à résoudre sur cette page était d’éviter de lui donner un aspect d’annuaire téléphonique classique. Le nombre de pages du MVP étant en effet restreint, cela aurait donné à cette page une apparence d’inutilité. Cette page n’a que peu été modifiée, pour le site final.
La page d’accueil a cependant fait l’objet d’une nouvelle phase de conception lorsque le MVP a été mise en ligne ; ceci afin de correspondre aux attentes des personæ définies lors des ateliers UX et de mettre en place les composants dynamiques ajoutés sur la version 2 du site.
Détails des maquettes graphiques du MVP : page d'accueil (desktop et mobile), page Nos établissements.
3 Site final : maquettes graphiques et guide de style
Les ateliers de conception UX et les wireframes de la version finale du site ont été mis en place et créés par la cheffe de projet.
16 gabarits de page ont été conçus pour ce site Web. Après une première phase d’intentions graphiques et plusieurs versions de chaque gabarits, deux variantes de chaque ont été validées par le client : une version Dekstop et une version mobile.
- Page d’accueil ;
- Page Nos établissements ;
- Fiche établissement et ses sous-pages. Deux gabarits de pages de second niveau seulement ont fait l’objet de maquettes : Notre équipe et Questionnaire de satisfaction. Chaque établissement de l’association dispose d’une série de pages conçues sur les même gabarits ;
- Une page listant les Actualités et une page Actualité seule ;
- Une série de pages dédiées à présenter les activités de l’association : Association et ses pages de second-niveau : Autour de l’école, Prévention et santé, École et santé.
- Une page listant les Offres d’emploi émises par l’association et une page détaillant l’offre d’emploi ;
- Une page Contact ;
- Une page de résultats de recherche ;
- Une page Adhésions et dons.
Détails du guide de style du site Web : généralités et styles de texte (desktop et mobile).
4 Intégration HTML, CSS et WordPress
Le site a été adossé au CMS WordPress. L’intégration HTML, CSS et JavaScript a dont été complétée par la mise en place du socle WordPress :
- Intégration poussée de champs personnalisés à l’aide d’ACF : l’équipe de contribution compte une vingtaine de personnes, de niveaux informatiques divers. La contribution du site devait donc être la plus simple et efficace possible ;
- Mise en place des versions accessibles des extensions de gestion de cookies Complianz – GDPR/CCPA Cookie Consent et de formulaires de contact Contact Form 7. Ces versions accessibles ont été auditées et corrigées par Tanaguru en parallèle de la conception du site Web, pour répondre spécifiquement à nos besoins en la matière ;
- Le périmètre des navigateurs à prendre en compte contenait les dernières versions de Firefox, Safari, Chrome et Edge, mais également Internet Explorer 11. Tout au long de l’intégration, le site a été testé par une auditrice, en interne, et par moi-même, sur deux environnements différents (Windows et MacOs), les lecteurs d’écrans NVDA, Jaws et VoiceOver, ainsi que Browserstack ;
- L’intégration du site était mise à jour au fil de l’eau sur un dépôt GitHub privé, accessible à l’équipe de conception et au client uniquement ;
5 Le résultat
J’ai rencontré les principales difficultés dans la conception de ce site Web lors de son intégration. Cependant, des changements dans l’équipe projet et dans le périmètre du projet ont compliqué la feuille de route.
Le site Web a fait l’objet d’audits de conformité et de contrôle par une auditrice externe avant sa mise en ligne. Il était certifié totalement conforme au RGAA4 lors de sa mise en production, en septembre 2020.
