94 lines
5.2 KiB
Markdown
94 lines
5.2 KiB
Markdown
|
# PHASE J — IDENTITÉ VISUELLE & MATURITÉ PERÇUE
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## J1. Perception professionnelle
|
|||
|
|
|
|||
|
|
### 1. Confiance — Un utilisateur fait-il confiance en 5 secondes ?
|
|||
|
|
|
|||
|
|
**Note : 7/10**
|
|||
|
|
|
|||
|
|
**Oui, avec réserves.** Le design system KODO dégage une impression de produit travaillé et distinctif. La palette néon cyan/magenta sur fond sombre (mode par défaut) est visuellement frappante et cohérente avec l'univers audio/créatif. Les tokens CSS sont bien définis, le dark mode est complet, les animations sont fluides (easing tokenisés, transitions cohérentes).
|
|||
|
|
|
|||
|
|
**Réserves** : L'esthétique "manga × graffiti × gaming × terminal" est très niche. Un utilisateur professionnel (producteur, label) pourrait percevoir le produit comme trop "joueur" et pas assez sérieux. Les clip-paths manga et les effets néon, s'ils sont trop présents dans l'interface réelle, peuvent nuire à la perception de fiabilité.
|
|||
|
|
|
|||
|
|
### 2. Cohérence — Impression d'une seule main ?
|
|||
|
|
|
|||
|
|
**Note : 6/10**
|
|||
|
|
|
|||
|
|
**Partiellement.** Les composants UI primitifs sont cohérents entre eux (Button, Card, Badge suivent le même langage visuel). Le design system définit des tokens clairs.
|
|||
|
|
|
|||
|
|
**Problèmes** :
|
|||
|
|
- La dualité de tokens (`--kodo-*` vs `--veza-*`) trahit une refonte en cours
|
|||
|
|
- Les fichiers CSS vanilla parallèles aux composants React montrent une couche de design précédente non nettoyée
|
|||
|
|
- Les hacks `!important` dans 2 fichiers CSS suggèrent des corrections d'urgence, pas un design délibéré
|
|||
|
|
- La coexistence de Modal et Dialog indique des décisions de design non tranchées
|
|||
|
|
|
|||
|
|
### 3. Maturité — V0.1, MVP, beta, ou produit mature ?
|
|||
|
|
|
|||
|
|
**Note : MVP avancé / Beta précoce**
|
|||
|
|
|
|||
|
|
Le code source révèle :
|
|||
|
|
- **Forces d'un produit beta** : 222K LOC, 60+ composants UI, TypeScript strict, design system formalisé, Storybook, tests, Sentry, feature flags
|
|||
|
|
- **Faiblesses d'un MVP** : build cassé, 25 fichiers orphelins, 706 `as any`, import fantôme, 5 fichiers de "ComingSoon" placeholder, features non implémentées (education, gear, live, queue, developer sont des placeholders)
|
|||
|
|
|
|||
|
|
**Verdict** : Un **MVP ambitieux avec une infrastructure de beta** — le squelette est solide mais les finitions manquent.
|
|||
|
|
|
|||
|
|
### 4. Positionnement — L'esthétique correspond-elle à la cible ?
|
|||
|
|
|
|||
|
|
**Note : 7/10**
|
|||
|
|
|
|||
|
|
**Si la cible est des créateurs/producteurs audio jeunes (18-35)** : Oui, l'esthétique manga/gaming/neon résonne avec cette démographie. C'est distinctif et mémorable, ce qui est un avantage concurrentiel.
|
|||
|
|
|
|||
|
|
**Si la cible est un public B2B plus large** (labels, distributeurs, professionnels de l'audio) : Non. L'esthétique est trop niche et pourrait aliéner des utilisateurs plus conservateurs. Un mode "professionnel" plus sobre serait nécessaire.
|
|||
|
|
|
|||
|
|
### 5. Différenciation — Identité distinctive ou template ?
|
|||
|
|
|
|||
|
|
**Note : 8/10**
|
|||
|
|
|
|||
|
|
**Clairement distinctif.** Ce n'est PAS un template Material/Bootstrap/Tailwind UI. Le design system KODO a une vraie identité :
|
|||
|
|
- Palette OKLCH (moderne, perceptuellement uniforme)
|
|||
|
|
- Clip-paths manga
|
|||
|
|
- Gradients néon
|
|||
|
|
- Gaming elements (XP, achievements)
|
|||
|
|
- Scrollbar custom
|
|||
|
|
- Noise texture overlay
|
|||
|
|
- Glass morphism thématisé
|
|||
|
|
|
|||
|
|
C'est un travail d'identité visuelle délibéré, pas un assemblage de composants génériques.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## J2. Comparaison concurrentielle
|
|||
|
|
|
|||
|
|
### Produit le plus proche visuellement
|
|||
|
|
|
|||
|
|
L'UI rappelle un **croisement entre Spotify (layout, dark mode, player bar) et Discord (sidebar, chat, glassmorphism)**, avec une couche d'identité gaming/manga unique. Les tokens de layout (`--sidebar-width-expanded: 240px`) sont explicitement alignés sur Discord.
|
|||
|
|
|
|||
|
|
### Écart avec les leaders
|
|||
|
|
|
|||
|
|
| Dimension | Veza | Spotify | Discord | SoundCloud |
|
|||
|
|
|-----------|------|---------|---------|------------|
|
|||
|
|
| Design system maturity | MVP+ | Production | Production | Production |
|
|||
|
|
| Dark mode | ✅ Complet | ✅ | ✅ | ⚠️ Partiel |
|
|||
|
|
| Animations | ✅ Tokenisées | ✅ Subtiles | ✅ Fluides | ✅ Basiques |
|
|||
|
|
| Loading states | ✅ Skeletons | ✅ | ✅ | ⚠️ Spinners |
|
|||
|
|
| Responsive | ✅ Mobile-first | ✅ | ⚠️ Desktop-first | ✅ |
|
|||
|
|
| Performance | ⚠️ Build cassé | ✅ | ✅ | ✅ |
|
|||
|
|
| Accessibilité | ⚠️ Skip link manquant | ✅ | ⚠️ | ⚠️ |
|
|||
|
|
| i18n | ⚠️ Non externalisé | ✅ 60+ langues | ✅ 30+ langues | ✅ |
|
|||
|
|
|
|||
|
|
**Écart principal** : Finition et robustesse. Les leaders n'ont pas de build cassé, pas de code mort, pas de `as any` endémique.
|
|||
|
|
|
|||
|
|
### 3 éléments qui tirent vers le bas
|
|||
|
|
|
|||
|
|
1. **Build cassé** — Impossible de vérifier le rendu réel en production. C'est le signal le plus négatif possible.
|
|||
|
|
2. **Code mort et duplications** — 25 fichiers orphelins, 5 CSS parallèles, 2 systèmes de modales. Ça transpire le "pas fini".
|
|||
|
|
3. **Placeholder "Coming Soon"** — 5 routes sont des placeholders vides. Un utilisateur qui navigue sur Gear, Live, Education, Queue ou Developer voit un écran vide.
|
|||
|
|
|
|||
|
|
### 3 éléments qui fonctionnent bien
|
|||
|
|
|
|||
|
|
1. **Design system KODO** — L'identité visuelle est forte, distinctive et cohérente dans sa philosophie. Les tokens CSS sont complets.
|
|||
|
|
2. **Architecture de composants UI** — 60+ primitives bien typées, avec variants, stories et tests. C'est un vrai design system.
|
|||
|
|
3. **Infrastructure technique** — TypeScript strict, React Query, Zustand, Storybook, Sentry, MSW, ESLint custom rules. Les outils sont là pour supporter un produit de qualité.
|