Book'in Diffusion : refonte d'un site B2B dédié à l’édition accessible
Fournir des bibliothèques et médiathèques en contenus éditoriaux accessibles implique des processus bien différents d’un e-commerce classique.
Retour sur la refonte d’un site e-commerce B2B sur mesure, conçu pour répondre à des contraintes métier fortes, tout en s’inscrivant dans une logique d’évolutivité.
Book’in Diffusion est un fournisseur spécialisé en éditions accessibles et adaptées, à destination des médiathèques et bibliothèques. Ils proposent à la vente des livres imprimés en gros caractères, en Braille, Dys, FALC, LSF, ainsi que de nombreux types de documents sonores (accompagnés ou non du support papier).
Dans un contexte de croissance et d’évolution des usages, Book’in Diffusion a exprimé le besoin de faire évoluer son site de vente en ligne. L’existant ne répondait plus pleinement aux attentes, tant sur le plan graphique que fonctionnel, et limitait les possibilités d’évolution à moyen et long terme.
La refonte de leur site avait donc plusieurs objectifs :
- moderniser techniquement et graphiquement,
- adapter au responsive,
- maintenir les processus métier existants,
- faciliter les imports produits / clients et la mise à disposition de fichiers,
- respecter les bonnes pratiques d’accessibilité,
- mettre en place de newsletters spécialisées pour accroître le lien avec la clientèle.
Le choix du CMS s’est porté sur WordPress, afin de disposer d’une base robuste et facilement évolutive. Ce CMS offre une gestion intuitive des contenus via un back-office déjà abouti, tout en permettant de répondre à des besoins fonctionnels complexes grâce à des développements sur mesure.
Dans le cadre de ce projet, WordPress constitue un socle fiable sur lequel s’appuyer pour construire un site B2B capable de gérer une volumétrie importante de produits et de s’adapter aux spécificités métier du client.
Chez Imagile, nous avons développé plusieurs outils permettant de personnaliser WordPress et WooCommerce pour enrichir leurs usages. Nous avons notamment développé un système de composants rédactionnels, offrant à nos clients une grande autonomie dans la gestion et l’évolution de leurs contenus.
Pour la partie e-commerce, le site s’appuie sur WooCommerce, solution reconnue pour sa fiabilité et sa capacité à gérer des catalogues produits volumineux. L’utilisation de ce socle e-commerce nous a permis de bénéficier d’un tunnel d’achat et d’une gestion des produits fonctionnels. Par ailleurs, le plugin WooCommerce répond déjà dans son développement aux contraintes d’accessibilité numériques.
Nous avons donc pu nous concentrer sur les développements des fonctionnalités métier spécifiques de Book’in Diffusion et avons personnalisé WooCommerce pour s’adapter aux contraintes propres aux bibliothèques et médiathèques.
Par exemple, des champs spécifiques aux produits ont été ajoutés pour répondre au besoin d’interfaçage avec la base de données de nos clients et de leurs acquéreurs, tels que :
- Auteurs,
- Éditeur,
- Date de parution,
- Langue d’édition,
- EAN
- …
Grâce au mapping, ces données sont automatiquement renseignées lors des imports produits via des fichiers XML, garantissant la cohérence des informations et facilitant la gestion d’un catalogue de plus de 15 000 références.
Afin de faciliter la gestion du site pour nos clients, il a fallu mettre en place plusieurs scripts d’import. Le site comportant plus de 15000 références, il aurait été trop chronophage pour notre client de maintenir à jour l’ensemble des produits sur sa base de données interne, ainsi que sur le site.
Un interfaçage dynamique n’étant pas possible, le script d’import a été la meilleure solution. Les imports se font au format XML, avec plusieurs produits à la fois dans un même fichier, ainsi que les fichiers audio/images, qui sont fournis par notre client en même temps.
Plusieurs ateliers ont été nécessaires entre l’équipe de développement et l’équipe Book’in Diffusion pour déterminer le mapping des éléments, ajuster les nommages, présenter les tests, …
Afin d’assurer une gestion fiable sur la durée, nous avons vérifié différents cas d’usage lors des tests :
- fichier au mauvais format,
- fichier mal encodé ou avec caractère spécial non compris,
- fichier conforme avec 5 produits,
- fichier conforme avec 500+ produits,
- fichier conforme avec 1000+ produits.
Lors d’un passage de commande, plusieurs fichiers sont à mettre à disposition de l’acquéreur :
- la facture,
- le bon de livraison,
- 2 notices UNIMARC en 2 encodages différents (UTF-8 et ISO 5426), contenant l’arborescence des fiches UNIMARC des produits commandés.
La facture et le bon de livraison sont déposés en FTP sur le serveur, et nous avons conjointement cadré le nommage des fichiers afin de pouvoir automatiquement mettre à disposition les bons fichiers aux bons acquéreurs.
Les imports des fichiers depuis le dépôt FTP (des produits, des factures, des bons de livraison et des notices) pour la mise à disposition des acquéreurs dans leur espace personnel se font automatiquement toutes les 2 heures. Par ailleurs, ces scripts fonctionnent en tâche de fond et n’impactent pas la navigation sur le site.
Vous avez un projet web avec des contraintes métier spécifiques ?
E-commerce B2B ou B2C, gestion de catalogues complexes, automatisations, accessibilité : contactez-nous pour échanger sur votre projet et définir une solution adaptée à vos besoins.
La particularité de ce site de vente est que les utilisateurs doivent pouvoir créer plusieurs « paniers », correspondant à des listes de multiples produits. Cette problématique a nécessité un atelier dédié afin de préciser le besoin fonctionnel et définir la solution la plus adaptée.
Nous avons abouti à une solution « plugin », en utilisant un plugin de wishlist qui vient supplanter le tunnel d’achat classique.
Le nouveau parcours utilisateur devient donc celui-ci :
- création de listes multiples,
- demande de devis,
- mise à disposition des devis dans l’espace client,
- validation de devis qui vaut passage en commande.
Par ailleurs, cet outil de wishlist permet également à l’équipe de Book’in de préparer des listes pré-faites pour aider leurs clients dans leurs choix.
Dans un contexte de commerce à destination d’organisations institutionnelles, la structuration des rôles utilisateurs et de leurs périmètres d’action constitue un enjeu central. Le site devait refléter fidèlement l’organisation entre responsables et acquéreurs, en tenant compte de leur appartenance à des groupements et à des établissements, avec des droits adaptés à chaque profil.
L’organisation fonctionnelle repose sur la structure suivante :
- plusieurs établissements sont rattachés à un même groupement,
- chaque compte client est associé à un établissement,
- un établissement peut disposer de plusieurs adresses de livraison,
- le groupement possède une adresse de facturation unique.
Par conséquence, la notion d’établissement a été pleinement intégrée au processus de commande. Les acquéreurs peuvent pré-enregistrer plusieurs adresses de livraison dans leur espace personnel, ce qui simplifie et accélère la prise de commande. Cette organisation permet de s’adapter aux réalités des structures multi-établissements, tout en conservant une vision centralisée et cohérente des commandes depuis l’espace client.
Ce site, comme les produits proposés, s’adresse à des utilisateurs susceptible d’être en situation de handicap ou présentant des besoins de lecture spécifiques. Il était donc indispensable de porter une attention particulière aux enjeux d’accessibilité et de lisibilité dès les premières phases de conception, ainsi qu’à l’UX et l’UI (expérience utilisateur et interface utilisateur).
Afin d’améliorer le confort de lecture, un dispositif permettant d’agrandir significativement la taille des contenus a été intégré à l’interface. Ce bouton reste flottant sur le côté de la page et est également accessible depuis le pied de page.
Les choix graphiques ont également été guidés par une vigilance particulière sur les niveaux de contraste, afin de garantir une lecture confortable sur l’ensemble des supports.
Une attention spécifique a par ailleurs été portée à la structuration des contenus et au traitement des images, qu’elles soient porteuses d’information ou purement décoratives, afin de faciliter l’usage du site avec des technologies d’assistance telles que les lecteurs d’écran.
En termes d’expérience utilisateur, chaque catégorie est associée à une couleur, chacune étant un dégradé d’une couleur principale de ces trois grands groupes :
- Le contenu audio en vert
- Le contenu écrit en orange
- La lecture multi-langues en bleu
Autre élément clé en faveur de la lisibilité du site : le choix de la police d’écriture. Sur un site à destination d’un public susceptible d’être en situation de handicap visuel, la typographie joue un rôle central. L’espacement des lettres, la forme des caractères ou encore leur différenciation influencent directement la compréhension et la fluidité de lecture.
Afin de prévenir ce type de problématique, nous avons sélectionné la police Atkinson Hyperlegible. Créée par l’Institut Braille, cette police hyperlisible® est conçue pour améliorer la lisibilité, notamment pour les personnes malvoyantes. Les lettres et les chiffres ont été dessinés pour être clairs et très distinctifs, rendant la lecture plus facile et plus accessible.
Ces choix s’inscrivent dans une démarche globale de respect des bonnes pratiques d’accessibilité numérique, en cohérence avec la mission de Book’in Diffusion.
Quelques articles sur notre approche de l’accessibilité et de l’UX/UI
La refonte du site a permis à Book’in Diffusion de se doter d’un outil de vente en ligne plus moderne, plus lisible et pleinement adapté aux usages B2B spécifiques aux domaines des bibliothèques et médiathèques. Le nouveau design, associé à une charte graphique optimisée pour tous les supports, améliore la consultation des contenus tout en conservant une identité claire et structurée.
Sur le plan fonctionnel, le site offre désormais une expérience plus fluide pour les acquéreurs, avec une page d’accueil dynamique pour les utilisateurs non connectés, affichant de manière aléatoire les dernières nouveautés, ainsi que des outils dédiés pour les clients connectés. Les utilisateurs peuvent créer et gérer de manière autonome des listes de produits, puis générer des demandes de devis directement depuis ces listes, dans une interface repensée.
La mise en place de scripts d’import pour les produits permet de maintenir le catalogue à jour de manière fiable, malgré une volumétrie importante. Plusieurs automatisations ont également été développées afin de récupérer, générer et mettre à disposition les notices et documents liés aux commandes, réduisant les traitements manuels et sécurisant les échanges.
Enfin, un espace client complet centralise l’ensemble des fichiers mis à disposition, tandis que des newsletters spécialisées offrent un nouveau levier de communication ciblée.
Cette refonte a permis à Book’in Diffusion de disposer d’un site e-commerce B2B robuste, évolutif et parfaitement aligné avec ses contraintes métier.
En s’appuyant sur WordPress et WooCommerce, tout en développant des fonctionnalités sur mesure (imports massifs, paniers multiples, gestion documentaire, accessibilité renforcée), le nouveau site constitue un outil fiable pour nos clients et simple d’usage pour les acquéreurs institutionnels.
Une base technique pérenne, conçue pour accompagner durablement le développement de l’édition accessible.
Être fournisseur auprès de collectivités publiques demande au quotidien d'être à l'écoute des besoins de chaque acquéreur pour toujours y répondre au plus près avec autant d'efficacité que de réactivité.
C'est dans cet esprit que nous avons conçu notre nouveau catalogue en ligne. C'est dans cet esprit qu'Imagile l'a réalisé et nous accompagne aujourd'hui : une équipe bienveillante et à l'écoute où chacun a sa place et son domaine d'expertise pour une expérience client non seulement conforme à nos attentes initiales mais sans cesse améliorée.
Notre approche vous séduit ?
Contactez-nous, ou venez nous rencontrer pour discuter de vos projets.