Green Your Look
Dans le cadre de mon Bachelor Développement Web à MyDigitalSchool, j’ai participé au développement d’un site e-commerce proposant des vêtements éco-responsables. L’objectif était de mettre en avant des marques engagées pour l’environnement et d’illustrer le potentiel de la mode durable à travers des looks tendance classés par styles.
Rôle
UX/UI Designer - Développeur web
Équipe
Équipe pluridisciplinaire de 4 personnes
Durée
Février 2022 · Juin 2022
Outils
Trello, Miro, Figma, GitHub
Contexte
La mode est l’une des industries les plus polluantes au monde, ce qui pousse les consommateurs à repenser leurs habitudes d’achats. Ils souhaitent se tourner vers des marques réellement engagées dans une démarche durable.
De plus en plus d’enseignes proposent ainsi des collections éco-responsables. Cependant, derrière certaines valeurs revendiquées se cache parfois du greenwashing, rendant difficile pour les consommateurs de distinguer les marques authentiques.
Objectifs
L’objectif de Green Your Look est d’accompagner les consommateurs dans leur transition écologique en leur offrant une plateforme dédiée à la découverte de tenues complètes et éco-responsables.
🌿
Mettre en avant des marques respectueuses de l’environnement
🌎
Favoriser une consommation plus durable et écologique
🛍️
Faciliter l’achat de looks complets en un seul clic
🧑🏻💻
Créer un site web accessible et facile à utiliser
Défis
Au cours de ce projet, plusieurs défis ont été rencontrés :
🖥
Concevoir une interface intuitive et agréable
🌐
Développer et intégrer les fonctionnalités clés sur le site web
👥
Travailler en collaboration avec une équipe pluridisciplinaire (marketing, design et développement)
Processus
01. Analyse marketing
Pour poser les bases du projet, nous avons effectué une étude de marché pour identifier les besoins des consommateurs, puis un benchmark pour comparer les stratégies et bonnes pratiques des concurrents.
Analyse marketing – Benchmark
02. Besoins, cibles et positionnement
1
Définition des besoins
La mode éco-responsable gagne de plus en plus de terrain sur le marché du textile. Selon une étude sur le marché de la mode en 2020 :
👕
Plus de 65% des Français choisissent d’acheter des vêtements plus écologiques
👷🏻
Plus de 60% estiment qu’il est important de prêter attention aux conditions de travail dans les usines de fabrication.
Un questionnaire mené auprès de 181 participants a révélé que 31 % possèdent déjà des articles éco-responsables, et que 47 % s’y intéressent de plus en plus, confirmant l’intérêt croissant pour la mode durable.
Résultat du questionnaire
2
Identification des cibles
Nous avons réalisé des personas pour définir notre cible.
3
Positionnement
Notre enquête a confirmé l’intérêt croissant pour la mode éco-responsable, mais aussi la sensibilité au prix. Green Your Look met donc en avant des articles durables, accessibles et tendance, en conciliant style et responsabilité.
03. Charte graphique
Pour le choix des couleurs, nous avons choisi d’éviter le vert, trop répandu dans le domaine de l’éco-responsable. Nous avons privilégié des couleurs reflétant le style et la modernité.
Nous avons choisi une police sans‑sérif, offrant plusieurs styles pour mettre en valeur les titres et informations importantes. Elle reflète à la fois élégance, clarté et lisibilité.
Josefin Sans Thin
Josefin Sans Regular
Josefin Sans Bold
Nous avons conçu un logo simple et mémorable, représentant les initiales de Green Your Look tout en évoquant un arbre et ses branches pour souligner le côté éco-responsable. Le logo a été décliné selon les couleurs de notre charte graphique afin d’assurer cohérence et identité visuelle.
04. Maquettes
05. Besoins fonctionnels
Nous avons défini les fonctionnalités du site et hiérarchisé leur importance grâce à la méthode MOSCOW.
Méthode MOSCOW
06. Spécifications techniques
1
Choix technologiques
Nous avons utilisé principalement le langage JavaScript pour développer le site. Ce dernier sera en mode API.
🌐
Base de données : ORM (Object-Relational Mapping) compatible avec toutes les bases de données relationnelles
💻
Back-end : Framework NestJS pour créer des API
🖥
Front-end : Framework VueJS, librairie Vuetify
2
Accessibilité
Le site est compatible avec les principaux navigateurs (Chrome, Safari, Firefox) et entièrement responsive, offrant une expérience optimale sur mobiles, tablettes et ordinateurs.
3
Sécurité
Pour sécuriser le site, nous avons défini plusieurs mesures :
🔑
Mots de passe d’une longueur minimale de 8 caractères
🔒
Back-office accessible seulement par l’administrateur
📚
Respect du Règlement Général sur la Protection des Données (RGPD)
💰
Paiement géré par un intermédiaire
07. Conception et développement du site
1
Base de données
La première étape a consisté à créer la base de données et son API associée, structurée en plusieurs tables conformes aux spécifications fonctionnelles du projet.
2
Back-end
Pour gérer les données de l’application, nous avons développé un back-office réservé aux administrateurs, permettant d’ajouter, modifier et supprimer facilement les informations.
Back-office du site
3
Front-end
La partie Front-End a été développé avec VueJS, comprenant la création de toutes les pages, la gestion de la navigation et l’affichage dynamique des données récupérées via l’API.
08. Gestion de projet
Pour organiser le projet, nous avons utilisé un diagramme de Gantt afin de répartir les tâches et suivre les échéances.
Des points réguliers ont permis de faire le suivi et d’ajuster notre travail. Certaines tâches ont été réalisées collectivement, comme la rédaction du cahier des charges et la définition des fonctionnalités du site.
Pour partager notre travail, nous avons utilisé plusieurs outils collaboratifs :
💭
Trello : centralisation des idées au début du projet
🎨
Miro : parcours utilisateur, fonctionnalités et identité graphique
📝️
Google Drive et Canva : rédaction des documents à rendre
🧑🏻💻
GitHub : partage du code source du projet entre développeurs