WaBot : site et identité web d'une plateforme de bots WhatsApp

Le contexte

WaBot est une plateforme en ligne qui permet à une entreprise de mettre en service un assistant WhatsApp automatisé sans écrire de code : on décrit le comportement souhaité, on scanne un QR code depuis son téléphone, et le bot répond aux clients. Le produit s'adresse en priorité aux entreprises d'Afrique de l'Ouest, avec une tarification en XOF et un paiement par FedaPay. Le défi du site était double : rendre immédiatement compréhensible un service technique auprès d'un public non technicien, et convertir cette compréhension en inscription à l'essai gratuit. Biris Tech a pris en charge la conception graphique et le développement du site vitrine et de son entrée applicative.

1. 01Concevoir l'identité visuelle du produit sur le web : palette sombre, vert de signature et système de composants réutilisables
2. 02Structurer un parcours de conversion court, de la promesse d'accueil à la création de compte
3. 03Traduire un service technique en un discours accessible à un public non technicien
4. 04Développer le site en Next.js avec rendu serveur et pages pré-générées
5. 05Construire la grille tarifaire en trois offres, en XOF, avec renvoi vers le paiement FedaPay
6. 06Concevoir les pages Fonctionnalités, Tarifs, FAQ et Blog ainsi que les écrans d'entrée connexion et inscription
7. 07Assurer le référencement : métadonnées par page et données structurées schema.org
8. 08Garantir une lecture confortable sur téléphone, support principal du public visé
9. 09Mettre en production derrière un serveur Caddy avec HTTPS et cache des pages

Ce que nous avons fait

La plateforme repose sur une architecture Next.js en App Router, avec des pages marketing rendues côté serveur puis pré-générées, et une interface applicative (connexion, inscription, tableau de bord) servie sur le même domaine. Le parcours public a été pensé comme un tunnel court : la promesse, les trois étapes de mise en route, la grille tarifaire, puis l'inscription, chaque page ramenant vers le même appel à l'action. L'interface a été dessinée sur un fond sombre avec un vert de signature repris de l'univers WhatsApp, afin que les éléments interactifs se distinguent immédiatement du reste du contenu. La mise en page est construite en Tailwind CSS, avec des points de rupture explicites qui basculent la navigation en menu compact et réorganisent les cartes de fonctionnalités et de tarifs sur téléphone. Les contenus de référence (fonctionnalités, tarifs, FAQ) ont été rédigés avec le client puis structurés en balisage schema.org (Organization, WebSite, FAQPage) pour être exploitables par les moteurs de recherche. Le déploiement s'appuie sur un serveur Caddy avec HTTP/3, HSTS et mise en cache des pages pré-rendues, de sorte que les pages publiques soient servies depuis le cache sans recalcul à chaque visite.

• Direction artistique du produit : palette sombre, vert de signature, jeu de composants et grille typographique
• Site vitrine complet développé en Next.js : accueil, fonctionnalités, tarifs, FAQ et blog
• Grille tarifaire en trois offres (Freemium, Starter, Pro) avec renvoi vers le paiement FedaPay
• Pages d'entrée applicative : connexion et création de compte
• Balisage structuré schema.org (Organization, WebSite, FAQPage) et métadonnées de référencement par page
• Déclinaison responsive complète, du grand écran au téléphone
• Mise en production sur serveur Caddy avec HTTPS, HTTP/3 et cache des pages pré-rendues

Les résultats

• Un site public complet en cinq entrées (accueil, fonctionnalités, tarifs, FAQ, blog) qui expose l'offre sans jargon et ramène systématiquement vers l'essai gratuit.
• Une grille tarifaire lisible en trois offres libellées en XOF, adaptée au marché ouest-africain et reliée au parcours de paiement.
• Un socle de référencement en place : métadonnées propres à chaque page et données structurées Organization, WebSite et FAQPage exploitables par les moteurs de recherche.
• Des pages publiques servies depuis le cache du serveur, sans recalcul à chaque visite, sous HTTPS avec HTTP/3 et HSTS.
• Une identité visuelle cohérente entre le site vitrine et l'entrée applicative, réutilisable pour les prochains écrans du produit.