La cueillette

"La Cueillette" est un projet universitaire où une équipe de 9 personnes devait concevoir et développer une application web en 4 semaines. Mon idée de créer une plateforme dédiée aux AMAP (Associations pour le Maintien d'une Agriculture Paysanne) a été acceptée.

L'objectif était de créer une plateforme innovante regroupant les AMAP de France pour renouveler leur offre et attirer de nouveaux consommateurs vers un mode de vie plus sain et respectueux de l'environnement. Ce projet visait à revitaliser les AMAP, accroître leur visibilité et séduire une nouvelle génération de consommateurs en centralisant les différentes AMAP sur une seule plateforme, simplifiant ainsi la recherche et la réservation de paniers de fruits et légumes de saison.

Le projet a débuté par une phase intensive de formation et d'analyse. J'ai formé l'équipe aux principes de l'UX/UI design pour assurer une compréhension commune. La première semaine a été consacrée à l'analyse des besoins utilisateurs, l'étude du marché, et la création de personas. Nous avons élaboré une charte graphique et commencé le design des maquettes.

Le développement a débuté dès la deuxième semaine. Notre groupe était divisé en binômes différents chaque jour, permettant ainsi de travailler alternativement sur les fonctionnalités back-end et front-end. Le projet a été mené en méthodologie Agile. Le changement quotidien de binômes a représenté un défi majeur, nous obligeant à bien diviser les tâches et à documenter rigoureusement notre travail. En tant que Product Owner (PO) du projet, j'ai supervisé les phases de conception et de design review.

Ce projet m'a beaucoup fait évoluer tant sur le plan technique qu'humain. Il m'a permis de gérer en partie une équipe, de résoudre des problématiques complexes et de livrer un produit de qualité dans un délai restreint. Travailler sur un projet doté d'une forte valeur environnementale et sociale a été particulièrement enrichissant et motivant pour moi.

Objectifs du Projet

Créer une plateforme centralisée pour les AMAP : Faciliter la réservation de paniers de fruits et légumes de saison pour les consommateurs.
Promouvoir l'agriculture durable et responsable : Mettre en avant les producteurs locaux et limiter le gaspillage alimentaire.
Garantir des produits frais et de qualité : Assurer que chaque réservation offre des produits de haute qualité.
Renforcer la connexion entre consommateurs et producteurs : Permettre aux consommateurs de rencontrer les producteurs et comprendre l'origine des produits.

Aperçus

Les images ci dessous sont issues de la maquette de design. Les données sont donc fictives.

Etapes de la création des interfaces

Analyse des Besoins et Cartographie des Parcours Utilisateur
- Problématique : Comprendre les besoins des utilisateurs finaux (consommateurs, producteurs, AMAP) et les attentes spécifiques du marché.
- Solution :
  - Prise de contact avec des AMAP et questionnemenr de nos entourages en tant qu'utiliisateurs.
  - Définition des user stories et priorisation par bloc fonctionnel
  - Cartographie des parcours utilisateurs.
Création du Logo et de la Charte Graphique
- Problématique : Développer une identité visuelle cohérente et attrayante pour la plateforme.
- Solution :
  - Conception d'un logo représentant les valeurs de la durabilité, de la fraîcheur et de la modernité
  - Développement d'une charte graphique intégrant des couleurs, typographies, et styles visuels en harmonie avec l'image de marque.
Design des Wireframes, Maquettes et Réalisation du Prototype Interactif
- Problématique : Visualiser la structure et l'agencement des différentes pages, et prototyper les interactions et l'apparence finale de l'application
- Solution :
  - Réalisation de wireframes basse fidélité pour discuter et affiner les idées initiales.
  - Création de maquettes haute fidélité dans Figma, intégrant la charte graphique et les parcours utilisateurs optimisés.
  - Développement d'un prototype interactif pour simuler l'expérience utilisateur finale.
Développement Front-End et Back-End
- Problématique : Traduire les maquettes en un site web fonctionnel avec une performance optimale et une intégration fluide.
- Solution :
  - Développement du front-end en utilisant React et MUI pour créer une interface utilisateur dynamique et réactive.
  - Intégration des connexions back-end en collaboration avec l'équipe back-end pour l'authentification et la gestion de la base de données en temps réel.

Les technos utilisées

FigJam

FigJam est une plateforme de collaboration visuelle intégrée à Figma, idéale pour créer et partager des flux utilisateurs. Je l'utilise pour cartographier les parcours utilisateurs et organiser des sessions de brainstorming avec les équipes. FigJam facilite la visualisation des processus et des interactions, améliorant la compréhension collective et la prise de décision

Notion

Notion est un outil de productivité tout-en-un qui combine les fonctionnalités de prise de notes, de gestion de projets, et de collaboration en équipe. Nous avons utilisé Notion pour organiser les tâches, suivre l'avancement, et centraliser les informations essentielles du projet les liens et fichiers externes, facilitant ainsi une gestion de projet structurée et collaborative.

Figma

Figma est un outil de design collaboratif en ligne utilisé pour créer des wireframes, maquettes et prototypes interactifs. Je m'en sers pour concevoir et affiner les interfaces utilisateur, en permettant une collaboration en temps réel avec les parties prenantes. Cela apporte une flexibilité et une efficacité accrues dans le processus de conception, facilitant les ajustements rapides et la validation des idées.

Discord

Discord est une plateforme de communication instantanée qui combine messagerie texte, appels vocaux et vidéos. Elle est idéale pour la collaboration en équipe, permettant une communication fluide et rapide. Nous avons utilisé Discord pour organiser des réunions à distance, discuter des problématiques en temps réel, et générer des images avec Midjourney

React.js

Grâce à son approche basée sur les composants, React permet de développer des interfaces modulaires et maintenables. Sa popularité et sa large communauté offrent un écosystème riche en outils et en bibliothèques complémentaires.

MUI

Material-UI (MUI) est une bibliothèque de composants React qui implémente les principes de Material Design de Google. Elle fournit un ensemble complet de composants réutilisables et personnalisables. Nous l'avons utilisé pour gagner en efficacité lors du design et du developpement

Gitlab

GitLab est une plateforme DevOps qui fournit des outils pour la gestion de code source, la CI/CD (intégration continue et déploiement continu) et la gestion de projet. Nous l'avons utilisé pour le versionnement du code, et la gestion des pipelines de déploiement.

Node.js

Node.js est un environnement d'exécution JavaScript côté serveur. Il permet de développer des applications back-end. Nous avons utilisé Node.js pour construire le back-end de l’application, gérer les API et assurer une communication fluide entre le front-end et la base de données.

PostgreSQL

PostgreSQL est un système de gestion de base de données relationnelle open source réputé pour sa robustesse et sa conformité aux standards SQL. Nous avons utilisé PostgreSQL pour stocker et gérer les données de notre application, assurant ainsi leur intégrité et leur disponibilité.

Postman

Postman est un outil de collaboration pour le développement d'API, permettant de concevoir, tester, et documenter les API. Nous avons utilisé Postman pour tester nos endpoints, vérifier la performance et la fiabilité de notre API, et partager des collections de requêtes avec l'équipe.

🔙 Retour aux projets

Page updated

Google Sites

Report abuse