Se repérer
Les catégories restent accessibles en permanence et donnent une lecture immédiate de la profondeur du catalogue.
Projet professionnel en alternance
Rebranding
& refonte UX/UI
Faire évoluer l’image d’un grossiste informatique B2B et repenser son expérience e-commerce, sans perdre ce qui fonde sa relation avec les revendeurs : la proximité, l’expertise et l’accompagnement.
Mon rôleCo-direction du projet avec ma responsable
01 Le projet
Le point de départ
Une entreprise qui avait grandi plus vite que son image.
L’ancienne identité ne reflétait plus complètement le développement de 1FOTRADE, son expertise de grossiste informatique et ses ambitions auprès de partenaires français et internationaux.
- Entreprise
- 1FOTRADE, grossiste informatique B2B
- Projet
- Rebranding et refonte UX/UI du site e-commerce
- Cadre
- Alternance chez 1foTeam
- Collaboration
- Projet co-dirigé avec ma responsable
Faire évoluer
Une image plus mature, professionnelle et internationale
Préserver
La proximité, la disponibilité et la relation humaine
02 Identité de marque
Un signe porteur de sens
Le réseau devient symbole.
La nouvelle identité abandonne la mascotte et la couronne au profit d’un langage plus sobre. Son pictogramme central, le Nodus, représente un réseau de connexions en mouvement.
Le pictogramme
Nodus
Le Nodus représente un réseau de connexions en mouvement.
Ses formes reliées symbolisent les échanges, la circulation de l’information et le rôle central de 1FOTRADE comme lien entre les marques, les revendeurs et les solutions IT.
C’est un symbole de connexion et de circulation.
“
Innovative Global Partner
Le slogan
La signature affirme un positionnement de partenaire IT complet : une offre large, des produits innovants, une expertise métier et des relations durables.
-
Azur foncé
-
Azur
-
Azur vif
-
Cyan vif
-
Blanc
Le choix des couleurs
Le dégradé Azur / Cyan ancre 1FOTRADE dans son métier : l’Azur foncé porte la fiabilité et l’expertise du grossiste, tandis que l’Azur vif et le Cyan vif apportent le dynamisme et la modernité d’un partenaire tourné vers l’innovation.
Le blanc reste la couleur de respiration de la charte : il garantit la lisibilité de l’identité sur tous les supports, du site e-commerce aux documents commerciaux.
03 Trailer de lancement
Faire ressentir le changement
De la construction du symbole à la vie du nouveau site.
Le trailer s’ouvre sur le changement de l’identité elle-même : l’ancien logo s’efface, le nouveau prend forme avec ses angles arrondis pendant qu’un Nodus se remplit progressivement, jusqu’à ce que les deux motifs se rejoignent en un seul symbole.
Il enchaîne sur une démonstration du site connecté : la page d’accueil et ses rubriques apparaissent, un texte annonce les 16 000 références en stock, puis produits et menus s’animent tour à tour jusqu’au message de livraison en France et à l’international. La validation du panier referme la boucle en revenant au catalogue, puis au nouveau logo.
- RéalisationÉcriture, animation et montage.
- OutilAfter Effects
- StructureReveal de l’identité, puis démonstration du site
- Durée33 secondes
04 Refonte UX/UI
Un site de travail quotidien
Plus clair pour chercher.
Plus rapide pour agir.
La refonte du site ne devait pas seulement servir la nouvelle marque. Le site devait aussi mieux servir les usages quotidiens des revendeurs : parcourir un catalogue dense, vérifier un stock, comparer une offre et transmettre une commande à son interlocuteur.
Premier contactMettre en avant la recherche, les catégories et les offres
Décider
Prix, remise, disponibilité et quantité sont mis en avant dans une zone d’action cohérente sur chaque produit.
Être accompagné
Le commercial dédié est constamment visible dans le parcours, pour conserver la relation humaine au cœur de la relation
Repères permanentsGarder recherche, compte et panier toujours accessibles
Orientation métierRepères propres au secteur IT
Recherche affinéeAccélérer la sélection grâce aux facettes techniques
Aide à la décisionPrix, remise et stock visibles en un coup d’œil
RéassuranceRappeler les services et l’accompagnement dédié
La fiche produit
L’information technique, sans friction commerciale.
La page sépare clairement le produit, ses caractéristiques et l’action d’achat. La promotion et le stock sont visibles sans concurrencer les informations nécessaires au choix.
- Caractéristiques essentielles structurées
- Signaux de stock et de remise immédiats
- Quantité et panier accessibles au même endroit
Clarté produitMettre le visuel et les caractéristiques au premier plan
ApprofondissementRassurer avec les informations techniques complètes
Vente additionnelleRecommandations pour encourager le cross-sell
Passage à l’achatPrix, stock et panier réunis
Le panier comme espace de préparation
Un récapitulatif latéral permet de vérifier les produits, transmettre des instructions au commercial, choisir la livraison et finaliser sans perdre le contexte du catalogue.
-
La zone des produits
Chaque ligne rappelle l’essentiel pour valider sans rouvrir la fiche : visuel, désignation, EAN, prix HT, remise et disponibilité. La quantité s’ajuste directement, tandis que « Vider le panier » et « Panier express » restent à l’écart de l’action principale.
-
Les instructions au commercial
Un champ libre, nommé avec le prénom de l’interlocuteur dédié, permet de transmettre une question ou une contrainte de commande sans quitter le panier ni changer de canal.
-
Le choix de la livraison
La sélection de l’adresse reste accessible depuis le panier, mais condensée sur une seule ligne pour ne pas concurrencer la vérification des produits.
-
Le résumé du panier
Le bloc de synthèse décompose le montant : prix initial HT, remise cumulée affichée en négatif, puis Total HT mis en avant. Le rappel « 2 références · 2 articles » confirme le contenu avant l’engagement.
-
La validation
L’action « Valider mon panier » est isolée visuellement et doublée d’un « Enregistrer pour plus tard ». Le texte qui suit explique la suite du parcours : réservation du stock disponible, puis Proforma complétée avec délai et frais de livraison.
05 Ma contribution
Un projet mené à deux
Co-diriger, c’est construire une même direction.
Angélique
Lebas
+Lebas
Julien
Delaforge
Delaforge
J’ai co-dirigé le rebranding et la refonte UX/UI avec ma responsable dans le cadre de mon alternance. Le projet s’est construit par échanges, arbitrages et validations communes, de la définition du nouveau territoire de marque jusqu’à sa traduction dans l’interface.
Ma contribution se situe précisément dans ce dialogue entre identité, communication et expérience utilisateur : faire en sorte que le nouveau positionnement ne reste pas une intention, mais devienne perceptible dans chaque point de contact.
Hard skills
Soft skills
06 Résultat
Une nouvelle identité pensée pour accompagner la croissance de 1FOTRADE.