Bubo Cybersec
Bubo Cybersec est un éditeur de solutions de cybersécurité spécialisé dans l’accompagnement des PME et ETI qui ne disposent pas de ressources internes importantes en matière de sécurité informatique.
Son produit phare est Bubo365 : une interface centralisée pour surveiller, gérer et piloter la sécurité de l’environnement Microsoft 365 (Emails, Teams, SharePoint, OneDrive…), détecter les comportements à risque, les permissions excessives.
Interventions
- Audit UI / UX de l’application existante
- Maquettes des améliorations validées
- Kit UI (charte graphique, iconographie, et composants)
Outils
- Figjam
- Figma
Contexte et objectifs
Déjà lancée sur le marché, l’application Bubo365 disposait d’une maturité fonctionnelle (outil complet et performant techniquement), mais d’un design ne lui rendant pas justice (composants non uniformisés et incohérences graphiques).
👉 Enjeux identifiés
Cette situation soulevait plusieurs problèmes :
- Crédibilité : Dans le secteur exigeant de la cybersécurité, l’interface ne reflétait pas le professionnalisme attendu
- Adoption utilisateur : Une expérience utilisateur peu fluide freinait l’adoption de l’outil
- Perception : L’aspect de l’interface contrastait avec les standards modernes du marché
Pour répondre à ces problématiques, ma mission s’est articulé autour de 3 objectifs principaux :
- Modernisation du design : créer une interface professionnelle et rassurante, adaptée au contexte sérieux de la cybersécurité
- Uniformisation des composants : garantir la consistance visuelle sur l’ensemble de l’application en établissant une charte graphique cohérente et un kit UI comprenant une bibliothèque de composants modulables et réutilisables
- Amélioration de l’expérience utilisateur : faciliter l’adoptation de l’outil par les équipes en simplifiant les écrans et en fluidifiant les parcours
Méthodologie
Audit de l’expérience utilisateur (UX)
L’audit UX a permis d’identifier systématiquement les points de friction dans l’application existante.
Axes d’investigation :
- Étude des parcours utilisateurs : Cartographie des parcours principaux et secondaires, identification des étapes superflues ou complexes
- Architecture de l’information : Évaluation de la clarté des menus et de la navigation, analyse de la hiérarchie de l’information
- Structure des écrans : Examen de la logique des étapes dans les workflows, identification des sources de surcharge cognitive
Livrables :
- Rapport d’audit détaillé avec points critiques
- Priorisation des problèmes (impact vs. effort)
👉 Audit de l’interface utilisateur (UI)
L’audit UI a évalué la qualité visuelle, la cohérence graphique et la hiérarchie des éléments.
Axes d’investigation :
- Évaluation de la charte graphique : Revue des typographies, couleurs, composants, iconographie
- Consistance de l’interface : Vérification de l’alignement des éléments (boutons, champs, cards), ccohérence des marges et espacements, usage systématique des icônes, détection des variations injustifiées
- Lisibilité et clarté visuelle : Contrastes, taille de police, équilibre visuel et densité de l’information, hiérarchie typographique
- Responsive design : Test du comportement sur différentes résolutions, vérification de l’adaptabilité des composants, évaluation de l’expérience mobile/tablette
Livrables :
- Rapport d’audit UI avec captures annotées
- Inventaire exhaustif des composants
- Analyse des contrastes et conformité accessibilité
👉 Recommandations stratégiques
Suite aux audits, les recommandations ont été classées selon deux priorités :
Quick wins
Actions à impact immédiat et coût de mise en œuvre faible :
- Corrections des contrastes non conformes
- Uniformisation des espacements et alignements
- Standardisation des composants existants (boutons, inputs)
- Amélioration de la hiérarchie typographique
Améliorations structurantes
Actions à fort impact nécessitant un investissement plus important :
- Refonte de l’architecture de l’information
- Redesign complet de certains parcours critiques
- Création d’une nouvelle charte graphique
- Développement du design system
👉 Maquettes Figma
Mise en œuvre concrète des recommandations validées avec le client.
Maquettes haute-fidélité
- Écrans redesignés intégrant les améliorations
- Déclinaisons responsive (desktop, tablette)
- États des composants (hover, active, disabled, error)
Kit UI complet
- Charte graphique : Définition des couleurs primaires, secondaires, états
- Typographie : Système de hiérarchie, tailles, graisses, line-heights
- Iconographie : Bibliothèque d’icônes cohérente et modulable
- Composants : Bibliothèque Figma de tous les composants réutilisables (boutons, cards, inputs, modales, tableaux, etc.)
Résultats attendus
Pour l’entreprise
- Amélioration de la crédibilité : Une interface moderne qui reflète le sérieux de l’outil
- Meilleure adoption : Des parcours simplifiés qui favorisent l’utilisation régulière
- Différenciation : Une identité visuelle distinctive sur un marché concurrentiel
Pour les utilisateurs
- Expérience fluide : Réduction des frictions et de la charge cognitive
- Professionnalisme : Une interface rassurante adaptée aux enjeux de cybersécurité
- Efficacité : Des parcours optimisés qui permettent d’accomplir les tâches plus rapidement
Pour l’équipe produit
- Cohérence : Un design system qui garantit l’uniformité
- Scalabilité : Des composants modulables pour les évolutions futures
- Efficacité : Une bibliothèque qui accélère la production de nouvelles fonctionnalités