BNF Passerelle(s)
Refondre avec la Bibliothèque Nationale de France une plateforme pédagogique sur l'histoire et la culture des métiers de la construction

2019
Site internet

Image historique des toits de Paris, des artisants de différent corps de métier travaille

Un site pour valoriser les métiers du bâtiment

Passerelle(s) est le fruit d’un partenariat entre le CCCA-BTP et la Bibliothèque Nationale de France pour valoriser les métiers du bâtiment et les mailler avec l’histoire des constructions de l’homme dans le temps. À destination des apprentis du BTP comme du grand public, le site est un véritable centre de ressource qui recense plus de 65 constructions avec des multiples modules pédagogiques, plus de 80 fiches histoire, plus de 170 œuvres d’art à la loupe et une vingtaine de quizz.

Les enjeux de notre intervention sont les suivants :

  • Refondre un ensemble complexe de contenus existant, développé initialement de façon statique 
  • Penser le site toute plateforme dans une ergonomie responsive 
  • Moderniser le design du site.

L’objectif est de rendre le site Passerelle(s) responsif, contribuable et actualisable.

Audit de l’existant

L’experience map et sa restitution permettent de partager les frictions ressenties et les pistes d’amélioration du service. Le partage des frictions et de nos recommandations permettent de définir une matrice commune d’amélioration du projet.

Restitution de l'experience map du site Passerelle

Prototypage mobile-first

Le site a été pensé en mobile first puis déployé aux autres devices. Un prototype navigable a été présenté au client pour ajustement et itération.

Identité visuelle

Nous avons travaillé sur une identité représentative des métiers du bâtiment,
de l’architecture et de l’histoire : un logotype modernisé inspiré des constructions, une gamme colorielle faite de noir, jaune, gris et blanc cassé, des typographies structurées (Replica, Assistant, Simplon).

 

Présentation du nouveau logo de Passerelles
Vu de la charte colorielle, noir, jaune, gris, beige
Pictos représentants les métiers du site Passerelles

Création graphique de l’interface

Un site qui valorise le contenu par l’image pour une meilleure adoption. Système de mosaïque, images full screen, titre auto-porteur, un travail spécifique a été fait pour afficher le moins de contenu texte sur les templates de niveau 1 et 2 et pour valoriser les contenus image, audio et vidéo.

Page d'accueil du site avec une valorisation des constructions ou métiers, des chiffres clefs...
Page détail du métier menuisier, avec une présentation et une vision des différents modules et documents à explorer

Des modules variés

Les contenus sont valorisés grâce aux nombreux modules : diaporama, image à explorer, audio, vidéo, quiz. La diversité des formats d’information et l’usage de modules ludiques rend l’expérience plus engageante, notamment pour cette cible jeune (15-25 ans).

Vision de plusieurs modules, exemple: diaporama photo, vidéo, quiz, image à explorer...

Frise chronologique

Nous avons pensé une frise chronologique immersive qui replace les constructions dans les grands moments historiques de l’humanité.
En deuxième plan sont présentées des fiches arts et sciences qui valorisent les découvertes scientifiques et les sujets artistiques qui préoccupent les contemporains de l’époque.

Frise chronologique de l'histoire des constructions, de l'antiquité à aujourd'hui
Vu de 3 écrans du déroulé de la frise chronologique en mobile
Déclainaison d'un écran sur format tablette

« Nous apprécions particulièrement l’efficacité dans l’identification des besoins, la souplesse et la rigueur dans le suivi des modifications, la qualité d’écoute, la prise en compte des contraintes en veillant à la cohérence de la proposition
graphique. »

Matthieu Canto
Directeur de projets multimédias, Service des Éditions multimédias, Département des Editions

Projet suivant

AMSE - Dialogues économiques

Comment mettre en scène la pensée des chercheurs de l'École d'Économie d'Aix-Marseille  : un site média et une revue annuelle pour diffuser l'économie autrement

Aperçu d'une page intérieur du livre d'économie