Tous les projets
SaaS B2B Fintech Design System

Titane · Freelance

Design System & interface pour une neobanque business

Titane est une neobanque pensee pour les independants et les entreprises : comptes multi-devises, cartes physiques et virtuelles, virements internationaux, facturation. J'ai conçu le Design System complet — couleurs, typographie, composants, systeme d'illustration — ainsi que l'interface des principaux parcours du produit.

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

Role

Product Designer freelance

Perimetre

Design System, interface produit

Plateformes

Web desktop

Outils

Figma, tokens & composants

Le contexte

A l'inscription, l'utilisateur choisit son profil — independant ou entreprise — et Titane adapte les comptes, les plafonds et les documents demandes en consequence. Une fois le compte ouvert, le produit couvre tout ce dont une tresorerie a besoin au quotidien : comptes multi-devises (EUR, USD, GBP...), cartes physiques et virtuelles avec plafonds ajustables, virements et conversions de devises au cours du marche, et facturation pour suivre les paiements clients.

L'approche

Plutot que de traiter chaque module comme un produit a part, j'ai construit un langage commun capable de couvrir quatre grands parcours :

1

Cartes — physiques, virtuelles, plafonds

2

Virements — beneficiaires, conversion

3

Demandes — facturation, suivi des paiements

4

Comptes — multi-devises, transactions

Une navigation coherente sur neuf sections

Dashboard, Activites, Cartes, Virements, Demandes, Prelevements, Depot de cheque, Comptes, Parametres : neuf sections derriere un seul menu lateral. Documenter chaque etat actif a garanti que l'implementation reste identique quel que soit l'ecran ouvert.

Etats actifs du menu lateral Titane pour chacune des neuf sections du produit

Cartes

Carrousel de cartes physiques et virtuelles, historique des transactions et panneau de gestion — bloquer la carte, changer le code PIN, ajuster les plafonds de paiement et de retrait — sans quitter l'ecran.

Ecrans Cartes Titane : carrousel de cartes, historique des transactions et detail d'une transaction

Virements

Du premier virement a la conversion de devises : etats vides pour guider les nouveaux utilisateurs, choix du type de transfert, liste de beneficiaires multi-devises avec drapeaux pays, detail d'une transaction, et conversion avec cours en temps reel.

Parcours Virements Titane : etats vides, choix du transfert, beneficiaires, detail de transaction et conversion de devises

Demandes

Le module de facturation permet de suivre les factures envoyees — total, payees, impayees — et d'en creer une nouvelle avec modele, informations d'entreprise et prestations detaillees.

Module Demandes Titane : etat vide, liste des factures avec statuts et formulaire de creation de facture

Comptes

Vue multi-devises des comptes EUR, USD et GBP, detail des transactions par compte, et confirmations contextuelles — localisation d'un paiement sur une carte, statut d'un remboursement — accessibles directement depuis la liste.

Module Comptes Titane : etat vide, comptes multi-devises, detail des transactions et confirmations contextuelles

Le Design System

Pour que la marque reste identifiable aussi bien dans le produit que dans sa communication, j'ai documente deux guides distincts et complementaires : un Design System (couleurs, ombres, typographie, boutons, tags) pour l'interface, et un systeme d'illustration (logos, avatars, cartes bancaires, pictogrammes) pour tout ce qui touche a la marque.

Design system Titane : page de couverture, palette de couleurs solides et bancaires, ombres
Design system Titane : police d'icones, styles de boutons, hierarchie typographique, labels, tabs et badges
Systeme d'illustration Titane : logos, filigranes, avatars placeholder et favicons
Systeme d'illustration Titane : mockups de cartes bancaires, illustrations et iconographie fonctionnelle

Ce que ca a change

4

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

2

Guides documentes — Design System produit et systeme d'illustration de marque.

9

Sections du menu lateral, chacune avec un etat actif coherent et documente.