SQOOL Brand System (2021-2024)

Concevoir une identité visuelle unifiée pour un écosystème de 25+ produits éducatifs

Grid Description

Transformation d’une identité fragmentée en un système de design cohérent — du logo aux composants UI, en passant par la voix éditoriale — déployé sur 8 applications, plusieurs devices, et tous les supports internes.

Introduction

En 2021, UNOWHY avait grandi vite. De 60 à 250 employés. D’une tablette Android avec launcher à une suite complète d’applications web et un écosystème PC/tablettes multi-niveaux.

Mais l’identité était fragmentée : logos multiples, codes couleurs incohérents, styles UI éparpillés. Confusion entre UNOWHY (corporate) et SQOOL (produit). Pas de système visuel entre apps, sites d’aide, docs.

On avait besoin de clarté. D’une langue visuelle commune. D’un système qui scale.

J’ai pris le lead sur la définition et le déploiement du SQOOL Brand System — la fondation visuelle et éditoriale de tout l’écosystème.

01. Contexte

Le problème UNOWHY était passé d’un acteur hardware-first à un modèle plateforme-produit. Chaque nouvelle app (Classe, MDM, Partage, Applications) arrivait avec sa dette design et ses incohérences héritées de systèmes Android legacy ou de branding de différents prestataires.

Ce qu’on voyait :

Launchers Android legacy avec UX chargée et typographies/couleurs incohérentes
Hi-SQOOL et ses services web sans alignement visuel
Efforts marketing et produit désynchronisés
Aucune library de patterns ou convention de nommage entre composants UI

L’enjeu Cette fragmentation diluait la valeur de marque, créait de la confusion pour les utilisateurs (surtout les enseignants naviguant entre outils), et compliquait l’onboarding des équipes tech.

02. Mon Rôle

Lead Designer (Stratégie, Design Systems, UI, Branding, Supervision d’équipe)

Responsabilités :

Conception et structuration du système visuel multi-apps
Direction des explorations visuelles et recherche iconographique pour l’identité produit
Collaboration avec l’agence Fllow pour la refonte des logos UNOWHY + SQOOL
Livraison et présentation des frameworks design aux équipes Produit, Design, Exec et Tech
Supervision de 2 personnes : 1 Brand Designer, 1 UX Writer

03. Approche

Phase 1 — Audit & Diagnostic

On a conduit un diagnostic brand system couvrant :

Launchers Android legacy avec UX et couleurs/fonts inconsistantes
Hi-SQOOL et ses services web manquant d’alignement
Efforts marketing et produit non alignés
Absence de library de patterns ou conventions de nommage

→ Insight clé : Le manque de cohésion diluait la marque, créait de la confusion utilisateur, et ralentissait l’onboarding tech.

Phase 2 — Explorations Visuelles

J’ai démarré par des explorations visuelles pour les icônes : dossiers, documents, applications. Itérations sur styles avec ombres, glyphes, métaphores, palettes couleurs.

Tests avec équipes internes, intégration dans maquettes hi-fi pour évaluer :

Clarté, équilibre couleur, reconnaissance en petits formats
Scalabilité cross-thèmes (light/dark)

Phase 3 — Pont Produit / Corporate

En parallèle, partenariat avec l’agence Fllow pour :

Redesign du logo UNOWHY + de la marque SQOOL
Alignement tone-of-voice, système typographique (basé sur Inter/Geist), palette couleur
Définition du système grille duotone pour l’identité app

J’ai ensuite étendu cette fondation dans le système complet d’identité visuelle et composants pour les apps SQOOL.

Incluant :

Langage de formes hexagonales pour identité applicative
Structures d’icônes duotone cohérentes
Assignation couleurs par rôle (ex : bleu admin/pilotage, vert création, violet outils pédagogiques)
Harmonie visuelle cross-apps et OS

04. Design Details

a. Guidelines Design

Logique d’icônes app et usage par type (cloud, pilotage, pédagogique)
Système d’icônes fichiers par format (DOCX, PDF, images, etc.)
Règles couleurs pour accessibilité, cohérence device, thèmes light/dark

b. Système d’Assets

Sets d’icônes exportés pour Android/iOS/Web
Librairies de composants Figma partagées entre 5+ squads
Intégration au design system interne avec specs prêtes pour les devs

c. Documentation Système Visuel

Slide decks pour équipes design et marketing
Manuels d’usage partagés avec équipes externes et partenaires
Présentation marque dans les decks vision internes

Principes d’interaction intégrés (inspirés d’Anthony Hobday) :

Chaque élément interactif a un comportement hover/focus prévisible
Éviter le scanning horizontal dans la navigation
Les icônes doivent être supportées par des labels sauf si hyper-familières
« Éviter la friction by design »

Exemples concrets :

Icônes duotone pour chaque app (SQOOL Classe, Partage, etc.)
Navigation modulaire app qui peut s’étendre/réduire selon form factors
Templates visuels pour newsletters et changelogs release
Support objectifs accessibilité (contraste couleur, lisibilité police, spacing)

05. Résultats & Apprentissages

Impact tangible (même sans KPIs classiques type DAU/NPS) :

Look & feel unifié sur 6+ apps développées de 2022 à 2024
Clarté produit améliorée : enseignants et élèves distinguent les outils par iconographie et palette
Reconnaissance marque renforcée cross hardware, OS, services web
Système adopté par toutes les équipes produit, base pour nouveaux lancements (SQOOL Protect, Extend)

Ce qu’on a appris :

Un brand system, c’est 10% d’UI, 90% d’adoption
Les guidelines sans intégration dans les outils (Figma, Notion) sont ignorées
Un langage visuel partagé aide à porter la stratégie produit
Les décisions les plus invisibles (conventions nommage, padding, etc.) sont souvent les plus puissantes

Testimonial :

« Ce système de marque est devenu une vraie référence en interne. Il nous a permis de livrer plus vite, d’aligner visuellement les nouveaux outils, et d’expliquer notre vision aux institutions. »
— Directeur Produit, UNOWHY

06. Assets

brand-logo-concepts@2x.png — Concepts logo et évolution
icons-library@2x.png — Library complète icônes
zeroheight-brand-guidelines.pdf — Documentation Zeroheight
sqool-palette-and-type@2x.png — Palette et typo système
ui-kit-library-structure@2x.png — Structure libraries Figma
newsletter-template@2x.png — Templates communication