Comment a été conçu le centre d’action climatique en ligne de la BDC en quelques mois ?

par Coralie | 01/06/23

2023 | CRÉÉ TON SITE | Nouvelle section sur le site

BDC - Banque de Développement du Canada

BDC est la banque des entrepreneur·e·s canadien·ne·s, une société gouvernementale engagée et certifié B-Corp.

Demande initiale

Lorsque j'ai collaboré avec la BDC pour la 2nd fois, c'était pour les accompagner dans la création d'un centre d'action climatique en ligne pour aider les entrepreneur·e·s canadien·ne·s à réduire leurs émissions de GES. S'ils ont fait appel à moi, c'est surtout pour ces 3 raisons principales :

Créer une émulsion collaborative autour de ce projet collectif ;
Apporter une vision éthique et engagé dans la conception du projet : éco-conception, accessibilité numérique, inclusion ;
Arrimer et fédérer toutes les parties prenantes à ce projet autour d'une vision commune pour la conception de cette nouvelle section du site publique de la BDC ;

Leur demande : #Éthique #AteliersConception #Stratégie

Voir le site

Mon analyse et approche

J'ai basé mon accompagnement sur 3 axes clés pour répondre à leurs attentes.

Exploration

Au démarrage du projet, il a fallut définir plus en détails la vision commune autour de ce Centre d'Action Climatique. Pour ça, une première phase d'exploration a été établi grâce à la réalisation d'un benchmark inspirationnel et à la mise en place de quelques ateliers participatifs et stratégiques de co-conception : ateliers d'idéation, atelier mission, atelier vision, etc.

Conception

Puis nous avons construit un premier MVP pour donner vie et forme à ce Centre d'Action Climatique. D'abord sous forme de wireframes (squelette de la page en noir et blanc) puis de prototype interactif (en rendant les écrans cliquables et interactifs) pour présenter le concept aux équipes internes, mais aussi auprès du public visé.

Tests et itérations

Nous avons rencontré l'audience visée pour l'usage de ce nouvel espace sur le site de la BDC et lui avons fait testé notre MVP (réalisation de tests modérés via Teams + recrutement de l'audience via une agence de panels). Suite aux retours récoltés nous avons apporté les corrections nécessaires à notre MVP pour le faire évoluer progressivement. Nous avons réalisé plusieurs itérations de tests et corrections avant d'arriver à la version finale présente aujourd'hui sur le site.

Me contacter

Extrait de l'étude comparative pour déterminer le positionnement de la nouvelle rubrique dans l'écosystème déjà existant

Présenté aux différentes directions de la banque ainsi qu'aux vice-président·e·s

Actions réalisées

Pour rendre cette analyse la plus complète possible

Organisation et animation des ateliers de co-conception

J'ai planifié, imaginé et animé un atelier d'idéation pour amener ce projet à émerger grâce à la force du collectif. Au-delà de cet atelier, nous avons également organisé et animé en équipe 3 jours de design sprint consécutifs afin de faire grandir et naître concrètement l'idée définit au départ. Nous avons également organisé et modéré des entrevues au préalable de ce design sprint pour mieux comprendre les enjeux de l'audience ciblée.

Conception des wireframes en mobile-first

L'équipe de design UX et moi-même avons travaillé main dans la main à l'élaboration des premiers écrans wireframes du MVP. Pour ça, nous avons sketché ensemble les idées principales sorties des ateliers afin de nous assurer de bâtir un parcours fluide et cohérent entre les différents écrans. L'équipe UI s'est quant à elle assurer de la bonne réutilisation des composants existants du système de design de la BDC.

Organisation et modération des tests utilisateur·rice·s

Afin de bonifier au mieux notre MVP avant sa mise en ligne, il a été réalisé quelques sessions de tests utilisateur·rice·s modérés (via Teams) afin de valider à la fois le concept de la solution et l'utilisabilité des écrans conçus.

Mon rôle

Pour ce projet, la BDC et moi-même, en tant que Lead UX sur le projet, avons fait appel à une agence externe pour venir renforcer l'équipe UX/UI dans la réalisation de ce projet. C'est donc l'agence Sia Experience qui a collaboré avec notre équipe, dont Nadia Verreli, UI designer principale sur ce projet, interne à la BDC.

Toi aussi, comme la BDC, tu aimerais ajouter une nouvelle partie à ton site prochainement ?

Mon calendrier reste ouvert si tu souhaites me booker pour me parler de ton projet. Ce sera avec plaisir !

[dsm_button button_one_text="Planifier un jour VIP" button_one_url="@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6Ijk4NzUxNDYzOSJ9fQ==@" button_two_text="Me contacter" button_two_url="mailto:bonjour@petitspas-design.fr" button_alignment="center" _builder_version="4.27.5" _dynamic_attributes="button_one_url" _module_preset="default" custom_button_one="on" button_one_text_color="#F0EFE8" button_one_font="||||on||||" button_one_icon="$||divi||400" button_one_icon_color="#F0EFE8" custom_button_two="on" button_two_border_width="1px" button_two_border_color="#F0EFE8" button_two_icon="$||divi||400" button_two_icon_color="#F0EFE8" locked="off" global_colors_info="{}" button_one_bg_color__hover_enabled="on|hover" button_one_bg_enable_color__hover="on" button_one_text_color__hover_enabled="off|desktop" button_two_text_color__hover_enabled="on|hover" button_two_text_color__hover="#F0EFE8" button_two_bg_color__hover_enabled="on|hover" button_two_bg_color__hover="RGBA(255,255,255,0)" button_two_bg_enable_color__hover="on" button_one_bg_color__hover="RGBA(255,255,255,0)"][/dsm_button]

Aperçu du projet

Contexte

BDC amorçait un virage vers une expérience numérique plus stratégique et engagé. Alignée avec les valeurs profondes de l'entreprise déjà certifié B-Corp depuis de nombreuses années, offrant du conseils aux entrepreneur·e·s canadien·ne·s pour rendre leurs entreprises plus durables et les accompagnant eux-mêmes dans l'obtention de leur propre certification B-Corp, la BDC voulait continuer sur sa lancée et aller encore plus loin. Ce qui leur manquait c'était de proposer plus d'offres de financements pour développer des projets éco-responsables et d'outiller les entreprises pour faciliter leur passage à l'action concrète. C'est dans le cadre de cette deuxième étape que le centre d'action climatique s'inscrit.

Demande et objectifs

En effet, le but de ce Centre d'Action Climatique en ligne est de fournir les renseignements, ressources et outils nécessaires au passage à l'action pour par exemple : intégrer le climat à sa stratégie d'entreprise, Électrifier sa flotte de véhicule, rénover son bâtiment pour réduire ses émissions carbones, etc.

Le Centre d'Action Climatique s'est alors bâti sur 4 piliers de contenus : des actions, des articles, des outils et des études de cas (témoignages d'entrepreneur·e·s qui ont opérés une transition en faveur du climat). Mon accompagnement s'est donc également porté sur :

le maillage de ces divers contenus entre eux, mais aussi au sein de l'écosystème de ressources et outils déjà présent sur le site publique de la BDC, pour favoriser leur découvrabilité, fluidifier la navigation entre les parties et favoriser le référencement naturel (SEO).
la réflexion du positionnement de cette toute nouvelle rubrique de contenus sur le site de BDC.ca : soit comment l'intégrer et le promouvoir dans l'écosystème existant. 4 possibilités s'offraient à nous. Pour déterminer la meilleure option, j'ai réalisé une étude comparative des solutions et mené de nombreuses entrevues internes avec l'ensemble des responsables et directions de la BDC pour évaluer l'impact de chaque solution sur le SEO, le marketing, le développement, etc.
la sensibilisation, vulgarisation et application des principes d'éco-conception, d'accessibilité et d'inclusion sur cette section du site en respectant au maximum les critères en vigueur au Canada. Par exemple pour l'accessibilité, le référentiel en vigueur au Québec est le SGQRI (similaire au RGAA en France et basé également sur le WCAG).

Mon intervention

Au delà de mon rôle d'UX Designer principale sur ce projet et davantage en qualité de Lead UX, j'ai été le pont entre les équipes de directions internes, l'équipe de design interne et l'agence externe sollicitée sur le projet.

Résultats

Fort taux de traffic constaté sur les 6 mois après la mise en ligne du Climate Action Center et augmentation du nombre de demande de financement pour des projets de développement durable.

Environnement de travail

Collaboration collective au sein d'une équipe pluridisciplinaire qui s'est rassemblé à chaque jalon du projet.

Interlocuteur·rice·s

Directeur de l'écosystème web et directrice UX
Products Owners et équipe de développement
Lead UI Designer et UI Designer principale sur le projet
Chercheur UX
Rédactrice UX et rédacteur SEO
VP des différentes sections du site
Agence externe

Outils utilisés

Pour les entreveus et les tests : Teams
Pour la conception : Figma

GRATUIT

Obtiens 25 idées d'actions éthiques
pour améliorer ton site

Découvre 25 idées d'actions pour bonifier ton site et le rendre plus durable, inclusif, écologique et performant.

Découvrir la liste

Si tu as aimé le cas de la BDC,
tu devrais également adorer découvrir celui-ci...

Comment l’audit complet du site publique de la BDC a mené à une restructuration complète du menu de navigation en place depuis plusieurs années ?

Découvrir le projet

Exemple du revamp de la charte graphique de Margoo, avant et après

Sobriété numérique

Donner une seconde vie à son site web rapidement et facilement, c'est possible !

Je t'invite à lire quelques-uns de ces articles, qui sont les préférés des abonnés à ma newsletter l'ALTERNAVITE.

Explorer tous les articles

→ Est-ce bien utile d’avoir des couleurs éco-responsable sur son site ?

→ La méthode 80/20 : Comment l’appliquer à la conception de ton site pour le rendre éthique et éco-responsable

→ Ma routine d’analyse de site : comment je mesure l’impact réel de ton site web

Comment l’audit complet du site publique de la BDC a mené à une restructuration complète du menu de navigation en place depuis plusieurs années ?

par Coralie | 01/06/22

2021 - 2022 | CHECK-UP DE TON SITE | Amélioration continue

BDC - Banque de Développement du Canada

BDC est la banque des entrepreneur·e·s canadien·ne·s, une société gouvernementale engagée et certifié B-Corp.

Demande initiale

Lorsque j'ai collaboré avec la BDC pour la 1ère fois, c'était pour analyser de fond en comble l'intégralité de la section "À propos" situé sur leur site publique existant et notamment pour 3 raisons principales :

Mettre à jour les contenus de certaines pages du site (devenu obsolète) ;
Restructurer l'architecture d'informations de certaines pages afin d'améliorer leur lisibilité, visibilité et compréhension ;
Détecter les forces et faiblesses du site pour bâtir un plan d'action stratégique d'améliorations progressive et en continue.

Leur demande : #ArchitectureInfos #Audit #MiseÀJour

Voir le site

Mon analyse et approche

J'ai basé mon accompagnement sur 3 axes clés pour résoudre ses enjeux.

Audit complet du site web

L'intégralité du site a été passé au peigne fin : ergonomie, accessibilité, bonnes pratiques marketing et web, statistiques, cartes de chaleurs, parcours de navigation principaux. Tout a été analysé. Puis j'ai également organisé des tests utilisateur·rice·s pour vérifier certaines hypothèses.

Le constat : un site et une section "À propos" dans laquelle les gens se perdent facilement à cause navigation verticale peu structurée. Les utilisateur·rice·s abandonnent très vite leur objectif de base.

Axes d'améliorations

L'analyse a permis d'identifier des axes d'améliorations précis d'optimisations et notamment celui d'améliorer la découvrabilité de certaines sections stratégiques du site en créant une réelle expérience de navigation et d'exploration des divers contenus.

La solution : transformer le menu de navigation verticale propre à chaque section du site en un mega menu plus claire et efficace, qui pousse à la découvrabilité et la conversion.

Conception et tests

De nombreux ateliers de travail collaboratifs ont été nécessaire pour trier et prioriser les pages du site, revoir l'arborescence de l'écosystème au complet et arrimer toutes les parties prenantes responsables de chaque "section" du site.

Puis de nombreux tests et versions de maquettes ont été réalisés pour arriver à la version finale, présente aujourd'hui sur le site.

Me contacter

Extrait du rapport

Présenté aux différentes directions de la banque ainsi qu'aux vice-président·e·s

Actions réalisées

Pour rendre cette analyse la plus complète possible

Audit ergonomique et d'accessibilité

Réalisation d'un audit complet de l'existant pour constater les forces et faiblesses du site. Le focus a été mis sur la section "À propos" du site. Néanmoins certains critères évalués comme "non respectés" ou "à améliorer" ne concernait pas uniquement cette section et s'étendaient plus largement à l'ensemble du site.

Analyse statistique et étude des parcours

Pour compléter l'audit réalisé et appuyer certains axes de recommandations, il a été mis en place :

une analyse statistique complète des données collectées par Google Analytics.
une étude des comportements et parcours de navigation grâce à Mouseflow (carte de chaleurs, d'attention et de clics).

Tests utilisateur·rice·s sur le site existante

Puis, afin de confirmer et d'enrichir les propos du rapport d'analyse, il a été réalisé quelques sessions de tests utilisateur·rice·s non-modérés via User Testing. Ces dernières nous on permis de constater la réelle difficulté d'usage de la navigation sur le site existant et de recuillir de nombreux verbatims qui confirme l'ensemble des hypothèses émises dans le rapport.

Rapport et présentation

Dernière étape, présenter les résultats aux stake-holders concernés (+ direction et vice-présidence) afin de les convaincre de modifier la structure générale de navigation sur l'ensemble du site pour rendre la découvrabilité de chaque section, offre, outils désirable, fluide et engageante afin d'augmenter le taux de conversion général du site.

Toi aussi, comme la BDC, tu aimerais upcyclé ton site prochainement ?

Mon calendrier reste ouvert si tu souhaites me booker pour me parler de ton projet. Ce sera avec plaisir !

[dsm_button button_one_text="UPCYCLER son site" button_one_url="@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6Ijk4NzUxNTc0OSJ9fQ==@" button_two_text="Me contacter" button_two_url="mailto:bonjour@petitspas-design.fr" button_alignment="center" _builder_version="4.27.4" _dynamic_attributes="button_one_url" _module_preset="default" custom_button_one="on" button_one_text_color="#F0EFE8" button_one_font="||||on||||" button_one_icon="$||divi||400" button_one_icon_color="#F0EFE8" custom_button_two="on" button_two_border_width="1px" button_two_border_color="#F0EFE8" button_two_icon="$||divi||400" button_two_icon_color="#F0EFE8" locked="off" global_colors_info="{}" button_one_bg_color__hover_enabled="on|hover" button_one_bg_enable_color__hover="on" button_one_text_color__hover_enabled="off|desktop" button_two_text_color__hover_enabled="on|hover" button_two_text_color__hover="#F0EFE8" button_two_bg_color__hover_enabled="on|hover" button_two_bg_color__hover="RGBA(255,255,255,0)" button_two_bg_enable_color__hover="on" button_one_bg_color__hover="RGBA(255,255,255,0)"][/dsm_button]

Aperçu du projet

Contexte

BDC amorçait un virage vers une expérience numérique plus stratégique et avait la volonté de restructurer une bonne partie du site pour qu'il reflète davantage les ambitions de la nouvelle présidence. Cela allait notamment s'accompagner dans le futur d'une évolution de la direction artistique du site et d'une digitalisation des demandes de financement de la banque. Néanmoins, l'analyse commanditée au départ par la direction ne prévoyait pas de révéler que le système de navigation du site représentait un frein majeur à l'accessibilité et la performance de leurs offres et contenus.

Demande et objectifs

Ce frein majeur a été relevé grâce à l'audit complet et aux tests utilisateur·rice·s que j'ai réalisé sur plusieurs mois. Il n'y a donc pas eu de demande officielle pour ce projet au départ, mais nous avons réussi à faire prioriser cette initiative en lui apportant de la visibilité grâce au rassemblement et à l'implication de l'ensemble des équipes produits. Nous avons donc travaillé main dans la main autour des objectifs suivants : améliorer l'accès aux services clés, clarifier l'organisation de l'information pour refléter les priorités d'affaires, engager les parties prenantes dans une logique centrée utilisateur·rice, augmenter la conversion des demandes de financement.

Mon intervention

Suite à mon analyse et en tant qu'UX Designer principale, j'ai donc initié ce projet de refonte de la navigation du site de la BDC, accompagné les équipes internes à trier et prioriser l'ensemble de leur écosystème dense (+10 000 pages) souffrant d'une architecture obsolète, réalisé les premiers wireframes du mega menu, puis testé et bonifié ce dernier sur 3 itérations.

Lors des tests d'arborescence et tri de cartes, +200 utilisateur·rice·s ont participé (FR/EN). Cela nous a permis d'identifier et corriger les freins à l'accessibilité de l'information encore présents. Puis, au fil des itérations, les tris de cartes ont permis de faire émerger une nouvelle structure hiérarchique de navigation.

Nota bene : après avoir testé et bonifié les premières arborescences et écrans du futur menu de navigation, j'ai engagé la passation de ce projet à un autre UX Designer. Ce dernier à continuer le projet jusqu'à sa livraison finale.

Si j'ai délégué ce projet, c'était pour monter sur un autre projet plus stratégique encore pour la BDC, celui de la création d'un centre d'action climatique en ligne pour aider les entrepreneur·e·s Canadien·ne·s à réduire leurs émissions de GES.

Résultats

+30% d'utilisation de la navigation principale constaté dans les 3 mois après la mise en ligne du mega menu.

Environnement de travail

Collaboration collective au sein d'une équipe pluridisciplinaire qui s'est rassemblé à chaque jalon du projet.

Interlocuteur·rice·s

Directeur de l'écosystème web et directrice UX
Products Owners et équipe de développement
Lead UI Designer
Chercheur UX
Rédactrice UX et rédacteur SEO
VP des différentes sections du site

Outils utilisés

Pour l'analyse et les tests : Optimal Workshop, User Testing, Teams, Maze, Google Analytics, Mouseflow
Pour la conception : Figma

GRATUIT

Obtiens 25 idées d'actions éthiques
pour améliorer ton site

Découvre 25 idées d'actions pour bonifier ton site et le rendre plus durable, inclusif, écologique et performant.

Découvrir la liste

Si tu as aimé le cas de la BDC,
tu devrais également adorer découvrir celui-ci...

Comment a été conçu le centre d’action climatique en ligne de la BDC en quelques mois ?

Découvrir le projet

Sobriété numérique

Donner une seconde vie à son site web rapidement et facilement, c'est possible !

Je t'invite à lire quelques-uns de ces articles, qui sont les préférés des abonnés à ma newsletter l'ALTERNAVITE.

Explorer tous les articles

→ Est-ce bien utile d’avoir des couleurs éco-responsable sur son site ?

→ La méthode 80/20 : Comment l’appliquer à la conception de ton site pour le rendre éthique et éco-responsable

→ Ma routine d’analyse de site : comment je mesure l’impact réel de ton site web

Comment repenser les flows de conversation d’un chatbot pour diminuer le nombre d’appels inutiles au service à la clientèle ?

par Coralie | 31/12/21

Comment permettre aux entrepreneur·e·s canadien·ne·s de faire une demande de financement en ligne de A à Z ?

par Coralie | 29/09/21

Comment Vidéotron est passer d’un site vitrine à e-commerce pour se transformer en pleine pandémie mondiale ?

par Coralie | 20/05/21

2020 - 2021 | UPGRADE TON SITE | De la vitrine au e-commerce

Comment Vidéotron est passer d'un site vitrine à e-commerce pour se transformer en pleine pandémie mondiale ?

Vidéotron est un des géants de la télécommunication au Québec : téléphonie mobile, boxes internet, forfaits TV, et autres.

Demande initiale

Lorsque j'ai collaboré avec Vidéotron en pleine pandémie mondiale, l'enjeu était de taille. J'ai rejoins leur équipe de designers dans une période cruciale pour eux, instaurer la vente en ligne sur leur site publique existant. En effet, avant la pandémie, au Québec, prendre un téléphone et son forfait associé ne pouvait se faire qu'en succursale physique pour cette enseigne. S'ils ont fait appel à moi, c'est surtout pour ces 2 raisons principales :

Penser les parcours client·e·s efficacement pour rendre le site vitrine publique en mode e-commerce ;
Créer le squelette (wireframes) de chaque écran du parcours, en "mobile-first", avec toutes leurs subtilités : achat d'un téléphone avec ou sans forfait, choix du téléphone, du forfait, du nombre de giga, etc, jusqu'au paiement.

Leur demande : #MobileFirst #Wireframes #Stratégie #ParcoursClient·e·s

Voir le site

Mon analyse et approche

J'ai basé mon accompagnement sur 3 axes clés pour répondre à leurs attentes.

Découverte et analyse

Au démarrage du projet, je me suis intégrée à l'équipe de designers existante, qui avaient démarré le projet depuis quelques semaines sur la phase exploratoire : entrevues client·e·s, personas, objectifs stratégiques et business. J'ai donc pris connaissance de toute leur phase de recherche, compris les enjeux et également découvert leurs contraintes techniques. J'ai ensuite organisé et animé un atelier collectif afin qu'on imagine nos process internes de travail idéaux.