Tous les projets
SaaS B2B Fintech Design System

Titane · Freelance

Design System & interface pour une néobanque business

Titane est une néobanque pour les indépendants et les entreprises. Comptes multi-devises, cartes physiques et virtuelles, virements internationaux, facturation. En freelance aux côtés de l'équipe Titane, j'ai pris en charge le design system, des couleurs au système d'illustration, et l'interface des principaux parcours.

Dashboard Titane : cartes bancaires, historique des transactions et gestion de carte

Rôle

Product Designer freelance

Périmètre

Design System, interface produit

Plateformes

Web desktop

Outils

Figma, tokens & composants

Le contexte

À l'inscription, l'utilisateur choisit son profil, indépendant ou entreprise, et Titane adapte les comptes, les plafonds et les documents demandés. Une fois le compte ouvert, le produit couvre le quotidien d'une trésorerie. Comptes multi-devises, cartes physiques et virtuelles avec plafonds ajustables, virements et conversions au cours du marché, et facturation pour suivre les paiements clients.

L'approche

Avec l'équipe produit, on a posé une base commune aux quatre grands parcours au lieu de traiter chaque module à part. Je m'occupais du design.

1

Cartes — physiques, virtuelles, plafonds

2

Virements — bénéficiaires, conversion

3

Demandes — facturation, suivi des paiements

4

Comptes — multi-devises, transactions

Une navigation cohérente sur neuf sections

Neuf sections derrière un seul menu latéral. Dashboard, Activités, Cartes, Virements, Demandes, Prélèvements, Dépôt de chèque, Comptes, Paramètres. J'ai documenté chaque état actif pour les développeurs, et l'implémentation n'a pas dérivé d'un écran à l'autre.

États actifs du menu latéral Titane pour chacune des neuf sections du produit

Cartes

Carrousel de cartes physiques et virtuelles, historique des transactions, et un panneau de gestion pour bloquer la carte, changer le code PIN ou ajuster les plafonds, sans quitter l'écran.

Écrans Cartes Titane : carrousel de cartes, historique des transactions et détail d'une transaction

Virements

Du premier virement à la conversion de devises. États vides pour guider les nouveaux venus, choix du type de transfert, liste de bénéficiaires avec drapeaux, détail d'une transaction, conversion au cours du moment.

Parcours Virements Titane : états vides, choix du transfert, bénéficiaires, détail de transaction et conversion de devises

Demandes

Le module de facturation sert à suivre les factures envoyées, payées et impayées, et à en créer une nouvelle avec modèle, informations d'entreprise et prestations détaillées.

Module Demandes Titane : état vide, liste des factures avec statuts et formulaire de création de facture

Comptes

Vue multi-devises des comptes EUR, USD et GBP, détail des transactions par compte, et confirmations accessibles directement depuis la liste, comme la localisation d'un paiement ou le statut d'un remboursement.

Module Comptes Titane : état vide, comptes multi-devises, détail des transactions et confirmations contextuelles

Le Design System

Pour que la marque reste reconnaissable dans le produit comme dans sa communication, j'ai documenté deux guides auxquels l'équipe et les développeurs pouvaient se référer. Un design system pour l'interface, avec les couleurs, les ombres, la typographie, les boutons et les tags. Un système d'illustration pour la marque, avec les logos, les avatars, les cartes bancaires et les pictogrammes.

Design system Titane : page de couverture, palette de couleurs solides et bancaires, ombres
Design system Titane : police d'icônes, styles de boutons, hiérarchie typographique, labels, tabs et badges
Système d'illustration Titane : logos, filigranes, avatars placeholder et favicons
Système d'illustration Titane : mockups de cartes bancaires, illustrations et iconographie fonctionnelle

Ce que ça a changé

4

Parcours majeurs (Cartes, Virements, Demandes, Comptes) construits sur la même base de composants.

2

Guides partagés avec l'équipe. Design system produit et système d'illustration de marque.

9

Sections du menu latéral, chacune avec un état actif cohérent et documenté.