Création LennSimu
- Rôle
- UI/UX, identité visuelle, développement front-end
- Durée
- 2 semaines
- Outils
- Figma ; HTML, CSS, JavaScript
- Contexte
- Outil professionnel
Brief : Concevoir et développer un simulateur qui permet à un client d'estimer le prix et le délai d'un projet UI/UX en quelques questions, puis de recevoir un devis.
Objectif : Donner une première fourchette de prix immédiate, sans échange préalable, et remplacer les allers-retours de cadrage par un devis prêt à valider.
Livrables : UI/UX du simulateur, identité visuelle, développement front-end (HTML/CSS/JS vanilla), moteur de calcul de l'estimation, génération du devis PDF.
Un devis qui démarre par des échanges
Un client qui cherche un designer freelance veut d'abord savoir si le projet rentre dans son budget. Répondre demande un premier échange pour cerner le besoin, puis un devis rédigé à la main, et le tout prend plusieurs jours avant le moindre chiffre. LennSimu donne cette première réponse tout de suite : le client décrit son projet, voit l'estimation évoluer à chaque choix et repart avec un devis.
Six questions, un panneau d'estimation
Le zoning repose sur deux éléments : un rail de navigation qui montre les six étapes (informations, nature du projet, plateformes, périmètre, livrables, contraintes) et une zone centrale qui ne présente qu'une question à la fois. À droite, un panneau d'estimation reste visible en permanence : fourchette de prix, jours estimés et détail du calcul se mettent à jour à chaque réponse. Sur mobile, ce panneau devient une barre en bas d'écran qui ouvre un tiroir.
Identité
Design system : un bleu profond (#134C85) pour les actions et l'étape en cours, sa version à 20 % pour les fonds et les états secondaires, un fond clair et neutre pour laisser respirer les contenus. Syne porte les titres. Le simulateur reprend la structure de LennAudits et de LennOutils (rail de navigation, cartes arrondies, boutons en pilule), et la couleur suffit à le distinguer de la famille d'outils. Le logo est décliné en icône.
Des choix qui se traduisent en jours
Chaque réponse pèse sur l'estimation de façon lisible. La nature du projet donne une base en jours de travail. La plateforme visée applique un coefficient de complexité, le périmètre (nombre de vues) et chaque livrable ajoutent des jours. L'option urgence majore le prix et raccourcit le délai, et un code de parrainage applique une remise. Le détail du calcul reste affiché à côté du prix, pour que le client comprenne d'où vient le chiffre au lieu de le recevoir comme une boîte noire.
De l'estimation au devis
À la dernière étape, le client choisit entre une estimation immédiate et un devis officiel à signer. Le devis PDF est généré directement dans le navigateur à partir des réponses, à l'identité de l'application, et la demande m'est transmise en même temps. Le formulaire est protégé côté client : un filtre de mots interdits bloque l'envoi avec un message qui précise quoi corriger, et une limite d'envois par tranche de quinze minutes évite les demandes en rafale.
Ce que j'en retiens
Ici, l'utilisateur est un prospect qui découvre mon offre et hésite encore. Le formulaire doit lui demander peu, rien d'obscur, et lui montrer à chaque étape ce que son choix change. Concevoir le simulateur m'a aussi obligé à chiffrer ma propre méthode : combien de jours pour chaque type de projet, et pourquoi.
