Pour mettre l’accent sur la structure et le flux, les wireframes basse fidélité excluaient les images et les polices personnalisées. Voir dans Penpot ➚.
Student Energy
Refonte de la page d’accueil, ajout de fonctionnalités, maintenance
Le Projet
Student Energy, une organisation dirigée par des jeunes et œuvrant pour la transition énergétique, a identifié plusieurs axes d’amélioration sur son site web début 2024. Les objectifs étaient à la fois techniques et stratégiques : moderniser les systèmes backend, résoudre les problèmes de sécurité et de performance, et repenser la page d’accueil pour mieux refléter l’expansion de leurs programmes.
Le site fonctionnait sous WordPress avec un thème PHP fortement personnalisé et ACF Pro. Bien que fonctionnel, ses systèmes sous-jacents étaient obsolètes : les composants principaux nécessitaient des mises à jour, certaines dépendances n’étaient plus maintenues et des rôles utilisateurs inutilisés ainsi que des contrôles de sécurité en retard représentaient des risques.
Visuellement et structurellement, la page d’accueil ne reflétait plus la diversité des offres de Student Energy. Avec des programmes récents comme Career Training, Guided Projects et la Fellowship en pleine expansion, il devenait nécessaire de présenter ces volets de manière claire et interactive.
Le travail a été structuré autour des mises à jour du système, du renforcement de la sécurité, et de la conception et mise en œuvre d’une page d’accueil renouvelée, centrée sur l’utilisateur. Tous les changements devaient être planifiés, testés et déployés avec un minimum de perturbation des opérations quotidiennes.
La Solution
La solution s’est articulée autour de trois volets parallèles — stratégie, design UX et ingénierie backend.
J’ai mis à jour les systèmes de base du site — WordPress, PHP, MySQL et les dépendances — en résolvant les problèmes de compatibilité au fur et à mesure. Pour améliorer les performances et la scalabilité, un cache Redis et le support d’HTTP/2 et la minification des ressources ont été ajoutés. Résultat : des temps de chargement plus rapides et une expérience plus fiable pour les utilisateurs à l’échelle mondiale.
Un des éléments clés a été la transformation de la page d’accueil. Nous avons commencé avec des wireframes basse fidélité dans Penpot (une alternative à Figma) pour explorer les idées de mise en page :
.](/_astro/se-low-fidelity-prototype.BkXBsmbn_Z1cManA.webp)
Cela a été suivi par un prototype haute fidélité, conçu pour être aussi proche que possible du rendu final :
.](/_astro/se-high-fidelity-prototype.CeOXED_L_kwHIN.webp)
Pour garder l’attention sur la présentation du contenu, cette version évite l’usage d’images et de polices personnalisées. Explorer le prototype interactif haute fidélité ➚.
Les prototypes basse et haute fidélité ont été testés avec des utilisateurs réels pour valider l’approche UX et assurer l’alignement avec les objectifs de communication de Student Energy.
Enfin, le design a été implémenté sur le site réel :
.](/_astro/se-live-site.CYR6GYnT_1AhChk.webp)
Même après la finalisation du prototype haute fidélité, seuls des ajustements mineurs ont été nécessaires. Le site en ligne reflète fidèlement le design approuvé. Visiter le site en ligne ➚.
La page d’accueil finale intègre des cartes dynamiques et interactives présentant chacun des programmes de l’organisation, en tirant les données directement de types de contenus personnalisés dans WordPress. Nous avons également introduit des témoignages spécifiques à chaque programme, affiné les rôles utilisateurs pour améliorer la visibilité du contenu et résolu les problèmes de compatibilité liés à la mise à jour de PHP avec un minimum de perturbations sur le site en production.
Une carte dynamique a été imaginée comme élément central, mettant en valeur l’emplacement des participants à travers les programmes et illustrant l’impact mondial de l’organisation.
La collaboration a été essentielle tout au long du projet. J’ai travaillé avec l’équipe interne pour explorer plusieurs pistes, itérer selon les retours, et m’assurer que chaque décision soutenait la mission de Student Energy. Le résultat : un site plus rapide, plus expressif et capable d’évoluer avec leur portée mondiale.