Zerion : redesign du site marketing d'un wallet Web3

Zerion réunit un wallet crypto et un suivi de portefeuille DeFi. Son site marketing devait rendre les fonctionnalités lisibles tout en restant fidèle aux codes du Web3.

Pour cette refonte, Zerion a fait appel à Gemeos, agence web pour les projets Web3, qui a travaillé la direction artistique, l'UX/UI et le développement Webflow.

Faire comprendre un wallet Web3 dès le premier écran

Zerion permet de gérer un wallet crypto, de suivre un portefeuille DeFi et d'interagir avec des applications décentralisées. Le site marketing devait s'adresser à des utilisateurs aux niveaux de connaissance très différents, sans sacrifier la crédibilité technique du produit. L'enjeu était de présenter les fonctionnalités dans un parcours clair, capable de guider vers l'utilisation du wallet.

Gemeos a travaillé la direction artistique et les maquettes UX/UI du site en s'appuyant sur les codes visuels de l'écosystème Web3. Le développement Webflow a ensuite traduit ces choix dans des pages responsives, des composants réutilisables et des interactions adaptées à la présentation des fonctionnalités.

Industrie

Web3

Services

UX/UI Design

Intégration

Direction Artistique

Zerion occupe une place unique dans l'écosystème Web3 : à la fois accessible pour les débutants et suffisamment puissant pour les traders avancés. La direction artistique devait incarner cette dualité — dark, premium, tech-forward — tout en restant lisible et engageante.

Exploration des pistes créatives

Nous avons exploré plusieurs univers visuels avant de converger vers une esthétique résolument Web3 : fonds sombres profonds, dégradés lumineux évoquant la liquidité des actifs numériques, typographies précises et éléments graphiques abstraits inspirés des réseaux décentralisés.

Une identité visuelle forte

La palette, les textures et les animations de la DA ont été orchestrées pour créer une cohérence visuelle forte entre le site marketing et l'application produit, renforçant la confiance des utilisateurs et la crédibilité internationale de la marque.

Pilier DA	Choix créatif	Impact visuel
Couleurs	Dark mode, accents vibrés (vert/bleu)	Premium, mémorable
Typographie	Sans-serif tech, hiérarchie forte	Lisibilité + autorité
Visuels	Dégradés, glassmorphism, assets 3D	Univers Web3 authentique
Motion	Micro-animations, parallax subtil	Expérience immersive

Sommaire

Direction Artistique Web Design Développement

"Le brief était compliqué : on voulait un niveau d'animation que Webflow ne fait pas nativement. La plupart des boîtes nous auraient dit de partir sur du custom. Eux ont dit oui, et ils l'ont fait. GSAP, séquences vidéo, transitions. Rien n'a cassé au lancement."

Alexander Guy

Head of Product @Zerion

Design UX/UI

Le site zerion.io devait remplir trois missions simultanément : convaincre les investisseurs institutionnels, rassurer les utilisateurs grand public sur la sécurité, et convertir les visiteurs en utilisateurs actifs de l'application. Chaque décision de design a été prise en gardant ces objectifs en tête.

Restructuration de l'architecture

Nous avons revu l'architecture de l'information pour mettre en valeur les fonctionnalités phares de Zerion — smart wallet, portfolio tracker DeFi, bridge multi-chain — tout en simplifiant la navigation et en guidant l'utilisateur vers le téléchargement de l'application.

UI Kit & Design System

Un UI Kit exhaustif a été conçu : palette de couleurs complète, set typographique, bibliothèque de composants (cards, buttons, tables de données, badges), icônes custom et guidelines d'animations. Ce système a été intégralement transposé dans Webflow pour garantir cohérence et scalabilité.

Conversions et CTA

Les call-to-action ont été positionnés et designés pour maximiser les téléchargements et les connexions wallet, avec des zones d'entrée clairement hiérarchisées selon le niveau d'engagement attendu de l'utilisateur.

Sommaire

Direction Artistique Web Design Développement

Alexander Guy

Head of Product @Zerion

Intégration Webflow

La migration du site zerion.io vers Webflow a représenté un projet d'envergure, alliant fidélité au pixel près avec les maquettes et exigences techniques élevées : performance internationale, animations complexes et capacité pour l'équipe Zerion à gérer leur contenu en autonomie.

Architecture technique

L'intégration a suivi une architecture Webflow soigneusement planifiée : système de classes CSS normalisé, composants réutilisables, CMS structuré pour les pages produit, blog et mises à jour régulières. Chaque section a été construite pour être modifiable sans risque de casser la mise en page.

Animations & interactions

Les animations de scroll, les transitions de page et les micro-interactions ont été intégrées nativement dans Webflow Interactions, reproduisant fidèlement les effets spécifiés dans les maquettes tout en maintenant des performances optimales.

Tests & mise en ligne

Une phase de QA multi-navigateurs et multi-appareils a précédé la mise en production, couvrant les principaux environnements d'une audience crypto internationale. La mise en ligne s'est effectuée en zéro downtime, avec formation Webflow complète pour l'équipe Zerion.

Critère technique	Solution mise en place
Performance	Optimisation assets, lazy loading
Animations	Webflow Interactions IX2
Responsive	5 breakpoints optimisés
CMS	Structure flexible, autonomie équipe