Projet : mairie de cagny
La page web de la Mairie de Cagny est une vitrine web responsive qui sert à renseigner et rapprocher les citoyens de la commune de Cagny, en Normandie. Elle leur permet de rester informés des actualités de leur région, de trouver toutes les informations pratiques et de suivre l’activité de leur Mairie.
Afin de protéger mon client j’ai exclu quelques étapes de notre collaboration et j’ai évité de publier certaines informations sensibles (noms, chiffres d’affaire, etc).
AVANT
après
MON RÔLE
Mon rôle était de designer l’architecture et l’expérience utilisateur de la vitrine et de surveiller la création de l’UI.
J’étais aussi responsable du bon déroulement de ce projet.
J’ai collaboré avec un graphiste et une équipe technique afin de finaliser ce produit.
Phase de recherche
Kick-off meeting
J’ai commencé avec un kick-off meeting afin de bien comprendre mon client et ses attentes. J’ai eu l’honneur de connaître Madame le maire ainsi ques beaucoup des élus de Cagny. C’était un étape très importante qui m’a permis d’identifier les personnes responsables du contenu des divers sections du site.
Ensemble nous avons cadré notre méthode de communication, responsabilités et créneaux. Nos échanges m’ont aussi appris beaucoup sur leur communauté et les méthodes de communication préférés par les citoyens. Je suis restée en contact et échange continue avec la Mairie en tant que chef de projet tout au long du développement.
User research et personas
Pendant mes échanges avec la Mairie j’ai reçu beaucoup d’informations concernant les types d’informations que ses citoyens recherchaient le plus (données statistiques). Ainsi j’ai pu facilement identifier les fonctions du site à prévoir en priorité. J’ai également pu créer un document avec les données que la Mairie souhaitait partager. J’ai continué mes interviews avec la personne responsable de la communication afin de mieux comprendre le comportement des membres de la communauté et ses coutumes.
Avec les informations ramassées, j’ai pu créer quelques personas qui m’ont aidé à mieux cibler mes efforts en design.
(exemple d’une persona crée pour ce projet)
Phase de design
Architecture de l’information et card sorting
Après mon premier échange avec la Mairie j’ai reçu la liste des pages devant apparaître dans la vitrine. Les élus ont proposé une architecture de l’information, mais après un audit et quelques tests je l’ai trouvée trop profonde et de navigation difficile. En utilisant des techniques de card sorting, j’ai restructuré l’architecture afin d’avoir une construction plus large et intuitive. J’ai aussi consulté notre spécialiste de SEO afin de changer quelques termes qui me paraissaient peu clairs, et ensemble nous avons trouvé des mots plus parlants et faciles à référencer.
Audit
Vu que l’ancienne vitrine n’existait plus (victime d’un attaque cybernétique), j’avais une liberté totale pour la création du site.
Competitive research
J’ai benchmarké des sites de mairie de villes de diverses tailles afin d’étudier comment ils présentaient à leurs citoyens les informations publiques.
J’ai aussi trouvé beaucoup d’inspiration pour pouvoir contenir une grande quantité de données sur un écran mobile.
UX Cards
En utilisant UX cards j’ai fait une session de brainstorming pour définir les éléments qui pourraient attirer les citoyens à visiter fréquemment de site de la Mairie. L’idée derrière le design des fonctionnalités était de donner un sens de la communauté aux visiteurs.
Technical research
J’ai ramassé quelques fonctionnalités possibles et j’ai parlé avec mon équipe technique afin de vérifier qu’il serait possible de les implémenter avec les contraintes de CMS Drupal et dans le temps et le budget prévu.
J’ai éliminé certaines possibilités et j’ai pu en modifier d’autres afin de les faire marcher avec nos contraintes techniques.
Atelier de co-conception et Wireframes
Ensuite j’ai animé un atelier de co-conception avec mon graphiste afin de définir l’UI de la vitrine. Je lui ai présenté tous les éléments nécessaires de vitrine que j’ai identifié et une première esquisse de wireframe de la page d’accueil et de quelques pages intérieures. Suite à notre échange et aux déclinaisons du projet, j’ai préparé encore plusieurs esquisses des wireframes pour une utilisation en interne.
User Testing (phase 1)
J’ai mené quelques guérilla tests avec mes wireframes et mes collègues afin de vérifier que le design allait dans la bonne direction.
Maquettes
J’ai surveillé le travail du graphiste afin de m’assurer que la maquette préparée était conforme aux demandes du client, aux attentes des utilisateurs et aux possibilités techniques et budgétaires du projet.
User Testing (phase 2)
En utilisant UX cards j’ai fait une session de brainstorming pour définir les éléments qui pourraient attirer les citoyens à visiter fréquemment de site de la Mairie. L’idée derrière le design des fonctionnalités était de donner un sens de la communauté aux visiteurs.
Présentation et itération
J’ai ensuite présenté le design final à mon client en personne. Les discussions autour du design m’ont permis de légèrement ajuster certaines fonctionnalités afin de les harmoniser avec le mode de travail de la Mairie.
Développement et Recettage
J’ai effectué une passation technique et surveillé tout le processus de développement et d’intégration de la vitrine. J’ai assisté mon équipe technique sur tous les problèmes rencontrés et modifications nécessaires. J’ai également recetté le produit final afin de m’assurer que tout était conforme à la maquette et il n’avait pas d’erreurs.
Formation
Pour compléter ce projet j’ai animé la formation Drupal du futur administrateur de la vitrine. Je lui ai donné tous les outils de maintenance de la vitrine et aujourd’hui je suis très fière de mon élève, qui fait du travail exemplaire !
Sommaire
PROBLÉMATIQUES DU PROJET
- Faciliter l’identification du lieu (il y a un autre Cagny en France)
- Donner un accès facile aux citoyens aux informations pratiques
- Garantir la transparence de la Mairie et rendre les élus plus approchables
- Promouvoir les initiatives citoyennes
SOLUTIONS
- Accès facile aux informations pratiques (surtout sur mobile)
- UI ludique, qui met en valeur la beauté naturelle de la région
- Accès rapide accès aux services le plus consultés par les citoyens
- Implémentation d’un agenda comprenant les événements à venir
- Implémentation des actualités
- Information détaillée sur toutes les associations et les commerces de Cagny
- Galerie photo à la une
- Informations touristiques
- Distribution du bulletin municipal
- Distribution des comptes rendus du conseil municipal
Remarques finales
Challenges
J’ai appris à jongler entre mes responsabilités de designer UX et de chef de projet. Ce n’est pas toujours facile de se concentrer quand beaucoup de gens et de problèmes demandent toute ton attention! Ça nécessite beaucoup de planning et parfois de multitasking, mais au final, je suis très fière du résultat obtenu.
Le plus grand challenge en développement de ce projet était lié au temps de réponse de la part du client. Malheureusement, dans le cas des organismes publiques, les processus de prise de décision peuvent être longs. De la même manière, le contenu est parfois fourni après la date prévue.
Mon agence et moi avions déjà travaillé avec ce type d’organismes et les délais de réaction étaient pris en compte dans notre planning, ce qui nous a permis de finir le projet en temps prévu.
LEÇONS et surprises
J’étais honnêtement surprise de découvrir que la petite communauté de Cagny est très active (et exigeante !) dans le secteur des nouvelles technologies. Leur conscience informatique était vraiment impressionnante.
Les citoyens utilisent Internet pour communiquer avec leurs élus et la Mairie a déjà lancé son service de renseignement Citykomi qui est maintenant utilisé régulièrement par plus de 20% du public.
Cet information m’a permis de proposer une expérience plus moderne sans crainte de confondre les utilisateurs.
Travailler avec ce client était un vrai plaisir. Le futur administrateur du site était vraiment engagé dans notre projet. C’était très important pour moi d’avoir, dans processus de design, la possibilité de consulter quelqu’un qui connaissait très bien les besoins des utilisateurs.
Cela m’a aussi donné beaucoup de satisfaction de pouvoir créer une vitrine qui aidera réellement à encore mieux intégrer cette communauté pleine de gens actifs.
Résultats
Les habitants de Cagny aiment le nouveau portail et le visitent souvent et volontiers.
Sur une période entre mi-février (deux semaines après lancements du site) et mi-mai 2018 la Mairie de Cagny a noté une croissance de 400% du nombre de ses visites.
L'opinion de mon client
”Olga s’est chargée de me former sur le site Internet de Cagny. J’ai aimé sa manière de s’adapter en un éclair à mes connaissances. Elle a su m’expliquer en douceur quand mes aptitudes étaient limitées et au contraire ne pas s’attarder sur des points que je maîtrisais. Ce fût une formation très efficace puisque je ne rencontre aucune difficulté aujourd’hui pour la saisies des informations. Au-delà de ses compétences pédagogiques, j’ai ressenti tout de suite une réelle sympathie pour Olga. Nos rencontres se sont toujours déroulées dans un climat très amical, dans la simplicité.
Je suis vraiment satisfaite du produit final, le site est très intuitif et pratique, Olga a su apporter les modifications que je demandais et répondre à mes demandes dans les meilleurs délais.
Je recommande donc vivement ses services.”
