Vie de l'agence
02/01/2024
Un carré, un rond, une goutte : notre nouveau site Drupal !
25 ans, c’est l’âge que vient de célébrer bluedrop.fr en octobre dernier. Histoire de marquer la transition, on s’offre un nouveau site Drupal, plus en phase avec notre identité actuelle. L’occasion de mieux valoriser les acquis sur lesquels nous pouvons désormais capitaliser et notre dynamisme pour écrire une belle et longue suite…
Les objectifs de la refonte
- Aligner le design de l’interface sur notre nouvelle charte graphique, plus actuelle et plus en phase avec notre identité
- Une montée en version de Drupal 7 à Drupal 10
- Améliorer l’expérience utilisateur
- Mieux refléter notre identité : au-delà de la simple présentation de nos services, parler de notre histoire, des valeurs et des engagements qui sont les nôtres
Pour y parvenir, nous avons adopté la même méthodologie que pour les projets web de nos clients, à savoir un travail par étapes (UX design, UI design, développement…) et l’organisation de nombreux ateliers internes à chaque phase pour réfléchir et arbitrer collectivement.
Notre point de départ : notre ancien site dont la page d'accueil vous est présentée ci-dessous.
Étape 1 : le positionnement
Première étape : bien formuler notre positionnement et nos différents objectifs de communication sur le site.
D’abord, au niveau de notre savoir-faire, nous sommes avant tout spécialistes du CMS Drupal. Nous fournissons toute l'expertise qui gravite autour de l'écosystème Drupal. Nous proposons une chaîne de production de projets web complète (conseil, pilotage de projet, conception UX et UI design, développement, hébergement, maintenance). De plus, nous sommes experts en projets web complexes (usine à site, intranet, site corporate…) et en solution métier (solution de transports, solution RH…).
Ensuite, au niveau de notre savoir-être, nous sommes proches de nos clients et nous sommes concrets : nous ne promouvons pas du rêve, nous avons les pieds sur terre. Nous allons jusqu'au bout de nos projets, nous trouvons toujours des solutions à chaque situation. Nous refusons de faire ce que nous ne maîtrisons pas. Nous utilisons des mots simples et compréhensibles par tous. Et nous sommes engagés en matière d’open source, d’accessibilité, de protection des données, d’éco-conception et de RSE.
Il y a beaucoup de “nous”, mais on est concret, vous voyez ?
Étape 2 : soigner l’expérience utilisateur
Nous avons réalisé :
- Un benchmark UX design
- Un audit de l’existant, analyse des statistiques
- Des recherches utilisateur : interviews des utilisateurs du site (nos clients)
- L’arborescence et les parcours utilisateur
Dans notre menu de navigation, nous avons décidé de proposer différents onglets :
- La page d’accueil : un aperçu global de notre identité et de nos services
- La page L’agence : notre histoire, nos valeurs, notre équipe
- La page Nos engagements : l’accessibilité, le RGPD, l’éco-conception, l’open source, la RSE
- La page Nos services : développement, UX et UI design, maintenance et sécurité, gestion de projet
- La page Nos projets : nos études de cas, la présentation de nos clients et leurs témoignages
- La page Le blog : nos articles sur Drupal, la vie de l’agence et l’UX et l’UI design
- La page Contact : la porte d’accès à nos potentiels futurs clients et collaborateurs
Étape 3 : concevoir le design de l’interface
Vient ensuite l’étape de conception UI design. À ce titre nous avons réalisé :
- Un benchmark UI design
- Les maquettes désignées responsives appuyées sur notre nouvelle charte graphique qui s’article autour des formes carré, rond, goutte et des couleurs beige et bleu
- Un shooting au bureau pour avoir de vraies photos de nos équipes en action
Étape 4 : on développe !
Au niveau du développement, nous avons créé de nombreux paragraphes pour une expérience de contribution riche et flexible. Dans la même veine, nous avons ajouté plusieurs types de contenu : des études de cas, des clients, des témoignages, des pages de base, des pages engagements, des pages services…
Nous sommes aussi passé à Drupal 10 afin de bénéficier des dernières nouveautés de Drupal telles que l’amélioration du CKEditor, la fonctionnalité Theme Starterkit permettant de générer un nouveau thème indépendant dérivé d'un thème de base…. Plus d’informations sur ces nouveautés dans notre article !
Étape 5 : on optimise en continu
Performance et référencement
Afin de construire une expérience utilisateur fluide et rapide, il convient de soigner la performance du site, un élément qui influence également son référencement naturel et l’impact environnemental du site. Pour cela, plusieurs bonnes pratiques sont mises en place, notamment la compression des images, la minimisation des requêtes HTTP et code, etc.
Nos efforts nous ont permis d’atteindre des scores Lighthouse très honorables. Lighthouse est un outil automatisé open source permettant de mesurer la qualité des pages web au prisme de différents critères (performance, SEO, accessibilité...). Voici nos principales notes obtenues en matière de performance.
Page Accueil : 86 %
Page L’agence : 83 %
Page Nos services : 90 %
Page Nos projets : 100 %
Le SEO
Le référencement est un autre élément essentiel dans la création d’un site internet. Dans notre cas, le référencement naturel est un de nos principaux outils commerciaux de génération de leads. En effet, dès la première création du site, nous avions mis en place une stratégie de référencement solide en déployant toutes les bonnes pratiques SEO (soigner les URLs, balisages des titres, publication fréquente de contenus…). Pour preuve, nous sommes le premier lien référencé par Google lorsqu’on saisit “agence web Drupal” (hors liens sponsorisés).
Dès lors, dans le cadre de cette refonte, une de nos contraintes essentielles fut de conserver les acquis de notre référencement solidement établi. Nous avons pour cela :
- Procédé à la migration d’une partie du contenu existant, notamment de nos articles de blog
- Bien conserver les mêmes URLs de pages
Selon Lighthouse, la plupart de nos pages principales atteignent un niveau de 100 % en matière de SEO.
L’accessibilité
Comme pour tous nos projets, nous voulions que notre site soit accessible à tous les publics (personnes âgées, en situation de handicap…).
Différentes bonnes pratiques nous permettent d’y parvenir. Par exemple, en matière d’accessibilité, le contraste des couleurs doit être suffisant, les images doivent comporter des balises de description, etc. Plus d’informations dans notre article dédié. Objectif atteint puisque nous avons validé nos efforts avec un audit d'accessibilité réalisé via le RGAA, le Référentiel général d’amélioration de l’accessibilité de l’Etat. Nous avons obtenu un score de 92 % attestant d’une conformité partielle. Pas mal, non ?
L’éco-conception
De la même manière que pour nos projets clients, nous avons également tenu à limiter l’impact environnemental de notre site via une démarche d'éco-conception basée sur les 115 bonnes pratiques d’éco-conception du GreenIT et le Référentiel général d'écoconception de services numériques (RGESN).
Pour cela, il convient par exemple de ne pas utiliser de carrousel au scroll infini, de limiter le nombre de requêtes, de compresser les fichiers CSS et Javascript… Plus d’informations sur les bonnes pratiques d’éco-conception dans notre article dédié.
Dans une logique d’amélioration continue, nous prévoyons d’optimiser notre score à travers la mise en place de nouvelles bonnes pratiques et un audit d’éco-conception via le RGESN.
Un beau projet qui s'achève et auquel une grande partie de l’équipe a contribué. Maintenant, on attend vos avis ! Le site vous plaît, vous avez des retours constructifs ou des compliments ? Spammez notre formulaire de contact, on a hâte de vous lire !
