Quand Waddaithnie Birotte nous a contactés pour lancer Ujaali Séduction, elle avait un produit — du gel nail polish de qualité — une vision très claire de son esthétique, et une clientèle cible précise : les femmes haïtiennes de la diaspora, exigeantes, connectées, habituées aux standards des grandes marques internationales. Notre défi : construire une présence digitale qui soit à la hauteur de cette ambition, sur un budget PME.
Ujaali — qui signifie "éclat" en swahili — reflétait exactement ce que la cliente voulait projeter : une marque lumineuse, moderne, fièrement haïtienne, mais avec les codes visuels des marques de beauté internationales. Ce positionnement nous a guidés dans chaque décision, du choix des couleurs à l'architecture de la boutique.
La demande initiale couvrait un site multi-pages complet : page d'accueil, catalogue produits avec filtres, système de fidélité, quiz de recommandation personnalisé, et intégration des réseaux sociaux. Un projet ambitieux pour une marque en phase de lancement.
Créer une expérience premium sur e-monsite — une plateforme pensée pour des sites standards — sans compromettre ni la fluidité ni l'esthétique que la cliente exigeait. Chaque fonctionnalité devait être construite from scratch en HTML/CSS/JS.
Avant de toucher au code, nous avons travaillé l'identité visuelle digitale d'Ujaali. Une marque de beauté qui cible la diaspora haïtienne doit réussir un équilibre délicat : l'élégance internationale des grandes marques, combinée à une chaleur et une authenticité caribéennes. Trop froide, elle perd son ancrage. Trop folklorique, elle perd sa crédibilité premium.
La palette retenue jouait sur des tons profonds et sensuels, avec des accents dorés pour évoquer la préciosité du produit :
La typographie associait une police serif élégante pour les titres — évocatrice des magazines de mode — à une sans-serif lisible pour les descriptions produits et les prix. Les icônes, les boutons et les espacements étaient calibrés pour donner une sensation d'espace et de luxe accessible.
Chaque élément visuel devait passer un test simple : est-ce qu'une femme haïtienne à Montréal ou Miami, habituée à naviguer sur Sephora.com, se sentirait à l'aise sur ce site ? Si la réponse était non, on recommençait.
Nous avons également produit des mockups desktop et mobile avant tout développement — une étape que nous recommandons systématiquement pour les projets e-commerce. La cliente pouvait valider chaque écran visuellement sans imaginer le résultat final.
L'architecture du site a été pensée comme un parcours client — de la découverte de la marque jusqu'à la commande. Chaque page avait un rôle précis dans ce funnel.
Plutôt qu'un seul fichier HTML monolithique, chaque section majeure a été livrée comme un fichier indépendant intégrable dans e-monsite. Cette modularité permettait de modifier une section sans risquer de casser les autres — crucial pour une cliente qui voulait pouvoir évoluer son site elle-même.
Ce qui différencie Ujaali d'une simple page catalogue, ce sont trois fonctionnalités pensées pour créer de l'attachement à la marque et augmenter la valeur par cliente.
Le quiz de recommandation
Un questionnaire en 4 étapes — teint de peau, style habituel, occasion, finish préféré — qui aboutit à une sélection personnalisée de 3 produits recommandés. Développé entièrement en JavaScript vanilla, sans aucune dépendance externe. Le résultat s'affichait instantanément, avec un lien direct vers les fiches produits correspondantes et un bouton de partage WhatsApp.
Une cliente qui complète un quiz est 3 fois plus susceptible de passer commande qu'une cliente qui browse le catalogue seule. Elle se sent conseillée, non pas vendue. Pour une marque de beauté qui cible des femmes exigeantes, cet accompagnement fait toute la différence.
Le système de fidélité par niveaux
Trois paliers visuels — Nacre, Corail, Or — avec des avantages progressifs. Le système était affiché sous forme de barre de progression interactive : la cliente pouvait voir combien de points la séparaient du niveau suivant. Simple, visuel, motivant. Les données de fidélité étaient stockées dans Firebase Firestore, liées à l'email de la cliente.
Le filtre produits dynamique
Le catalogue était filtrable en temps réel par couleur (via des pastilles visuelles cliquables), par type de finish (glossy, matte, shimmer), et par collection. Tous les filtres étaient cumulables et la grille se réorganisait instantanément, sans rechargement de page.
- Pastilles couleur cliquables — l'utilisatrice voit immédiatement la couleur avant de filtrer
- Filtres cumulables — couleur + finish + collection simultanément
- Compteur de résultats — affichage du nombre de produits correspondants en temps réel
- Message d'état vide — si aucun produit ne correspond, un message encourage à élargir la recherche
Construire une expérience premium sur e-monsite impose des contraintes. La plateforme a ses propres CSS globaux et son propre JavaScript qui peuvent interférer avec votre code. Voici les principaux obstacles que nous avons dû contourner.
Les icônes décoratifs s'affichaient sous forme de carrés noirs sur certains navigateurs Android courants en Haïti et dans la diaspora. La cause : des polices d'icônes chargées via CDN non supportées sur ces environnements.
Remplacement de toutes les icônes par des SVG inline ou des entités HTML décimales. Rendu identique sur 100% des navigateurs, sans dépendance externe. Cette approche est maintenant notre standard sur tous les projets e-monsite.
Les blocs avec opacity: 0 en état initial, censés s'animer à l'apparition dans le viewport, restaient définitivement invisibles. Le CSS global d'e-monsite overridait les transitions avant que l'observer puisse les déclencher.
Suppression de l'opacity: 0 initial et migration vers des animations CSS pures avec @keyframes déclenchées au chargement. Le contenu restait toujours visible, les animations s'exécutaient proprement sans conflit.
Le système de fidélité utilisait Firebase pour stocker les points par cliente. Lors de la navigation entre pages d'e-monsite, Firebase était réinitialisé, générant des erreurs de console et parfois des données corrompues.
Guard getApps().length === 0 avant chaque appel initializeApp(). Cette vérification garantit qu'une seule instance Firebase tourne, quel que soit le parcours de navigation de la cliente sur le site.
Je voulais un site qui soit aussi beau que les grandes marques que mes clientes connaissent. Groupe 3D a compris ça dès le départ — ils ne m'ont pas livré un site, ils m'ont livré une marque.
Ce projet nous a aussi confirmé quelque chose d'important : les clientes de la diaspora haïtienne sont parmi les plus exigeantes. Elles comparent avec des références internationales. Leur livrer quelque chose de médiocre aurait été une erreur commerciale pour la marque — et une erreur de réputation pour nous.
Ce que ce projet nous a appris :
- 1 Les mockups avant le code sont non négociables pour les projets beauté. L'esthétique est le produit. Valider visuellement avant de développer évite des allers-retours coûteux sur des détails de couleur, d'espacement ou de typographie.
- 2 Les fonctionnalités d'engagement valent l'investissement. Le quiz et le programme fidélité ont été les éléments les plus commentés positivement par les premières clientes. Ils ont aussi été les plus complexes à développer — mais ils définissent l'expérience de la marque.
- 3 La modularité est une valeur ajoutée client. Livrer des fichiers indépendants par section permettait à Waddaithnie de faire évoluer son site par étapes, sans tout refaire. C'est une forme de respect du budget et de l'autonomie du client.
- 4 WhatsApp est le vrai bouton d'achat en Haïti. Chaque page produit avait un lien WhatsApp pré-rempli avec le nom du produit. Ce circuit court — voir → vouloir → écrire directement — est le parcours d'achat le plus naturel pour notre marché.
Ujaali Séduction est la preuve qu'une marque haïtienne peut avoir une présence digitale qui rivalise avec les standards internationaux, sans budget de multinationale. Ce qui compte, c'est la méthode, l'attention au détail et la compréhension du marché cible.
Si vous lancez une marque — beauté, mode, lifestyle ou autre — et que vous voulez une boutique qui soit à la hauteur de votre produit, parlons-en. C'est exactement ce que nous faisons.
Vous lancez une marque ou une boutique en ligne ?
Nous concevons des boutiques sur mesure qui reflètent votre identité et convertissent vos visiteurs en clientes. Contactez-nous pour discuter de votre projet.