Léa Ladjevardi

Conception application et site web Responsive Bonap

Dans le cadre de la formation UX Design de Google Career Certificates, j’ai réalisé ce projet pour lequel j’ai utilisé le logiciel Figma.

Aperçu du projet

Projet UX Bonap

Le produit

Basée à Bordeaux, Bonap se concentre sur l'alimentation et la santé. L'organisation recherche un outil visant à encourager des habitudes alimentaires saines. Principalement destiné aux adultes actifs, ce service vise ceux qui attachent de l'importance à la qualité de leur alimentation mais manquent de temps pour cuisiner. Ces utilisateurs souhaitent des idées de recettes rapides respectant les apports nutritionnels.

Durée du projet

Du 1er au 21 décembre 2023

Le problème

Les gens ne connaissent pas toujours les règles à respecter pour bien se nourrir. De plus, les adultes actifs manquent souvent de temps pour cuisiner des plats sains.

L'objectif

Concevoir une application qui aidera les gens à apprendre à cuisiner sainement et rapidement.

Mon rôle

UX Designer en charge de l'application et du responsive web design de la conception à la livraison.

Responsabilités

Conduite d'entretiens, maquettes fonctionnelles papier et numérique, prototypage basse et haute-fidélité, réalisation d'études d'utilisabilité, prise en compte de l'accessibilité, itération des conceptions, détermination de l'architecture des informations et conception responsive.

Comprendre l'utilisateur

Recherche utilisateur

Résumé

J’ai mené des entretiens avec des utilisateurs. J’ai ensuite réalisé des cartes d’empathie pour définir 2 personas. La plupart des participants aux entretiens ont déclaré vouloir manger sainement mais ne connaissent pas toujours les apports nutritionnels des aliments. De plus, à plusieurs reprises, ils m’ont fait part d’un manque de temps et d’idées pour cuisiner. Les personnes interrogées avaient toutes pour habitude de chercher des recettes sur Internet.

Personas

Énoncés de problème 

Jean-Paul est un ingénieur informatique très occupé, qui a besoin de trouver des recettes de cuisine saines nécessitant peu de temps de préparation avec peu d’ingrédients, parce qu’il souhaite préparer des plats plus sains malgré leurs journées bien chargées à sa compagne et lui.

Emilie est une femme soucieuse de l’environnement et de la santé qui a besoin de trouver des solutions pour maintenir une alimentation saine tout en respectant la planète, parce qu’elle souhaite que sa famille puisse bénéficier de repas équilibrés, adaptés à leurs goûts, tout en contribuant à réduire leur empreinte écologique.

Audit concurrentiel

L’analyse de quelques sites concurrents a révélé les points faibles et les possibilités à exploiter pour améliorer l’efficacité de l’application Bonap.

Cliquez pour voir l’audit concurrentiel complet et le rapport d’audit.

Conceptualisation

J’ai effectué une brève session de conceptualisation avec la méthode du Crazy Eights* afin de générer des idées visant à remédier aux lacunes relevées lors de l’audit concurrentiel. Mon attention s’est particulièrement portée sur les fonctionnalités permettant la personnalisation des recettes en fonction de la santé et des préférences alimentaires de l’utilisateur.

 

* Technique d’idéation collaborative qui vise à proposer, chercher et dessiner autant d’idées divergentes sur des feuilles, concernant une problématique donnée.

Démarrer la conception

Maquettes fonctionnelles numériques

Suite à la conceptualisation et à la création de quelques maquettes fonctionnelles sur papier, j’ai élaboré les premières conceptions de l’application Bonap. Ces conceptions mettaient l’accent sur la nécessité de recueillir des informations sur les utilisateurs afin de leur proposer des recettes de cuisine personnalisées.

Wireframes Bonap

Prototype basse-fidelité

J’ai créé un prototype basse-fidélité qui connectait le flux utilisateur consistant à suggérer des recettes personnalisées en fonction de la santé et des goûts de l’utilisateur. Cela m’a permis de réaliser les tests d’utilisabilité qui m’ont été utiles pour la mise à jour de ce prototype. Voir le prototype basse-fidélité de Bonap.

Étude d'utilisabilité

Paramètres

Type d'étude 

Étude d'utilisabilité modérée

Localisation

France, à distance

Participants

5 participants

Durée

15 à 20 minutes

Conclusions

Voici les principales conclusions révélées par l’étude d’utilisabilité :

Numéro 1

But du site

Les gens ne voient pas clairement le besoin de remplir leurs informations pour obtenir des recettes de cuisine personnalisées.

Numéro 2

Trop de choix de recettes

Les recettes suggérés sont classées par thème mais les utilisateurs souhaitent un champ de recherche pour trouver encore plus rapidement une recette.

Numéro 3

Informations recettes

Les gens ont besoin d’informations complémentaires sur les recettes de cuisine (apports nutritionnels, …).

Affiner la conception

Maquettes

Sur la base des informations tirées des études sur la facilité d’utilisation, j’ai appliqué des modifications de conception en présentant notamment de façon plus claire les photos des recettes par thème et par saison. Pour cela, j’ai décidé de les présenter plutôt en mosaïque qu’en liste.

Mockups Bonap 1

Les modifications de conception supplémentaires comprenaient le remplacement du premier texte de la page d’accueil par une photo pour que l’utilisateur comprenne immédiatement et de manière visuelle le thème de cette application.

Mockups Bonap 2
Bonap - maquette 01
Bonap - maquette 02
Bonap - maquette 03
Bonap - maquette 04
Bonap - maquette 05
Bonap - maquette 06
Bonap - maquette 07
Bonap - maquette 08

Prototype haute-fidelité

Le prototype haute-fidélité a emprunté le même parcours utilisateur que le prototype basse-fidélité, intégrant les ajustements de conception effectués suite à l’évaluation d’utilisabilité.

Voir le prototype haute-fidélité Bonap.

Considérations relatives à l’accessibilité

Numéro 1

J'ai veillé à ce que le contraste entre le texte et le fond soit suffisant pour une lisibilité optimale.

Numéro 2

Les goûts de l’utilisateur regroupés par thèmes facilitent le remplissage des préférences alimentaires.

Numéro 3

J'ai ajusté la taille des images en fonction de la mise en page pour qu'elles soient visibles et adaptés au support mobile.

Conception Responsive

Architecture des informations

Après avoir achevé les conceptions de l’application, j’ai entamé la création du site Web responsive.

J’ai utilisé le plan du site Bonap comme guide pour élaborer la structure organisationnelle de chaque écran, assurant ainsi une expérience cohérente sur tous les appareils.

Conception responsive

Les conceptions pour les différentes tailles d’écran englobaient les dispositifs mobiles, les tablettes et les ordinateurs de bureau. J’ai optimisé ces conceptions afin de répondre de manière spécifique aux besoins des utilisateurs de chaque appareil et de chaque taille d’écran.

Site Web mobile

Tablette

Ordinateur de bureau

Mobile Bonap
Tablette Bonap
PC Bonap

Pour aller de l'avant

Points à retenir

Incidence

Les utilisateurs ont indiqué que grâce à l’application, ils pouvaient apprendre à cuisiner sainement et ont apprécié les suggestions personnalisées.

Ce que j'ai appris

J’ai compris que, malgré l’importance du problème que je cherchais à résoudre, suivre méthodiquement chaque étape du processus de conception et m’aligner sur les besoins particuliers des utilisateurs m’a aidé à trouver des solutions à la fois exécutables et bénéfiques.

Prochaines étapes

Numéro 1

Réaliser des entretiens avec les utilisateurs pour vérifier si l'expérience était à la hauteur de leurs attentes.

Numéro 2

Ajouter des objectifs (ex. perte de poids) pour inciter les utilisateurs à utiliser plus régulièrement l’application et/ou le site Web reponsive.

Numéro 3

Mesurer l'efficacité en analysant les Indicateurs Clés de Performance (ICP).

Merci d’avoir examiné mon travail sur l’application et le site web Bonap !
Si vous souhaitez en savoir plus, contactez-moi.