Céléna Crouzier

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