Refonte du portail web de l’ESSCA

Développer sa notoriété et clarifier son positionnement

En pleine phase d’expansion, l’ESSCA, grande école de commerce internationale, souhaitait aligner son site Internet avec sa nouvelle vision stratégique. Celui-ci ne correspondait plus aux ambitions de l’établissement.

Une refonte pour une école de cette envergure est l’opportunité de développer encore plus sa notoriété à différentes échelles. C’est aussi l’occasion de renforcer son image de marque en valorisant la pluralité de ses formations, la qualité de l’enseignement ainsi que ses nombreux campus en France et à l’étranger.

Les équipes de l’ESSCA espéraient pouvoir proposer une interface moderne et dynamique, qui fournit les informations utiles au bon endroit à ses utilisateurs. Le futur site devait être vecteur de trafic et de conversion, d’autant plus qu’un des enjeux du projet était de migrer le nom de domaine de .fr à .eu.

Une organisation et des étapes de validation millimétrées

Il s’agit d’un projet de refonte. Se sont donc enchaînées des phases de recherche utilisateurs, de conception, de webdesign, de développement back-end et front-end. Pour l’équipe projet LunaWeb, ce sont Adeline, cheffe de projet, Justine, UX Researcher, Arnaud, designer UX/UI, Christina, développeuse front-end, et Sandrine, développeuse back-end qui se sont impliquées pour mener à bien cette refonte d’ampleur.

Gouvernance

Accompagner l’ESSCA a aussi été un défi organisationnel du fait de sa gouvernance. De nombreux acteurs étaient mobilisés pour valider les différentes étapes de ce projet, ce qui impliquait un dialogue constant avec les équipes. Nous avons donc mis en œuvre un COPIL (Comité de Pilotage) tous les mois, en plus du COPROJ (Comité de Projet) hebdomadaire et de passages réguliers en COMEX (Comité Exécutif).

Rebattre les cartes pour mieux refondre

Avant de pleinement commencer le projet, nous avons été invités à visiter l’école pour nous imprégner des codes de l’ESSCA.

Recherche utilisateurs

Le projet a très rapidement débuté par une phase de recherche utilisateurs. Afin de comprendre comment était perçu le site actuel, avec ses irritants, et ce qui était attendu du prochain, nous avons défini des profils représentatifs des cibles.

Nous avons alors pu organiser 12 entretiens individuels avec les profils les plus pertinents. En l’occurrence : des étudiants en formation initiale ; des étudiants en bac +2 ou +3 ; des étudiants internationaux ; des parents de futurs étudiants ; des entreprises et des enseignants chercheurs.

Les résultats obtenus ont fait l’objet d’une restitution auprès de tous les interlocuteurs sur le projet.

Avec les entretiens utilisateurs, nous avons pu construire les personas, qui ont guidé les futurs choix en matière de parcours utilisateurs et d’arborescence.

S’en est ensuite suivie la création et la diffusion d’un questionnaire quantitatif, diffusé sur le site de l’ESSCA. Il prenait une dizaine de minutes à remplir et était l’occasion d’interroger les répondants sur leur profil et leurs besoins par rapport au site Internet existant.

Conception

Nous avons alors pu lancer la phase de conception fonctionnelle : de l’arborescence, à la navigation en passant par les contenus présents sur des grandes catégories de pages. Cela s’est fait le temps de plusieurs ateliers collaboratifs entre l’équipe de l’ESSCA et nous. Les ateliers de tri de cartes nous ont été particulièrement utiles.

Nous avons notamment commencé par définir les parcours utilisateurs par profil. Cette étape de conception a d’ailleurs été enrichie par les recommandations de leur agence SEO Spark, qui a nous a fourni des mots clés SEO à intégrer.

Nous avons conçu une arborescence claire, afin que chaque profil utilisateur trouve rapidement l’information voulue. A également été pensé un tunnel de candidature, qui oriente le candidat vers le bon processus d’inscription (Parcoursup, concours ou admissions directes), selon différents critères. Cela a d’ailleurs été un défi lors de la phase de développement, mais nous y reviendrons plus tard.

Nous avons ensuite créé les zonings des différentes pages, le temps de plusieurs ateliers. De même, nous avons réalisé un atelier personnalité de site web afin d’aider l’ESSCA à clarifier le ton qui doit être employé sur les différentes pages (selon les profils) et les mots clés SEO à privilégier. Nous avons enfin pu fournir des recommandations sur la rédaction pour le web, l’UX Writing et le SEO selon les pages concernées.

Direction créative

Comme pour tout projet de refonte, le design des pages a été longuement travaillé. C’était un sujet d’autant plus important que la charte graphique de l’ESSCA venait tout juste d’être revue et qu’elle était encore peu exploitée.

Avant de définir la direction créative, nous avons pris le temps de faire un benchmark de sites de différents pays, la dimension internationale étant importante pour l’établissement. Nous avons comparé cela aux sites des écoles de commerce françaises afin de retenir des codes qui sont à la fois compris par un public français et par un public international.

Autour d’ateliers de co-conception graphique, nous avons pu définir avec l’équipe clients la piste graphique à privilégier, tout en respectant la charte existante. L’ESSCA est reconnaissable notamment grâce à ses aplats de rouge, or, le rouge de la charte n’est pas accessible avec du texte écrit en blanc. Il a donc fallu proposer une alternative afin d’adopter une démarche d’accessibilité. De même, la typographie initiale de l’école aurait entraîné une baisse des performances web sur le futur site, nous avons donc privilégié une option plus légère, très proche, que l’ESSCA a validée.

Webesign

Est venue ensuite l’étape des maquettes graphiques. L’UI était, encore une fois, très importante pour se démarquer des autres grandes écoles de commerce, mais celle-ci devait renforcer l’UX qui avait été pensée aux étapes en amont. Une quinzaine de pages ont été maquettées. Le site garde une identité graphique unie sur la plupart du site, seule la partie dédiée à la formation continue devait se distinguer, notamment grâce à un violet bleuté anthracite plutôt que rouge.

L’un des plus gros défis de cette phase de webdesign était de valoriser correctement chaque programme, par des listes et des filtres notamment. Les informations pour chaque programme étaient si nombreuses, que nous avons décidé de diviser chaque page programme par des “onglets”, permettant à l’utilisateur de sélectionner rapidement le point qui l’intéresse. Concrètement, en arrivant sur une page programme (qui en est le résumé), il est très vite proposé de choisir le contenu à consulter ou les actions à réaliser : “Programme, Pédagogie, Carrière, Frais et financements, Admissions, Candidater, Télécharger la brochure”.

Dans la lignée du design, nous avons préparé un brief photo. En effet, les futures photos devant s’accorder avec l’identité du site, nous avons créé un guide pour les équipes de l’ESSCA pour qu’elles puissent donner un brief cohérent à leur photographe. Le guide précise les différents types de photos, à quels endroits elles sont nécessaires, avec quel accent de couleur, quelle profondeur, etc.

Avant de passer aux prochaines étapes, nous avons réalisé des tests utilisateurs sur maquette pour valider ou ajuster nos propositions. Nous avons rencontré 10 utilisateurs, dont nous avions obtenu le contact grâce au questionnaire quantitatif mentionné en phase de recherche utilisateurs.

Animations

L’équipe de l’ESSCA souhaitait que le site soit immersif et mémorable. Les animations, spécifiquement pour la page d’accueil, allaient donc jouer un rôle clé pour l’expérience des futurs utilisateurs. De plus, celles-ci devaient être suffisamment légères pour ne pas influer sur les performances du site.

Cela a nécessité une véritable collaboration et communication entre Arnaud, designer UX/UI, et Christina, développeuse front-end. À eux deux, ils ont imaginé des effets d’apparition fluides et des transitions au scroll, par exemple. Ils ont travaillé à ne pas surcharger la page d’accueil d’animations mais bien à trouver le juste équilibre entre dynamisme et confort de navigation.

Pour faciliter les démonstrations auprès de l’équipe clients et les évolutions ensuite, ils ont produit des prototypes animés sur CodePen. Il a également fallu ajuster certaines animations afin qu’elles soient bien compatibles avec tous les navigateurs.

Développement

En phase de développement, plusieurs défis ont mobilisé les développeuses de l’équipe projet : Christina, côté front-end, et Sandrine, côté back-end.

Tout d’abord, il a fallu développer un double moteur de recherche. L’un était dédié au contenu général et le second concernait l’annuaire des enseignants chercheurs. Tous deux devaient faire du lien avec les pages de contenus pertinentes, tout en ayant une souplesse sur l’orthographe. L’ESSCA souhaitait que les résultats de recherche s’affichent en montrant un extrait du contenu citant le mot recherché. Dans le cas d’une recherche qui ne donne pas de résultats, nous avons fait en sorte que des suggestions de recherches soient proposées.

L’annuaire des enseignants était d’ailleurs un défi à lui seul : chaque fiche de professeur (disponible en français et en anglais) était générée à partir de fichiers XML. L’annuaire était alors synchronisé chaque semaine avec l’outil interne de l’école, Academ, via un protocole SFTP automatisé.

Au-delà de la diversité des formations proposées et du nombre d’enseignants chercheurs, il a fallu valoriser et importer les 255 universités partenaires sur le site. Le script d’import de ces données devait permettre de filtrer les universités par zone géographique (pays et ville). Toujours en lien avec la dimension internationale de l’ESSCA, le site a été développé pour être disponible en français et en anglais.

Nous avions mentionné un peu plus tôt un tunnel d’admission dans le cas où un utilisateur souhaitait candidater. Ce tunnel n’est pas un formulaire multi-étapes, mais un système de pages avec différentes profondeurs selon la réponse précédente. La finalité est de guider l’utilisateur sur le site le plus pertinent. Pour cela, nous n’avons pas utilisé de Wysiwyg, par exemple. Nous avons privilégié un développement spécifique, permettant un rendu très propre et personnalisé côté front-end. Cela rend le système pleinement administrable si le tunnel devait évoluer.

Les formulaires de contact ont aussi été un sujet. L’école utilise Microsoft Dynamics pour ses formulaires de contact : nous devions les intégrer dans le site et les adapter graphiquement. L’atout de cette approche est que l’équipe de l’ESSCA est autonome sur les modifications à opérer sur le formulaire. Nous n’avons pas à les modifier dans le code, seulement à les importer. Cela a, cependant, entraîné un arbitrage spécifique vis-à-vis du RGPD, car il s’agit d’un service externe.

Enfin, le back-office du site devait permettre une grande autonomie des équipes de l’école. Le site a vocation à être enrichi et mis à jour régulièrement. Près de 15 gabarits de pages ont été développés pour couvrir l’ensemble des besoins éditoriaux, complétés par des blocs modulables.

Enjeux SEO

L’ESSCA avait un objectif SEO double : gagner en visibilité et assurer une transition technique optimale, sans perte de trafic, notamment lors de la migration du domaine de essca.fr vers essca.eu.

Pour cela, nous avons travaillé en étroite collaboration avec le partenaire SEO de l’ESSCA, l’agence Spark. Nous avons défini les mots clés prioritaires pour chaque persona pour les inclure dans l’arborescence et guider la rédaction des contenus.

Nous avons, bien sûr, établi un plan de redirection solide et assuré un suivi analytique via Matomo. Comme pour tout projet, nous avons réalisé un accompagnement post-mise en ligne pour faire le point et proposer de nouvelles optimisations.

Tous ces efforts ont porté leurs fruits puisque le nouveau site de l’ESSCA a connu un gain de 6 places dans les positions en seulement 4 mois ; sur des requêtes en lien avec la thématique de l’école de commerce. Dans l’étude de NextEdu, on peut lire : “L’ESSCA parvient à se positionner en P1 Google sur la quasi-totalité des requêtes les plus importantes liées à sa marque”.

Des résultats tangibles rapidement

Tout beau, tout neuf, le site ESSCA.eu a été mis en ligne pour la rentrée 2024. Depuis, les utilisateurs peuvent profiter d’une navigation simplifiée pour accéder à l’information souhaitée.

Nous souhaitons une longue vie à ce site Internet d’ampleur. Au plaisir de retravailler avec l’équipe de l’ESSCA prochainement !