SecureIVAI | Refonte de marque & plateforme
Aperçu
D'un site no-code à une plateforme IA de niveau production
SecureIVAI aide les petites et moyennes entreprises à adopter l'intelligence artificielle en toute sécurité, avec du conseil en IA, la conformité ISO 42001, des tests de sécurité LLM et des solutions IA sur mesure. Le site d'origine était construit sur une plateforme no-code, sans identité visuelle cohérente ni capacités backend. J'ai été sollicitée pour tout reconstruire : logo, système de marque, refonte UI/UX complète et plateforme full-stack sur mesure déployée sur AWS.
Le problème
Ce qui ne fonctionnait pas
L'ancien site était construit sur une plateforme no-code, sans langage de design cohérent, avec un ton de marque inadapté et aucune fonctionnalité de conversion.
Chargement lent des pages
La plateforme no-code chargeait par défaut des scripts tiers lourds, du CSS surchargé et des ressources non optimisées, nuisant aux performances, au référencement et à la première impression de chaque visiteur.
Signal de marque erroné
Des fonds en dégradé olive et une typographie serif façon presse évoquaient la finance ou l'édition, pas l'IA ni la sécurité.
Aucun système de logo
Le monogramme typographique empilé « IVAI » manquait de mémorabilité et n'avait ni logomark, ni règles de marque, ni cohérence visuelle.
Espaces vides
Les pages ISO 42001 et À propos comportaient d'immenses sections vides. La moitié de la page était vide, sans contenu ni intention de design.
Aucun système de design
Couleurs, espacements et typographie étaient appliqués de façon aléatoire d'une page à l'autre, sans palette partagée ni logique de composants.
Aucun appel à l'action clair
Les visiteurs arrivaient sans étape suivante évidente. Aucun flux de réservation, aucune capture de prospects, aucun parcours de conversion.
Aucun backend
Aucune gestion des prospects, aucun tableau de bord admin, aucune automatisation des e-mails. La prise de rendez-vous reposait sur un widget Acuity Scheduling intégré, peu fiable et difficile à intégrer, ce qui cassait le principal point de conversion du client. Je l'ai entièrement remplacé par Cal.com, qui s'est intégré proprement et a fonctionné dès le premier jour.
Défis
Ce qui a rendu ce projet difficile
Configuration Vite en MPA
Configurer Vite en application multi-pages avec des includes SSI, l'injection PWA et une sortie de build correcte pour chaque route a demandé un travail de configuration important, notamment pour que le service worker mette en cache les bonnes pages sans casser le contenu dynamique.
Support hors ligne & mise à jour automatique
Mettre en place une expérience hors ligne fiable, tout en garantissant que les utilisateurs récupèrent toujours la dernière version à la reconnexion, n'a pas été simple. Le service worker nécessitait une logique précise d'invalidation du cache pour éviter de servir silencieusement des versions obsolètes.
Cohérence du design à grande échelle
Maintenir la cohérence visuelle sur plus de 6 pages, chacune avec des types de contenu, des mises en page et des longueurs de section différents, a exigé une discipline stricte sur les espacements, l'échelle typographique et la réutilisation des composants, sans aucun raccourci de design.
Communiquer la conformité IA aux PME
L'ISO 42001, les tests de sécurité LLM et la gouvernance de l'IA sont des sujets complexes. Le défi éditorial consistait à rendre ces notions accessibles et urgentes pour des dirigeants de petites entreprises non techniques, sans les simplifier à l'excès.
Processus
Comment le projet s'est déroulé
01. Découverte
Audit du site existant, identification des lacunes de marque, cartographie du public cible (décideurs PME), et définition de l'architecture de contenu et des objectifs de conversion.
02. Design de marque
Conception du nouveau système de logo à partir de zéro, en construisant le monogramme IVAI à partir d'une étoile à 4 pointes, puis élaboration de la charte graphique complète : couleurs, typographie, vitrines digitales et identité corporate.
03. Design UI/UX
Conception de toutes les pages sur Figma avec le nouveau système de design : thème sombre, accent sarcelle, composants cohérents, appels à l'action clairs et structure tarifaire orientant les visiteurs vers la consultation.
04. Développement & déploiement
Construction de la plateforme full-stack avec Vite, Node.js et Express. Remplacement d'Acuity par Cal.com, mise en place du tableau de bord admin, de l'automatisation des e-mails, du support PWA, et déploiement sur AWS en production.
Identité de marque
Une marque complète, construite pour inspirer confiance dans l'IA
Le nouveau branding devait communiquer sécurité, intelligence et dynamisme. Le résultat est un système de marque entièrement documenté : logomark, palette de couleurs, typographie, vitrines digitales et identité corporate.
Concept du logo
Le logomark part d'une seule étoile à 4 pointes. Chaque pointe dérive géométriquement une lettre : I, V, A, I. Une forme de cadenas intégrée à l'étoile évoque la sécurité. Les points d'accent sarcelle en forme d'étincelle relient le logo à l'IA et à l'intelligence. Le résultat est un monogramme qui ressemble à un symbole, pas à un mot.
Système de couleurs
Le cyan primaire sur fonds sombres signale l'innovation et la précision. Le sarcelle foncé secondaire apporte profondeur et hiérarchie, en rupture avec les bleus corporate génériques.
Typographie
Inter Tight pour les titres, compact et affirmé aux grandes tailles. Inter pour le texte courant, propre et lisible. Les deux remplacent le serif éditorial inadapté.
Inter Tight
Inter
Design System
Tokens, components, and patterns
Every visual decision documented, from color tokens to interactive components, so the platform stays consistent as it scales.
Colors
Accent
Dark
White
Typography
Inter Tight Headings
Inter Body
Buttons
Cards
AI Security Audit
Identify vulnerabilities in your AI systems before they become liabilities.
$11.8B
AI governance market by 2030
Ready to secure your AI?
Book a CallStarter
$999/mo
- AI risk assessment
- Monthly report
- Email support
Icons
Grid & Containers
Desktop 11 columns · ~24px gutter · 1440px max
Mobile 2 columns · fluid gutter · full width
Container Scale
Spacing Scale
La refonte
Chaque page reconstruite avec intention
Six pages entièrement repensées, chacune avec un objectif clair, des composants cohérents et un appel à l'action orientant le visiteur vers une consultation ou une réservation.
Design responsive
Pensé pour tous les écrans
Chaque page s'adapte parfaitement du desktop au mobile, avec des composants cohérents, une typographie lisible et des appels à l'action pensés pour le tactile, sur tous les points de rupture.
Avant / Après
La transformation, côte à côte
Stack technique
Migration du no-code vers le full-stack
Le backend gère la gestion des prospects, la prise de rendez-vous, l'automatisation des e-mails, l'envoi de fichiers et l'authentification admin, le tout hébergé en production sur AWS.
Fonctionnalités clés
Ce que la plateforme apporte
Tableau de bord admin
Panneau admin sécurisé avec authentification par session pour gérer tous les prospects, soumissions de contact et demandes de rendez-vous.
Prise de rendez-vous
Parcours de réservation de consultation sur mesure, avec notifications par e-mail envoyées à l'entreprise et au prospect.
Automatisation des e-mails
Système propulsé par Nodemailer pour les réponses automatiques, les alertes de prospects et les confirmations de réservation.
Blog de recherche IA
Pôle de contenu pour publier des articles et guides sur la gouvernance de l'IA, établissant un leadership éclairé auprès des PME.
Paliers tarifaires
Pages de tarification structurées (Starter, Professional, Enterprise) qui convertissent les visiteurs en prospects qualifiés.
Support PWA
Application web progressive avec service worker pour le support hors ligne et une expérience installable sur mobile.
Panneau admin
Un vrai backend, conçu pour le client
Au-delà du site public, j'ai développé un panneau admin privé avec authentification par session, un tableau de bord de gestion des prospects et un suivi des rendez-vous. Le client peut se connecter, consulter chaque soumission de contact et gérer les réservations sans toucher au code.
Performance
Scores Lighthouse en production
Construit avec Vite, CSS critique intégré, chargement asynchrone des polices, ressources LCP préchargées et service worker pour le support hors ligne. Vérifié sur desktop en production.
Client Testimonial
What the client said
Working with Safa was one of the best decisions we made for SecureIVAI. She rebuilt our entire platform from scratch (brand, design, and backend) and delivered something we're genuinely proud to show clients. Professional, fast, and she understood exactly what an AI security company needs to communicate.
Mark Bentsen
Founder, SecureIVAI