Ce que j'ai fait

  1. Recherches utilisateurs, ateliers UX, personae
  2. Arborescence, wireframes, gabarits de contenu
  3. Maquettes graphiques et guide de style
  4. 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 :

  1. Atelier recueil des besoins, personæ et définition du MVP (Minimum Viable Product) ;
  2. 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.
Cinq exemples de personæ conçus pour le site des PEP Grand Oise – Description détaillée ci-dessous.

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

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 guite de style

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.

Vous recherchez une designer à même de vous accompagner dans vos projets de sites Web accessibles ?

Contactez-moi

Retour au portfolio