Smartch Brand System · UX/UI · Design d'Interaction

Refonte du site Smartch et création de sa charte (web, présentations, réseaux sociaux)

Repenser l'architecture de l'information du site vitrine et créer un Brand System global (Web, Présentations, Social Media) garantissant la cohérence de la marque, tout en optimisant la conversion via un design d'interaction pointu.

Client

Smartch

Rôle

Product Designer Senior
(UX, UI, Brand System)

Type

Site vitrine B2B
Brand System

Secteur

Learning & Formation digitale

1. Contexte & Cadrage du Problème
Le client

Smartch, une agence spécialisée dans le learning et la formation digitale.

Le besoin initial

Moderniser l'identité visuelle de l'agence et clarifier l'offre sur le site vitrine.

Le problème systémique identifié

Au-delà du site web, l'agence souffrait d'une fragmentation visuelle sur ses autres points de contact (propositions commerciales, réseaux sociaux). De plus, l'ancienne interface web manquait de dynamisme et peinait à guider l'utilisateur vers la prise de contact (génération de leads).

2. Démarche & Arbitrages UX/UI

L'intervention a débuté par la restructuration du cœur de l'écosystème : le site web, en alliant rigueur architecturale et fluidité interactive.

Architecture de l'information (Web)

Réorganisation complète de l'arborescence et des parcours utilisateurs. L'objectif était de passer d'un site "plaquette" complexe à une architecture de page claire, orientée sur la lisibilité des offres.

Architecture de l'information - site vitrine Smartch
Design d'Interaction (Motion UX)

Les micro-animations ont été pensées non pas comme des embellissements esthétiques, mais comme des leviers d'utilisabilité et de conversion.

Guidage cognitif

Animation séquentielle des icônes de méthodologie et du slider de compétences pour orienter le sens de lecture et révéler l'information de manière fluide, réduisant ainsi la charge cognitive.

Feedback & Affordance

Création d'un effet de survol magnétique sur les labels de sélection du formulaire. Ce feedback tactile virtuel réduit la friction perçue et encourage l'interaction.

Optimisation de la conversion

Mise en place d'une ancre persistante (sticky) discrètement animée en bas à droite de l'écran, servant de raccourci permanent vers le formulaire de contact sans interrompre l'exploration de la page.

Micro-animations - interactions et motion design
Interface site vitrine Smartch
Animation rubriques - navigation
Interface site vitrine Smartch - suite
Handoff technique

Spécification stricte des animations (courbes de vélocité/easing, durées de transition, comportements au scroll) en collaboration étroite avec l'équipe de développement front-end pour garantir une exécution performante et sans latence.

3. Modélisation du "Brand System"

Pour éviter que cette nouvelle charte graphique ne se dégrade avec le temps, elle a été pensée comme un système modulaire applicable au-delà du produit web.

De l'UI au Pitch Deck

Traduction des Design Tokens du site web vers un système de gabarits de présentation. Création d'une librairie de slides modulaires (titres, présentation d'équipe, business cases, plannings) réutilisant les mêmes codes visuels.

Smartch - Système de présentation modulaire
Smartch - Templates Social Media
Templates Social Media (Marketing)

Déclinaison du système pour les réseaux sociaux via des grilles standardisées. Les composants ont été pensés pour absorber différents volumes de texte de manière élégante.

4. Constats & Scalabilité
Une expérience plus engageante

Le motion design (interactions magnétiques, ancre persistante) a été pensé pour rendre le parcours plus organique et guider vers le formulaire de contact. Chaque animation répond à une intention précise : signaler un état, guider le regard ou confirmer une action.

Autonomie des équipes

Les templates stricts permettent aux équipes commerciales de composer leurs présentations à partir de gabarits, et à l'équipe marketing d'animer les réseaux sociaux avec les mêmes codes visuels.

Cohérence de bout en bout

Le système vise une expérience continue pour le client final : de la découverte sur LinkedIn à l'exploration du site web, jusqu'à la réception de la proposition commerciale.