Kilo

(01) Brief

Le point de départ.

Contexte

Kilo sortait d’une levée de fonds et lançait sa fonctionnalité de prévision. Son site ressemblait à celui de tous ses concurrents : dégradé violet, captures d’écran floutées, promesses vagues. Les dirigeants de PME le quittaient sans comprendre ce que le produit faisait concrètement.

Objectif

Faire comprendre le produit en cinq secondes, montrer un vrai solde, une vraie courbe, une vraie facture rapprochée, et augmenter les ouvertures de compte depuis la page d’accueil.

Public

Gérants et directeurs financiers de PME, 35 à 55 ans, prudents avec leur banque, qui découvrent Kilo par un expert-comptable ou une recommandation et visitent le site depuis un ordinateur de bureau.

Contraintes

• Mentions réglementaires et informations de sécurité visibles sans alourdir la page
• Chiffres d’exemple crédibles, validés par l’équipe produit et conformité
• Un fond animé qui ne pénalise ni l’affichage initial ni les ordinateurs sans carte graphique
• Un système qui servira aussi l’application, les e-mails et les campagnes

(02) Direction artistique

Une aurore derrière la vitre

« La nuit, quand Kilo recalcule les prévisions, une aurore cobalt et verte passe derrière un panneau de verre où le solde se lit d’un coup d’œil. Sérieux comme une banque, précis comme une balance. »

• Précision
• Nuit
• Verre dépoli
• Vert monnaie
• Lisibilité des chiffres

(03) Palette

Des couleurs qui ont un rôle.

(04) Typographie

Les voix du site.

• Titres, logotype, montants

  Cabinet Grotesk

  500 pour les titres et le solde, 700 pour le logo, 800 pour certains logos clients

  128 430,52 €

  Aa500Aa700Aa800

  Une grotesque à forte personnalité mais sobre en 500, serrée à −5,5 % d’interlettrage. Les montants sont en chiffres tabulaires pour que les colonnes s’alignent et que rien ne bouge quand un solde se met à jour.

• Mot-clé du titre en italique (« près. »), certains logos clients

  Instrument Serif

  400 italique

  au gramme près.

  Un seul mot en serif italique vert : la touche humaine dans une interface de chiffres, et la signature de la marque qu’on retrouve dans les campagnes.

• Étiquettes, onglets de période, axe du graphique, numéro de carte

  Geist Mono

  400, capitales

  SOLDE CONSOLIDÉ · 4 COMPTES

  La chasse fixe donne aux libellés un ton de relevé bancaire et distingue les métadonnées des montants.

(05) Grille & mise en page

La structure sous l’image.

1. 01Un voile sombre couvre la moitié gauche pour garantir le contraste du texte sur l’aurore, qui reste libre à droite.
2. 02La grappe produit superpose trois niveaux (panneau, carte inclinée de −8° en bas à droite, notifications) pour donner une profondeur sans 3D.
3. 03Bandeau d’annonce, navigation, héros, preuves : quatre rangées, chacune avec un seul rôle.
4. 04Second écran, les tarifs : titre centré, bascule mensuel / annuel, trois offres en colonnes dont Pro mise en avant par un filet et un halo verts, puis une ligne de garanties (IBAN français, fonds cantonnés, agrément ACPR).
5. 05Sur mobile, le panneau de solde passe sous le titre en pleine largeur, la carte disparaît et une seule notification reste visible. Les tarifs se réduisent à l’offre Pro.

(06) Composants

Les pièces de l’interface.

• C.01

  Panneau de solde

  Verre dépoli (flou de 18 px), solde consolidé de quatre comptes, variation en pastille verte, onglets 1S / 1M / 3M / 1A (la pastille active glisse de l’un à l’autre et la courbe se redessine sur la nouvelle période) et courbe sur six mois avec un point lumineux sur le dernier jour.

• C.02

  Carte Business

  Carte au format bancaire réel (1,586), inclinée, avec reflet en biais, puce laiton et numéro masqué. Elle rend le produit tangible.

• C.03

  Notifications en direct

  « Virement reçu +12 400,00 € » et « Facture F-2291 rapprochée » : deux événements réels du quotidien d’une PME, qui expliquent le produit mieux qu’une liste de fonctionnalités. Un paiement entrant arrive aussi en direct en haut à droite, et le solde roule vers le nouveau montant.

• C.04

  Grille tarifaire

  Trois offres (Essentiel 0 €, Pro 29 €, Scale 79 € HT par mois) avec cinq fonctions chacune. La bascule annuelle (−20 %) fait rouler les prix sur place, sans recharger ni changer de page.

• C.05

  En-tête en verre

  Au défilement, une barre floutée descend avec le logo, trois liens (« Tarifs » en vert) et « Ouvrir un compte » toujours visible.

• C.06

  Bandeau d’annonce

  Pastille « Nouveau » et une phrase sur les prévisions à 90 jours. On met la nouveauté en avant sans fenêtre surgissante.

• C.07

  Pilule de statut

  « Trésorerie PME · temps réel » avec un point vert lumineux qui pulse au-dessus du titre.

• C.08

  Double appel à l’action

  « Ouvrir un compte » en vert plein avec un halo, et « Démo en 2 min » en lien secondaire pour ceux qui ne sont pas encore prêts.

• C.09

  Rangée de preuves

  « 4 800 PME pèsent leurs euros avec Kilo » et cinq logos clients, chacun dans un style typographique différent pour qu’ils ne ressemblent pas à des faux.

(07) Motion

Chaque mouvement a un rôle.

• boucle

  Aurore

  Fond génératif en WebGL (cobalt, vert monnaie, vert acide sur nuit), vitesse lente (0,28), grain léger. Il apparaît en fondu de 1,2 s une fois chargé. Avant, un dégradé CSS aux mêmes couleurs le remplace.

• Tracé

  entrée

  Tracé de la courbe

  La courbe du solde se dessine de gauche à droite en 1,8 s (stroke-dashoffset, cubic-bezier(0.7, 0, 0.2, 1)) à partir de 300 ms, l’aire se remplit en fondu à 500 ms, puis le point final apparaît avec un rebond à 800 ms et émet une onde toutes les 2 s.

• entrée

  Titre

  Deux lignes qui montent hors de leur masque à 100 et 190 ms, 1,1 s en ease-out-expo.

• GrappeGrappe

  transition

  Grappe produit

  Le panneau monte à 200 ms, la carte arrive par la droite à 380 ms, puis les notifications entrent par la gauche à 520 et 620 ms : on lit le produit dans l’ordre d’usage, solde, carte, événements.

• boucle

  Point « temps réel »

  Pulsation de 1,6 s sur la pilule de statut. C’est le seul signal de « direct » de la page.

• VisiteVisiteVisiteVisiteVisiteVisiteVisiteVisite

  boucle

  Visite simulée

  Une boucle de 12 s : clic sur la plage « 1A », la courbe se redessine et la variation passe à 31,8 %, un paiement arrive et le solde roule, puis la page défile jusqu’aux tarifs sous un en-tête en verre, où le passage en annuel fait rouler les prix (29 € → 23 €, 79 € → 63 €) et un reflet balaie le bouton Pro, avant de remonter. La grappe produit défile plus lentement que le texte (parallaxe) et un reflet traverse la carte toutes les 6 s.

(08) Choix expliqués

Ce qu’on a décidé, et pourquoi.

1. 01

   Choix 1 : Un vrai écran plutôt qu’une capture floue

   Les dirigeants de PME n’achètent pas une promesse, ils veulent voir leur tableau de bord. Le panneau est construit en interface réelle avec des chiffres plausibles. Il reste net sur tous les écrans et se traduit facilement.

2. 02

   Choix 2 : Fuir le look « fintech violette »

   Nuit profonde, vert monnaie et une puce laiton : la palette évoque la fiabilité d’une banque et l’argent qui rentre. Le vert est réservé aux montants positifs et aux actions, il garde donc son sens.

3. 03

   Choix 3 : Chiffres tabulaires partout

   Solde, variation, montants des notifications : tout est aligné en chiffres à chasse fixe. Dans un produit financier, un chiffre qui sautille donne une impression d’approximation.

4. 04

   Choix 4 : Un fond génératif, mais sous condition

   L’aurore donne l’ambiance nocturne des calculs de prévision. Elle se charge après le contenu, au plus deux canevas WebGL actifs sur la page, et un dégradé CSS de mêmes couleurs s’affiche sans carte graphique ou si le script ne se charge pas.

5. 05

   Choix 5 : Un voile de lecture plutôt qu’un fond plat

   Le texte se pose sur un dégradé nuit opaque à gauche, et l’aurore reste visible à droite. On garde un contraste AA sur le titre et le chapô sans sacrifier l’atmosphère.

6. 06

   Choix 6 : La preuve sociale en une ligne

   Un chiffre et cinq logos sous la ligne de flottaison suffisent à rassurer un public prudent. Les témoignages détaillés vont sur la page Clients, où ils ont la place de convaincre.

7. 07

   Choix 7 : Mouvement réductible

   Avec « réduire les animations », la courbe s’affiche directement tracée, le point de statut cesse de pulser et la visite simulée (pointeur, défilement, changement de période) n’est pas jouée. Le solde et les notifications sont du texte réel, lisible par les lecteurs d’écran.

(09) Arborescence

7 pages, une intention chacune.

(10) Objectifs

Ce qu’on vise.

Objectifs visés — projet fictif, aucun chiffre mesuré

Ouvertures de compte depuis l’accueil

+35 %

Objectif à trois mois, mesuré sur le clic « Ouvrir un compte ».

Démos lancées

×2

Le lien « Démo en 2 min » doit capter les visiteurs pas encore prêts à s’inscrire.

Taux de rebond sur l’accueil

< 40 %

Le produit doit être compris avant le premier défilement.

LCP sur ordinateur

< 1,8 s

Le titre et le panneau s’affichent avant le fond WebGL.