Treko – Design UI/UX d’une application et du site de Team Building gamifiée | Agence web Caen

Quand Treko, jeune startup spécialisée dans les challenges bien-être en entreprise, nous a confié la création de son site, le défi n’était pas seulement technique — il était aussi créatif. Comment retranscrire l’énergie d’une application gamifiée, la passion de quatre fondateurs et la promesse d’une expérience collaborateur inoubliable dans une interface web ? Avec WordPress, un thème développé sur-mesure à partir d’une base légère et une maximisation du score Google PageSpeed, Pixellescence a relevé ce double enjeu : un site qui donne envie, et qui performe.

Qui est Treko ?

Le brief : les enjeux spécifiques d’un site de startup

Un site de startup, c’est un terrain de jeu particulier. Contrairement à une entreprise établie qui affiche ses 20 ans d’expérience, une jeune structure doit convaincre en quelques secondes : faire passer l’énergie du projet, démontrer la valeur du produit, rassurer sur la crédibilité de l’équipe et convertir le visiteur en prospect qualifié. Le tout sans budget illimité — et avec un besoin d’évolutivité maximal.

Pourquoi WordPress avec un thème développé sur-mesure depuis une base légère ?

Pour une startup comme Treko, WordPress s’impose naturellement : un CMS que les fondateurs peuvent maîtriser sans développeur pour les mises à jour courantes, une communauté et un écosystème gigantesques, et une flexibilité totale à condition de ne pas tomber dans le piège des thèmes lourds et des page builders.

Thème sur-mesure vs thème premium : pourquoi c’est sans appel pour une startup

Une startup a deux ennemis : la lenteur et la rigidité. Un thème premium comme Divi ou Elementor résout le problème à court terme — on peut construire rapidement — mais crée une dette technique qui pèse sur la durée : site lent, difficile à faire évoluer, dépendant des mises à jour du thème tiers. Pour Treko qui a besoin d’un site évolutif à la vitesse d’une startup, nous avons fait le choix inverse.

Critère	Page builder (Elementor, Divi…)	Thème sur-mesure base légère
Mise en place initiale	Rapide visuellement	Légèrement plus long — mais sans compromis
Poids JavaScript chargé	200–500 Ko automatiques	Uniquement ce que la page utilise
Score PageSpeed Mobile	25–55 en moyenne	85–96 atteignable
Animations & interactivité	Souvent limitées au page builder	Sur-mesure : compteur, quiz, scroll animations — tout est possible
Évolutivité	Contrainte par l’interface du page builder	Illimitée : chaque nouvelle section est un nouveau composant
Indépendance	Lié au thème tiers et à ses abonnements	Code propriétaire, maîtrisé, pérenne

Pour Treko, le site devait évoluer aussi vite que la startup. Pas question d’être coincé dans les contraintes d’un page builder au moment de lancer une nouvelle offre ou de pivoter sur un message clé.

— Équipe développement Pixellescence, Caen

Phase 1 – Direction artistique & design gamifié

Le design d’un site de startup dans l’univers du sport, du jeu et du bien-être doit faire ressentir quelque chose dès les premières secondes. Pour Treko, nous avons travaillé une identité visuelle qui traduit simultanément l’énergie sportive, le fun de la gamification et le sérieux attendu par les décideurs RH.

🎨 Les partis pris visuels

Une palette dynamique et affirmée. Les couleurs Treko sont vives et énergiques, ancrées dans l’univers du sport et du jeu. On est loin d’un site corporate gris et conventionnel : ici, chaque section a sa propre respiration colorée. Un équilibre subtil a été trouvé pour que le site reste lisible et professionnel aux yeux d’un DRH, tout en transmettant l’ADN fun et décalé des fondateurs.

Hero section immersive avec compteur dynamique. La première chose que voit le visiteur : un compte à rebours en temps réel avant le prochain challenge inter-entreprises — une accroche immédiate qui crée de l’urgence et de la curiosité. L’accès au quiz gamifié est intégré directement dans la hero, permettant au visiteur de vivre l’expérience Treko avant même de l’acheter.

Storytelling en 4 étapes illustrées. Le fonctionnement du challenge est expliqué en 4 étapes visuelles claires — Inscriptions, Objectifs, Challenge, Cérémonie de clôture — avec des illustrations custom et des icônes qui parlent en un regard. Un utilisateur comprend le produit sans lire un seul paragraphe de texte long.

Chiffres clés mis en scène. Les stats Treko sont éloquentes — 50 % de participation, 4,6/5, 84 % de joueurs plus actifs, 85 % de renforcement de l’esprit d’équipe — et elles méritent d’être affichées avec impact. Nous avons créé des blocs de chiffres visuellement forts, conçus pour convaincre instantanément un décideur RH sceptique.

Témoignages clients structurés. Valérie Chanet (directrice communication, groupe Odealim), Justine Guyard (chargée communication)… Les témoignages sont présentés sous forme de fiches avec photo, poste, objectifs et résultats concrets — un format qui maximise la crédibilité et facilite l’identification pour le visiteur.

Section « Qui sommes-nous » humaine et attachante. Quatre amis, une mascotte, une photo d’équipe authentique — la section équipe de Treko ne ressemble à aucun autre « Qui sommes-nous » corporate. Nous avons conçu un bloc qui humanise les fondateurs et crée une connexion émotionnelle avec le visiteur.

📐 Maquettes Figma validées section par section

Chaque section de treko.fr a été maquettée en desktop et mobile sur Figma, avec plusieurs itérations sur les éléments les plus complexes (hero avec compteur, quiz interactif, section chiffres clés). Les fondateurs ont pu co-construire le design en temps réel depuis leur interface Figma, avec des annotations et des retours intégrés en quelques heures.

Phase 2 – Développement & intégration WordPress

La richesse fonctionnelle de treko.fr — compteur, quiz gamifié, animations au scroll, vidéo intégrée, témoignages en slider — aurait pu coûter cher en performances si elle avait été construite sur un thème premium standard. Notre approche sur-mesure nous a permis de construire chaque fonctionnalité de manière chirurgicale : aucun code inutile, chaque script chargé uniquement quand et où il est nécessaire.

⚙️ Stack technique

Composant	Solution retenue	Rôle et bénéfice
CMS	WordPress (dernière version)	Mise à jour autonome du contenu par les fondateurs
Thème	Thème enfant sur-mesure base légère	Zéro CSS/JS inutile, design-system propre et évolutif
Éditeur	Gutenberg + blocs personnalisés	Édition intuitive par les fondateurs, sans page builder tiers
Compteur dynamique	Vanilla JS + API date WordPress	Compte à rebours temps réel configurable depuis le back-office
Quiz gamifié	Vanilla JS custom	Expérience interactive légère, sans librairie externe lourde
Vidéo	Lecteur natif HTML5 + lazy load	Zéro dépendance YouTube/Vimeo sur le chargement initial
Animations scroll	Intersection Observer API (natif)	Animations légères au scroll sans librairie JS externe
Prise de RDV	Intégration Calendly en façade	Script Calendly chargé uniquement au clic, pas au chargement de page
Hébergement	Hébergement WordPress optimisé	PHP 8.x, OPcache, HTTPS, cache statique, sauvegardes

🛠️ Développements spécifiques

• ⏱️ Compteur de compte à rebours configurable depuis le back-office WordPress : la date du prochain challenge est modifiable par les fondateurs en un clic, le compteur se met à jour automatiquement en temps réel
• 🎮 Quiz gamifié en page d’accueil : un mini-quiz progressif en Vanilla JS qui simule l’expérience Treko et débouche sur un appel à l’action personnalisé selon le score obtenu — zéro librairie externe
• 🎬 Vidéo en lecture différée : la vidéo de présentation est affichée via une image de couverture cliquable — le fichier vidéo n’est chargé qu’au clic utilisateur, préservant les performances du chargement initial
• 📱 Menu mobile ultra-léger : ouverture/fermeture en CSS pur avec une infime touche de JS — aucune librairie de navigation externe
• 📊 Blocs de chiffres clés animés : les pourcentages et statistiques se « comptent » au scroll (0 → 50%) grâce à l’Intersection Observer API native — aucun plugin, zéro impact sur le PageSpeed
• 🏆 Slider de témoignages en CSS + JS minimal : glissement tactile sur mobile, navigation par flèches sur desktop, sans jQuery ni Swiper.js
• 📋 Custom Post Types : « Offres », « Témoignages », « Ressources » — chaque type de contenu est structuré avec ses champs propres, éditable depuis le back-office standard WordPress
• 📅 Intégration Calendly en façade : le widget de prise de rendez-vous est injecté dynamiquement au clic sur le bouton — son script lourd n’est jamais chargé en amont

🔓 Autonomie totale pour les fondateurs

Une startup évolue vite. Nouveaux témoignages, nouvelles offres, changement de message, annonce d’un partenariat — Enzo, Lewis, Marco et Gaspard modifient et enrichissent leur site en totale autonomie depuis WordPress, sans jamais avoir besoin de revenir vers un développeur pour les mises à jour courantes. Le compteur de challenge, la date du prochain événement, les chiffres clés : tout est configurable en back-office.

Phase 3 – Maximisation du Google PageSpeed sur un site animé et interactif

Obtenir un score PageSpeed élevé sur un site statique est une chose. Sur un site avec un compteur temps réel, un quiz interactif, des animations au scroll, une vidéo et un slider de témoignages… c’est une autre histoire. Voici comment nous y sommes parvenus pour treko.fr.

🏗️ Le fondement : zéro code superflu

Le principe directeur de tout le développement : chaque kilooctet chargé doit avoir une raison d’être. Pas de jQuery (remplacé par du Vanilla JS natif). Pas de librairie d’animation (remplacée par l’Intersection Observer API et des transitions CSS). Pas de plugin de slider (remplacé par du CSS Scroll Snap + JS minimal). Chaque fonctionnalité est construite avec l’outil le plus léger disponible.

🖼️ Médias : la stratégie du « charge quand tu dois »

• WebP pour toutes les images — illustrations, photos d’équipe, logos partenaires — avec fallback automatique pour les navigateurs anciens
• Image hero en preload prioritaire : la première image visible est préchargée dès le parsing du HTML, réduisant le LCP à moins de 1,5 secondes
• Lazy load natif (loading="lazy") sur toutes les images non-critiques : les illustrations des 4 étapes, les photos de témoignages, les logos partenaires
• Vidéo en façade : uniquement une image de couverture est chargée au démarrage — le fichier vidéo réel (plusieurs Mo) n’est jamais téléchargé à moins que l’utilisateur clique
• Dimensions explicites (width + height) sur chaque <img> pour un CLS égal à zéro — aucun saut de mise en page pendant le chargement

⚡ JavaScript : l’art du chargement conditionnel

• Zéro jQuery : toutes les interactions sont en Vanilla JS pur — le compteur, le quiz, le slider, les animations — pour un gain de 90 Ko d’un coup
• Scripts tiers en façade : Calendly est injecté uniquement au clic sur « Prendre un rendez-vous » — son script lourd de 150+ Ko n’est jamais chargé par défaut
• Intersection Observer API pour toutes les animations au scroll — une API native du navigateur, sans librairie externe, sans impact sur le Time to Interactive
• Defer systématique sur tous les scripts non critiques — le HTML et le CSS se chargent d’abord, les scripts s’exécutent après
• Google Analytics chargé après consentement RGPD et en mode non-bloquant

🎨 CSS : la discipline du nécessaire

• CSS critique inline dans le <head> : les styles nécessaires au premier affichage (hero, header, navigation) sont inlinés — le navigateur affiche la page sans attendre un fichier CSS externe
• CSS minifié et concaténé en un seul fichier en production
• Transitions et animations en CSS pur dès que possible — les animations CSS sont gérées par le GPU du navigateur, sans bloquer le thread principal JavaScript
• Zéro feuille de style tierce chargée automatiquement (Google Fonts chargées en auto-hébergement pour éviter la requête DNS externe)

🖥️ Serveur et infrastructure

• Cache de pages statiques : WordPress génère chaque page une fois, puis la sert comme du HTML pur — le serveur ne reconstruit rien à chaque visite
• PHP 8.x + OPcache : le code PHP est précompilé en mémoire, les pages dynamiques sont générées en moins de 100ms
• Brotli activé sur tous les assets textuels : compression supérieure au GZIP classique, -20 à -30 % de poids en plus
• HTTPS/TLS avec HSTS — sécurité maximale, signal positif pour Google
• Polices auto-hébergées : les fichiers de fonte sont servis depuis le même domaine, éliminant une requête DNS externe et un potentiel blocage de rendu

📊 Résultats PageSpeed obtenus

Phase 4 – SEO startup : se positionner sur un marché naissant

Treko évolue sur un marché en construction : le challenge bien-être en entreprise, à l’intersection de la QVT, des RH et de la gamification. Les requêtes sont en train de se constituer — c’est une opportunité SEO rare de se positionner avant que le marché ne sature. Nous avons structuré le site pour capter ces requêtes dès maintenant.

• Architecture de pages en silo : Accueil, Nos Offres, Qui sommes-nous, Ressources (blog) — chaque page cible un angle sémantique distinct
• Balises title et meta description optimisées : « challenge en entreprise », « bien-être au travail », « engagement collaborateur », « QVT », « RSE entreprise »
• Structure Hn logique : H1 ancré sur la requête principale, H2/H3 couvrant les angles secondaires (santé, RSE, engagement)
• Données structurées Schema.org : Organization, FAQPage sur les questions fréquentes, Review pour les témoignages clients
• Section Ressources / Blog : espace éditorial pour publier des articles sur les thématiques QVT, bien-être, cohésion d’équipe — un levier SEO long terme dès le lancement
• Maillage interne entre les offres, les témoignages par cas d’usage et les articles de ressources
• Sitemap XML et robots.txt configurés et soumis à Google Search Console
• Core Web Vitals dans le vert : LCP, INP et CLS — signaux de classement Google directs

Le résultat : treko.fr, un site qui incarne la startup

Le site treko.fr est aujourd’hui la vitrine digitale d’une startup ambitieuse et attachante. Il fait ressentir l’énergie du projet en quelques secondes, convainc les décideurs RH avec des chiffres et des témoignages tangibles, et convert vers la prise de rendez-vous — le tout avec des performances techniques de premier plan.

🔗 Visitez le site : treko.fr