NeatInvoice est un produit SaaS que j’ai construit chez Harun Studio : un espace de travail de facturation pour les indépendants et les petites équipes sur le marché mondial. Il ne s’agit pas d’un générateur de PDF unique, ni d’un logiciel de comptabilité d’entreprise, et délibérément pas d’un tableau de bord générique d’IA.
Si vous avez déjà créé un produit Web, vous connaissez probablement ce sentiment : des fonctionnalités continuent d’être ajoutées, mais sans un positionnement clair, le produit commence à ressembler à tout ce qui existe déjà sur le marché.
Avec NeatInvoice, je suis parti de la question inverse : quel problème les outils de facturation existants ne résolvent-ils toujours pas assez bien ?
Dans cet article, j’expliquerai comment le produit a été conçu : le problème que je voulais résoudre, le positionnement que j’ai choisi, les décisions de conception, les fonctionnalités que j’ai créées et pourquoi, ainsi que l’approche technique qui les sous-tend.
Avant d’entrer dans les détails, voici les principaux points que je souhaite souligner :
Vous souhaitez créer un produit SaaS avec une approche similaire ? Parlez-en lors d’une consultation gratuite.
Avant d’écrire une seule ligne de code, j’ai cartographié trois plaintes qui n’arrêtaient pas d’apparaître sur le marché de la facturation des indépendants :
| Plainte | Pourquoi c’est important |
|---|---|
| ”J’ai envoyé la facture il y a trois jours. L’ont-ils même ouverte ?” | Après l’envoi de la facture, il n’y a aucun signal |
| ”Je dois rappeler manuellement aux clients chaque fois qu’un paiement est en retard.” | Les suivis sont répétitifs et non automatisés |
| ”Mon outil de facturation prend plus de temps à apprendre que mon travail réel.” | La navigation est trop complexe ; la valeur du produit se perd dans la complexité |
Derrière ces trois éléments se cache un schéma plus profond : les flux de travail de facturation des indépendants sont fragmentés. PDF au même endroit, suivi dans une feuille de calcul, rappels dans un calendrier manuel. Il n’y a pas de maison de facturation unique qui relie tout cela.
Les concurrents existants se répartissent souvent entre deux extrêmes : trop simple (générateur de PDF sans suivi, sans statut, sans aperçu) ou trop complexe (logiciel de comptabilité d’entreprise avec une longue intégration). NeatInvoice est destiné à combler le vide au milieu.
La décision de positionnement la plus critique au début du projet : la page d’accueil vend un espace de travail, pas un générateur PDF.
Marque (neatinvoice.app) | Itinéraire séparé (/invoice-generator) | |
|---|---|---|
| Rôle | Identité principale : espace de travail facturation | Entonnoir SEO : PDF rapide sans compte |
| CTA | Démarrer un espace de travail gratuit | Générer un PDF |
| Objectif | Accueil de facturation à long terme | Point d’entrée, convertir pour s’inscrire |
J’ai délibérément orienté la copie du héros de la marque vers un angle que les concurrents touchent rarement :
Votre facture a été envoyée. Et maintenant ?
Pas de « générateur de facture gratuit en 30 secondes ». Le problème n’est pas de créer une facture. De nombreux outils le font déjà. Le problème est ce qui se passe après l’envoi : ne pas savoir s’il faut donner suite ou attendre, et ne pas avoir un seul endroit pour voir tout ce qui reste impayé.
| Facture soignée | Alternatives courantes |
|---|---|
| Espace de travail gratuit pour toujours | Essai gratuit de 7 à 14 jours, puis paywall |
| Aperçu des finances + nécessite une attention particulière sur Gratuit | Aperçu uniquement sur les niveaux coûteux |
| Lien en direct + suivi des vues | Pièce jointe PDF sans suivi ouvert |
| Éditeur local d’abord | Cloud uniquement, décalage en mode hors connexion |
| Interface utilisateur calme et de qualité financière | Modèles occupés / Esthétique du tableau de bord IA |
| Limites honnêtes (25 inv/mois gratuits) | Marketing trompeur « illimité » |
Ce que je ne revendique délibérément pas : “facturation basée sur l’IA”, “comptabilité tout-en-un”, “ERP d’entreprise”.
Freelances et petites équipes (1 à 3 personnes) sur le marché mondial : designers, développeurs, consultants, rédacteurs. L’interface utilisateur et la copie du produit sont en anglais car le marché est mondial.
Le travail à réaliser pour lequel j’ai conçu :
NeatInvoice évite délibérément l’esthétique générique du SaaS : dégradés violets, cartes en verre, badges « alimentés par l’IA » partout.
En interne, j’appelle la référence visuelle « The Trusted Desk » : une coque blanc cassé chaleureuse, la facture centrée comme le héros, du chrome calme. Accent indigo uniquement pour les signaux partagés, envoyés et consultés. L’objectif est simple : les chiffres semblent fiables, le document de facturation reste le héros et l’interface utilisateur globale semble familière comme des produits de qualité financière (Stripe, Linear, Mercury).
La décision d’architecture de l’information la plus importante pour l’UX :
| Écran | Itinéraire | Fonction |
|---|---|---|
| Éditeur | /workspace | Créer, modifier, prévisualiser les factures |
| Aperçu | /workspace/overview | Pouls financier, besoin d’attention, tendance des revenus |
La barre de navigation de l’espace de travail ne comporte que deux onglets : Éditeur et Présentation. L’aperçu n’est pas un panneau coulissant. C’est sa propre route de destination.
La raison pratique : les indépendants qui facturent alternent régulièrement entre « éditer une facture » et « vérifier ce qui est encore impayé ». Ce sont des contextes suffisamment différents pour des écrans séparés, sans avoir besoin de dizaines d’éléments de menu.
Direct, discret, de qualité financière. Copier explique ce qui se passe ensuite : enregistrer, publier, envoyer, rappeler. Pas des superlatifs de startup. Les termes officiels du produit (Espace de travail, Présentation, Lien en direct, Attention requise) ne sont pas paraphrasés avec désinvolture.
L’éditeur utilise une mise en page divisée sur le bureau : document de facture 760 px à gauche, inspecteur 380 px à droite. La barre latérale contient des bibliothèques de factures, d’horaires récurrents, de clients et d’articles. Il existe un aperçu client, une vue sur une seule colonne exactement telle que le client la voit sur le lien en direct. Prise en charge de plus de 40 devises et de 12 paramètres régionaux pour les étiquettes de facture. Exportations PDF côté client. Cycle de vie du statut : Brouillon → Envoyé → Consulté → Payé, avec En retard et Annulé comme états terminaux.
J’ai choisi une approche locale car l’éditeur est utilisé chaque jour et doit rester réactif. Les modifications n’attendent pas sur le réseau ; la synchronisation cloud s’exécute en arrière-plan avec des indicateurs honnêtes (inactif, sauvegarde, enregistré, erreur). Les invités sur /invoice-generator enregistrent dans le navigateur ; les utilisateurs connectés se synchronisent via Supabase. L’aperçu client réduit le risque qu’une facture ait un aspect différent lorsqu’elle parvient au client. Les bibliothèques de clients et d’articles accélèrent la répétition des factures sans avoir à saisir à nouveau les données.
Fonctionnalités principales ici :
/inv/[id]) sous forme de page en lecture seule pour les clients sans compteLes pièces jointes PDF ne peuvent pas être suivies. Le lien en direct est le principal différenciateur, une réponse directe à “L’ont-ils même ouvert ?”
Une chose que les utilisateurs doivent comprendre : la publication d’un lien en direct n’est pas la même chose que le statut Envoyé. Les brouillons peuvent être publiés pour un aperçu du client ; les rappels automatisés (Pro) nécessitent le statut Envoyé ou En retard. Garder ces concepts séparés évite de fausses attentes.
Avec le forfait gratuit, les utilisateurs copient un lien en direct et le partagent par e-mail, Slack ou tout autre canal qu’ils utilisent déjà. Pro ajoute l’envoi d’e-mails dans l’application avec le lien en direct dans le corps, et non une pièce jointe PDF, ainsi que des rappels de paiement programmés 3, 7 ou 14 jours après la date d’échéance, une fois par facture.
La gratuité reste utile sans courrier électronique intégré à l’application ; copier le lien est suffisant pour la plupart des cas d’utilisation. Pro monétise la livraison et l’automatisation, pas la décoration de l’interface utilisateur. Un rappel par facture est intentionnel : suffisant pour donner un coup de pouce, pas assez pour donner l’impression d’être du spam.
L’aperçu montre :
Chaque ligne peut créer un lien profond vers l’éditeur (?invoice=id) ou partager une intention (?share=1).
C’est ce qui fait que le produit ressemble à un espace de travail, et pas seulement à un éditeur de factures. Les besoins d’attention sont conçus pour que vous connaissiez la prochaine étape, et pas seulement un flux de notification générique.
Un grand livre de toutes les factures avec des filtres pour le statut, le client, l’ancienneté et la recherche, connectés depuis Aperçu sans changer d’application. L’aperçu est destiné au résumé quotidien ; l’activité est destinée à l’audit et à la recherche plus approfondie.
Un graphique facturé/payé au fil du temps complète la présentation sans la surcharger. Les pigistes peuvent visualiser les schémas de flux de trésorerie sans feuille de calcul séparée.
Chaque espace de travail possède sa propre identité d’expéditeur : logo, coordonnées de l’expéditeur, champs de paiement, préfixe, devise, langue par défaut. Gratuit obtient 1 espace de travail ; Pro jusqu’à 10. Basculez depuis la barre de navigation ; les bibliothèques et les métriques sont limitées à l’espace de travail actif.
De nombreux pigistes dirigent plusieurs noms d’entreprise. Les espaces de travail limités empêchent le mélange des données client et des factures entre les marques.
Les plans sur la toile font office de plannings principaux. Les nouveaux plannings démarrent en pause jusqu’à ce que l’utilisateur les active une fois la liste de contrôle terminée. Les factures d’événement sont des factures enfants ; la modification d’une occurrence ne modifie pas le plan.
Les honoraires mensuels sont un cas d’utilisation clair pour les Pro. Séparer le plan de l’occurrence empêche les modifications récurrentes accidentelles de rompre le calendrier principal.
La route /invoice-generator propose des PDF dans le navigateur sans inscription, 10 factures/mois en local. Une fois connecté, les brouillons peuvent fusionner dans l’espace de travail cloud.
Il s’agit d’un point d’entrée SEO et d’une intégration légère. Il ne s’agit pas de l’identité de la marque, mais d’un pont vers l’espace de travail complet.
| Couche | Choix | Raison |
|---|---|---|
| Front-end | Routeur d’application Next.js, React, Tailwind CSS v4 | Routage basé sur fichiers, composants serveur, écosystème mature pour SaaS |
| Base de données et authentification | Supabase (Postgres, Authentification, Stockage, RLS) | Auth + données relationnelles sans créer un backend à partir de zéro |
| Hébergement | Vercel | Déploiement rapide, intégration GitHub, convivialité |
| Courriel | Renvoyer | Envoi des factures et rappels depuis l’application |
| Facturation | Polar.sh | Abonnement Pro (Fondateur et standard) |
| Génération côté client | Aucun coût de serveur par exportation |
L’e-mail passe actuellement par Renvoyer ; Je pourrai envisager Unosend plus tard pour des raisons de rentabilité à mesure que le volume d’envoi augmente.
NeatInvoice a été construit avec une assistance significative de l’IA, un modèle que j’ai déjà utilisé sur ImageTools.pro et Penasihat Hosting. Cursor pour le développement principal, Codex pour le code répétitif et le refactoring, Antigravity pour l’itération de l’interface utilisateur frontale.
L’IA a accéléré les itérations et le passe-partout de l’interface utilisateur, mais les décisions relatives aux produits (schéma de données, cycle de vie des factures, publication/envoi, monétisation) sont restées délibérées et manuelles.
NeatInvoice est d’abord conçu autour d’un espace de travail utile, avec des capacités avancées de livraison et d’automatisation disponibles à mesure que le produit évolue. Les décisions relatives aux produits visent à prendre en charge de véritables flux de facturation plutôt que de créer une démo artificiellement limitée.
La présentation et le suivi des vues sont des décisions de positionnement et non des fonctionnalités délibérément verrouillées pour forcer les mises à niveau.
Le positionnement compte plus que le nombre de fonctionnalités. NeatInvoice gagne sur la clarté après l’envoi, pas sur l’empilement des fonctionnalités.
Marque séparée de l’entonnoir SEO. /invoice-generator et l’espace de travail sont deux produits sur un seul domaine. Leurs identités ne doivent pas se brouiller.
Deux écrans suffisent pour la facturation quotidienne. Plus de navigation ne signifie pas automatiquement meilleure.
Publier et Envoyé sont des concepts différents. Ils doivent être conçus et communiqués clairement car ils affectent directement les attentes en matière de rappel et de suivi.
La priorité locale est logique pour un éditeur quotidien. La réactivité de l’interface utilisateur compte plus qu’une synchronisation agressive en temps réel.
Un niveau gratuit honnête renforce la confiance. Le marché de la facturation est déjà fatigué de la lassitude des essais.
Un design calme est une caractéristique. Pour les documents financiers, la confiance vient de la retenue et non de la décoration.
NeatInvoice montre comment j’aborde la création de produits SaaS chez Harun Studio : partir d’un problème clair, maintenir fermement le positionnement, maintenir la conception disciplinée, puis exécuter techniquement sans ingénierie excessive.
Si vous avez une idée de produit Web ou de plateforme interne en tête, nous pouvons vous aider de l’audit des besoins à l’exécution :
Produit en direct : neatinvoice.app. Feuille de route publique sur neatinvoice.app/roadmap.
Sites React modernes lorsque des fonctionnalités dynamiques sont nécessaires.
Sites vitrines, pages d’atterrissage et sites professionnels orientés contenu.
Mises à jour, sauvegardes, surveillance de la sécurité et suivi des performances.
Fondateur de Harun Studio, développeur web, blogueur et spécialiste de l’hébergement. Il aide les entreprises à construire des sites plus sains grâce au design, au développement et à la maintenance à long terme.
Découvrez d’autres conseils directement liés à ce sujet.
ÉTUDES DE CAS Mon expérience dans la création d'ImageTools.pro, une application de traitement d'images en ligne optimisée par Next.js, Sharp.js et Shadcn UI, et comment l'IA a changé la façon dont je crée des applications Web.
Lire l’article
ÉTUDES DE CAS Une étude de cas sur la migration de Penasihat Hosting : d'une configuration WordPress encore solide vers Next.js 16 + PostgreSQL pour une flexibilité à long terme, un CMS personnalisé, des pages d'outils et une base de produit plus évolutive.
Lire l’article
J'ai transformé un site HTML conçu par l'équipe MSI Freight en un site WordPress personnalisé avec le même design, 13 pages, 32 articles migrés et 346 règles de redirection.
Lire l’article