Design web & mobile

Easy Meal

EasyMeal_Case

1.Formation des groupes.

Dans le cadre de notre nouvel atelier, il nous était demandé
de se mettre par groupe de 4 étudiants. Gaëtan
Berger, Zakaria Idriss, Jérôme Laurent et moi-même
sommes réunis pour commencer le “Reboot Factory”.

Profil

2. Le matériel

“Pas de matériel, pas d’atelier et pas d’atelier c’est pas d’atelier.”

  • Post-it,
  • des marqueurs,
  • 1 carton plume A0,
  • des gommettes,
  • feuille A4 blanche,
  • un appareil photo,
  • un smartphone.

 

3.Recherche de problématiques.

La première étape était d’inscrire sur des post-it quelques idées de problématiques de la vie de tous les jours. Comme par exemple, le sport après les cours, faire la cuisine en tant qu’étudiant ou encore sortir le soir. Ensuite nous nous sommes concertés afin d’être d’accord sur la problématique à traiter et nous avons tranché pour la cuisine.

DSC_0146

4. Fonctionnalités.

Après avoir choisi notre problématique, nous devions mettre sur papier quelques idées de fonctionnalités que nous voudrions voir sur notre application. Dans-cas, le choix du prix, du nombre de personnes ou le fait de pouvoir choisir son plat était d’une grande importance.

DSC_0152

5.Les besoins utilisateurs.

Pour subvenir aux besoins de nos futurs utilisateurs, il fallait avant tout déterminer qui utilisera notre application. Nous avons défini 5 personas ayant chacun un besoin particulier, le manque de temps, d’inspiration ou d’argent. Ceux-ci seront accompagnés d’un petit scénario qui pourrait les conduire à utiliser notre application.

DSC_0157

6.Deux personas primaires, des étudiants.

Nous sommes partis dans l’idée que les étudiants sont proches de nous et que dans ce cas-ci, nous avons des besoins similaires. Nous pensons qu’après les cours, les étudiants n’ont pas forcément le temps de faire la grande cuisine, le budget est souvent limité à quelques euros et ils ne mangent pas assez de plats variés.

Romain Durly, 21 ans

Etudiant à l’HEAJ de Namur

Plutôt fainéant et impulsif, Romain rentre tard des cours tous les soirs, ils aimeraient pouvoir faire à manger sans perdre de temps pour pouvoir se mettre au lit devant sa série préférée.

Romain Durly, 21 ans

Etudiant à l’HEAJ de Namur

Romain

Plutôt fainéant et impulsif, Romain rentre tard des cours tous les soirs, ils aimeraient pouvoir faire à manger sans perdre de temps pour pouvoir se mettre au lit devant sa série préférée.

Scénario:

Romain, 21 ans est un étudiant qui est fainéant. Il l’est d’autant plus quand il rentre d’une longue et difficile journée d’école. En faisant le chemin vers son kot, il se demande ce qu’il va cuisiner en ayant peu d’envie de faire la cuisine et un budget de fin de semaine. Il se rend alors sur l’application, inscrit son budget et son régime afin de trouver un plat qui lui plairait tout en restant simple à réaliser. Il consulte des plats jusqu’à ce qu’il trouve la perle rare qui lui convient et pouvoir en découvrir sa recette.

Clara Montarin, 18 ans

Etudiante à l’Henallux de Namur

Clara

Clara est studieuse, extravertie et passionnée de shopping avec ses amis après les cours. Une fois chez elle, il ne lui reste presque plus beaucoup d’argent pour pouvoir se faire à manger. Elle aimerait pouvoir trouver des plats à faire en fonction de son petit budget.

Scénario

Clara est tranquillement chez elle après une journée de cours. Sa mère n’est pas là et doit alors se débrouiller pour faire la cuisine. En plus de son faible budget à cause du shopping, Clara ne sait pas très bien faire à manger. Elle a besoin d’une application pouvant lui donner plusieurs plats filtrés à l’aide de son faible budget indiqué, ainsi que la recette complète.

7.Le peronnas secondaire, une femme.

Ce persona constitue les adultes, hommes ou femmes d’environ 30–40 ans pouvant utiliser notre application après le travail.

Giselle Rabeux, 37 ans

Vendeuse chez Delhaize

Giselle

Giselle, radine et lunatique, ne sait pas toujours quoi faire à manger à son mari et ses trois enfants. Elle a besoin d’une application qui lui donnera de l’inspiration lorsqu’elle en aura besoin.

Scénario:

Giselle, 37 ans, vendeuse au Delhaize depuis 15 ans. Après une dure journée de travail, Giselle n’a qu’une seule idée en tête, se mettre le plus rapidement possible devant sa télévision pour se détendre. Mais avant cela, elle doit d’abord penser à préparer le souper pour son mari et ses enfants. Faire à manger pour tout le monde, ce n’est pas toujours évident, surtout quand on est en manque d’inspiration comme Giselle. De plus, elle voudrait faire la cuisine pour un faible coût. Heureusement qu’il y a notre application, grâce à nous, Giselle peut trouver source d’inspiration ainsi qu’une recette simple qui va lui permettre de préparer le repas et de pouvoir s’installer rapidement dans son canapé.

8.Les personas tertiaires, petits et vieux

Les personas tertiaires correspondent aux utilisateurs n’utilisant pas souvent notre application mais ils peuvent être d’une grande importance au niveau de nos choix pour qu’elle reste intuitive à tout type d’utilisateurs.

Jean-Pierre, 73 ans

Retraité

JeanPierre

Jean-Pierre, homme très calme et passionné de chasse. Une à deux fois par an, il se rend en camping avec sa femme histoire de se détendre. Après une partie de chasse, il a besoin d’une recette de sauce afin d’accompagner le lapin qu’il vient de ramener à sa femme.

Scénario:

Jean-Pierre, retraité, passionné par la chasse et amoureux de sa femme part en camping pendant 3 jours. Le lendemain, après une chasse plutôt bonne, il ramène un bon lapin pour le dîner. Malheureusement, Jean-Pierre ne sait pas si il faut accompagner son lapin de pomme de terre, de frite ou de pâtes. Il a besoin d’une application pouvant lui donner quelques idées alléchantes d’accompagnement.

Lucye, 12 ans

Ecole primaire de Thuin

Lucye

Lucye est une enfant très sage et fort gâtée par son papa et sa maman. Aujourd’hui, elle voudrait faire quelques gâteaux pour faire plaisir à ses parents. Elle a besoin d’une application pouvant lui montrer quelques recettes simples à faire sur sa tablette.

Scénario:

Lucye, 12 ans, rentre de l’école primaire. Aujourd’hui est un jour très spécial pour elle, c’est la fête des pères, et Lucye voudrait vraiment faire plaisir à son papa. Malheureusement elle ne connaît aucune recette pour faire une délicieuse pâtisserie. Grâce à l’application, Lucye va pouvoir découvrir une multitude de pâtisseries, et choisir ce qu’elle voudra réaliser afin d’en voir la recette.

9.Job Stories

Ils nous ont permis d’avoir un aperçu des différentes fonctionnalités de notre application et de voir si celles-ci vont permettre de résoudre les différentes situations.

Voici un exemple de Job Stories:

Quand j’ouvre l’application, je veux pouvoir trouver des plats qui conviennent à mon budget, choisir mon régime approprié et indiquer le nombre de personnes qui voudront manger un plat grâce à des filtres. Au final, je pourrai accéder à la recette du plat qui me conviendra.

10.Les 5W

Les 5W (Who, What, When, Where et Why) ont servi à définir le public pouvant utiliser notre application, à quel moment de la journée et où est-ce qu’ils pourront l’utiliser mais aussi ce qu’ils pourront faire sur l’application et pourquoi.

Easy Meal est une application qui permet à toute personne ayant accès à une cuisine (WHO) de choisir des plats en fonction de ses goûts et de son budget (WHAT), où et quand ils le souhaitent (WHERE , WHEN) dans le but de les aider à cuisiner des plats rapidement, simple et à moindre coût (WHY).

11. Nom de l’application

Il nous était demandé de créer le premier tweet afin de faire la promotion de notre application et dans sa finalité d’en définir enfin le nom.

12.L’architecture de l’information

Après avoir pris connaisses des fonctionnalités propres à l’application, nous avons réuni sur papier les différents contenus que nous allons mettre sur les écrans et de définir si c’est du texte, une image ou une fonctionnalité.

DSC_0179 copie

13.Premier test utilisateur

Nous avons demandé à plusieurs personnes de l’atelier de venir remettre en ordre l’architecture de l’information que nous avons mélangée juste avant. Ceci va permettre de vérifier si le contenu est suffisamment clair et intuitif pour tout type d’utilisateur ne connaissant pas l’application.

DSC_0192 copie

14.Création rapide de Wireframe

Chacun de notre côté, nous devions dessiner rapidement 8 wireframes, puis 4 wireframes d’une fonctionnalité principale ou secondaire de l’application. Une fois le temps écoulé, nous nous sommes concertés, et nous écoutions les commentaires de chaque étudiant dans le but de trouver la perle rare.

DSC_0202 copie

15.La fonctionnalité principale

Toujours sur papier, nous avions dessiné chacun de notre côté la fonctionnalité principale de l’application afin d’avoir une idée de son visuel et des fonctionnalités mises en place. Quelques croquis suivit d’une rapide description nous ont été très utile dans la suite de l’élaboration des visuels.

DSC_0204 copie

16.Card Sporting

C’était l’heure de tester notre application de manière plus concrète. Nous avons dessiné sur papier chaque élément, chaque fonctionnalité qui se trouveront sur l’application. Les éléments changent en fonction de ce que l’on souhaite faire. Ceci nous a permis de voir si les utilisateurs ne sont pas perdus sur l’application, si elle est intuitive, claire et qu’elle répond à leurs attentes.

DSC_0210 copie

17. Un nouveau test utilisateur

18. Dernières modifications

Et dernier test utilisateur

DSC_0212 copie

19. Retroplanning

Question d’organisation, il est important de concevoir un retro-planning afin de définir les tâches à réaliser, de savoir qui les réalise. Il nous a permis de se tenir au courant sur l’évolution du projet, sur ce qui est fait ou non et de ne surtout rien oublier.

20.Rédaction du contenu

Sur un Google Doc, nous avons rédigé les différents contenus de notre application, en commençant par la page d’accueil jusqu’aux recettes sans oublier les ingrédients, la description des plats ou encore le temps des préparations. La grosse difficulté était de trouver des recettes simples, pour tous les gôuts pouvant facilement s’adapter à un écran de mobile.

21. Réalisation des visuels

D’abord un choix de police, un choix de couleur, un premier croquis de notre logo. Une fois tout mis en place et avec l’aide de nos précédents wireframes, nous pouvions enfin commencer à réaliser les visuels de notre application “EasyMeal”.

Visuel de l’application

12788890_10207602979865473_899713400_o

Visuel de la landing page

10650404_478945258956556_2051412944_o

22.Quelques animations

 

 

 

23. HTML/CSS de l’application

Nous avons laissé la longue et dure étape du code à Zack étant donné qu’il a déjà participé l’année dernière à un atelier “Reboot Factory”.Bien entendu, nous sommes restés derrière lui pour écouter ses conseils, lire, comprendre et apprendre.

12790114_10207331756719916_1086036953_o

25. La finalité

 

Application

easy_meal

Landing Page

12837196_481725888678493_136196714_o

 

26. Ressenti du Reboot Factory

 

Logan

Après un début difficile dans le Web, je ressors avec une nette amélioration au niveau de mon organisation du travail. Notamment grâce aux multiples tâches que l’on devait réaliser avant d’atteindre la finalité du projet. Une vision différente des visuels afin de rendre agréable l’utilisation des différentes fonctionnalités par les utilisateurs. Mise en pratique des “media queries” que j’attendais depuis un moment déjà. Une approche des tests utilisateurs assez sympathiques. Un groupe très soudé, productif, chacun connaissait sa tâche et la réalisait dans les temps. Un ‘Reboot Factory’ riche en expérience.

Jérôme

J’ai beaucoup apprécié travaillé sur le projet “Easy Meal” car j’adore concevoir des applications qui pourraient faciliter la vie de certaines personnes. Le “design process” a été pour moi très intéressant, j’ai trouvé que toutes les étapes nous amenaient à faire une application simple et efficace.Il nous a aussi permis de réfléchir aux différentes fonctionnalités de l’application tout en ayant une certitude qu’elle sera utilise à chaque utilisateur. Étant fan de la cuisine, cette thématique choisie m’a donné beaucoup de motivation sur ce Workshop.

Gaëtan

L’atelier m’a permis d’avoir une approche plus conséquente dans la création d’un visuel pour une application mobile. Ce fût très intéressant, concevoir pour du mobile reste très différent que concevoir pour du desktop. J’ai découvert également comment se gérait le code de mon propre travail sur mobile, comme en agence. Un atelier très enrichissant, essentiellement niveau visuel, la matière que je préfère travailler.

Zack

Cet atelier m’a permis de corriger beaucoup d’erreurs que j’avais commises l’année dernière lors de la réalisation du code de l’application. J’ai amélioré mes connaissances en Javascript et essentiellement en JQuery . J’ai aidé les autres membres du groupe, des 2.0 dans leur première approche dans la réalisation d’une application mobile.

     Projet au hasard