Refonte site web :
My Green Sport
Rôle: UX/UI Designer
Client: My Green Sport
Mission: Suite à son nouveau partenariat avec la CAMI, la marque MY GREEN SPORT souhaite se professionnaliser en effectuant une refonte visuelle et ergonomique. MY GREEN SPORT a des clients fidèles et satisfaits mais souhaiterait améliorer sa marque pour élargir sa clientèle et attirer de nouveaux partenariats. Tout en tenant compte des besoins des clients actuels.
Outils: Figma – Figjam – Hotjar – Illustrator – Notion
CONTEXTE
#Compréhension
UI DESIGN
De la recherche utilisateur à l’identité visuelle
Comprendre en profondeur les besoins et attentes des utilisateurs, puis à traduire en une identité visuelle cohérente.
Pour comprendre les usages et attentes des clients de My Green Sport, j’ai d’abord mené une série d’entretiens avec les fondatrices et complété cette approche par l’analyse de leur site existant. L’objectif était d’identifier les habitudes de consommation et les motivations de leur clientèle cible.
J’ai interrogé 6 utilisateurs potentiels répartis en deux groupes :
Salariés de 40 à 55 ans cherchant à concilier activité physique, emploi du temps chargé et mode de consommation responsable.
Retraités de 65 à 74 ans souhaitant maintenir leur autonomie, préserver leur santé et entretenir des liens sociaux grâce à des pratiques sportives adaptées.
Ce travail m’a permis de construire des personas représentatifs , comme Hélène, salariée active, et Jean-Paul, retraité actif qui incarnent les profils types des utilisateurs. Ces personas servent de fondation pour traduire les valeurs et attentes identifiées (simplicité, santé, respect de l’environnement, proximité humaine) en choix d’identité visuelle.
Ces différences mettent en lumière des valeurs communes : simplicité, confiance, santé, respect de l’environnement, proximité humaine qui ont directement orienté la construction de l’identité visuelle. Concrètement, cela s’est traduit par une palette de couleurs rassurantes et naturelles, des typographies lisibles et accessibles, ainsi qu’une iconographie sobre et cohérente.
L’UI n’est donc pas seulement esthétique : elle est pensée comme le prolongement de la démarche UX, en répondant aux contraintes réelles des utilisateurs tout en reflétant les valeurs de la marque.
#Atomes
UI DESIGN
Design tokens
Concevoir les éléments fondamentaux de l’interface. Ces briques de base servent de fondation à tout le design system.
Dans cette étape, j’ai défini les fondations visuelles du design system en appliquant la méthodologie des atomes. Ceux-ci représentent les plus petits éléments de l’interface, indispensables à la scalabilité du produit :
Couleurs : définition d’une palette primaire et secondaire, enrichie d’états de feedback (succès, erreur, avertissement, information) afin d’assurer une communication claire et systématique.
Typographies : hiérarchisation des styles (titres, sous-titres, paragraphes, légendes), avec une attention particulière à la lisibilité et aux critères d’accessibilité (contrastes, tailles minimales).
Iconographie : sélection d’un style visuel unifié garantissant cohérence et reconnaissance rapide des actions.
- Accessibilité : vérification systématique des contrastes couleurs, choix de typographies lisibles et respect des bonnes pratiques WCAG pour garantir une expérience inclusive à tous les utilisateurs.
#Molécules
UI DESIGN
Éléments interactifs
Ici, je combine plusieurs atomes pour créer des composants plus complexes.
Après avoir établi les atomes, j’ai combiné ces éléments fondamentaux pour créer les molécules, c’est à dire des ensembles fonctionnels qui commencent à donner forme à l’expérience utilisateur :
Champs de formulaire : association d’un label, d’un champ de saisie et d’un message d’aide ou d’erreur, garantissant une bonne lisibilité et une gestion claire des états.
Boutons enrichis : intégration de la typographie, des couleurs et des icônes pour générer des boutons adaptés aux différents contextes (CTA principal, secondaire, actions discrètes).
Cartes simples (cards) : regroupement de texte, d’icône/illustration et de fond avec gestion des espacements pour créer des blocs informatifs réutilisables.
Barres de recherche : combinaison d’un champ de saisie et d’une icône, optimisée pour l’accessibilité et l’ergonomie.
#Graphisme
UI DESIGN
Illustrations vectorielles
Dessins adaptés sous Illustrator et convertis en formes géométriques, permettant un redimensionnement infini sans perte de qualité et une cohérence visuelle optimale.
J’ai ensuite travaillé sur la direction visuelle des illustrations. L’objectif était de renforcer l’identité de marque en donnant un ton cohérent, chaleureux et reconnaissable, tout en restant aligné avec les valeurs identifiées lors de la phase UX.
Style graphique : des illustrations vectorielles simples et modernes, permettant une lecture immédiate sans détourner l’attention du contenu.
Palette de couleurs : cohérente avec la charte définie dans les atomes, privilégiant des tons naturels et rassurants.
Cohérence visuelle : un style unifié à travers toutes les pages pour assurer une identité forte et homogène.
#Organismes
UI DESIGN
Composants réutilisables
Assemblages de molécules et d’atomes qui forment des sections complètes de l’interface (ex. : header, formulaire, liste de produits).
Une fois les molécules définies, j’ai construit des organismes, qui sont des combinaisons plus complexes et cohérentes de molécules et d’atomes. Ces composants réutilisables incarnent des parties fonctionnelles de l’interface :
Formulaires complets : assemblage de plusieurs champs de saisie (molécules), accompagnés de labels, feedbacks et boutons, afin de couvrir différents scénarios (inscription, connexion, filtres).
Cartes enrichies : combinaison de texte, images/illustrations et CTA, utilisées pour la présentation de contenus (produits, articles, profils).
Listes et tableaux : structure regroupant icônes, textes et actions, avec gestion des états vides, de chargement et d’erreurs.
#Templates
UI DESIGN
Pages finales
Mise en situation des templates avec de vrais contenus, permettant de valider le design dans son contexte réel et de tester l’expérience utilisateur complète.
La dernière étape consiste à transformer les templates en pages finales, en intégrant du contenu réel (textes, images, données) :
Mise en contexte réelle : intégration de contenus éditoriaux, d’images produits, de données dynamiques ou de profils utilisateurs afin de tester la cohérence visuelle et fonctionnelle.
Test de scalabilité : observation du comportement des pages lorsque les contenus varient (longueur de texte, images absentes, données multiples), afin de s’assurer de la résilience du système.
Préparation au développement : documentation et livraison des pages comme référence concrète pour les équipes de développement, facilitant la traduction du design en interface fonctionnelle.
#Simulation
UI DESIGN
Prototypage
Version interactive du design qui simule l’expérience finale, utilisée pour tester les parcours utilisateurs et valider les choix UI/UX avant développement.
Après la phase de conception visuelle et la mise en place des premiers prototypes haute fidélité, l’UI design a été concrètement intégré dans des parcours utilisateurs réalistes. Cette étape a permis de valider les choix graphiques et fonctionnels à travers des tests utilisateurs.
Des tests auprès de 6 utilisateurs âgés de 48 à 67 ans via un prototype haute fidélité ont été réalisés. ( Prototype mis à jour au fur et à mesure des test d’utilisabilité ).
- Vérifier l’ergonomie de la navigation en observant si l’utilisateur trouve rapidement ce qu’il recherche
- Identifier les problèmes éventuels que pourrait rencontrer les utilisateurs lors du processus d’achat/commande.
- S’assurer que les descriptifs produits sont faciles de compréhension pour le choix de l’achat.
#Itération
UI DESIGN
Retours utilisateurs
Phase d’évaluation où le prototype est testé auprès de vrais utilisateurs afin de recueillir leurs impressions, identifier les points de friction et améliorer la solution par itérations.
Sur la base des résultats des tests d’utilisabilité, j’ai identifié plusieurs domaines d’amélioration :
Etape 1 : Trouver son vélo électrique adapté à sa condition, une fois l’article ajouté au panier, effectuer le processus d’achat via la section “Invité” ou “Créer un compte”.
- Mettre en avant un produit directement en page d’accueil plutôt qu’une illustration qui pourrait ne pas refléter l’activité principale du site
- Rendre le bouton “ visiter la boutique “ en page d’accueil plus lisible
- CTA : Mettre le texte en majuscule
- Section “ produit à la une “ : ajouter une spécificité “ ajouter des options “ cliquable, certains utilisateurs ne savaient pas que les articles étaient cliquables.
- Nous contacter : Mettre en avant l’onglet dans la barre de menu pour le rendre accessible sur toutes les pages du site ( Autrefois dans l’onglet ” Blog & co ” ).
Etape 1 : Trouver son vélo électrique adapté à sa condition, une fois l’article ajouté au panier, effectuer le processus d’achat via la section “Invité” ou “Créer un compte”.
- Nous contacter : Le rendre plus visible lors du processus d’achat pour que les utilisateurs ne le manquent pas.
Etape 1 : Trouver son vélo électrique adapté à sa condition, une fois l’article ajouté au panier, effectuer le processus d’achat via la section “Invité” ou “Créer un compte”.
- Page de confirmation : Ajouter une confirmation de commande. Les utilisateurs étaient un peu désarçonnés d’être redirigé directement sur la page d’accueil à la fin du processus d’achat.
#Tests
UI DESIGN
Prototype
Nouveau prototype créé afin d’intégrer les améliorations, tester de nouvelles hypothèses et affiner progressivement l’expérience.
Etape 2 : Choisir son vélo électrique idéal en effectuant le parcours : adapter son vélo.
Même si les pages contiennent des descriptifs pour orienter l’utilisateur dans le choix du produit, certains utilisateurs ne savaient pas quel type, vitesse ou taille choisir pour un vélo électrique adapté à leur besoin. Cette catégorie n’était pas convaincus de son choix final.
Pour répondre à ce besoin, nous avons choisi de développer un parcours intuitif pour guider l’utilisateur dans son choix étape par étape.
Cadrage
#Compréhension
UI DESIGN
De la recherche utilisateur à l’identité visuelle
Comprendre en profondeur les besoins et attentes des utilisateurs, puis à traduire en une identité visuelle cohérente.
Pour comprendre les usages et attentes des clients de My Green Sport, j’ai d’abord mené une série d’entretiens avec les fondatrices et complété cette approche par l’analyse de leur site existant. L’objectif était d’identifier les habitudes de consommation et les motivations de leur clientèle cible.
J’ai interrogé 6 utilisateurs potentiels répartis en deux groupes :
Salariés de 40 à 55 ans cherchant à concilier activité physique, emploi du temps chargé et mode de consommation responsable.
Retraités de 65 à 74 ans souhaitant maintenir leur autonomie, préserver leur santé et entretenir des liens sociaux grâce à des pratiques sportives adaptées.
Ce travail m’a permis de construire des personas représentatifs , comme Hélène, salariée active, et Jean-Paul, retraité actif qui incarnent les profils types des utilisateurs. Ces personas servent de fondation pour traduire les valeurs et attentes identifiées (simplicité, santé, respect de l’environnement, proximité humaine) en choix d’identité visuelle.
Ces différences mettent en lumière des valeurs communes : simplicité, confiance, santé, respect de l’environnement, proximité humaine qui ont directement orienté la construction de l’identité visuelle. Concrètement, cela s’est traduit par une palette de couleurs rassurantes et naturelles, des typographies lisibles et accessibles, ainsi qu’une iconographie sobre et cohérente.
L’UI n’est donc pas seulement esthétique : elle est pensée comme le prolongement de la démarche UX, en répondant aux contraintes réelles des utilisateurs tout en reflétant les valeurs de la marque.
Design system
#Atomes
UI DESIGN
Design tokens
Concevoir les éléments fondamentaux de l’interface. Ces briques de base servent de fondation à tout le design system.
Dans cette étape, j’ai défini les fondations visuelles du design system en appliquant la méthodologie des atomes. Ceux-ci représentent les plus petits éléments de l’interface, indispensables à la cohérence et à la scalabilité du produit :
Couleurs : définition d’une palette primaire et secondaire, enrichie d’états de feedback (succès, erreur, avertissement, information) afin d’assurer une communication claire et systématique.
Typographies : hiérarchisation des styles (titres, sous-titres, paragraphes, légendes), avec une attention particulière à la lisibilité et aux critères d’accessibilité (contrastes, tailles minimales).
Iconographie : sélection d’un style visuel unifié garantissant cohérence et reconnaissance rapide des actions.
- Accessibilité : vérification systématique des contrastes couleurs, choix de typographies lisibles et respect des bonnes pratiques WCAG pour garantir une expérience inclusive à tous les utilisateurs.
#Graphisme
UI DESIGN
Illustrations vectorielles
Dessins adaptés sous Illustrator et convertis en formes géométriques, permettant un redimensionnement infini sans perte de qualité et une cohérence visuelle optimale.
J’ai ensuite travaillé sur la direction visuelle des illustrations. L’objectif était de renforcer l’identité de marque en donnant un ton cohérent, chaleureux et reconnaissable, tout en restant aligné avec les valeurs identifiées lors de la phase UX.
Style graphique : des illustrations vectorielles simples et modernes, permettant une lecture immédiate sans détourner l’attention du contenu.
Palette de couleurs : cohérente avec la charte définie dans les atomes, privilégiant des tons naturels et rassurants.
Cohérence visuelle : un style unifié à travers toutes les pages pour assurer une identité forte et homogène.
#Molécules
UI DESIGN
Éléments interactifs
Ici, je combine plusieurs atomes pour créer des composants plus complexes.
Après avoir établi les atomes, j’ai combiné ces éléments fondamentaux pour créer les molécules, c’est-à-dire des ensembles fonctionnels qui commencent à donner forme à l’expérience utilisateur :
Champs de formulaire : association d’un label, d’un champ de saisie et d’un message d’aide ou d’erreur, garantissant une bonne lisibilité et une gestion claire des états.
Boutons enrichis : intégration de la typographie, des couleurs et des icônes pour générer des boutons adaptés aux différents contextes (CTA principal, secondaire, actions discrètes).
Cartes simples (cards) : regroupement de texte, d’icône/illustration et de fond avec gestion des espacements pour créer des blocs informatifs réutilisables.
Barres de recherche : combinaison d’un champ de saisie et d’une icône, optimisée pour l’accessibilité et l’ergonomie.
#Organismes
UI DESIGN
Composants réutilisables
Assemblages de molécules et d’atomes qui forment des sections complètes de l’interface (ex. : header, formulaire, liste de produits).
Une fois les molécules définies, j’ai construit des organismes, qui sont des combinaisons plus complexes et cohérentes de molécules et d’atomes. Ces composants réutilisables incarnent des parties fonctionnelles de l’interface :
Formulaires complets : assemblage de plusieurs champs de saisie (molécules), accompagnés de labels, feedbacks et boutons, afin de couvrir différents scénarios (inscription, connexion, filtres).
Cartes enrichies : combinaison de texte, images/illustrations et CTA, utilisées pour la présentation de contenus (produits, articles, profils).
Listes et tableaux : structure regroupant icônes, textes et actions, avec gestion des états vides, de chargement et d’erreurs.
UI screens
#Templates
UI DESIGN
Pages finales
Mise en situation des templates avec de vrais contenus, permettant de valider le design dans son contexte réel et de tester l’expérience utilisateur complète.
La dernière étape consiste à transformer les templates en pages finales, en intégrant du contenu réel (textes, images, données) :
Mise en contexte réelle : intégration de contenus éditoriaux, d’images produits, de données dynamiques ou de profils utilisateurs afin de tester la cohérence visuelle et fonctionnelle.
Test de scalabilité : observation du comportement des pages lorsque les contenus varient (longueur de texte, images absentes, données multiples), afin de s’assurer de la résilience du système.
Préparation au développement : documentation et livraison des pages comme référence concrète pour les équipes de développement, facilitant la traduction du design en interface fonctionnelle.
Prototype
#Simulation
UI DESIGN
Prototypage
Version interactive du design qui simule l’expérience finale, utilisée pour tester les parcours utilisateurs et valider les choix UI/UX avant développement.
Après la phase de conception visuelle et la mise en place des premiers prototypes haute fidélité, l’UI design a été concrètement intégré dans des parcours utilisateurs réalistes. Cette étape a permis de valider les choix graphiques et fonctionnels à travers des tests utilisateurs.
Des tests auprès de 6 utilisateurs âgés de 48 à 67 ans via un prototype haute fidélité ont été réalisés. ( Prototype mis à jour au fur et à mesure des test d’utilisabilité ).
- Vérifier l’ergonomie de la navigation en observant si l’utilisateur trouve rapidement ce qu’il recherche
- Identifier les problèmes éventuels que pourrait rencontrer les utilisateurs lors du processus d’achat/commande.
- S’assurer que les descriptifs produits sont faciles de compréhension pour le choix de l’achat.
Itération
#Itération
UI DESIGN
Retours utilisateurs
Phase d’évaluation où le prototype est testé auprès de vrais utilisateurs afin de recueillir leurs impressions, identifier les points de friction et améliorer la solution par itérations.
Sur la base des résultats des tests d’utilisabilité, j’ai identifié plusieurs domaines d’amélioration :
Etape 1 : Trouver son vélo électrique adapté à sa condition, une fois l’article ajouté au panier, effectuer le processus d’achat via la section “Invité” ou “Créer un compte”.
- Mettre en avant un produit directement en page d’accueil plutôt qu’une illustration qui pourrait ne pas refléter l’activité principale du site
- Rendre le bouton “ visiter la boutique “ en page d’accueil plus lisible
- CTA : Mettre le texte en majuscule
- Section “ produit à la une “ : ajouter une spécificité “ ajouter des options “ cliquable, certains utilisateurs ne savaient pas que les articles étaient cliquables.
- Nous contacter : Mettre en avant l’onglet dans la barre de menu pour le rendre accessible sur toutes les pages du site ( Autrefois dans l’onglet ” Blog & co ” ).
Etape 1 : Trouver son vélo électrique adapté à sa condition, une fois l’article ajouté au panier, effectuer le processus d’achat via la section “Invité” ou “Créer un compte”.
- Nous contacter : Le rendre plus visible lors du processus d’achat pour que les utilisateurs ne le manquent pas.
Etape 1 : Trouver son vélo électrique adapté à sa condition, une fois l’article ajouté au panier, effectuer le processus d’achat via la section “Invité” ou “Créer un compte”.
- Page de confirmation : Ajouter une confirmation de commande. Les utilisateurs étaient un peu désarçonnés d’être redirigé directement sur la page d’accueil à la fin du processus d’achat.
#Tests
UI DESIGN
Prototype
Nouveau prototype créé afin d’intégrer les améliorations, tester de nouvelles hypothèses et affiner progressivement l’expérience.
Etape 2 : Choisir son vélo électrique idéal en effectuant le parcours : adapter son vélo.
Même si les pages contiennent des descriptifs pour orienter l’utilisateur dans le choix du produit, certains utilisateurs ne savaient pas quel type, vitesse ou taille choisir pour un vélo électrique adapté à leur besoin. Cette catégorie n’était pas convaincus de son choix final.
Pour répondre à ce besoin, nous avons choisi de développer un parcours intuitif pour guider l’utilisateur dans son choix étape par étape.
Passionnée d’arts et de conception créative, j’aime créer des applications et site web utiles et agréables.
Mes projets
