Étude de cas · Produit web bilingue

Une landing page bilingue qui transforme une annonce en lead qualifié — et prévient l'équipe automatiquement

Conception, développement, contenu bilingue et automatisation de bout en bout d'un parcours d'acquisition : de l'annonce payante jusqu'au courriel de confirmation et à la fiche enregistrée en base.

Rôle
Conception et développement du produit
Langues
Français et anglais
Pile
TanStack Start · React · Tailwind
Portée
Landing, base de données, courriels

Contexte

Le problème et les personnes concernées

Le problème

Une offre d'entretien de site WordPress était vendue par échanges manuels. Le trafic publicitaire arrivait sans page d'atterrissage dédiée, sans séparation linguistique et sans point de collecte structuré : chaque demande devait être relancée à la main.

Les utilisateurs

  • Propriétaires de PME francophones et anglophones de la région d'Ottawa–Gatineau, non techniques.
  • Profils techniques qui veulent voir le périmètre exact : sauvegardes, mises à jour, journal d'activité, absence de verrouillage.
  • L'équipe interne, qui doit recevoir la demande sans surveiller une boîte partagée.

La solution

Deux pages d'atterrissage à URL distincte par langue, une offre expliquée en sections courtes (irritants, contenu du forfait, comparatif, prix, FAQ), un formulaire d'audit gratuit en quatre champs, puis un traitement serveur qui enregistre le lead et déclenche deux courriels.

Parcours principal

De l'annonce au courriel de confirmation

  1. 01

    Clic sur l'annonce

    Le lien de campagne pointe vers /fr ou /en selon la langue ciblée.

  2. 02

    Lecture de l'offre

    Sections courtes, preuves chiffrées, comparatif et FAQ; appel à l'action toujours à portée.

  3. 03

    Soumission

    Quatre champs, validation, message d'erreur ou de succès immédiat à l'écran.

  4. 04

    Enregistrement

    Le lead est écrit en base avec sa langue et sa source.

  5. 05

    Automatisation

    Notification interne + confirmation bilingue au prospect, envois idempotents.

Interfaces

Écrans réels de l'application

Landing page française : titre, promesse et formulaire d'audit gratuit

Landing page /fr

Version française servie directement par une URL dédiée aux campagnes francophones.

Landing page anglaise avec la même structure et le même formulaire

Landing page /en

Version anglaise : même composant, contenu piloté par un dictionnaire bilingue.

Formulaire de capture de leads avec nom, courriel, adresse du site et message

Formulaire de capture

Quatre champs, validation, retour visuel immédiat et mention de confidentialité.

Version mobile de la landing page avec barre d'appel à l'action fixe en bas

Vue mobile

Barre d'action fixe, champs à 16 px pour éviter le zoom automatique sur iOS.

Captures prises sur l'application; aucune donnée de prospect n'y figure.

Fonctionnalités vérifiées

Ce qui est réellement implémenté

Landing pages bilingues à URL dédiée

/fr et /en rendent le même composant avec un contenu localisé; /lp redirige vers /fr. Chaque route porte ses propres métadonnées.

Formulaire de leads validé

Nom, courriel, adresse du site et message optionnel. Validation par schéma côté serveur avant tout enregistrement.

Enregistrement en base

Chaque soumission crée une ligne dans la table leads (nom, courriel, site, message, langue, source).

Deux courriels automatisés

Une notification interne (avec réponse dirigée vers le prospect) et une confirmation bilingue envoyée au prospect, via des gabarits enregistrés.

Envoi idempotent et non bloquant

Chaque envoi porte une clé d'idempotence liée à l'identifiant du lead; un échec courriel n'empêche pas la confirmation à l'écran.

Espace de concept publicitaire

Une page interne présente deux jeux de propositions publicitaires (avec visuels, titres, descriptions et gabarits de courriel) et un sélecteur de source.

Animations sans librairie

Les apparitions au défilement utilisent IntersectionObserver et des transitions CSS, avec respect de prefers-reduced-motion.

Design system centralisé

Palette, rayons, ombres et typographies déclarés en variables CSS et exposés comme utilitaires; aucune couleur codée en dur dans les écrans.

Architecture

Comment c'est construit

Front-end

  • React avec TanStack Start et routage par fichiers.
  • Une route par langue, plus une route de redirection.
  • Tailwind CSS v4 avec jetons de design en variables CSS.
  • Notifications à l'écran par composant de toast.
  • Métadonnées de page définies route par route.

Serveur

  • Fonction serveur typée pour la soumission du formulaire.
  • Validation par schéma Zod avant toute écriture.
  • Client base de données privilégié chargé dynamiquement dans le gestionnaire.
  • Erreurs journalisées côté serveur, jamais exposées telles quelles.

Données et courriels

  • Table leads avec sécurité au niveau des lignes.
  • Gabarits de courriel en composants, déclarés dans un registre.
  • Domaine d'envoi dédié aux courriels transactionnels.
  • Clé d'idempotence par lead pour éviter les doublons.
Annonce FR ─▶ /fr ┐
Annonce EN ─▶ /en ┘─▶ Formulaire ─▶ fonction serveur
                                   │  validation (schéma)
                                   ├─▶ base de données : leads
                                   ├─▶ courriel interne (notification)
                                   └─▶ courriel prospect (confirmation FR/EN)

Décisions

Arbitrages et résolution de problèmes

Une URL par langue plutôt qu'un simple bouton

Les campagnes francophones et anglophones pointent vers des adresses distinctes, ce qui rend la langue d'arrivée déterministe et lisible côté acquisition.

Retirer la librairie d'animation

Les animations JavaScript ont été remplacées par de l'observation d'intersection et des keyframes CSS, et les polices limitées aux graisses réellement utilisées.

Aucune image de campagne sur la landing

Les visuels lourds ont été remplacés par de la typographie et des éléments CSS, pour garder l'identité graphique sans coût de chargement.

Contenu séparé du rendu

Tout le texte FR/EN vit dans un module de contenu typé; les composants ne contiennent pas de copie, ce qui rend les révisions éditoriales sûres et rapides.

Échecs d'envoi isolés

L'écriture en base et l'envoi des courriels sont découplés : l'utilisateur reçoit toujours une réponse claire, les erreurs d'envoi sont journalisées.

Vocabulaire aligné sur les retours métier

Plusieurs cycles de révision ont retiré les promesses non vérifiables et harmonisé le nom de l'offre entre les deux langues.

Valeur commerciale

Ce que ça change pour l'entreprise

Un point d'entrée par marché

Les budgets publicitaires francophone et anglophone deviennent mesurables séparément.

Zéro saisie manuelle

Chaque demande arrive structurée en base et par courriel, prête à être traitée.

Réponse immédiate au prospect

La confirmation part dans la langue du visiteur, sans intervention humaine.

Offre lisible

Périmètre, prix et limites exposés clairement, ce qui réduit les allers-retours avant la vente.

Compétences démontrées

Ce que le projet met en pratique

Conception d'interfaceDirection artistique et design systemRédaction UX bilingue FR/ENReact et TypeScriptRoutage et rendu côté serveurFonctions serveur et validation de donnéesModélisation et sécurité des donnéesAutomatisation de courriels transactionnelsOptimisation de performanceAccessibilité et responsive mobileSEO technique par pageIntégration des retours métier

Mon rôle

J'ai conçu et développé l'ensemble de ce qui est visible dans le projet : les pages d'atterrissage bilingues et leurs composants, le système de design, le contenu structuré FR/EN, le formulaire et sa validation, la fonction serveur de traitement, la table de leads, les gabarits de courriel et leur déclenchement, ainsi que les révisions de contenu issues des retours de l'équipe.