Conception UI/UX · Création no-code
FlowPro Plumbing
Un site conceptuel pour une entreprise locale fictive de plomberie, réalisé entièrement dans Framer afin de tester un site orienté conversion, piloté par CMS et sans code personnalisé.
2026
Conception UI/UX + création no-code
2 semaines
Aperçu
Client
Secteur
Services
Platform
Projet conceptuel
Services résidentiels · Plomberie
Conception UI/UX · Développement no-code
Framer
Résumé
FlowPro avait besoin d’un site qui inspire confiance en quelques secondes, en privilégiant les preuves — avis, garanties et délai de réponse — plutôt que la décoration, avec un parcours rapide de n’importe quelle page vers une demande de soumission.
Le défi
Les entreprises de services locales perdent des prospects au profit de concurrents aux sites plus soignés, même lorsque leur service réel est comparable. Un visiteur qui hésite entre plusieurs plombiers dans une situation urgente a besoin de preuves de fiabilité immédiates : des avis, des garanties et un moyen de joindre quelqu’un sans attendre. Le projet servait aussi de test complet de l’écosystème Framer : collections CMS pour le blogue, interactions natives pour les onglets et accordéons, et points de rupture adaptatifs, le tout sans écrire de code personnalisé.
Objectifs du projet
Augmenter les demandes de soumission · Renforcer la confiance grâce aux certifications et avis · Signaler clairement la disponibilité 24/7
Objectifs utilisateurs
Trouver rapidement comment joindre l’entreprise · Comprendre les services offerts en un coup d’œil · Obtenir des réponses avant de réserver
Découverte et recherche
Constat 01
La plupart des sites de plomberie locaux cachaient leur numéro de téléphone sous la ligne de flottaison.
Constat 02
Les modèles de sites de services qui misent d’abord sur la preuve sociale performent mieux que ceux qui misent d’abord sur l’image de marque.
Constat 03
Les visiteurs pressés abandonnent presque immédiatement les formulaires de contact à plusieurs étapes.
Orientation du système de design
Une base bleu marine profond et un seul accent orange affirmé gardent la marque fiable plutôt que tape-à-l’œil. Des titres grands et audacieux ainsi que des photos authentiques du métier établissent la confiance, tandis qu’un badge d’avis flottant et des compteurs renforcent la crédibilité sans devoir recourir à de longs témoignages.
Système de conception
Conçu directement en haute fidélité avec les composants et le CMS natifs de Framer. Sans étape distincte de maquette filaire, les boutons, cartes, onglets et l’accordéon FAQ ont été créés une seule fois comme composants Framer réutilisables, puis repris sur toutes les pages.
Conception haute fidélité
Conçu avant tout pour offrir une haute fidélité, à l'aide des composants natifs de Framer et du CMS
La page d’accueil se termine par une barre compacte superposée à un sélecteur d’onglets de mission, afin qu’un visiteur puisse convertir sans chercher une page de contact. Le blogue s’appuie sur de grands titres pilotés par CMS sur fond sombre, dans le même ton que la section d’ouverture. La page contact associe une grille photo à un formulaire long et détaillé, avec menus de localisation et de service, car un visiteur qui s’y rend est prêt à s’engager.
Développement
Créé entièrement dans Framer, sans code personnalisé · Collection CMS pour le blogue · Interactions natives pour les onglets et l’accordéon · Mises en page réactives sur tous les appareils · Formulaire de contact multi-champs avec options de routage
Réflexion
Travailler entièrement dans les contraintes de Framer, au lieu de recourir au code dès qu’un détail devenait complexe, a été le véritable exercice. Le CMS a rendu la structure du blogue très simple, mais obtenir le comportement exact des onglets et accordéons a demandé plus d’essais qu’avec un contrôle direct du balisage. Le projet m’a rappelé tout ce qu’un bon outil no-code peut accomplir, et les situations où je voudrais encore accéder au code pour des éléments très personnalisés. La prochaine fois, je définirais les champs CMS avant de construire les pages, plutôt que d’ajuster le schéma en cours de route.