Éditions Nathan : une plateforme web centralisée pour gérer produits et contenus
Les éditions Nathan, acteur majeur dans le domaine éducatif, propose une gamme complète de ressources pédagogiques.
L'objectif du projet
Des manuels scolaires aux ouvrages pour la jeunesse, en passant par les outils numériques, leur expertise reconnue en fait un partenaire incontournable pour l'enseignement et l'apprentissage.
L'objectif du projet était de regrouper dans un seul site web tous les produits des éditions Nathan présents dans différents sites tout en mettant en avant tous les contenus proposés par la marque.
Pour cela nous avons mis en place un middleware qui s’interface aux différents systèmes d’informations du client et qui regroupe dans un unique back-office les outils permettant de gérer les besoins de chaque marché.
Le moteur de recherche interne au cœur du projet
En effet, afin de trouver le produit qu'ils recherchent, les internautes n'hésitent pas à taper dans la barre de recherche les mots clés correspondant.
Ainsi, ils peuvent obtenir en 2 clics des résultats de recherche pertinents et affiner ces résultats via des filtres.
Fait pour les professionnels de l'éducation
Le moteur de recherche interne de nathan.fr a été pensé pour répondre aux besoins quotidiens des professionnels de l'éducation et des particuliers.
Celui-ci a pour objectif de retrouver plus facilement des manuels ou des livres mais il permet également aux utilisateurs de découvrir tous les contenus qui viennent en complément des ouvrages.
Une barre de recherche qui précise les types de contenus trouvés ?
Cela concerne les résultats dans l'auto-complétion et tous les résultats.
- Une auto-complétion avant saisie : afin de mettre en avant des contenus récents ou très demandés
- Une auto-complétion intelligente avec les résultats les plus pertinents
- Des résultats de recherches catégorisés pour plus de clarté
- Des filtres primaires et secondaires personnalisés personnalisés pour affiner les résultats
La mise en œuvre est faite avec le moteur de recherche multimodale open source et sans coût de licence SolR.
Une mise en page personnalisée grâce au builder de page made by Kyxar
L’équipe projet de Nathan a également exprimé le besoin de pouvoir créer des pages de contenus personnalisées.
En effet, il y a dans le site Nathan des dizaines de pages de contenus : les pages de niveau scolaire (élémentaire, collège, ...), les pages pour les enseignants (collège + français, lycée + anglais, ...), les articles, les pages mettant en avant le numérique, ...
Nous avons donc fait évoluer notre builder de page afin de leur apporter de la souplesse tout en conservant de la cohérence :
- Structuration de la page en lignes et colonnes
- Mise à disposition de blocs personnalisés préformatés
- Intégration de différents types de contenu : titre, texte, images, vidéos ...
- Blocs automatiques de produits et d'articles : individuel ou carrousel avec critères
- Mise en page unifiée qui respecte la charte graphique définie
Interconnexion avec le système d’information
Les Éditions Nathan, ayant également son propre réseau d’outils, nous avons dû travailler à interfacer notre middleware avec leurs différents webservices et API pour :
- Importer l’intégralité des données des produits du PIM avec une surcouche de mapping pour gérer les deltas entres les différents SI
- Ajouter des produits au panier et commander
- Créer les comptes client et se connecter
- S’abonner à la newsletter selon le profil de l’utilisateur
- Envoyer les mails transactionnels personnalisés.
- Permettre aux enseignants de devenir prescripteur d’ouvrages
Toutes ces connexions étant monitorées et loguées, cela nous permet non seulement de nous assurer de la bonne exécution des tâches, mais aussi de recueillir suffisamment de données pour analyser les performances et détecter d'éventuelles anomalies.
Cela permet d'être pro-actifs en cas de problème et d'assurer la surveillance nécessaire au bon suivi des process.
Customisation de l'expérience client
Un des principaux enjeux est de fournir une expérience client personnalisée.
En effet, une fois connecté via la gestion centralisée des utilisateurs des sites Nathan, nous avons suffisamment d'informations pour personnaliser son expérience.
Pour un enseignant par exemple, nous connaissons son niveau d’enseignement, sa discipline ou sa classe ainsi que le département où il exerce, ce qui nous permet de lui afficher :
Son délégué pédagogique, les pages les plus utiles pour faciliter son expérience sur le site (exemple….) ainsi que des contenus et des ressources qui lui sont réservés.
Mais aussi de lui proposer sa ou ses pages personnalisées.
Et enfin, de lui apporter des contenus supplémentaires et ressources pédagogiques qui lui sont réservés dans les fiches produits et les articles.
Plus qu'un simple site de consultation, Nathan.fr est un véritable outil de travail au quotidien.
Réalisation d'une charte graphique pour le web
Avec le logo de la marque Nathan comme point de départ, la charte graphique était à construire entièrement.
La première étape a donc été de faire des ateliers afin de bien comprendre l'ensemble des besoins et des attendus.
Rapidement, nous avons pu réaliser des wireframes et prototypes interactifs, ce qui a permis au client de se projeter.
Ensemble, nous avons tout de suite réfléchi à l'UX aussi bien sur un grand écran de pc que sur mobile.
Cette étape de préparation est essentielle pour la suite du projet.
En parallèle, nous avons commencé à construire la charte graphique, en faisant des propositions pour créer tout un univers de marque :
- polices de texte
- palette de couleur
- icônes
- boutons d’action
- création d'éléments graphiques
Une fois les premières validations posées, les maquettes des pages ont tout naturellement découlé du travail effectué en amont.
Enfin, afin d'avoir un fil directeur dans la mise en page des contenus et pour les créations graphiques du client pour le site, nous avons réalisé un guide de styles qui regroupe l'ensemble des bonnes pratiques à avoir pour garder une harmonie graphique.
Cette phase, très complète, se traduit aussi par beaucoup d’échanges entre le client et notre équipe. Elle permet de partager ses contraintes métiers et de lui transmettre notre expérience, ainsi que les bests pratices en web et mobile. C'est une étape importante à ne pas sous-estimer.
Le site adopte une approche responsive pour une navigation fluide sur tous les supports. Il intègre également une démarche d’éco-conception visant à réduire son impact environnemental, ainsi que les recommandations du RGAA pour garantir une bonne expérience au plus grand nombre.
Une visibilité renforcée sur les moteurs de recherche
En collaboration avec l'agence SEO du client, nous avons réalisé un travail d'optimisation fin et précis.
En parallèle de la réalisation des maquettes, nous construisons ensemble le balisage sémantique :
- Définition de l'emplacement des balises Hn
- Remplissage des balises H1, title, et meta description selon des règles automatiques ou personnalisable
- Mise en place des balises canonicals qui permettent de régler le problème des contenus dupliqués.
Optimisation des images
Mais aussi l'optimisation des images : nommage des fichiers, attribut alt et balise title selon des règles automatiques ou personnalisables, format webp pour un temps de chargement optimal
Optimisation des performances
En complément, nous avons mis en place de multiples éléments de structuration et de performances :
- Un maillage interne automatisé
- Des données structurées personnalisées
- Le sitemap pour la Search Console
- Le robots.txt
- Un plan de site HTML
- Les balises pour la pagination
- Les balises sociales Open Graph
- Une pagination simple pour l’utilisateur et optimisée pour les moteurs de recherche.
