Mise en production du nouveau site du CAUE 13 et préparation à Drupal 9

Contexte de la collaboration

Créé en 1980 à l’initiative du Conseil départemental dans le cadre de la loi sur l'architecture du 3 janvier 1977, le CAUE des Bouches du Rhône (Conseil d'Architecture, d'Urbanisation et de l'Environnement des Bouches du Rhône) est une association loi 1901 investie d’une mission de service public pour la promotion de la qualité de l’architecture, de l’urbanisme et de l’environnement.

Il accompagne les élus, les collectivités locales, les institutions et les particuliers dans leurs démarches d’aménagement et d’urbanisme. Il assure sur le territoire des Bouches-du-Rhône à la fois une offre technique, pédagogique et culturelle dans la conduite de ses missions assignées par la loi : conseiller, former, informer et sensibiliser tous les acteurs et citoyens d’un territoire à la qualité du cadre de vie.

Le CAUE 13 collabore avec l'agence bluedrop.fr depuis fin 2015. Après avoir développé et exploité son précédent site, propulsé par Drupal 7, l'équipe du CAUE 13 a souhaité refaire son site. Problème : que faire ? Conserver tout ou partie des contenus ? Simplifier le périmètre fonctionnel du précédent site ? L'enrichir ? Insister sur quelle cible ?

Nous avons par conséquent organisé une phase préalable d'analyse, axée sur les utilisateurs, avec un groupe élargi de collaborateurs du CAUE 13.

Un phase de conception UX préalable à la rédaction du cahier des charges

Deux équipes face à face : le rêve pour une équipe projet élargie, des ambitions collectives et des objectifs à confronter. Le projet de refonte du site du CAUE 13 a commencé dans une euphorique "cacophonie". Nous avons par conséquent conseillé aux deux équipes projet l'organisation d'ateliers de confrontation des objectifs et parcours pour garantir le succès de la direction donnée au projet. Deux journées d'atelier ont été organisées :

• Une première journée de synthétisation de l'objet de l'association, de définition de ses utilisateurs et d'analyse des statistiques de fréquentation de l'ancien site ;
• Une seconde journée de travail autour des parcours utilisateurs et d'un atelier de design studio de la future page d'accueil du site.

Les résultats ont ensuite été validés par l'équipe de Direction du CAUE 13.

Phase 1 - Syntèse de l'objectif du site

Les échanges et l'analyse des statistiques de l'ancien site ont permis de déduire les objectifs de la refonte : 

• Promouvoir l’architecture et le conseil auprès des particuliers et élus ;
• Sensibiliser le grand public à l'objet de l'Association ;
• Assurer une mission de formation à l'attention des élus.

Le site doit par conséquent se présenter comme un outil public de proximité. Le CAUE 13 n’offre pas un service technique mais une plus-value culturelle / intellectuelle (notamment avec des permanences dans les communes). Il convient par conséquent de revoir le périmètre des ressources mises à disposition.

Phase 2 - Atelier de définition des personas

L'équipe projet dans son ensemble a ensuite construit des proto-personas (profils d’utilisateurs types et les parcours utilisateurs correspondants.) Les proto-personas ont permis de définir les utilisateurs cibles et
de les catégoriser par importance. Quatre cibles principales ont été retenues :

• les élus / techniciens;
• les particuliers porteurs de projet ;
• Les enseignants ;
• les architectes conseils et prestataires.

Phase 3 - Ateliers de design studio

Ces ateliers, organisés lors de la seconde journée de travail, on consacré :

• Tri du contenu du site
  Cet atelier a eu pour objectif d'analyser le contenu de l'ancien site à conserver ou supprimer. 
• Elaboration du menu du futur site
  Cet atelier a permis de créer une arborescence (menu) du futur site en créant une architecture cohérente avec les parcours utilisateurs et les principaux personas.
• Zoning et wireframe de la page d'accueil
  Cet atelier a eu pour objectif de concevoir, ensemble, la page d'accueil du futur site. Les meilleures idées retenues lors de la phase de vote du design studio ont permis d'imaginer et de créer cette maquette.

Le prototypage et le design d'interface

Suite à la validation des résultats des ateliers UX, le déploiement des wireframes a non seulement été facilité, mais il a permis de spécifier simplement et plus rapidement le périmètre fonctionnel du site. 

Ces premiers ateliers ont en outre validé la méthodologie de concertation généralisée indispensable à la conception et la validation des maquettes UI, dans le cadre de la méthode dite "atomic design". Les équipes ont continué à s'écouter, la phase de production des maquettes a été facilitée.

Pour finir, l'équipe du CAUE 13 a souhaité intégré les travaux d'un illustrateur pendant la conception UI. Nous avons donc, avec plaisir et dans l'intérêt de la qualité et l'originalité du projet, intégré les travaux de Thibault Rassat.

Le développement avec Drupal 8

Le site a été réalisé avec Drupal 8 et un thème reposant sur Foundation. L'idée, tout au long du développement, a été d'anticiper les évolutions de contenu à l'initiative des contributeurs du site. Près de 22 paragraphes ont été intégrés et mis à disposition des contributeurs (par l'intermédiaire du module paragraphs). Seuls 4 modules sur-mesure ont été développés pour répondre à des besoins spécifiques concernant les blocs et pour faciliter l'import des contenus de l'agenda. La recherche repose sur l'utilisation du module SolR et permet une recherche rapide et optimisée. L'équipe de développement a en outre travaillé à la performance du site tout au long des cycles de développement.

La préparation à Drupal 9

Dans l'optique de la montée en version vers Drupal 9, l'équipe projet a régulièrement testé l'obsolescence des dépendances. Le site est quasiment prêt à la montée en version vers Drupal 9.

Le site : https://www.caue13.fr
Mise en production : Juin 2020.
Maquettes : Consulter les maquettes sur Figma
Illustrateur : Thibault Rassat
Sur le blog : Mise en production du site caue13.fr - 24/05/2016
Étude de cas : Refonte du site du CAUE 13.