SAE 3.Crea.01 : Intégrer des interfaces utilisateurs au sein d'un système d'information

La SAE

Sujet : Réalisation d'un site web de type “click & collect”, on a commencé par le parcours utilisateurs, système d'interface et prototypage de l'application sur le logiciel Figma, pour ainsi intégrer les éléments en HTML/CSS, Faire l'intégralité du site en utilisant l'outil Woocommerce sur Wordpress en modifiant tout les éléments de bases via PHP.

En tant que développeurs web et UX-designers, les étudiants doivent analyser le cahier des charges d'une application ou d'un site web, identifier les parcours utilisateurs, avant d'en développer les fonctionnalités en répondant à la question : Comment mettre en place un site web offrant une expérience utilisateur de qualité ?


Organisation et Durée du projet : Travail effectué en trio sur une durée de 2 semaines



Objectif :

● Combiner les ressources liées au développement web, au design d’expérience et à la gestion de projet pour concevoir et développer des parcours utilisateurs.

Livrables

ANALYSE DE L'EXISTANT (COMPRENDRE)

Nous avons commencé cette SAE à choisir le thème de notre site click&collect, alors nous avons pris "Cochonou", à partir de là nous avons fait un audit complet en relevant les points positifs et négatifs.

PARCOURS UTILISATEUR (COMPRENDRE)

Pour la création de notre site click&collect, il a fallu établir dans un premier temps des user story qui ont servi à établir des personae, suivant leur objectifs, leur frustations et motivations nous avons pu établir une liste de recommandations stratégique, qui servent à ajouter des voix necessaires à notre site.

Après avoir mis ça en place nous avons fais un parcours utilisateur donc un user-flow ou chaque clique que l'internaute fais, dirigige vers un élement essentiel du site, nous savons donc quoi faire pour établir nos chemins sous forme de wireframe.

Accéder au Figma

Apprentissages Critiques pour la compétence "Comprendre"

AC21.04 | Identifier et décrire les parcours client à partir d’enquêtes de terrain

Grâce à cette apprentissage j'ai sû m'améliorer dans l'analyse d'un site web en relevant le moindre détail à changer ou à garder pour la suite de notre travail, l'analyse du site et donc à m'améliorer dans la ressource R3.03 - Design d'expérience..



AC21.05 - Cartographier les expériences utilisateur

Pour cette apprentissage, je pense ne pas l'avoir acquis, j'ai eu du mal à me projeter sur les différrents choix de parcours utilisateurs posibles, cette apprentissage rentre dans la R3.03 - Design d'expérience.

Livrables

Wireframe (Concevoir)

Nous avons créer une maquette d'après notre parcours utilisateurs pour établir notre site click&collect, nous avons fait en version mobile et desktop en s'aidant des itérations du sujet donné et du travail de compréhension que nous avions fait juste avant. Cette étape a donc permis de se projeter sur notre direction artistique et d'obéir aux recommandations stratégiques construites.

PROTOTYPAGE (Concevoir)

Nous avons donc établit le prototypage avec Figma en détaillant et animant notre wireframe.

Accéder au Figma

Apprentissage Critique pour la compétence "Concevoir"

AC22.02 | Produire une recommandation ergonomique à partir des tests utilisateurs

Je pense avoir acquis cet apprentissage, en ayant continuer à m'améliorer dans la maitrise du logiciel figma en découvrant de nouvelles choses comme les variables et boolean, le prototypage. du niveau du groupe nous avions sû s'écouter pour mener à bien notre projet.

Livrables

DEVELOPPEMENT DU SITE CLICK&COLLECT (Développer)

après avoir fais nos composants, éléments et prototypage du site, nous avions dû intégrer tout ça à l'aide d'un CMS. et d'ici nous avions héberger sur Wordpress en utilisant l'extension WooCommerce.

Pour l'intégration front de nos éléments, nous avions utilisé du tailwindcss, ainsi nous les importions sur un Google Drive pour que tout le monde ait accès au dossier à jour.

Accès au dossier Accès au site

Apprentissages Critiques pour la compétence "Développer"

AC24.01 | Produire des pages et applications Web responsives

Je pense que cet apprentissage a été validé grâce à la version desktop mais aussi mobile dont notre site click&collect dispose, codé avec un langage spécifique appris qui est le tailwindcss, la ressource liée est la R3.12 - Développement Front et intégration



AC24.02 | Mettre en place ou développer un back office

Cette apprentissage a dû elle aussi être validé grâce à la réussite de l'affichage de notre chemin et tuennel d'achat créé avec l'extension wordpress "WooCommerce", nous avons appris ça avec notre ressource de spécialité R3.Crea.13 - Gestion de contenus avancée.



AC24.05 | Optimiser une application web en termes de référencement et de temps de chargement

L'apprentissage est inexistant suite au chargement rapide de notre site, question référencement nous avions fais le site sans s'y soucier, malgrès ça cela s'inscrit dans la ressource R3.12 - Développement Front et intégration.



AC24.06 | Configurer une solution d’hébergement adaptée aux besoins

Cet apprentissage est acquis suite à la facilité de mettre en ligne sur internet grâce à nos cours d'hébergement en première année et en ce début d'année, j'ai réussi à l'herbergé tout en veillant à ce que tout fonctionne et que tout utilisateurs puissent y accéder, ce domaine s'inscrit dans la ressource mobilisé R3.14 - Déploiement de services.

Ressenti de la SAE

La participation à cette SAE a été une expérience positive, notamment grâce à l'utilisation de Figma et WordPress. Travailler sur Figma nous a permis de développer nos compétences en conception collaborative, renforçant notre capacité à travailler efficacement en équipe. De plus, l'exploration de WordPress pour la création de sites web a constitué un défi stimulant, élargissant notre expertise en développement web. Au-delà des aspects techniques, cette SAE a également contribué au développement de compétences transversales telles que la gestion du temps, la communication d'équipe et la résolution de problèmes concrets