D'un back-office hérité
à un poste de trading
lisible.
Refonte stratégique et design end-to-end de b-cube.ai, plateforme de trading crypto piloté par IA. Cinq modules unifiés sous une même interface, pour des traders particuliers qui veulent automatiser leur portefeuille sans coder. Mission de 10 mois en 2022, PM et Designer en solo, dans un marché crypto en pleine effervescence qui a imposé d'itérer en continu.
"Binance spot"
Rendre lisible un produit financier dense, sans le simplifier.
b-cube.ai construit une plateforme tout-en-un de trading crypto piloté par IA. La promesse : donner à un trader particulier les outils habituellement réservés aux fonds quantitatifs, sans qu'il ait besoin d'écrire une ligne de code.
Cinq modules à faire cohabiter dans la même app. Une marketplace de bots algorithmiques (programmes qui passent des ordres automatiquement à partir de modèles mathématiques). Du copy trading, qui permet de reproduire les positions d'un trader humain en un clic. Un portefeuille multi-exchange. Un module de rendement DeFi. Un centre éducatif.
À mon arrivée, l'interface ressemblait à un back-office hérité. Esthétique outil interne, hiérarchies floues, chaque module vivait dans son silo. Le produit ne souffrait pas d'un manque de fonctionnalités. Il souffrait d'un manque de lisibilité.
Mission de 10 mois en 2022, PM et Designer en solo. Stratégie produit, roadmap, design end-to-end (site vitrine et webapp), coordination avec l'équipe interne (algorithmes, smart contracts, DeFi) et les prestataires externes. J'ai tenu le projet de bout en bout, les développeurs en posture d'exécution.
Le contexte ne s'est pas calmé pendant ces 10 mois. LUNA s'effondre en mai, FTX en novembre. Pour b-cube, qui vend de l'automatisation, c'est paradoxalement une période d'effervescence : les utilisateurs affluent, les sujets bougent, il faut itérer plus vite que la roadmap initiale ne le permettait.
Cinq modules sous une seule interface.
J'ai cadré la vision V2 autour de cinq modules à faire cohabiter sous la même barre de navigation, le même langage de risque, les mêmes composants. Pilotage de la roadmap, traduction des besoins business et utilisateurs en spécifications fonctionnelles, coordination quotidienne avec l'équipe technique.
L'enjeu n'était pas d'inventer ces modules un par un. C'était de les faire tenir ensemble pour un public qui ne maîtrisait pas la finance quantitative. Une seule barre de navigation, un seul langage de risque (Sharpe, drawdown, volatilité, traduits dans la copy), une seule logique d'onboarding.
- Marketplace de bots. Louer des stratégies algorithmiques toutes faites, avec une carte d'identité par bot (rendement passé, niveau de risque, nombre d'abonnés).
- Social copy trading. Choisir un trader humain et reproduire automatiquement ses positions, avec filtres de risque.
- Portefeuille multi-exchange. Vue consolidée des comptes Binance, Kraken et autres, dans une seule interface.
- DeFi Stake & Trade. Placer ses fonds dans des protocoles automatiques pour générer un rendement passif, intégré au parcours de trading.
- Centre éducatif. Contenus de formation au trading et à la gestion du risque, intégrés dans le produit.
Discover 24 bots
Good morning, thomas
Le risque au même niveau que le rendement.
Sur un produit financier grand public, le réflexe par défaut consiste à mettre le rendement en gros et à reléguer le risque dans un disclaimer en bas de page. Sur b-cube, on a fait le choix inverse.
Sur la carte d'un bot, trois chiffres cohabitent au même niveau visuel. Le rendement sur 3 mois. Le Sharpe (rendement rapporté au risque pris : un bot qui gagne 10 % sans secousse vaut mieux qu'un bot qui gagne 15 % avec des chutes brutales). Le max drawdown (la pire perte historique du bot). Sur le dashboard, la perte potentielle s'affiche à côté du gain. Un utilisateur particulier finira par chercher ce que veut dire « Sharpe ratio ». Autant qu'il le voie dès le premier jour.
Système visuel : dark-mode bento. Densité élevée assumée, modules visuellement cloisonnés, aucun gradient marketing. Verts et rouges réservés au signal financier (gain ou perte), jamais à la décoration. Sky pour la voix produit, neutres warm pour le reste. Inter en famille unique, hiérarchie portée par le poids et le tracking.
12 composants UI documentés et réutilisés à travers les cinq modules : cartes KPI, états vivants (Live, Paused, Stopped), allocation par paliers, fil d'actualité marché, modale de configuration, bloc de balance.
Onboarding refondu. L'ancien parcours demandait à l'utilisateur de comprendre dans la même session la connexion exchange, le staking de tokens BCUBE et la configuration d'un bot. Le nouveau parcours sépare ces trois moments. Chacun est goûtable seul, reprenable plus tard, et renvoie un signal de progrès clair.
5 active bots
Cinq modules livrés, un produit unifié.
V2 shippée et déployée. Cinq modules sous une barre de navigation commune, site vitrine et webapp designés end-to-end. Chaque module utilise les mêmes composants UI, le même langage de risque, la même hiérarchie de navigation, ce qui n'existait pas avant.
Onboarding refondu, du parcours monolithique d'origine à trois moments séparables (connexion exchange, staking, premier bot). C'était le principal goulet d'étranglement du produit avant la mission.
Équipe technique coordonnée de bout en bout. Algorithmes de trading (partenariat académique avec l'Université Paris-Saclay), smart contracts audités, DeFi, prestataires externes. J'ai porté seul la stratégie produit, le design et la roadmap, les développeurs en posture d'exécution. Une condition rare qui a permis d'itérer vite sans perdre la cohérence.
b-cube V2 design system · dark-mode bento
Tokens, atoms, molecules, organisms — la grammaire visuelle qui rend un produit financier dense lisible pour des traders particuliers. Échelle d'inks 0–10, robin teal en accent, Geist Mono partout où un chiffre apparaît.
01 Tokens
Inks — échelle 0 → 10
11 paliers du fond le plus profond (#0A0B10) au texte le plus clair (#F2F3F5). Tout le bento se navigue dans cette gamme.
Robin teal — accent signature
La voix produit. Glow sur les CTAs, dim sur les chips actifs, plein sur les valeurs de référence.
Signal — gain / perte / alerte
Les couleurs financières. Verte au-dessus, rouge en-dessous, ambre pour la pause. Jamais utilisées en décoration.
Typographie
Geist pour le display, Geist Mono pour tout ce qui est financier (tabular-nums obligatoire), Instrument Serif en touche.
Spacing — grille 4 px
Bento dense mais respirée. Les padding internes des cards tournent autour de 14-22 px.
Radii
Bento : sm pour les chips, md pour les inputs, lg pour les cards, xl pour les blocs hero. Pill 999 pour les status.
02 Atoms
StatusPill
Live · Paused · Stopped3 états + dot. La couleur signe l'état du bot. Live = up green, paused = warn ambre, stopped = dn red.
Tag
marché · stratégieCatégorie de marché. Spot, Futures, DeFi, DEX. Neutre par défaut, ne porte pas de signal financier.
Chip — range
timeframe toggleSélecteur de période. Variant is-on sur fond robin dim. Mono tabular pour aligner les chiffres.
CoinAvatar
3 sizesCarré arrondi avec lettre. Couleurs canoniques de l'écosystème (Bitcoin orange, Ethereum violet, etc).
DeltaIndicator
▲ ▼ —Variation chiffrée signée. Tabular nums pour l'alignement vertical dans les tables.
Sparkline
SVG · 200×36Mini-graph dans les rangs de tableau et les bot cards. Up green, down red. Aucun axe.
KbdHint
shortcut hintIndicateur de raccourci clavier dans la search bar et les actions rapides.
IconBtn
avec / sans badgeBouton compact 36×36, ink-2 sur ink-3. Le badge robin signale les notifications non-lues.
CTA
primary · ghost · signalBoutons d'action. Primary robin. Ghost transparent. Signal pour les actions financières (deposit / withdraw).
Hex avatar
tier badgeAvatar hexagonal robin teal. Initiale en Geist 700, ink-0 pour la lisibilité sur le gradient.
SearchBar
⌘K activableBarre de recherche globale. Placeholder dim, kbd hint à droite. Présente dans la top bar.
Number
tabular nums · monoToute valeur financière. Geist Mono, font-variant-numeric: tabular-nums pour aligner les chiffres dans les tables.
03 Molecules
KPI tile
return · win · sharpe · drawdownPetit tile dashboard. Label uppercase mono + valeur Geist Mono + delta. Réutilisé pour 4 KPIs.
PnL card
today's breakdownDécomposition du PnL du jour. Realised, unrealised, fees, trades. Mono tabular partout pour l'alignement.
Bot card
marketplace · subscribeCarte d'identité d'un bot algo. Coin avatar, nom, marché, return 3M, sparkline, 3 stats, bouton subscribe.
Balance block
par actifSolde par actif. Affiche disponible + remaining. Le pourcentage robin signale la marge restante.
Stepped allocation
paliers d'allocationSlider d'allocation par paliers. Le bar gradient bunting → robin marque la position. Dot robin pour l'étape courante.
Modal header
title + closeHeader de modale. Titre + bouton close. Padding dense pour le bento, séparateur visuel par la card surface.
Success state
post-actionÉtat de confirmation. Cercle up green + message. Suivi optionnellement d'un CTA pour la prochaine étape.
Profcard
tier · stakedCarte tier utilisateur. Hex avatar + tier + tokens BCUBE staked. Donne le contexte d'accès aux bots premium.
04 Organisms
Hero balance
dashboard topBloc principal du dashboard. Total balance en Geist Mono 40, range chips, sparkline pleine largeur. Glow robin en arrière-plan.
Connected accounts
3 exchanges liveTableau des comptes exchange connectés. Coin avatar, nom, balance, available, status pill, chevron.
Market pulse
live feedFlux d'évènements en direct. Dot up/dn glowing pour signaler la direction. Hour-meta à droite.
My bots — table row
data-heavyLigne du tableau My bots : rang, coin, nom, marché, assets, PnL, change, drawdown, sparkline, statut. Data-heavy assumé.
Sidebar nav
8 destinationsNav verticale 76 px. Logo robin gradient en haut, items 44×44, dot robin en accent sur l'item actif.