Green Your Look
Lors de mon Bachelor Développement Web à MyDigitalSchool, j’ai réalisé en groupe un site de vente en ligne de vêtements éco-responsables présentés par catégorie de style. Le projet vise à mettre en avant des marques respectueuses de l’environnement et à dévoiler le potentiel de pièces éco-responsables à travers des looks tendances.
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 une industrie très polluante et il y a une vraie prise de conscience des consommateurs sur les enjeux environnementaux. Ils souhaitent modifier leurs habitudes d’achats et aimeraient se tourner vers des marques plus respectueuses de l’environnement.
Les marques l’ont bien compris, et proposent de plus en plus souvent des collections éco-responsables. Certaines revendiquent des valeurs écologiques qui cachent en fait du greenwashing. Les consommateurs ont donc du mal à différencier les marques authentiques de celles qui font du greenwashing.
Objectifs
L’objectif de Green Your Look est d’accompagner les consommateurs dans leur transition écologique en leur offrant une plateforme pour trouver des 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
Développer et intégrer des fonctionnalités sur le site web
Travailler en collaboration avec une équipe pluridisciplinaire (marketing, design et développement)
Processus
01. Analyse marketing
Au début du projet, nous avons fait une étude de marché pour comprendre les besoins des consommateurs. Nous avons réalisé un benchmark pour étudier les pratiques des entreprises concurrentes.
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.
Nous avons envoyé un questionnaire à 181 personnes pour analyser le marché de la mode. La majorité des répondants ont déjà quelques articles éco-responsables (30,9 %) et 47 % s’y intéressent de plus en plus.
Résultat du questionnaire
2
Identification des cibles
Nous avons réalisé des personas pour définir notre cible.
3
Positionnement
Notre enquête nous a confirmé qu’il y a un fort potentiel sur le marché de la mode éco-responsable, mais que les consommateurs ont du mal à y consacrer un gros budget. C’est pourquoi nous mettrons en avant des articles accessibles.
L’honnêteté et l’accessibilité font partie de nos valeurs. Nous nous positionnons sur du moyen de gamme avec des vêtements durables, de qualité. Nous voulons également apporter un côté plus fun à la mode éco-responsable et mettre en valeur le côté tendance des tenues.
03. Charte graphique
Pour le choix des couleurs, nous voulions éviter la couleur verte, “trop vue” dans le domaine de l’éco-responsable et qui ne reflète pas assez le côté mode et tendance.
Nous avons choisi une police d’écriture sans-sérif qui comporte plusieurs styles pour mettre en avant les titres et les informations importantes. De plus, elle reflète l’élégance, la pureté et est très lisible.
Josefin Sans Thin
Josefin Sans Regular
Josefin Sans Bold
Nous avons créé un logo simple, facile à retenir. Il représente les initiales de Green Your Look et il évoque également un arbre avec ses branches afin de mettre en avant le côté éco-responsable. Nous l’avons décliné aux couleurs de notre charte graphique.
04. Maquettes
05. Besoins fonctionnels
Les besoins fonctionnels décrivent les fonctionnalités de notre logiciel. Ils comprennent les besoins fonctionnels principaux, qui sont les plus importants, et les besoins fonctionnels secondaires, dont l’importance est inférieure.
Pour établir les priorités des besoins, nous avons utilisé 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 plusieurs navigateurs, comme Google Chrome, Safari et Mozilla Firefox. Il est possible de naviguer sur notre site avec des appareils mobiles, des tablettes et des ordinateurs portables et de bureau.
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 été de mettre en place la base de données en créant une API. La base de données est composée de plusieurs tables qui reprennent les spécifications fonctionnelles du projet.
2
Back-end
Afin de gérer les nombreuses données de notre application, nous avons créé un back-office accessible seulement aux administrateurs du site. Il est possible d’ajouter, de modifier et de supprimer des données.
Back-office du site
3
Front-end
La partie Front-End du site a été réalisée avec le framework VueJS. Il a fallu créer toutes les pages du site, gérer la navigation entre celles-ci et récupérer les données via l’API pour les afficher.
08. Gestion de projet
Pour gérer notre projet, nous avons réalisé un diagramme de Gantt qui nous a permis de répartir les différentes tâches au sein du groupe et de visualiser leurs dates d’échéances.
Nous faisions régulièrement des points ensemble pour avoir des retours sur notre travail. Nous avons effectué quelques tâches ensemble, 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