L'expérience utilisateur au cœur du nouveau site de Business at OECD

Client

À propos

  • Organisation politique internationale
  • Paris, France
  • Plus de 4 500 salariés
  • Conseil

Un site internet créatif pour promouvoir une croissance durable des entreprises

S'adressant à des interlocuteurs du monde entier, Business at OECD se doit d’augmenter sa visibilité sur le web. Dans ce contexte, l'organisme international a fait le choix de refondre totalement sa plateforme à travers le CMS Hubspot. Cette étude vous explique en détail les coulisses de la création d’un site web empruntant les codes d’un marketing créatif.

51
Pages publiées sur le site
4
Motions créés sur-mesure
39
Modules flexibles designés et développés sur des maquettes animées
Maquette isométrique du site internet Business at OECD

Faciliter le parcours de conversion web avec la création d'un site innovant

Présentation de l'entreprise

Créé en 1962, Business at OECD est un organisme politique international contribuant à la croissance et au développement d’entreprises de tous secteurs. Mettant en relation autant des multinationales que des PME avec les gouvernements membres de l’OCDE, elle promeut des économies compétitives et des pratiques commerciales durables.

Quelques informations sur Business at OECD : 

  • 60 ans d’expérience dans la mise en relation entre les entreprises, l’OCDE et les gouvernements
  • Un réseau de près de 3 000 représentants d’entreprises partout dans le monde. Des entrepreneurs, des dirigeants de PME/TPE ou encore de multinationales.
  • 7 millions d'entreprises sont représentées dans le monde.

3 challenges à relever pour refondre le site internet

À travers son site internet, Business at OECD s’adresse à des interlocuteurs du monde entier et de diverses structures : décisionnaires en entreprises, organisations professionnelles, gouvernements et médias. Un contexte qui les poussent à développer un site web créatif et innovant, dédié à l’ensemble de leurs personæ.

Les 3 grands défis de cette refonte de site :

  1. Moderniser le site web à travers une charte graphique unique et créative.
  2. Concevoir des modules personnalisés et flexibles permettant aux équipes marketing de gérer et mettre à jour les contenus simplement.
  3. Développer une plateforme à destination de 4 typologies de personæ différentes, travaillant au sein d’industries et structures variées.

Les solutions apportées à Business at OECD

Pour tout projet de refonte de site, il est primordial de définir des étapes clés, concernant à la fois la conception et le développement.

  • Définition de la direction artistique Business at OECD : conception d’un benchmark complet ainsi que d’un moodboard.
  • Création des modèles de pages : conception et design des maquettes ergonomiques et graphiques, des animations, puis développement technique des pages.
  • Publication de leur nouveau site web : plan de marquage, recettage et plan de redirection.

1. Définition de la direction artistique Business at OECD

Avant même de commencer le design du site, il est essentiel de réaliser un benchmark inspirationnel. Ce benchmark va être mené en 3 phases. L’objectif est d’identifier l’ensemble des axes d'amélioration à apporter et les techniques les plus efficaces pour booster l’activité du site.

Première partie : un benchmark concurrentiel
L’idée est de situer le site par rapport aux concurrents, d’identifier leurs avantages comparatifs et de détecter les zones à travailler. Il ne s’agit pas de copier les méthodes employées, mais avant tout d’analyser les propres enjeux de Business at OECD. Où se situent vos faiblesses ? Vous rencontrez par exemple des difficultés pour trouver des visuels qui vont impacter votre audience ? Vous pouvez utiliser un benchmark pour analyser la concurrence et comprendre leurs pratiques. 
C’est aussi l’occasion de vous mettre à jour sur les nouvelles tendances du marché, pour ensuite les appliquer à votre site internet.

Deuxième partie : un benchmark de fonctionnalités
Pour cette seconde étape, nous avons identifié les fonctionnalités et pratiques web les plus efficaces pour les visiteurs. Celles qui servent leurs objectifs et apportent une vraie valeur ajoutée, ou au contraire celles qui complexifient le parcours utilisateur. Cette analyse a permis à nos équipes de déployer des fonctions satisfaisant les besoins utilisateurs et capables de générer un engagement.

Troisième partie : un benchmark design
La dernière partie du benchmark concerne le design et l’ergonomie. Business at OECD souhaitant créer une plateforme unique, les enjeux d’identité visuelle étaient capitaux. Il fallait avant tout réfléchir à une interface qui sorte de l’ordinaire, à tous les niveaux du site. Cela concernait l’ensemble des éléments de la charte graphique, tels que les titres, boutons d’appel, couleurs, polices, etc.
Ce benchmark global peut être utile à toutes les problématiques rencontrées lors d’une création de site : 

  • La rapidité de chargement des pages
  • L’efficacité des boutons d’appel à l’action
  • La qualité des landing pages
  • La mise en avant des preuves clients
  • etc.

C’est une méthode à ne pas négliger afin d’améliorer les performances et la qualité de votre site web.

Nous avons ensuite entamé la construction d’un moodboard, afin de dessiner une vision design et anticiper les futures maquettes graphiques.
Grâce à l'analyse des meilleures pratiques web, nous avons rassemblé les éléments les plus innovants pour ce projet. La conception d’un moodboard a permis à l’équipe design de partager exactement ce qu’ils avaient en tête au client. Templates de sites inspirants, polices d’écriture, photographies, palettes de couleurs, et autres paramètres graphiques selon les besoins de l’organisation.

Moodboard de Business at OECD


2. Création des modèles de page

Les équipes design et développement ont rencontré ici un grand défi face aux attentes de Business at OECD. L’organisation souhaitait sortir du lot, avec un site animé et créatif, proposant de nombreuses animations. Hors, ciblant une large catégorie de personæ, il s’est alors posé la question de l’accessibilité. Toutes les structures n’ayant pas les mêmes connaissances en matière de numérique. Il fallait mettre en place des solutions pour que les comportements soient les plus simples à interpréter et logiques possibles.Pour cela, plusieurs animations 3D ont été réalisées. Le but étant que le client puisse prévisualiser les pages et avoir une idée du rendu final. Parmi ces animations, nous retrouvions notamment :

  • Une animation présentant l’ensemble des éléments de la page principale

 

HubSpot Video

 

  • Une animation deux-en-un permettant de voir le menu dans un contexte de parcours utilisateur

 

HubSpot Video

 

Une problématique s’est également présentée au niveau de la page “Policy Groups”. Cette page comprend un nombre important de catégories qui devaient toutes être visibles. La seule option était un système de liste, avec un concept de survol, afin de garder de l’animation et pousser l’utilisateur à interagir. Ce concept de survol a par ailleurs été utilisé pour d’autres pages du site web.

 

HubSpot Video

 

Afin de célébrer ses 60 ans d'existence, Business at OECD souhaitait une page spécifique. Une landing page sous forme de timeline, présentant toutes les dates clés de l’organisation, a donc été conçue. Lors du défilement de la page, chaque date s’adapte au contenu et aux images, rendant la lecture plus agréable.

 

HubSpot Video

 

Une fois l’ensemble des maquettes graphiques et motions validés, il restait alors à intégrer les modèles de page. Contrairement à une stratégie inbound marketing, c’est ici l’aspect graphique qui a pris le dessus. Avec des motions et des animations poussées, les temps de développement et de design ont par conséquent été impactés. Suite au travail des développeurs, les équipes de Business at OECD disposent désormais d’un site qui correspond à leurs attentes. Un site à la fois institutionnel, promouvant l’image de l’organisation, simple d’utilisation, et surtout unique par son aspect créatif.

3. Publication de leur nouveau site web

Dernière étape et pas des moindres, la sortie du site. Les équipes ont suivi un processus très précis afin de s’assurer que la mise en ligne soit parfaite. Première phase, le plan de marquage. Il permet de faire remonter les données des visiteurs, et suivre leurs actions, ainsi que leurs parcours. Ces données seront ensuite exploitées pour adapter le site selon les comportements utilisateurs. Afin d’optimiser ce plan de marquage ainsi que le SEO, il est important de travailler sur l’ensemble des contenus de la plateforme : call-to-actions, balises alternatives, formulaires, mots-clés, etc.

Deuxième phase de cette sortie de site, le plan de redirection. Dans un projet de refonte de site, cela consiste à renvoyer l’intégralité des anciennes pages vers le nouvel équivalent. Après avoir identifié l’ensemble des URL de l’arborescence de l’ancien site, nous avons pu définir leur nouvel équivalent et créer les redirections. En négligeant ce travail, nous aurions couru à plusieurs risques pour le site de Business at OECD : 

  • Baisse du trafic en provenance des moteurs de recherche, le temps que les nouvelles URL s’intègrent.
  • Déclassement dans les pages de résultats, lié à la disparition des backlinks initiaux.

Enfin, le grand final avant la mise en production, le recettage. Afin de s’assurer que le site soit conforme aux attentes du client, nous analysons la totalité des livrables, selon trois catégories : 

  • Le design, en s’assurant que les maquettes animées et les motions ont bien été respectées.
  • La technique, grâce à des tests de performance et des corrections des problématiques rencontrées.
  • Le marketing, pour vérifier la cohérence des contenus et leur optimisation pour le référencement naturel.

Les résultats

Cette refonte de site a permis aux équipes de Business at OECD de bénéficier d'une plateforme unique et sur-mesure. Plus de 50 pages ont été publiées, toutes travaillées pour rendre le site le plus animé possible, et répondre à un défi créatif de taille. Si vous aussi, vous étudiez un projet de refonte, découvrez une sélection de sites web incontournables créés sur le CMS Hubspot

Nos équipes

Les membres de l’équipe qui ont contribué à construire ce projet
  • Photo de Clara Delabrosse

    Clara Delabrosse

    Consultante CRM et Inbound Marketer

  • Photo de Marin Leclerc

    Marin Leclerc

    Développeur front-end

  • Photo de Killian Le Bras

    Killian Lebras

    Web Designer

"Nous sommes rentrés en contact avec Make the Grade l’année dernière. Nous avons rencontré Clara, notre Account Manager, qui a été le pilier de cette collaboration. Côté Webdesign, Kilian a su capter parfaitement nos inspirations. Les animations créées sont impressionnantes. Enfin, nous n’avons pas rendu la vie facile aux équipes de développement, mais Marin a su répondre parfaitement à nos attentes.
Le résultat final est un site web dont nous sommes très satisfaits.
Un grand merci à Make the Grade !"


Photo de Jack Bowerman

Jack Bowerman


Communication Coordinator

Nos actualités

Continuer la lecture

Visuel de preview de l'étude de cas Jalios

Jalios

Une intégration CRM HubSpot et une formation sur-mesure pour Jalios

formation automatisation

Preview de l'étude de cas client DriveQuant

DriveQuant

Un site web moderne qui accélère l’acquisition de leads de DriveQuant

inbound marketing

Preview de l'étude de cas Steeple

Steeple

Steeple fait confiance à Make the Grade pour auditer son CRM HubSpot

hubspot

Preview de l'étude de cas client Kemmrod

Anticiper sa croissance avec une stratégie inbound marketing et SEO

inbound marketing

Preview de l'étude de cas Luckycart

Luckycart

Lucky Cart élabore ses tableaux de bord HubSpot grâce à Make the Grade

migration de données

Preview de l'étude de cas client APIA

APIA

APIA génère 3 fois plus de leads grâce au CMS HubSpot

inbound marketing

Étude de cas sur l'échelle de Likert

Anonyme

Créer un lead magnet en échelle de Likert avec les workflows HubSpot

inbound marketing

Preview de l'étude de cas Hybrigenics Service

Hybrigenics Service

Comment Hybrigenics Service a déployé le CRM HubSpot avec Make the Grade ?

paramétrage crm

Pattern de preview étude de cas Fabernovel

Fabernovel

Fabernovel fait confiance à Make the Grade pour sa migration de données sur le CRM HubSpot

paramétrage crm