LogoBuild With Mat
Retour

SAAS Dashboard d'administration et de pilotage de campagnes marketing

SAAS Dashboard d'administration et de pilotage de campagnes marketing

Un dashboard Next.js développé en 6 semaines pour piloter la communication d’un réseau de franchises. Création de campagnes centralisées, analytics temps réel et éditeur graphique intégré type Canva. Un outil pensé business-first pour superviser, créer et analyser la communication locale efficacement.

🖥️ Binette Dashboard – Étude de cas : piloter la communication locale d’un réseau de franchises

Contexte

Après le développement de l’app mobile Binette Companion, le fondateur de Binette souhaitait créer un dashboard web centralisé permettant au siège des franchises de :

  • Piloter la communication digitale de l’ensemble des franchisés.
  • Créer des campagnes globales et les attribuer à des groupes spécifiques.
  • Analyser les performances locales et nationales en temps réel.

🎯 Objectif business

Développer un MVP fonctionnel en 6 semaines, prêt à être démontré à un groupe pilote de franchisés, afin de valider l’adoption et de préparer un déploiement progressif.


🚀 Défi

Les franchises clientes de Binette font face à plusieurs problématiques :

  1. Absence de vision globale sur la communication locale de leurs franchisés.
  2. Difficulté à déployer rapidement des campagnes cohérentes sur l’ensemble du réseau.
  3. Outils actuels inadaptés : solutions fragmentées (Canva, agences, outils internes) sans centralisation ni supervision.

Mon rôle était de concevoir et développer un outil professionnel, performant et intuitif pour résoudre ces enjeux.


🔧 Mon approche technique et stratégique

Stack choisie

Frontend : Next.js + Tailwind CSS

  • Next.js pour ses performances, son SEO-ready et son SSR utile aux futures fonctionnalités publiques.
  • Tailwind CSS pour un design system rapide, modulable et harmonieux.

Backend : HonoJS + Drizzle ORM + PostgreSQL

  • HonoJS : API typesafe ultra-performante, garantissant rapidité et robustesse.
  • Drizzle ORM : requêtes SQL entièrement typées et sécurisées.
  • PostgreSQL : base relationnelle idéale pour gérer campagnes, utilisateurs, franchises et logs.

Hébergement : Cloudflare Workers

  • Déploiement serverless assurant latence minimale et coûts réduits, parfaitement aligné avec un MVP scalable.

Autres services intégrés

  • Polotno Editor : éditeur graphique intégré type Canva, permettant aux équipes marketing de créer des visuels et templates directement dans le dashboard.
  • Resend : service d’email transactionnel performant pour notifications et invitations utilisateurs.

✨ Fonctionnalités clés développées

  1. Pilotage global des campagnes
  • Création de campagnes centralisées avec templates visuels et textes.
  • Attribution ciblée aux franchisés ou groupes de franchisés.
  • Suivi de l’état de diffusion et validations locales.
  1. Analytics détaillées
  • Visualisation des performances globales et locales en temps réel.
  • KPIs clés : reach, engagement, taux d’adoption par les franchisés.
  1. Polotno Editor intégré
  • Permet de créer et modifier des visuels directement dans le dashboard, à la manière de Canva, sans quitter l’interface.
  • Éditeur totalement customisé et intégré au design system Binette.
  1. Gestion des utilisateurs et permissions
  • Authentification sécurisée multi-roles (siège, marketing, franchisés).
  • Gestion granulaire des accès et des droits d’édition / publication.
  1. Notifications et emailing (Resend)
  • Invitations utilisateurs, notifications de campagnes et rappels automatiques.
  • Gestion centralisée des templates emails dans le backend.

🗂️ Déroulement concret du projet

1. Cadrage stratégique (Semaine 1)

  • Ateliers business pour comprendre en profondeur la stratégie de communication des franchises.
  • Définition des users stories et mapping complet des flows utilisateur (siège, marketing, franchisés).

2. Design UX/UI (Semaine 2)

  • Création complète du design system (couleurs, typographies, composants).
  • Conception des wireframes et maquettes haute fidélité sur Figma.
  • Itérations rapides avec le fondateur pour valider chaque section avant développement.

3. Développement technique (Semaines 3-5)

Frontend Next.js

  • Intégration du design system Tailwind CSS.
  • Développement des pages principales : dashboard analytics, campagnes, users management, éditeur Polotno.

Backend HonoJS + Drizzle

  • Mise en place des routes API typesafe pour une cohérence frontend/backend optimale.
  • Structuration PostgreSQL : schémas campagnes, users, franchises, logs et permissions.
  • Intégration Resend pour la partie emailing transactionnel.

Polotno Editor

  • Intégration avancée de l’éditeur graphique dans Next.js.
  • Customisation UI pour un branding cohérent et une UX fluide.

4. Itérations et validations (Tout au long du projet)

  • Déploiements quotidiens sur l’environnement staging, permettant au fondateur de tester en temps réel chaque feature.
  • Emails récapitulatifs chaque soir, incluant :
    • Développements réalisés
    • Points nécessitant validation
    • Plan de travail pour le lendemain

➡️ Cette méthodologie async-first a permis d’avancer rapidement sans multiplier les réunions, tout en assurant un alignement permanent.


5. Finalisation et livraison (Semaine 6)

  • Tests fonctionnels complets sur l’ensemble des flows.
  • Optimisation des performances backend et frontend.
  • Préparation des supports de démonstration pour la présentation client.

🛠️ Points techniques avancés

🔐 Typesafe end-to-end

  • HonoJS + Drizzle + Next.js pour un typage complet et une robustesse maximale.

📊 Analytics temps réel

  • Implémentation d’agrégations SQL optimisées pour des dashboards fluides, même avec un grand volume de données.

🖌️ Polotno Editor

  • Personnalisation complète pour une intégration fluide au dashboard, offrant une expérience type Canva native.

🌐 Infrastructure optimisée

  • Cloudflare Workers pour un hébergement serverless rapide, scalable et à coût réduit, parfaitement adapté au modèle SaaS visé.

📈 Résultats et impact

✅ Livraison d’un MVP complet en 6 semaines, prêt pour la démonstration commerciale auprès d’un groupe de franchises.
✅ Retours très positifs sur la simplicité d’usage, l’intégration native de l’éditeur graphique et la clarté des analytics.
✅ Accélération des discussions commerciales grâce à un produit fonctionnel, crédible et centré sur les besoins métier.


👤 Mon rôle

En tant que fullstack et product owner, j’ai assuré :

  • La définition stratégique produit et UX
  • La conception UX/UI complète (design system + maquettes)
  • Le développement frontend Next.js et backend HonoJS/Drizzle/Postgres
  • L’intégration Polotno Editor et Resend
  • La gestion des validations quotidiennes et la livraison finale

🔭 Vision future

Pour la V2, j’ai recommandé :

  • Développement d’un module d’A/B testing des campagnes.
  • Automatisation des recommandations basées sur les performances.
  • Mise en place d’une marketplace interne de templates entre franchises.

Conclusion

Binette Dashboard illustre ma méthode :

Allier compréhension business profonde, expertise UX/UI et excellence technique pour créer des outils professionnels réellement utiles et alignés avec la stratégie des clients.