TLS
Dans le cadre d'une refonte globale de Media-Graph et de ses marques spécialisées, le site Web de TLS nécessitait une importante révision de l'expérience utilisateur. La marque avait évolué pour devenir un acteur avant-gardiste des solutions d'éclairage LED architectural, mais sa présence numérique ne reflétait pas cette transformation.
- ClientTLS Architectural Lighting
- IndustrieÉclairage architectural
- ServicesDesign UX/UI
- Site Webtls-led.com
Améliorer l'UX/UI sous contraintes
Dans le cadre d'une refonte globale de Media-Graph et de ses marques spécialisées, le site Web de TLS nécessitait une importante révision de l'expérience utilisateur. La marque avait évolué pour devenir un acteur avant-gardiste des solutions d'éclairage LED architectural, mais sa présence numérique ne reflétait pas cette transformation.
En raison de ressources limitées et d'un soutien au développement restreint, la refonte a été exécutée par une seule personne (moi-même), en utilisant uniquement la base de code et le modèle existants. Ce projet est toujours en cours d'évolution et des changements continueront d'être apportés au fil du temps.
Objectifs
- Aligner la présence en ligne de TLS avec sa nouvelle identité de marque.
- Améliorer l'expérience utilisateur globale et l'ergonomie de l'interface.
- Structurer le catalogue de produits et la navigation de manière évolutive et conviviale.
- Communiquer clairement les avantages des produits malgré des ressources visuelles limitées.
Index
- Améliorations clés
- 1. Navigation & Information – Refonte de l'architecture
- 2. Page d'accueil – Hiérarchie visuelle modulaire
- 3. Pages de collection – Navigation simplifiée
- 4. Pages produits – Fonctionnelles avec de meilleurs leads
- 5. Page À propos – Établir la confiance par le storytelling
- Conclusion
Améliorations UX/UI clés
- Contraintes
-
1. Verrouillage du modèle (Template Lock-In) : La structure HTML/CSS existante devait être conservée ; aucun nouveau framework, aucune mise à jour du CMS.
2. Ressources visuelles limitées : Les photos de produits et les rendus étaient rares, ce qui rendait difficile la narration par l'image.
3. Aucune ressource de développement : Toutes les mises à jour devaient être effectuées manuellement en HTML/CSS brut par un seul designer.
4. Exécution en solo : La conception, la stratégie UX, la rédaction de contenu et l'implémentation ont été gérées par une seule personne.
- Tactiques de design
-
Nettoyage CSS : Mise à jour des systèmes de polices, de l'espacement, des états de survol (hover) et de l'iconographie tout en conservant le balisage d'origine.
Réutilisation modulaire : Réutilisation des blocs de mise en page des collections sur différentes pages pour assurer la cohérence visuelle et réduire la charge de travail.
Optimisation pour l'évolutivité : Création de styles visuels et de mises en page d'informations pouvant être étendus à mesure que davantage de contenu (photos, modèles 3D) devient disponible.
2. Page d'accueil – Hiérarchie visuelle modulaire
Une phase de planification basée sur des wireframes a aidé à restructurer la mise en page de la page d'accueil.
Les collections et les moteurs d'éclairage (Lighting Engines) ont été mis en avant rapidement, soutenus par des images d'ambiance lifestyle.
Il est important d'améliorer d'abord l'imagerie pour mettre en valeur les produits :
La vidéo d'en-tête (hero video) présente désormais les produits en contexte.
Les vignettes (thumbnails) ont été améliorées pour être plus cohérentes et visuellement attrayantes.
Des appels à l'action (CTA) ont été ajoutés pour diriger l'utilisateur vers des informations plus détaillées.
Une phase de planification basée sur des wireframes a aidé à restructurer la mise en page de la page d'accueil.
3. Pages de collection – Navigation simplifiée
Blocs d'interface simplifiés pour chaque forme (Carra, Circa, Linea).
Descriptions affinées pour mettre en évidence les avantages des produits et les cas d'utilisation (par ex. bien-être, hôtellerie).
Assurance d'une conception de carte et d'une mise en page cohérentes à travers tous les points de rupture (breakpoints).
4. Pages produits – Fonctionnelles avec de meilleurs leads
Mise en évidence des dimensions, des types de montage et des moteurs compatibles pour chaque produit.
Ajout d'une section de téléchargement pour les documents de spécifications et les informations relatives au produit.
Priorité donnée à la clarté fonctionnelle plutôt qu'à l'embellissement visuel.
L'ajout d'une galerie présentant le produit en situation permet une meilleure identification du produit et offre un espace pour respirer dans une page centrée sur l'information.
5. Page À propos – Établir la confiance par le storytelling
Création d'un récit cohérent autour de l'innovation et des forces de fabrication de TLS.
Intégration d'une vidéo explicative et structuration de la section « Ce que nous offrons » sous forme de points clairs.
Mise en avant de témoignages et de la mission de la marque pour instaurer la confiance.
Conclusion
Malgré les limites du projet, le site Web de TLS refondu a permis des améliorations mesurables et qualitatives concernant les objectifs clés d'UX et d'alignement de la marque :
-
Les analyses ont confirmé l'efficacité de ces changements. Ce cas illustre comment des décisions UX/UI solides peuvent apporter une réelle valeur, même dans des conditions sévères. Sans ressources supplémentaires, avec peu d'actifs et une base de code vieillissante, TLS dispose désormais d'un site Web moderne, évolutif et convivial, aligné avec sa stratégie de rebranding.
Notamment, le taux d'engagement issu de la recherche organique (Organic Search) a atteint 64,44 % et le trafic par e-mail a maintenu un engagement supérieur à 50 %, montrant que les visiteurs arrivant du SEO et des campagnes ciblées étaient plus enclins à explorer le site en profondeur.
- Amélioration de l'architecture de l'information : Les utilisateurs peuvent désormais explorer facilement les collections, les catégories de produits et les moteurs d'éclairage grâce à la navigation restructurée et à une taxonomie simplifiée.
- Engagement accru sur les pages produits : L'introduction d'outils interactifs comme le générateur de codes de spécification (Spec Code Generator) a augmenté le temps passé sur les pages produits et a permis aux professionnels d'explorer les configurations de manière autonome.
- Positionnement de marque plus clair : L'interface utilisateur mise à jour reflète l'identité de TLS en tant que marque d'éclairage avant-gardiste axée sur la précision. Le système visuel cohérent aide à se distinguer de la concurrence.
- Amélioration de l'utilisabilité interne : En travaillant au sein du code et de la structure existants, les pages refondues restent facilement modifiables par les équipes internes sans nécessiter de support de développement externe.
- Prêt pour l'évolutivité : L'approche modulaire de la mise en page et des composants UI permet une intégration transparente de futurs contenus, tels que de nouvelles photos de produits, des vidéos ou des fiches techniques.
Selon Google Analytics (du 16 avril au 14 juillet 2025), le site Web de TLS refondu a enregistré 26 000 vues totales et 75 000 événements suivis, avec un temps d'engagement moyen de 1 minute et 18 secondes par utilisateur. Des pages comme la fiche produit Carra et LumiCloud™ Bespoke ont enregistré le trafic le plus élevé, reflétant l'intérêt pour des collections de produits clairement structurées. Ces analyses confirment que la mise en page refondue, en particulier les améliorations de la navigation, a efficacement répondu aux besoins des utilisateurs et a retenu leur attention au fil des sessions.
