SAE 301

Pour débuter l'année, j'ai travaillé en binôme pour la première SAE. Nous avons choisi un enseigne afin de réaliser un système click & collect en ligne, avec le but d'analyser le site d'origine et proposer quelques modifications afin de rendre le site plus lisible, tout en lui permettant de consulter des produits pouvant être triés par catégorie. L'utilisateur peut aussi consulter un panier permettant de vérifier sa commande et éventuellement modifier la quantité de chaque produit ou enlever des produits avant de finaliser la commande. Ce projet m'a permis de travailler toutes les compétences de la formation mai plus particulièrement la compétence Développer. 

Analyse des besoins

Avant de faire la partie développement du site, nous avons réalisé un wireframe fonctionnel permettant de montrer la navigation et mise en forme des pages essentielles ainsi que l'overlay des éléments importants (menu, profil et panier). Afin de bien analyser les besoins des clients, j'ai réalisé deux Personae ainsi que leurs User Flow. Il s'agit d'un agriculteur retraité souhaitant acheter des outils de jardinage pour continuer à pratiquer sa passion, et une mère de famille travaillant à temps plein souhaitant acheter des décorations de Noël. Ces deux personnes souhaitent privilégier le click & collect afin de réaliser leur achat de manière plus fluide et en limitant les déplacements au sein du supermarché. Les User Flows permettent d'anticiper les actions que chaque persona pourrait faire sur le site pour atteindre son objectif. Cette première phase du projet m'a permis de valider les apprentissages critiques AC21.04 : Identifier et décrire les parcours client à partir d’enquêtes de terrain et AC21.05 : Cartographier les expériences utilisateur : points de contact, points de friction et de satisfaction, carte d’empathie.

Personae et User Stories: 

User Flows : 

Benchmark :
(lien vers le benchmark entier : https://www.figma.com/design/3pu8r7m58GxR5miPZXkNH7/figma?node-id=16-83&t=NcNd71MajSGPdSgc-1 )

En prenant en compte ces besoins, j'ai analysé le site existant et rédigé un benchmark, un document qui reprend tous les points positifs et points négatifs de chaque critère de Bastien et Scapin. Pour conclure, j'ai rédigé une liste de recommandations stratégiques à inclure dans la réalisation du nouveau site, me permettant de valider l'apprentissages critique AC22.01 : Co-concevoir un produit ou un service et en partie l'AC25.06 : Prendre en compte les contraintes juridiques. La ressource R3.03 : Design d'expérience a été une grande aide car elle m'a permis d'apprendre à rédiger un benchmark en prenant en compte les attentes du 2e niveau.

Réalisation du prototype
(lien vers le prototype : https://www.figma.com/proto/3pu8r7m58GxR5miPZXkNH7/figma?node-id=360-11911&t=NcNd71MajSGPdSgc-1 )

Le prototype permet de réaliser une mise en forme de ce que devrait ressembler le site final, permettant ainsi de le dévélopper plus facilement. Une version mobile est également proposée afin de permettre les utilisateurs d'un smartphone de réaliser leur achat depuis leur smartphone. J'ai repris la charte graphique du site d'origine en simplifiant certains éléments qui étaient surchargés pour proposer une version plus lisible et ayant un chargement plus rapide. Les animations à réaliser sur la version développée ainsi que les changements de pages en cliquant sur les boutons sont présents. Pour compléter cette phase, j'ai utilisé des techniques de réalisation vues dans la ressource R3.09 : Création et design intéractif et j'ai validé l'AC22.02 : Produire une recommandation ergonomique à partir des tests utilisateurs (sur système fonctionnel, prototype ou maquette interactive).

Phase développement :
(lien vers le projet : https://github.com/MaelValin/sae301 )

API (développement back-end)

En rendant cet API utilsable, j'ai répondu aux attentes de l'apprentissage critique AC24.04 : Modéliser les traitements d’une application Web.

Client (développement front-end)

Extraits de fichiers JS :

Exemple d'intégration :

Tous les composants de cette page web sont intégrées en Tailwind permettant de rendre la conception de chaque composant plus rapide et en évitant un fichier css supplémentaire par composant. Les tags "{{}}" sont les endroits où du contenu dynamique sera généré à partir de données venant de l'API.

 
Pour réaliser la partie client de ce projet, j'ai utilisé des méthodes vues dans la ressource R312 : Intégration et Développement Front et j'ai réussi à valider les apprentissages critiques AC24.01 : Produire des pages et applications Web responsives et AC24.05 : Optimiser une application web en termes de référencement et de temps de chargement. En effet, j'aurais dû valider la compétence AC24.02

Mettre en place ou développer un back office dans une itération supérieure mais nous n'avons pas eu assez de temps pour réaliser le back office.

Travail d'équipe : 

Pour avancer de manière plus efficace dans ce projet, nous nous sommes répartis les tâches : au début j'ai plutôt réalise la partie front-end (intégration) et mon camarade a réalisé la partie back-end. Quand j'ai fini de réaliser tous les composants nécéssaires pour le rendu final, j'ai aisé mon camarade à avancer dans les itérations, consistant à la fois à faire du front et du back. Nous avons réalisé 4 itérations, ce qui n'est pas énorme et nous aurions voulu avancer plus rapidement, mais nous avons eu des problèmes techniques dans la validation du panier. 

Malgré cela, j'ai validé l'apprentissage critique AC25.01 : Gérer un projet avec une méthode d’amélioration continue par exemple une méthode agile.

Bilan :

Cette SAE m'a permis d'apprendre à réaliser un projet de développement web avec une phase de conception en travail d'équipe. Cela m'a permis de mieux comprendre comment se répartir les tâches et s'aider si certaines tâches prennent plus de temps que prévu. La prochaine fois, en anticipant tous les risques de problèmes techniques et gestion de temps, je pense pouvoir répondre à toutes les demandes attendues.