Polaris
Création du site d'une agence de contenu, réseaux sociaux et live shopping dédiée à l'e-commerce.
En bref
Polaris est une agence de contenu pour les marques e-commerce : stratégie, production, gestion des réseaux sociaux et live shopping. Il lui fallait un site qui prouve plutôt qu'il promet. J'ai créé le Design System et les maquettes dans Figma, puis intégré le site dans Webflow. Le parti pris : montrer des résultats plutôt que des visuels, avec des études de cas chiffrées, des avis clients et une méthode en cinq étapes, pour qu'une marque sache exactement ce qu'elle achète.
- Client
- Polaris
- Année
- 2026
- Rôle
- UI/UX Design
- Design System
- Intégration
- Outils
Le problème
Un métier qui ne se voit pas
Stratégie, contenu, gestion des réseaux, live shopping : le travail de Polaris se mesure chez ses clients, pas dans une galerie de jolis visuels.
Des marques méfiantes
Beaucoup ont déjà délégué leurs réseaux sans stratégie derrière. Avant de confier leur image, elles veulent des preuves.
Une offre nouvelle à expliquer
Le live shopping reste flou pour beaucoup de marques : il fallait le rendre concret, chiffres et déroulé à l'appui.
UX : structure et parcours
La structure suit le raisonnement d'une marque e-commerce : se reconnaître, comprendre l'offre, se rassurer, puis parler de son projet.
Plan du site
- Services
- Consulting réseaux sociaux
- Stratégie & gestion
- Campagnes & lancements
- Live Shopping
- Études de cas
- Le Break
- Nalisa
- Kassia Éclat
- Les Petits Bantus
- Ressources
- Blog
- Contact
Wireframe de l'accueil
- HeroLa promesse, deux actions, la note Trustpilot
- VidéoL'agence présentée face caméra
- Logos clientsIls nous ont fait confiance
- Vous publiez. Mais…Trois situations où la marque se reconnaît
- OffresQuatre offres, dont le Live Shopping chiffré
- Photo et vidéoDes exemples de production
- RésultatsÉtudes de cas en onglets, chiffres à l'appui
- MéthodeCinq étapes, sans surprise
- ÉquipeQui est derrière, et ce que Polaris n'est pas
- Avis clientsLes clients en parlent
- FAQLever les dernières objections
- Appel à l'actionParler de sa marque, ou écrire sur WhatsApp
Parcours principal
- Se reconnaîtTrois situations qu'une marque e-commerce vit déjà
- Comprend l'offreQuatre offres, à la carte ou clé en main
- Se rassureÉtudes de cas, chiffres et avis clients
- Parle de sa marqueUn bouton sur chaque page, ou WhatsApp
Design System
Trois typographies, une seule couleur d'accent, et des composants qui racontent le métier : des chiffres, des lives, des avis.
Couleurs
- EncreTitres, texte#1C1C21
- ArdoiseTexte secondaire#545469
- LavandeLibellés, détails#9494AC
- FramboiseAccent, CTA#E8195A
- Framboise profondDégradé des CTA#A30E45
- PerleCartes#FAFAFA
- BrumeAvatars, séparateurs#E2E2E7
- BlancFond#FFFFFF
Typographie
Syne
Titres, interface
Regular → Bold
DM Sans
Texte
Light · Regular · Bold
PT Serif
Accents
Bold · Bold Italic
Échelle typographique
H156/74 · Bold
Du contenu qui donne envie
H248/56 · 650
Un accompagnement
Accent48/56 · Bold
flexible,
H320/28 · 650
Stratégie de contenu
Paragraphe16/24 · Regular
On construit la stratégie qui donnera une vraie direction
Label12/14 · 650
Nos offres
Arrondis
- 6 pxOnglets
- 12 pxCartes secondaires
- 16 pxCartes
- PiluleBoutons, badges
Composants
Services Études de casFAQComment se passe le premier échange ?
Avant le rendez-vous, on analyse vos réseaux pour arriver avec un premier regard sur votre marque. Pendant 30 minutes, on échange sur vos objectifs et vos besoins.
Myriam m'accompagne dans le développement des réseaux sociaux de l'agence. Son travail est ultra professionnel.
- Une agence qui vend du volume de posts
- Une agence qui disparaît après signature
- Une agence qui promet la lune pour signer
Accessibilité
Mesuré avec axe (WCAG 2.2 AA) sur la page d'accueil du site en ligne.
- Contraste du texte courant
- Après : 7,3:1Ardoise sur blanc, niveau AAA (4,5:1 suffit pour l'AA)
- Focus clavier visible
- Après : 2 pxUn contour net sur chaque lien et bouton, pour suivre sa position au clavier
- Logos clients nommés
- Après : 14 / 14La preuve sociale existe aussi pour les lecteurs d'écran
Les couleurs du design system, vérifiées
- Texte sur blanc16,9:1 · AAA
- Texte secondaire sur blanc7,3:1 · AAA
- Texte secondaire sur carte7,0:1 · AAA
- Bouton ardoise4,6:1 · AA
- Accent framboise (grands titres)4,4:1 · AA
Interfaces
Choisissez une page et une résolution.
