Easy Veggie Céléna Crouzier
08 MVP Minimum Viable Product
Fonctionnalités primaires Suite aux données que nous avons récoltées pendant notre phase de recherche nous allons mettre en place un MVP. Le MVP (minimum viable product) représente le plus simple produit avec les plus simples fonctionnalités possibles qui aurait de la valeur pour l’utilisateur (pour qu’ils l’utilise et/ou achète). Voici les fonctionnalités primaires à intégrer à notre produit : ● ● ● ● ● ● ●
L'apport nutritionnel d’une recette Pouvoir adapter les préférences alimentaires Une liste de course Un planning de repas sur plusieurs jours Recettes adaptées à mon niveau de cuisine Conseils pour m’accompagner dans ma transition alimentaire Un onboarding pour personnaliser l’expérience utilisateur
09 Storyboard
Storyboard Afin de visualiser quelles seront les interactions de l’utilisateur avec l’application nous avons fait un storyboard.
Storyboard Afin de visualiser quelles seront les interactions de l’utilisateur avec l’application nous avons fait un storyboard.
10 User flow
User flow Pour pouvoir visualiser les parcours utilisateurs nous avons fait des User Flow. Le User Flow c’est un chemin à parcourir et des actions à mener par un utilisateur à travers une application. Le parcours n’est pas juste linéaire, il peut emprunter des détours lors de ce dernier. Ce type de parcours permet d’optimiser l’expérience et les trajets clés utilisateurs. Ces user flow sont basés sur le persona primaire
Parcours utilisateur Objectif 1 : Ajouter une recette Ă sa liste de course
Parcours utilisateur Objectif 2 : Ajouter une recette Ă son planning
11 Wireframes
Wireframes Les wireframes nous servent à illustrer les solutions. Le niveau de détails n’est pas abouti mais il est suffisamment clair pour pouvoir visualiser l’ensemble des solutions. Cela permet d’être plus pertinent et efficace avant de passer en test et de pouvoir placer les éléments avant de passer à l’UI.
Wireframes
Onboarding
Fiche recette
Liste de courses
12 Tests utilisateurs
Test Utilisateurs Afin de rester dans l’optique du MVP on test nos wireframes avant de passer à l’UI pour pouvoir ajuster les points de frictions potentiels pour l’utilisateur. Pour rendre ces test le plus réaliste possible nous avons créé un prototype avec des micro animations/interactions. Pour réaliser ces tests nous avons demandé à 5 utilisateurs qui ont le même profil que notre persona primaire de tester les wireframes. Voici les principaux points remontés et modifiés.
Points de frictions
Fiche recette
Liste de courses
Conseils
Texte trop petit et serré. Icons “difficulté” trop petit
On ne sait pas quelle recette est la liste de courses affiché
On ne comprends pas très bien au premier abord. Accentuer le carousel
Navigation
Wording
Paramètres trop petits. Ajouter un titres de pages pour savoir où est l’utilisateur
Harmoniser l'appellation du “planning”
13 ItĂŠrations
Itéarations Suite aux points de frictions rencontrés par les utilisateurs, nous avons modifié les wireframes afin d’y apporter de nouvelles solutions
Onboarding
Fiche recette
Liste de courses
14 Design Système
Concept produit Pour cette application nous avons décidé de rester dans le milieu naturel, végétale et sobre.
Les couleurs : ● ●
Le vert ici rappel le côté naturel, alimentation saine. La palette est assez sobre pour véhiculer ce côté bien être et facile d’utilisation
Concept produit Pour cette application nous avons décidé de rester dans le milieu naturel, végétale et sobre.
La Typographie : ● ●
●
Muli regular 14px Cette typo une légère rondeure ce qui apporte de la douceur et rappel le côté doux et naturel. Mais elle est aussi plutôt droite, cette verticalité apporte du soutien (pour l’accompagner dans sa transition et de la crédibilité pour l’utilisateur.
Components library Pour créer les maquettes nous avons le logiciel Figma. Afin de faciliter le passage des maquettes à tous les collaborateurs nous avons créer une component library. Nous avons utilisé la méthode de l’atomic design. Cette méthode permet de partir des plus petits éléments et composés des éléments de plus en plus complet. Figma permet de créer plusieurs page dans le même fichier, ce qui facilite la séparation des différents éléments du design système. Pour que le dossier des maquettes soit le plus clair possible nous avons détaillé certains comportements, interactions et adopté une convention de nommage qui parle à tous. Voici quelques exemples.
Components library
Les boutons : ●
Ici on peut voir les différents boutons, nommés selon leurs fonctions et décliné selon le comportement qu’ils peuvent adoptés
Components library
Les organism : Ici on peut voir des éléments complets composés d’atomes.
Écrans finaux Onboarding : L’onboarding permet à l’utilisateur de renseigner ses préférences alimentaires et par conséquent d’avoir des recettes adaptées. Il peut aussi les modifier plus tard dans ses paramètres. On retrouve ici les éléments qui rappel la nature et le bien être avec la couleur verte et les plantes. On informe aussi l’utilisateur de sa progression dans l’onboarding avec une barre de progression en haut de l’écran.
Écrans finaux Fiche recette : Sur cet écran on retrouve les informations nécessaire à la réalisation de la recette. Pour accompagner l’utilisateur dans sa transition nous avons ajouter, en plus des valeurs nutritionnelles, un nutri-score. Nous avons pensé aux utilisateurs qui sont en début de transition et à qui les chiffres ne parlent pas. Ce nutri-score est parlant visuellement et donne rapidement une information clair. On retrouve aussi un CTA qui permet d’ajouter cette recette à la liste de courses
Écrans finaux Liste de course : La liste de course permet à l’utilisateur d’avoir la totalité des ingrédients dont ila besoin pour réaliser les recettes ajoutées. Il peut aussi consulter individuellement chaque recettes. Afin de faciliter la compréhension nous avons regroupé les différents ingrédients par catégories. Les catégories peuvent être déroulées, ce qui permet de ne pas inonder l’utilisateur d’informations avec la totalité des ingrédients affichés par défaut. Dans ces menus déroulant l’utilisateur peut cocher les ingrédients qu'il a déjà chez lui pour qu’ils soient catégorisés comme tel et qu’il n’achète pas 2 fois la même chose. Ou alors les cocher aux fur et à mesur qu’il fait ses courses
Merci de votre attention