Lycée Jeanne d’Arc Rennes

Portail responsive et agrégateur de flux

Le Lycée Jeanne d’Arc est à Rennes une institution depuis 1927.
Cet établissement de renom accueille en 2014-15 pas moins de 1130 élèves et étudiants répartis sur 3 cycles : lycée technologique, lycée professionnel, enseignement supérieur.

Carte postale du Lycée Jeanne d'Arc de RennesAfin de refléter la dynamique du projet d’établissement, une refonte de son site Internet a été décidée selon ces principes fondateurs :

  • valoriser les compétences, l’expérience et la dynamique « projets » du Lycée Jeanne d’Arc afin de faire du site un vecteur de communication prioritaire,
  • présenter clairement et simplement l’ensemble des formations et le projet d’établissement.

Il convenait donc de re-penser un dispositif qui soit :

  • plus efficace (lisibilité, ergonomie, actualité),
  • plus attrayant (mise en page, iconographie),
  • plus moderne (interactivité, réseaux sociaux),
  • plus accessible (navigation mobile, référencement naturel).

Bref, un site conçu pour ses utilisateurs, au plus près de leurs besoins.

Elèves du Lycée Jeanne d'Arc à Rennes

Dans UX, il y a Utilisateur…

Pour marier les 3 dimensions de ce projet (stratégie, image, fonctionnalité), nous avons décidé de nous concentrer sur l’internaute, en commençant par analyser les types d’utilisateurs du site actuel, et d’en déterminer les besoins au sein du futur site.

Les différentes cibles établies (élèves et parents, futurs élèves, professeurs, entreprises, partenaires, etc.), il convenait de lister les parcours-clefs optimaux pour chacune d’entre elles. Du papier, un crayon, des notions de benchmark, l’analyse des statistiques d’audience du site actuel et la liste des étapes de navigation par type d’usager a naturellement pris forme.

La vision globale qui en a découlé a permis de comprendre à quel point la page d’accueil ne serait pas le guichet unique des visites entrantes, une très grande part des visiteurs étant appelés à « atterrir » sur une page de niveau 2 ou 3. D’où l’intérêt de mettre en place des éléments de guidage très accessibles, déterminant précisément où l’utilisateur se trouve dans le site, et lui permettant de se déplacer dans un univers normé et proche de ses aspirations.

Éléments de navigation du site LJA Rennes

Quelques bonnes pratiques facilitant le repérage utilisateur : menu actif, fil d’ariane, titre 1 et 2 très repérables.

Le design, un tout

Afin de remplir correctement les objectifs, il convenait de revisiter l’identité digitale du Lycée, sans toutefois s’éloigner de ses codes de communication habituels. Concevoir un site responsive doté de contenus très denses suppose de faire des choix très forts en matière de design.

Une salle de pause au sein du Lycée Jeanne d'Arc

Vue d’une salle de pause au sein du Lycée Jeanne d’Arc. L’ajout de personnages au crayonné permet d’animer une photo trop « statique », de base.

Les partis-pris pour résoudre cette équation furent établis :

  • une approche très photographique, mettant en scène l’humain
 au premier plan,
  • la mise en scène des expériences « terrain » via des témoignages,
  • l’écriture d’un discours de preuves et adapté au web,
  • une épure dans les codes graphiques employés,
  • une structure de site à la géométrie simple et aérienne,
  • la réduction des fonctionnalités à l’essentiel et vraiment utile.

Devant la quantité impressionnante de contenus présents sur l’ancien site, nous avons décidé que notre premier acte de design serait de nous occuper… des contenus.

Former à l’écriture pour le Web

Cette formation aux bonnes pratiques d’écriture pour le web, conduisant à re-visiter les principes du référencement naturel, a permis de faire prendre conscience au comité éditorial à quel point il était nécessaire de structurer et d’alléger la masse de contenus à diffuser au sein du site.

LJA - Formation SEO Bonnes Pratiques

Ce groupe avait alors l’été pour écrire selon ces principes, nous pouvions organiser dans l’intervalle un atelier de co-conception avec le client pour imaginer l’interface-du-futur

Le prototypage, c’est la vie

On vous l’a déjà mentionné dans Prototyper pour mieux tester, la conception consiste à modéliser les futurs usages du site. En fonction des premiers contenus écrits par l’équipe du Lycée, nous avons pu nous confronter aux problématiques du rendu Responsive de certains éléments :

  • les tableaux de données,
  • les contenus toujours très longs (par nécessité), à maintenir au sein d’une même page,
  • les galeries photos et les ressources téléchargeables,
  • les listes structurées (de programmes pédagogiques, par exemple),
  • etc.

Le sujet du menu de navigation a notamment fait l’objet d’un soin particulier, en fonction de la plateforme d’usage (PC, tablette ou mobile), il convenait d’adopter la forme la plus adaptée :

Les différents rendus des menus du Lycée Jeanne d'Arc

Doctor Flat Design au rapport

Sur le plan visuel, forts de nos premiers principes de conception, nous avons fait appel au Flat Design pour servir les objectifs premiers de l’interface :

  • permettre une identification immédiate,
  • renforcer la marque et le positionnement du Lycée,
  • focaliser l’utilisateur sur le fond (message), et pas la forme (décoration).

Reconnaissons en effet à cette approche une capacité à nous simplifier la vie pour ce type de projets :

  • aucune fioriture, uniquement de l’information : La forme dit la fonction,
  • grande souplesse de personnalisation de l’identité à travers des gammes colorées ne nécessitant d’image,
  • légèreté de l’interface, car moins de médias sont embarqués (réduction des effets, des icônes, des textures, etc.),
  • modularité maximale, propice à une structure en grilles faisant appel au Responsive Design.

Proposition créative en Flat Design par LunaWeb

Sur la base d’anciens documents de communication dont nous avons extrait l’essentiel (simplicité, épure, jeu rouge / blanc / gris comme base), nous avons mis en œuvre les signes essentiels de l’interface à venir :

  • un logo dont il fallait rajeunir le rendu, et trouver une astuce pour le raccourcir sur mobile,
  • une typo qui devait être très lisible, web compatible et au diapason des valeurs d’ouverture du Lycée,
  • une gamme de couleurs souple, contrastée, permettant de jouer sur l’opacité d’une même teinte pour générer différents état d’un élément,
  • des composants graphiques de base (flèches, chevrons, pictogrammes) ne laissant aucun doute sur leur signification,
  • une base photographique faisant la part belle aux « vrais gens », et l’usage du crayonné pour conduire la métaphore des futurs élèves (l’illustration comme fil conducteur du présent et de l’avenir).

Refonte du logo Lycée Jeann d'Arc opérée par LunaWeb

 

Aspects techniques

La gestion par blocs

Côté technique, l’orientation éminemment éditoriale du site nous a conduit à mettre en œuvre un socle assez simple, basé sur la notion de blocs de ressources (texte, image, galerie, vidéo, téléchargement, sommaire, etc.) qu’il suffit d’activer librement pour servir les besoins de chaque page, sans devoir imposer un ou plusieurs modèles figés.

Du sur-mesure donc, afin de s’adapter aux contenus très variés à ventiler (présentation du Lycée, liste des formations, annuaire du personnel…).

En contexte de Responsive Design, c’est d’autant plus utile que chaque bloc va adopter un comportement prévisible lors des passages successifs en vue mobile, tablette ou PC. C’est aussi l’assurance de pouvoir disposer d’un outil très permissif en matière de « création éditoriale », mais très normatif sur l’apparence générée. Un gage de respect de la charte et de l’adaptabilité multi-plateformes.

Extrait du back office du Lycée Jeanne d'Arc

L’interface d’administration des contenus permet de composer une page librement, en choisissant parmi plusieurs types de blocs adaptés aux besoins du Lycée Jeanne d’Arc, répondant chacun à des règles de rendu spécifiques et normés.

un moteur de recherche by Google

Nous avons fait le choix de doter le site d’un moteur de recherche qui s’appuie sur la technologie Google : un internaute qui tape une requête se voit donc, sans quitter le site, proposer une page de résultats qui émane de l’algorithme de la firme aux 5 couleurs.

Le niveau de personnalisation offert par ce système permet d’offrir une navigation « sans couture » et n’oppose donc aucune rupture au sein du parcours utilisateur sur le site. C’est bien, c’est beau, et c’est pas cher !

Le moteur de recherche du Lycée Jeanne d'Arc

Un agrégateur de réseaux sociaux

En plus de ce site, un besoin particullier s’est fait jour : pouvoir remonter au sein du site les contributions issues des réseaux sociaux, sur une seule page et dont l’affichage par ordre chronologique serait lui aussi accessible sur PC, tablette et mobile.

L’intérêt : rendre compte de l’actualité du Lycée de manière simple, spontanée et plurielle. Professeurs, étudiants et « suiveurs » du Lycée peuvent ainsi proposer une actualité courte (texte, image, ou les deux à la fois) en déposant un post sur Twitter ou Instagram muni du mot-clef #lyceejarennes.

Pour éviter les abus, respecter la charte éditoriale de l’établissement et harmoniser le rythme de publication, une modération a priori permet de contrôler toute contribution avant sa publication ; la pratique de la multi-publication entraînant parfois des doublons du même message sur chacun des réseaux concernés.

Fidèles à notre démarche du sur-mesure utile, nous avons retenu 2 sources parmi les réseaux sociaux utilisés par le LJA : Instagram et Twitter (voir un exemple d’agrégateur basé sur 8 flux).

Cet outil se connecte aux API des réseaux concernés, met en tampon les informations disponibles, et affiche au sein d’une même page chaque contribution, sous un format adapté et homogène. Ainsi, la provenance ou le contenu de chaque « post » ne met pas en péril le confort de navigation.

Un agrégateur de flux issus des réseaux sociaux, par LunaWeb

De la photo souvenir d’un voyage de classe à l’étranger à l’annonce des portes ouvertes, l’ambition de cet outil est de mutualiser l’effort de communication. C’est donc un « relai de ce qui se passe ailleurs », mais également pour le Lycée un moyen de gagner en visibilité externe. En toute logique, cet outil conduit à l’acquisition rapide de nouveaux abonnés sur le profil Twitter et Instagram du LJA.

Conclusion

Nous retirons de ce projet de multiples satisfecit, à commencer par ce témoignage de notre client :

Nous avions besoin de refondre entièrement notre site Internet, devenu en partie obsolète au regard de l’évolution des technologies et des supports. Après une consultation auprès de plusieurs agences, nous avons retenu LunaWeb pour la proposition la plus adéquate à notre projet, pour leur professionnalisme et leur pédagogie. L’équipe avait, en effet, bien compris notre problématique et nos objectifs. Nous avons été bien accompagnés tout au long du projet, par notre interlocuteur et son équipe très à l’écoute et réactifs. Nous sommes aujourd’hui très satisfaits de notre site Internet, merci !
Bruno Guillerm, adjoint de Direction.

Sur le plan des résultats obtenus, mentionnons quelques rapides faits :

  • un bénéfice d’image avéré, par ce « bond en avant » en matière de notoriété (objectif initial de la refonte),
  • un bénéfice d’usage pour l’internaute, tant visiteur que contributeur ou même administrateur du site,
  • un vrai gain de visibilité, tant sur le plan du référencement naturel (doublement du trafic issu du SEO), de l’exposition aux réseaux sociaux ou de l’accessibilité au site (le mobile représente désormais 25% des visites),
  • un engouement croissant pour le site, dont le taux de fidélité a grimpé (= plus de visites pour un même internaute).

L’occasion également de souligner la bonne appropriation du projet par l’équipe côté Lycée : la mise en œuvre d’une formation aux règles du référencement et aux bonnes pratiques d’écriture pour le Web (dont l’animation post-mise en ligne) a permis de fédérer les énergies et d’harmoniser les contenus provenant de multiples contributeurs.

Un grand merci au Lycée Jeanne d’Arc pour sa confiance !

Article classé dans :

Agence LunaWeb,
concepteurs d’expériences web.

Envie d’en savoir plus ? Vous pouvez consulter le site de notre agence, faire un tour sur nos satellites et vous abonner à notre newsletter.