Produits de saison
Contexte
Ce projet a été réalisé sur le mois de février 2024.
Troisième projet d'étude dans le cadre de la formation Google Certificat Design UX.
J'ai couvert l'ensemble des étapes du processus de design UX, de la recherche jusqu'à la production des prototypes haute-fidélités de l'application dédiée et du site web réactif.
Le problème
Que ce soit dans une démarche développement durable, ou, et , d'équilibre du régime alimentaire, les personnes souhaitant consommer des produits de saison. La difficulté est de pouvoir les identifier et de savoir comment les préparer.
Le projet
- Création d'une application dédiée et d'un site web réactif pour un service de conseil alimentaire.
- Les principales cibles sont les personnes qui souhaitent améliorer leur régime alimentaire et consommer des produits de saison.
La recherche
Afin d'identifier le besoin des utilisateurs et comment le produit peut y répondre, j'ai réalisé plusieurs recherches.
- entretien avec de potentiel utilisateur
- audit concurrentiel
Une série d'entretiens avec de potentiel utilisateur m'a permis de définir le persona et la carte du parcours utilisateur
Concept : des maquettes aux prototypes
Croquis
J'ai esquissé plusieurs croquis pour les principales vues de l'application et une visualisation de leur organisation.
Wireframe numérique
Le passage des croquis papiers aux wireframes numériques m'a permis d'avoir un design plus structuré et de détails, ce qui aide à comprendre les caractéristiques du produit et sa navigation.
Etude d'utilisabilité & itération du design
Le prototype basse-fidélité a été utilisé pour réaliser une étude d'utilisabilité.
Pour synthétiser les données collectées, j'ai établis un diagramme d'affinité. Il m'a permis d'identifier des thèmes pour lesquelles de nouveaux design doivent être réaliser pour améliorer l'expérience utilisateur.
Diagramme d'affinité avec les thèmes identifiés
Le diagramme d'affinité regroupe par thème les observations et les ressentis des participants à l'étude d'utilisabilité.
Prototype basse-fidélité
Suite à l'étude d'utilisabilité, j'ai modifié le prototype basse-fidélité.
Prototype haute-fidélité
Le prototype haute-fidélité permet de donner vie à l'application. L'ajout des couleurs, photos donne une vue sur l'apparence de l'application finie. J'ai également fait des ajustements par rapport au prototype basse-fidélité.
Site web réactif
Une des contraintes de ce projet est qu'un site web réactif soit adossé à l'application.
Plan du site
J'ai établis le plan du site afin de définir la hiérarchie des pages. Le but ici est de créer une organisation qui permet de satisfaire aux objectifs des utilisateurs. La hiérarchie du site doit pouvoir faciliter la navigation et favoriser l'accessibilité.
Prototype haute-fidélité
Je me suis basée sur les travaux réalisés pour l'application pour designer le prototype de site Web.
Ce site doit s'adapter aux différentes tailles d'écran qu'utiliseront les utilisateurs. J'ai d'abord créer pour un accès avec un téléphone mobile puis j'ai appliqué le principe de l'amélioration progressive qui consiste à travailler en premier pour l'écran le plus petit sur lequel les utilisateurs accéderont au site web , pour aller progressivement vers l'écran le plus large.
Page d'accueil du site web pour 3 formats d'écran : téléphone mobile, tablette, écran d'ordinateur.
Conclusion
Les prochaines étapes de ce projet dans la vie réelle serait :
- un transfert des prototypes au service développement et un suivi de la transcription du design sur le site web et l'application
- la réalisation d'une étude d'utilisabilité de pré-lancement
- réitérer le processus pour intégrer les besoins complémentaires des utilisateurs
Au cours de ce projet j'ai appris à dissocier, application dédiée et site web. Les deux outils ne répondent pas forcement à des problèmes exactement identiques. Plus souvent complémentaire, lors de la création d'une application ou d'un site web il est important de prendre en compte les caractéristiques techniques des appareils. Dans le cas du projet développé, prendre une photo pour identifier un produit est une fonction classique sur une téléphone mobile mais pas reproductible sur un ordinateur de bureau.