chevron_left Retour aux projets

DoEatYourself

application de cuisine
Idéation - Design - Developpement (Bachelor 2ème année)
Brief
A partir de la thématique "donner sa confiance", nous devions identifier une problématique liée à ce sujet suite à une phase de recherche et développer une solution pour y répondre en proposant une expérience optimale et adaptée..
Cadre de travail
L'objectif de ce projet était de développer un concept répondant à la problématique identifiée après une phase de recherche, réaliser les interfaces mais aussi une version codée (HTML/CSS/JS) afin de mettre en pratique ce que nous avions pu apprendre au cours de l'année, notamment en standards web.
Sujet
Après une phase de recherche selon notre vision de ce que peut être "donner sa confiance" nous avons décidé de travailler sur le thème de la cuisine. Nous objectif était d'aider les étudiants à 'mieux' manger notamment des repas plus diversifiés en utilisant des produits de saison en partageant des moments, des ingrédients et en créant des liens sociaux.
Nous avons aussi grâce à nos recherches décidé d'inclure la méthode du batch cooking. Basée sur la préparation en une journée ou demie-journée tous les repas de la semaine afin d'être plus organisé et gagner du temps, cela semblait relativement adaptée aux étudiants.    
Solution
DoEatYourself est une application qui aide les étudiants désireux d'apprendre à développer leurs compétences culinaires en augmentant leur confiance en eux tout en créant des liens sociaux avec des personnes de tous horizons.
Le service permet de trouver des personnes avec qui cuisiner autour de vous, ainsi vous pouvez rencontrer de nouvelles personnes de tous âges, découvrir de nouvelles recettes ou culture, partager des techniques ou astuces...  
Un 'hôte' offre la possibilité de venir cuisiner chez lui, dans sa cuisine, puis, dans une conversation dédiée, le groupe d'apprentis cuisiniers décide des recettes qu'ils réaliseront, partage les produits que chacun possède déjà et définit ce qu'il reste à acheter.
Le jour J, chacun peu choisir quelle étape il souhaite réaliser (couper, gérer la cuisson...) et même désigner ou tirer au sort quifera la vaisselle !
C'est aussi une plateforme collaborative ou chacun peut ajouter ou contribuer à une recette.
Positionnement
Identité graphique
L'identité graphique du service est assez simple. Nous souhaitions qu'elle soit claire, organisée et joyeuse en restant dynamique pour correspondre à notre cible. La couleur primaire est un vert vibrant et un rouge clair est utilisé pour mettre en avant des informations. Des niveaux de gris accompagnent bien sûr la charte graphique. Pour les typographies nous avons opté pour la Poppins couplé à la Lato.
UI & pages
Cette charte graphique nous a permit de créer des interfaces claires et épurées permettant aux utilisateurs de se concentrer et de bénéficier d'un processus simple, étapes par étapes.

Le service est disponible et utilise à la fois des versions desktop et mobile en fonction des étapes. Le début de l'expérience (de trouver son hôte à rejoindre un groupe) à été imaginé sur ordinateur (ce qui ne veut pas dire que cela ne serait pas disponible sur téléphone), et lors de la partie cuisine, chaque cuisinier pourrait avoir auprès de lui un téléphone avec les étapes correspondant à ses tâches.

Nous avons réalisé toutes les pages principales nécessaires mais la plus challengeante à été celle de a la conversation puisqu'il fallait qu'elle soit claire tout en comprenant de nombreuses fonctionnalités (to do list, qui apporte quoi...). Nous avons également du apporter beaucoup d'attention aux étapes et aux usages possibles lors de la cuisine (mains sales ou prises...).
Interfaces
Intégration
Coder un projet en entier
Au cours de la deuxième année de Bachelor UX/UI nous avons eu différents cours de développement pour acquérir des connaissances de bases sur les standards du web. De l'HTML et CSS en passant par un peu de PHP et JavaScript, ce projet était l'occasion de mettre en pratique ces compétences techniques. Comme nous avions des interfaces en desktop et en mobile, nous avons dû utiliser différentes bases de codes, en particulier pour la partie interactions. C'était aussi l'opportunité de découvrir l'usage de GitHub pour réaliser l'intégration de manière collaborative. Nous avons appris à utiliser les bons tags ainsi que le principe de flexbox et de grilles tout comme résoudre des conflits lors des commits sur GitHub. Comme vous pouvez l'imaginer, ça n'était pas un exercice facile, nous avons rencontré des difficultés et avons dû chercher des solutions, c'était donc aussi un bon exercice de recherche technique et de persévérance !

N'ayant que des bases de langage de programmation web et seulement 2 à 3 semaines pour réaliser cette partie, les pages nétaient pas toutes totalement responsive mais elles correspondent tout de même à ce que nous avions imaginé ce qui nous a rendu réellement fiers !
Projet en collaboration avec Pierre Moret et Meng Wang à l'École de design Nantes Atlantique