Alsacréations · Notre solution pour l'appel d'offre
Vous ne cherchez pas à moderniser des sites : vous construisez un actif technologique, éditorial et commercial mutualisé. Cette réponse porte sur la Phase 1 (site Corporate et Trianon Résidences) et sur ce qu'elle doit rendre possible pour les quatre marques suivantes.
Comprendre
« Bien habiter la terre » n'est pas une signature de bas de page : c'est une contrainte de conception. Un site qui prêche la sobriété en pesant quatre mégaoctets se contredit lui-même. Nous proposons de traduire votre vision en trois exigences mesurables — sobriété, accessibilité, performance — et de nous laisser juger dessus.
Votre note de cadrage est explicite : « Le Groupe ne se définit pas uniquement comme un promoteur immobilier. Il se positionne comme une entreprise familiale engagée pour un habitat sain et accessible. La refonte doit incarner cette conviction, pas seulement l'illustrer. »
Incarner plutôt qu'illustrer, pour un site web, veut dire des choses précises et vérifiables.
RGESN
Un référentiel dont notre équipe a analysé l'ensemble des critères. En pratique : assets optimisés et chargés à la demande, animations contrôlées, composants légers, et le refus assumé de réinventer des bibliothèques qui existent déjà.
RGAA AA
Vous fixez l'objectif AA sur les composants principaux. Nous le prenons à la conception du design system, pas en recette : un composant accessible par défaut est un composant que les quatre marques suivantes hériteront sans y repenser.
Core Web Vitals
LCP sous 2,5 s, INP sous 200 ms, CLS sous 0,1, mesurés sur PageSpeed Insights et pas en local. C'est une contrainte non négociable de votre note, et c'est aussi le terrain sur lequel Alsacréations et sa communauté sont identifiées en France depuis l'origine de l'agence.
Ce que nous appelons un minimalisme chaleureux : une interface épurée mais pas vide, des typographies de caractère, une palette inspirée du territoire et de l'habitat durable. L'objectif n'est pas de faire sobre, il est d'installer une relation de confiance et de proximité — ce que fait déjà votre métier physique.
Un groupe familial fondé à Mulhouse en 1999, un siège à Entzheim, une marque phare qui n'opère qu'en Alsace, un Hub Média dédié au territoire. Nous sommes une agence strasbourgeoise fondée en 2006, labellisée Marque Alsace, dont l'un des cofondateurs a reçu le Bretzel d'Or en nouvelles technologies.
Nous n'en tirons pas un argument sentimental. Nous en tirons trois conséquences opérationnelles.
Sur un projet de neuf mois qui engage plusieurs expertises et des dépendances externes — vos équipes, AGORA, les prestataires sortants — la capacité à se voir physiquement en deux heures quand un sujet se bloque n'est pas un confort. C'est du délai gagné.
Sur les projets à plusieurs prestataires, ce qui coûte le plus cher n'est jamais la technique : c'est le temps passé à attendre une réponse. La proximité géographique n'est pas un argument commercial, c'est un raccourci de décision.
CharlineCheffe de projets — AlsacréationsVotre note décrit des epics et des user stories. Nous les avons relues depuis l'autre bout : celui des personnes qui arrivent sur les sites. Trois profils se dégagent, dont deux sur Trianon et un sur le Corporate, et ils n'ont ni la même maturité, ni la même tolérance à la friction.
Parcours prospects — choisissez un profil
trianon-residences.fr Maturité immobilière très faible : il n'a jamais acheté, ne maîtrise pas le vocabulaire de la VEFA et ressent une forte anxiété face à la complexité administrative.
Découverte
« Est-ce que c'est seulement pour moi ? »
Considération
« Est-ce que je m’y vois vivre ? »
Décision
« Est-ce que je peux me le permettre ? »
Trois constats en découlent, qui structurent nos maquettes.
Aucun de ces trois profils n'accepte un formulaire en phase de découverte. La fiche programme reste consultable en entier ; la brochure est une option, jamais un péage. Le partage de coordonnées se déclenche là où il crée de la valeur pour le visiteur : le résultat de simulation.
Le débutant a besoin d'être acculturé, l'intermédiaire d'aller vite. Un seul parcours ne peut pas servir les deux. La recherche en langage naturel sert le second sans pénaliser le premier, à condition que les filtres classiques restent accessibles et que le vocabulaire soit expliqué en contexte.
La partenaire experte est pressée et exige une séparation nette entre institutionnel et commercial. Les tags audience règlent la remontée des contenus ; la navigation principale doit, elle, isoler visiblement les deux espaces dès le premier niveau.
Construire
Votre note de cadrage pose une orientation claire : WordPress en back-office, un frontend découplé, une API GraphQL ; et invite explicitement à la challenger avec des arguments. Nous retenons votre architecture. Nous en améliorons un seul point : le framework de rendu.
Architecture cible — cliquez un étage
WordPress + ACF Pro
Les équipes Vivialys ne changent pas d'outil. Programmes, lots, localités, articles et taxonomies de tags sont modélisés en Custom Post Types et champs ACF Pro. L'arbitrage Multisite unique / instances coordonnées se joue ici, en Phase 2 de notre planning.
Votre note précise que Next.js est la référence du projet, et qu'une proposition sur Nuxt est recevable si elle est justifiée et documentée.
Nuxt est à Vue.js ce que Next.js est à React. Les capacités fondamentales exigées par le projet sont couvertes à l'identique : consommation d'API pour l'architecture découplée, rendu hybride SSR pour le SEO des fiches programmes et SSG pour l'éditorial, conteneurisation sans adhérence particulière à l'infrastructure Docker / Kubernetes d'AGORA.
| Critère | Next.js | Nuxt |
|---|---|---|
| Rendu SSR / SSG | Complet | Complet |
| Headless via GraphQL | Natif | Natif |
| Docker / Kubernetes | Compatible | Compatible |
| Structure de projet | Conventions souples, à cadrer par l'équipe | Convention over configuration : arborescence stricte, auto-imports |
| Partage entre sites | Monorepo et packages à outiller | Layers Nuxt : un socle publié, hérité et surchargé par marque |
| Éco-conception | Optimisations à assembler | Modules natifs (images, fonts, SEO) intégrés au build |
L'arborescence stricte et les auto-imports de Nuxt fixent un cadre unique pour six sites. L'onboarding d'un nouveau développeur sur le socle commun ne dépend pas de la mémoire de l'équipe précédente.
Le RGESN demande des arbitrages permanents sur le poids des pages. Les modules Nuxt d'images, de polices et de SEO industrialisent ces arbitrages au lieu de les laisser à la discipline de chacun.
Le système de composants de Vue 3 — props, slots, composants polymorphes — colle à l'approche atomique que vous demandez, et rend l'activation par marque explicite plutôt que conditionnelle.
Nous produisons sur Nuxt depuis 2021 et nous formons des développeurs à ce framework. Recommander Vue plutôt que React ici n'est pas un réflexe d'agence : c'est le seul endroit du brief où nous pensons qu'un autre choix vous ferait gagner du temps en Phase 2.
RodolpheGérant, référent technique — AlsacréationsWordPress comme back-office est un bon choix et nous ne le discutons pas : la courbe d'apprentissage des équipes éditoriales doit rester nulle, c'est une contrainte de projet légitime. En revanche, plusieurs des fonctionnalités attendues ne sont pas couvertes nativement et doivent être traitées comme des développements à part entière, pas comme des cases à cocher.
Non natif
WordPress est nativement monolithique : back-office et front-office sont liés. WPGraphQL, cité comme critique dans votre note, transforme le CMS en source de données structurées et typées, interrogeable par le frontend.
Non natif
La gestion out-of-the-box se limite aux articles et aux pages. Fiches programmes, lots, localités et témoignages passent par des Custom Post Types et des champs ACF Pro — que nous utilisons sur tous nos projets depuis des années.
Sur-mesure
La syndication d'un article du Hub Média vers les sites marques, dans toutes les directions et sans pénalité SEO, repose sur une logique de tags croisés et de blocs dynamiques qui dépasse les fonctions de base.
Dépend du code
WordPress offre une base solide, mais l'accessibilité numérique et l'éco-conception dépendent de la façon dont les composants sont développés. Nous avons plusieurs projets totalement conformes à notre actif, d'autres partiellement.
Autour de ce noyau, les extensions que nous prévoyons au périmètre : un plugin d'assistance éditoriale IA développé sur-mesure, des extensions SEO avancées pour le balisage Schema.org et l'exécution technique du plan de redirections, Axeptio comme gestionnaire de consentement conformément à votre contrainte, et un jeu d'outils de hardening couplé à une configuration serveur adéquate côté AGORA.
Les arbitrages que vous nous laissez
Nous recommandons de trancher en cadrage, pas maintenant, parce que la réponse dépend d'une information dont nous ne disposons pas encore : le degré d'autonomie éditoriale que chaque marque doit conserver. Le Multisite unique mutualise les mises à jour, les utilisateurs et les taxonomies — cohérent avec un plan de taggage unifié et un Hub Média central. Les instances séparées isolent les risques et les cycles de mise en production, au prix d'une coordination des synchronisations. Notre inclination va au Multisite pour la Phase 1, avec un point de sortie documenté si une marque de Phase 2 exige son propre cycle.
Trois environnements séparés et sécurisés — dev, staging, prod — conformément à vos contraintes non négociables, pilotés par une CI/CD GitLab. La coordination avec les équipes AGORA est une tâche identifiée de la Phase 2 de notre planning, pas une variable d'ajustement de fin de projet. Le dépôt Git reste accessible au Groupe à tout moment, conformément à la clause de réversibilité.
Six sites, trois prestataires, deux hébergeurs : la reprise se prépare avant le développement. Le plan de redirections 301 est produit par votre chef de projet, nous en assurons l'exécution technique et le contrôle. Le monitoring des positions et du trafic organique court sur les trois mois suivant la bascule, avec la clause contractuelle que vous exigez sur la perte de trafic.
Le contrat de données ne change pas. WordPress, ACF Pro, WPGraphQL, la modélisation des contenus, le plan de taggage, l'orchestrateur IA et l'infrastructure AGORA sont identiques dans les deux scénarios. Seule la couche de rendu et le langage du design system diffèrent. C'est précisément l'intérêt d'une architecture découplée : ce choix reste réversible plus longtemps qu'il n'y paraît.
Innover
Vous demandez explicitement de ne pas vous servir une vision générique sur l'IA, mais quatre usages implémentés, chiffrés et mesurés. Vous précisez aussi qu'une démo, même imparfaite, pèse plus qu'une slide. Nous prenons les deux au sérieux.
La faute classique consiste à greffer une brique IA à la hâte : dépendance totale à un tiers, hallucinations sur des données réglementées, parcours utilisateur décousu, impact performance. Nous partons de l'inverse, avec une couche d'orchestration isolée derrière une API, que le front Nuxt ne fait qu'interroger.
Orchestrateur IA — parcours d'une requête
« Un T3 avec terrasse orientée sud dans le Bas-Rhin, livrable avant l'été prochain »
Les fiches programmes sont vectorisées de manière structurée et synchronisées avec votre outil interne de gestion. Le pipeline d'embeddings et la base vectorielle vivent dans cette couche, jamais dans le thème WordPress ni dans le front.
Usage 1 · Phase 1
Le visiteur décrit son projet en langage naturel, l'orchestrateur en extrait des critères, la base répond. Indicateur de succès : part des sessions utilisant la recherche naturelle plutôt que les facettes, et taux de clic vers une fiche programme depuis ces résultats.
Usage 2 · Phase 1
Panneau intégré à l'administration WordPress : plan d'article, titre SEO, méta-description, programmes éligibles à mentionner en maillage, déclinaisons LinkedIn et newsletter. Indicateur : délai moyen de production d'un article du Hub Média, avant et après.
Usage 3 · Phase 1
Le plus complexe des trois : mémoire cross-session, multilingue français / allemand / anglais pour les prospects frontaliers, proposition de créneau avec un conseiller. Indicateur : nombre de rendez-vous pris depuis l'agent, rapporté aux conversations engagées.
Sur un site immobilier, l'erreur n'est pas permise sur les critères stricts : prix, localisations, typologies, dispositifs fiscaux. Notre approche est hybride et la frontière est nette.
Le choix du modèle est arbitré en phase de cadrage selon le triptyque performance / coût / souveraineté — un arbitrage qui recoupe directement votre contrainte d'hébergement en France ou en UE souveraine. En isolant la couche IA derrière un orchestrateur abstrait, la plateforme reste agnostique : si un modèle plus performant ou deux fois moins cher est publié, nous remplaçons le moteur sans impacter le front Nuxt, et très marginalement WordPress.
| Critère | Brique greffée | Couche orchestrée |
|---|---|---|
| Source des prix et typologies | Le modèle, à partir de son contexte | La base immobilière, via des filtres stricts |
| Requête hors-sujet | Envoyée au modèle, facturée, réponse imprévisible | Bloquée en amont |
| Changement de modèle | Refonte de l'intégration | Remplacement du moteur, front inchangé |
| Indisponibilité du service | Fonctionnalité hors service | Bascule sur le parcours classique |
| Clés d'API | Risque d'exposition côté client | Confinées à l'orchestrateur |
Nous ne sommes pas une agence de data science, et nous préférons l'écrire que le laisser découvrir. Nous utilisons l'IA quotidiennement — Claude, Gemini, OpenAI, GitHub Copilot dans nos processus de développement et de traitement de données, modèles locaux via Ollama et Opencode en expérimentation — et nous concevons des services qui s'appuient sur ces API. C'est de l'ingénierie d'intégration, pas de la recherche.
C'est précisément pour cela que nous recommandons un POC tôt, sur données réelles ou fictives, avant que l'architecture ne soit figée.
Périmètre : le catalogue Trianon uniquement. Techno : pipeline d'embeddings sur les fiches programmes, base vectorielle, filtrage déterministe. Succès : sur un jeu de vingt requêtes types formulées par vos commerciaux, le bon programme apparaît dans les trois premiers résultats.
Périmètre : un gabarit d'article du Hub Média. Techno : panneau dans l'administration WordPress, appel à l'orchestrateur. Succès : un rédacteur produit un plan et les métadonnées SEO d'un article en moins de temps qu'aujourd'hui, sans retouche du balisage.
Périmètre : le verrouillage lui-même. Techno : jeu de requêtes adverses, hors-sujet et ambiguës. Succès : aucune réponse contenant un prix ou une disponibilité absents de la base. C'est le POC le moins spectaculaire et le plus décisif.
Un assistant conversationnel qui n'est pas utilisable au clavier ou avec un lecteur d'écran, c'est une fonctionnalité qui exclut une partie de vos prospects. L'accessibilité de la couche IA se conçoit en même temps que ses garde-fous, pas en recette.
PhilippeExpert accessibilité, développeur Vue / NuxtL'équipe mobilisée sur ce volet
RodolpheGérant, référent technique front-end et back-end
LisaDesigner du projet et expertise UXPhilippeExpert accessibilité, développeur Vue / Nuxt
IsmaëlleExperte accessibilité numériqueCharlineCheffe de projets et coordinationConcevoir
Vous évaluez explicitement « comment la Phase 2 réutilise la Phase 1 sans surcoût majeur » et « comment une marque peut activer des fonctionnalités spécifiques sans impacter les autres ». C'est la question la plus structurante du dossier, et elle se joue entièrement ici. Un design system n'est pas une bibliothèque de composants : c'est un contrat entre ce qui est mutualisé et ce qui ne l'est pas.
Votre note pose la difficulté sans détour : les six marques doivent être « radicalement distinctes visuellement », et c'est la seule couche que le visiteur perçoit. En dessous, tout est mutualisé. Un système à trois niveaux résout cette tension en séparant strictement ce qui varie de ce qui ne varie pas.
Trois niveaux de tokens — changez de marque
Les rôles : surface de carte, couleur d’action, texte secondaire, rayon d’image. Les composants ne consomment jamais une primitive directement — uniquement un rôle.
--surface-card--<marque>-neutral-000--action-primary--<marque>-500--wash-highlight--<marque>-100--radius-card--radius-mdMême composant, tokens différents
Marque A · Programme
Résidence exemple
à partir de 000 000 €
Voir le programmePalettes de démonstration tirées de la charte de ce mini-site. Les tokens réels seront dérivés des chartes Vivialys et Trianon.
La règle qui tient tout l'édifice tient en une phrase : un composant ne consomme jamais une primitive, uniquement un rôle. Une carte programme ne connaît pas --blue-500, elle connaît --action-primary. Ouvrir une marque revient alors à redéfinir un jeu de primitives et à recâbler les rôles — sans toucher au code Vue.
Pas de --color-1 ni de --gris-3. Les noms décrivent un rôle ou une marque, jamais une apparence. Et surtout : les noms des tokens et des composants sont identiques dans Figma et dans le code. C'est ce qui empêche la dérive entre la maquette et l'implémentation.
Le design system vit dans une layer publiée, héritée par chaque site. Corporate et Trianon la consomment en Phase 1 ; les quatre marques suivantes l'héritent sans duplication. Une correction faite une fois se propage partout.
Props et slots plutôt que variantes multipliées. Un composant configurable — activer un éco-score, masquer un filtre, changer un gabarit de carte — évite d'avoir dix versions de Button à maintenir dans six ans.
Commencer par les composants à haut impact plutôt que par une couverture exhaustive change tout. En six semaines on obtient un socle qui tient réellement les maquettes ; en couvrant tout d'emblée, on obtient un catalogue que personne n'utilise parce qu'il est arrivé trop tard.
LisaDesigner du projet — Alsacréations| Critère | Sans socle mutualisé | Avec le socle Phase 1 |
|---|---|---|
| Identité visuelle | Nouvelle maquette complète, page par page | Nouveau jeu de primitives, gabarits hérités |
| Composants | Réintégration, ou copie et divergence | Hérités de la layer, zéro réécriture |
| Accessibilité | À reprendre sur chaque composant | Acquise, car portée par le composant |
| Fonctionnalités par marque | Branches de code conditionnelles | Activation explicite de composants et de filtres |
| Correction d'un défaut | À répercuter sur chaque site | Une fois, propagée à tous |
Vous attendez cinq maquettes, en desktop et mobile, commentées — chaque choix UX expliqué, pas seulement montré. Les chartes des deux marques nous étant transmises à confirmation de participation, les visuels ci-dessous sont en conception. Les intentions, elles, sont arrêtées.
Vision Groupe, présentation des six marques et aide au choix, entrée vers le Média, preuves et engagements RSE. Le point délicat : faire coexister le Média grand public, l'espace institutionnel BtoB et la marque employeur sans qu'ils se parasitent, avec une séparation visible dès le premier niveau de navigation.
Desktop et mobile
Recherche sémantique en hero avec suggestions dynamiques et bouton « recherche détaillée » adjacent — les filtres classiques ne disparaissent jamais. Blocs d'accès par persona, grille de logements avec badges fiscaux, section frontalière, entrée vers L'Observatoire.
Desktop et mobile
Le gabarit le plus dense du projet : galerie et visite virtuelle en tête, tableau des lots, dispositifs fiscaux, piliers RSE du programme, documents contractuels, simulateur intégré et choix du canal de contact. C'est aussi le gabarit le plus scruté en soutenance.
Desktop et mobile
Mensualités depuis la fiche programme, plus l'articulation avec le reste de la suite : PTZ, capacité d'emprunt, frais de notaire, Jeanbrun et LLI. Résultat conditionné au partage des coordonnées, prix affiché en valeur totale et mensualisée.
Desktop et mobile
Une seule maquette qui sert L'Observatoire et le Média Vivialys, rendue dans chaque univers via les tokens. Silos thématiques, accès aux pages piliers, contenu long avec sommaire ancré, maillage vers les programmes et blocs de conversion intégrés au fil de lecture.
Desktop et mobile
En complément des cinq livrables : les planches de tokens, la bibliothèque de composants à haut impact et deux exemples de spécification complète, du token Figma au composant Vue documenté, pour rendre la méthode vérifiable plutôt que déclarative.
Planches Figma
Aperçu
Chaque parti pris UX sera annoté de cette manière dans le dossier de maquettes : ce que le bloc résout, pour quel persona, et à quel moment du parcours il intervient.
Remplacer cette image par un extrait réel de planche Figma dès qu'elle est disponible.
La fiche programme est consultable en entier, sans condition. La brochure reste une option. Le partage de coordonnées se déclenche là où il apporte quelque chose au visiteur, le résultat d'une simulation, et pas avant. Un visiteur qui a déjà donné ses coordonnées ne se les voit plus redemander sur la même page.
Les simulateurs existants de Trianon vivent aujourd'hui sur des pages dédiées. Nous les ramenons dans le parcours : sur la fiche programme, le prix total devient une mensualité estimée à l'endroit exact où la question se pose. Un simulateur isolé se visite ; un simulateur contextualisé convertit.
Une recherche sémantique qui ne trouve rien doit proposer une reformulation, pas un écran blanc. Un filtre trop restrictif doit suggérer l'assouplissement le plus proche. Sur un site où plus de la moitié du trafic est mobile, chaque cul-de-sac est un abandon.
C'est le composant le moins visible du projet et l'un des plus déterminants : il transforme le Média Vivialys d'un centre de coût éditorial en moteur de trafic qualifié. Votre epic est clair — un article produit n'importe où circule dans toutes les directions, sans double saisie et sans pénalité SEO.
Fondation
Un système de taxonomies structurées porte trois usages à la fois : le thème éditorial, l'audience visée, c'est lui qui sépare BtoC, BtoB et marque employeur sur le Corporate, et la correspondance vers les programmes. Ces trois axes sont modélisés en Phase 1 du cadrage, avant toute maquette du Hub.
Sur-mesure
Groupe vers marques, marque vers Groupe, marque vers marque. Le contenu poussé arrive pré-rempli dans le back-office destinataire : titre, texte, médias, canonique suggérée, et le rédacteur destinataire garde la main : il reprend ou il adapte.
SEO
Reprise à l'identique : la canonique pointe vers la source. Réécriture substantielle : indexation autonome. La matrice de décision est documentée et intégrée au guide back-office, parce qu'une règle SEO que les contributeurs ne connaissent pas n'existe pas.
CRO
Un article sur le PTZ affiche les programmes éligibles au PTZ, pas une sélection éditoriale figée. Le maillage se calcule depuis les tags, ce qui le rend juste sans travail manuel, et le maintient juste quand le catalogue change.
L'équipe mobilisée sur le design system
LisaDesigner du projet et expertise UX
RaphaëlGérant, référent technique HTML/CSSPhilippeExpert accessibilité, développeur Vue / NuxtIsmaëlleExperte accessibilité numériquePiloter
Vous évaluez « la stabilité et la disponibilité réelle de l'équipe » et « la maturité de la gouvernance projet ». Ce sont les deux critères sur lesquels une agence peut mentir le plus facilement en soutenance et le plus visiblement en production. Voici ce que nous engageons, avec les mécanismes qui le rendent vérifiable.
Votre brief pose l'hypothèse : la gestion de projet est absorbée à 70 % par Vivialys, notre rôle est un accompagnement lead tech à hauteur de 30 %. Nous la retenons, et nous en tirons la conséquence ; ce partage ne fonctionne que si les responsabilités sont écrites avant le premier sprint, pas découvertes au troisième.
| Critère | Vivialys — 70 % | Alsacréations — 30 % |
|---|---|---|
| Pilotage global | Chef de projet digital : planning, arbitrages, relations internes | Cheffe de projet : pilotage de la production agence, alerte sur les risques |
| Spécifications | Amont stratégique, arborescences, parcours, spécifications fonctionnelles | Traduction en user stories et critères d'acceptation, challenge technique |
| Contenus | Production, adaptation éditoriale, intégration dans WordPress | Gabarits, guides de saisie, formation des équipes |
| SEO | Préparation du plan de redirections | Exécution technique, contrôle, monitoring post-bascule |
| Technique | Coordination interne avec AGORA et la DSI | Architecture, design system, développement, recette technique |
Le projet ne sera pas transféré à une autre équipe après la soutenance. Les personnes présentées interviennent réellement, avec des responsabilités, des disponibilités et des points de contact identifiés. Trois principes.
Une cheffe de projet unique, point d'entrée de toutes les demandes, garante du planning et de la remontée des risques. C'est elle que vous appelez quand vous ne savez pas qui appeler.
Un interlocuteur unique sur l'architecture, le contrat de données et les arbitrages techniques, présent du cadrage à la bascule. Il ne change pas en cours de route.
L'accessibilité et l'éco-conception ne sont pas des prestations ponctuelles vendues en fin de projet : elles interviennent à la conception du design system, puis en contrôle continu.
L'équipe engagée sur la Phase 1
RodolpheGérant, référent technique front-end et back-endRaphaëlGérant, référent technique HTML/CSSLisaDesigner du projet et expertise UXCharlineCheffe de projets et coordinationIsmaëlleExperte accessibilité numériquePhilippeExpert accessibilité, développeur Vue / Nuxt
ChristopheDéveloppeur web
ThomasDéveloppeur web, performance et éco-conceptionNotre méthodologie est hybride entre jalons et sprints : des jalons structurants pour sécuriser les décisions majeures, des sprints courts pour produire, tester et ajuster. C'est ce que réclame un projet avec un calendrier tenu, des exigences non négociables, plusieurs expertises et des dépendances externes.
Instances de pilotage — trois niveaux, trois rythmes
Participants Chef de projet digital Vivialys + cheffe de projet Alsacréations
Faire circuler l’information courante sans attendre la revue de sprint.
Une demande hors-périmètre — le trajet complet
Le deuxième point mérite d'être détaillé, parce qu'il détermine tout le reste. Les sujets que nous voulons trancher les premiers : l'arbitrage WordPress Multisite ou instances coordonnées, le modèle de données des programmes et des lots, le système de tags qui porte à la fois la syndication et la séparation des audiences, et la structure du design system multi-marques. Ce sont les quatre décisions dont dépend le coût de la Phase 2.
GitLab par défaut — le code, les tickets, la documentation technique et la CI/CD au même endroit. Nous nous adaptons à ClickUp ou Jira si votre chef de projet préfère centraliser chez vous : nous utilisons les deux sur d'autres projets.
FigJam pour les réflexions UX, l'arborescence et le brainstorming du design system. Figma pour l'UI et le design system documenté. Le design system est modélisé dans Figma en même temps qu'il est codé, pas après.
Suite Google Workspace et/ou Wiki pour la documentation projet. Google Meet (ou votre Teams) pour les visios, Slack pour les échanges rapides. Nous nous alignons sur vos outils, mais avons notre propre suite pour avancer vite.
Trois catégories, jamais mélangées : anomalie (écart avéré avec un critère d'acceptation validé), évolution (modification d'un comportement validé ou ajout hors périmètre), question (demande de précision sans modification de code).
| Critère | Définition | Exemples |
|---|---|---|
| Sévérité 1 (bloquant) | Le site ou une fonction critique est inutilisable, ou la sécurité des données est en cause | Fuite de données, indisponibilité du site, formulaire de contact qui ne transmet plus |
| Sévérité 2 (majeur) | Une fonctionnalité clé est dégradée mais un contournement existe | Moteur de recherche programmes hors service, simulateur qui renvoie un résultat erroné |
| Sévérité 3 (mineur) | Le défaut n'empêche pas l'usage | Coquille, défaut d'alignement, imperfection d'affichage sur un navigateur secondaire |
Non négociable
Plan de redirections 301 exhaustif livré avant la mise en production, exécuté et contrôlé par nos soins à partir du plan préparé par votre chef de projet. Monitoring des positions et du trafic organique pendant les trois mois qui suivent la bascule, avec la clause contractuelle que vous exigez.
Non négociable
Axeptio intégré comme gestionnaire de consentement, puisque l'outil est déjà en place chez vous. Registre des consentements, hébergement France ou UE souveraine côté AGORA, documentation fournie à votre DPO.
Objectif AA
Niveau AA visé sur les composants principaux — navigation, formulaires, contenus — traité dans le design system et non en correction finale. Déclaration d'accessibilité livrée avec le site. Deux membres de l'équipe en sont spécialistes.
RGESN
Les critères du référentiel sont intégrés aux critères d'acceptation des composants, pas audités a posteriori. Chaque revue de sprint contrôle le poids et le nombre de requêtes des écrans livrés.
Reprendre un composant pour le rendre accessible après coup demande souvent de le réécrire. Le concevoir accessible dès le départ ne coûte presque rien de plus — et sur un design system destiné à six marques, cette économie est multipliée par six.
IsmaëlleExperte accessibilité numérique — AlsacréationsEngager
Cette section contient les deux points sur lesquels nous nous écartons de vos attentes : la date de mise en production et le montant. Nous ne les enfouissons pas en annexe. Nous les posons ici, avec les raisons et les leviers.
Planning macro — octobre 2026 à juillet 2027
Phase 0 — Mobilisation et sécurisation
Octobre – novembre 2026
Poser le circuit de décision avant d'écrire la première ligne de spécification.
Travaux
Livrables
Trois raisons, par importance.
Raison 1
Vous n'achetez pas deux sites, vous achetez la fondation de six. Comprimer les phases 1 et 2 — cadrage et design system — pour tenir mars revient à livrer un design system conçu dans l'urgence, dont la Phase 2 paiera l'addition sur quatre marques. C'est exactement l'inverse du critère « extensibilité Phase 2 » que vous évaluez.
Raison 2
Vous placez l'intelligence artificielle au centre de l'architecture dès la conception. Cela suppose de vectoriser, d'orchestrer, de verrouiller et de tester des garde-fous sur données réelles. Cette charge ne se comprime pas : elle se reporte. Nous préférons vous dire quand elle sera prête plutôt que de la promettre pour mars et la livrer en juillet.
Raison 3
Vous exigez des Core Web Vitals mesurés en production, un plan de redirections exhaustif avant bascule, un objectif RGAA AA et une clause contractuelle sur la perte de trafic organique. Ces engagements ne se tiennent qu'avec une phase de recette et une répétition générale réelles. Les raboter, c'est transformer vos contraintes non négociables en vœux.
Chacune de ces lignes est un risque tracé au registre dès la phase 0, avec un porteur et une date de levée. Un projet ne dérape pas d'un coup : il dérape parce qu'une dépendance non suivie glisse de trois semaines, six fois.
Notre estimation Phase 1 s'établit entre 60 000 et 78 000 € HT, sur un TJM moyen indicatif de 600 € HT, soit 100 à 150 jours. Votre enveloppe cible annoncée se situe entre 45 000 et 70 000 € HT. La borne haute de notre estimation la dépasse, et la borne basse la dépasse aussi.
Arbitrage budgétaire — actionnez les leviers
Estimation Phase 1
60 000 € – 78 000 € HT
Enveloppe cible annoncée : 45 000 € – 70 000 € HT
La borne basse tient dans l’enveloppe ; la borne haute la dépasse encore.
Estimation indicative sur un TJM moyen de 600 € HT, hors options. Elle n’a pas valeur de devis ferme.
| Critère | Fourchette | Jours |
|---|---|---|
| Direction artistique et maquettes UX/UI | 7 000 – 10 000 € | 13 – 17 j |
| Design system (tokens et composants) | 5 000 – 8 000 € | 10 – 15 j |
| Architecture headless et socle technique | 5 000 – 8 000 € | 10 – 15 j |
| Développement frontend — Trianon Résidences | 11 000 – 15 000 € | 20 – 27 j |
| Développement frontend — Corporate | 10 000 – 12 000 € | 17 – 20 j |
| Moteur de maillage média-produit | 3 500 – 5 000 € | 6 – 10 j |
| Briques IA (sémantique, éditorial, agent) | 10 000 – 15 000 € | 18 – 27 j |
| Migration SEO, recette et mise en production | 2 500 – 4 000 € | 5 – 8 j |
| Gestion de projet (30 %) | 4 000 – 5 000 € | 7 – 10 j |
| Total estimé hors options | 60 000 – 78 000 € HT | 100 – 150 j |
Trois postes méritent un commentaire. L'architecture headless et les développements frontend sont ceux pour lesquels nous pensons que le temps devrait plutôt être étendu qu'assis : ce sont eux qui portent la dette ou l'absence de dette des quatre marques suivantes. La migration SEO et la gestion de projet sont ceux où le temps alloué nous paraît limité et nécessitera des choix de périmètre. Les briques IA appellent un traitement spécifique : le chiffrage suppose un build initial mené en collaboration avec votre expert IA, pas en autonomie.
Le dépassement porte sur deux briques identifiables, et c'est précisément là que nous pensons que l'investissement se rembourse : l'extensibilité native du design system, qui fait baisser le coût des quatre marques de Phase 2, et l'architecture de la couche IA, dont l'intégration dès la conception évite un placage a posteriori et la dette qui va avec.
Questions que le COMEX posera
Aucune évolution hors périmètre n'est engagée sans passer par le circuit d'arbitrage décrit dans la section Méthodologie : estimation par la cheffe de projet et le lead technique, puis choix entre échange à périmètre constant, avenant, ou report au backlog. Le budget ne dérive pas silencieusement, il dérive sur décision écrite — ou il ne dérive pas.
C'est un TJM moyen indicatif, pas un tarif unique. Le détail par profil senior et junior et l'allocation des jours par intervenant seront précisés au devis ferme. À ce stade, votre brief demandait une estimation cadrée et non un devis, et nous nous y tenons.
Les 30 % côté agence : préparation et animation des instances, rédaction des user stories et critères d'acceptation, suivi des tickets, coordination avec AGORA et les prestataires sortants, gestion des retours de recette. Elle ne couvre pas le pilotage global, qui reste chez votre chef de projet digital selon l'hypothèse 70/30.
Elle n'est pas chiffrée ici et ne doit pas l'être : son coût dépend directement de la qualité du socle livré en Phase 1. C'est notre argument central. Nous pouvons en revanche nous engager sur un principe mesurable — le déploiement d'une marque de Phase 2 doit consister à définir de nouveaux tokens graphiques et à activer des composants, sans réécriture du code Vue existant.
Nous aurions pu aligner notre chiffrage sur votre enveloppe et notre planning sur votre date. Plus confortable à présenter, mais risqué. Vous évaluez notre capacité à challenger vos idées plutôt qu'à les valider : faisons-le, ensemble.
RodolpheGérant, référent technique — AlsacréationsContact
Nous confirmons notre intérêt et notre disponibilité pour accompagner vos équipes sur cette Phase 1. Voici ce que nous vous proposons pour la suite du calendrier de consultation, et à qui vous adresser.
Conformément à votre demande, ce n'est pas un commercial qui présentera : ce sont les membres de l'équipe projet qui défendront leurs propres choix techniques et créatifs. Nous prévoyons deux intervenants pour la soutenance — le référent technique et la designer du projet — accompagnés de la cheffe de projet.
Le trio de tête sur ce projet
CharlineCheffe de projets et coordinationRodolpheGérant, référent technique front-end et back-endLisaDesigner du projet et expertise UXPoint d'entrée unique
Cheffe de projets. Toutes vos demandes passent par elle : planning, arbitrages, coordination des expertises, remontée des risques. C'est votre interlocutrice si vous ne savez pas qui appeler.
Référent technique
Gérant et développeur. Architecture, contrat de données, arbitrages techniques, coordination avec AGORA. Signataire des engagements contractuels.
Design system
Designer du projet. Direction artistique, maquettes Figma, conception et documentation du design system extensible.
Ismaëlle et Philippe interviennent en expertise accessibilité sur la conception des composants puis en contrôle continu ; Raphaël, Christophe et Thomas sur l'intégration et le développement. L'ensemble de l'équipe est présentée dans la section Méthodologie.
10 place du Temple Neuf 67000 Strasbourg
SARL au capital de 10 000 € — RCS Strasbourg SIRET 487 942 500 00033 — TVA FR27487942500
Agence web fondée en 2006, dix personnes, labellisée Marque Alsace. Designers, développeurs front et back, cheffe de projet, administration système, experts accessibilité.
Organisme de formation agréé sous le n° 42670418867.