Page 1

Projet Professionnel

ITADA KIMASU

Amandine Bizet & Pauline LiĂŠbart


2

ITADAKIMASU UNE APPLICATION DE Amandine Bizet Pauline Liébart Soutenance du 20 Juin 2019

Master Art parcours « Design graphique et Design d’interaction », université de Valenciennes.

L’ensemble des illustrations contenues dans ce dossier on été réalisées par notre équipe.


sommaire Brief de design ....................................................................................................5 Introduction.....................................................................................................6-9 Pourquoi ITADAKIMASU ?...........................................................8-9 Analyse concurrentielle.........................................................................10-15 Tableau de synthèse...................................................................12-13 Bilan de l’état de l’existant ......................................................14-15 Recherches sur les utilisateurs ..........................................................16-37 Entretiens semi-directifs..........................................................18-21 Enquête de terrain......................................................................22-25 Personas.........................................................................................26-29 Cartes d’empathie.......................................................................30-31 User journey..................................................................................32-37 Cahier des charges fonctionnel .........................................................38-41 3 Scénario d’usage ......................................................................................42-43 Prototypage papier..................................................................................44-45 Prototypage écran....................................................................................46-47 Bilan des tests utilisateurs....................................................................48-51 Maki-Maki...................................................................................................52-53 Intentions de design graphique..........................................................54-77 Moodboard....................................................................................56-59 Recherches de logotype...........................................................60-71 Splash screen................................................................................72-73 L’application...................................................................................74-75 Les stickers............................................................................................77 Intentions techniques.............................................................................78-79 Conduite de production........................................................................80-81 Budget ...................................................................................................82 Retroplanning..............................................................................83-84 Conclusion .................................................................................................85-86


4


Brief de design 5

Depuis les années 80, l’intérêt pour la culture nippone ne cesse de croître en France. Cela se traduit par une véritable passion pour la culture populaire et par un goût tout particulier pour la cuisine japonaise. Mais cet engouement ne se limite pas à ces aspects puisqu’on remarque aussi un intérêt grandissant pour le Japon de façon plus globale, que ça soit à travers l’apprentissage de la langue ou de l’Histoire de ce pays.

Cependant, l’accès aux ressources nécessaires est parfois difficile et de nombreuses confusions existent entre les différentes cultures asiatiques. Ainsi, nous avons pensé une application qui se veut être une porte d’entrée sur l’Histoire du Japon par le biais de l’apprentissage de la cuisine Japonaise traditionnelle.


Introduction

En France, de nombreuses personnes sont intéressées par la culture japonaise et notamment par la cuisine japonaise. Mais l’image que nous avons du Japon est souvent biaisée et superficielle.

Comment découvrir l’Histoire de la cuisine japonaise par la pratique ?

6

Les objectifs de notre projet sont donc de permettre aux utilisateurs d’apprendre à cuisiner des plats traditionnels japonais tout en découvrant l’Histoire de ces derniers et la place qu’ils occupent dans la culture japonaise à travers une application sur tablette. Cette application s’inscrit dans un contexte de développement personnel des compétences (culinaire, historiques, culturelle…) et d’ouverture à d’autres cultures. Elle n’est pas destinée à être utilisée dans le cadre d’une institution tierce (telle que l’éducation nationale) mais s’adresse aux utilisateurs finaux. L’utilisateur a donc la possibilité de parcourir l’Histoire du Japon à travers différents plats, classés par période historique. Avant de commencer la recette, il est invité à visionner une courte vidéo animée expliquant le contexte historique de l’apparition et de l’évolution du plat sélectionné. Après avoir validé la compréhension des informations en répondant à une question, la recette peut être consultée par étapes accompagnées d’illustrations fixes ou animées.

L’application se base sur un système de navigation linéaire et la plupart des actions permettant de passer à l’écran suivant sont tactiles (swipe ou pression du doigt). En ce qui concerne les points de contact, l’utilisation de l’application se ferait principalement dans la cuisine au moment de l’élaboration d’un repas. Dans un second temps, l’utilisateur pourrait se servir de certaines fonctionnalités lors de ses achats en épicerie spécialisée (consultation de la liste des ingrédients par exemple). Nous avons décidé de nous orienter vers des visuels inspirés de l’art traditionnel japonais afin de mettre en avant l’aspect historique de l’application. Cependant nous avons aussi choisi d’apporter de la modernité afin de ne pas perdre l’utilisateur. Enfin, d’un point de vue technique, ce projet se présente sous la forme d’une application pour tablette windows, android et iOS et sera donc réalisée à l’aide de technologies multiplateforme afin de faciliter le portage sur ces différents supports.


7


Pourquoi avoir choisi le nom ITADAKIMASU ?

Itadakimasu est un mot très connu par les français qui ont un intérêt pour le Japon puisque c’est l’équivalent de notre « Bon appétit ». Mais peu d’entre eux connaissent la signification exacte de cette expression qui diffère légèrement du sens de

« bon appétit ». 8

En effet, Itadakimasu est la forme polie du verbe Itadaku qui signifie « recevoir ». On commence donc un repas en disant « Itadakimasu », littéralement

« Je reçois humblement », afin d’exprimer sa gratitude envers toutes les personnes ayant joué un rôle dans la préparation du plat. Nous avons donc décidé de jouer sur ce double sens : on remercie de recevoir de la nourriture et grâce à notre application, on reçoit du savoir. Enfin, ce nom correspond parfaitement à l’intention de notre projet puisqu’un parallèle peut être fait entre cette expression que beaucoup pensent connaître mais qui a une signification légèrement différente et l’aspect historique souvent méconnu des plats japonais.


9


Analyse concurrentielle

Afin de juger de la pertinence de notre problématique et de la solution envisagée, nous avons analysé les différentes solutions centrées autour des thèmes communs à notre projet que sont la culture japonaise, l’apprentissage de la cuisine japonaise et l’apprentissage de l’Histoire du Japon. Ainsi, nous nous sommes penchées sur divers supports : les applications, les sites webs et les ouvrages.

10

Afin d’analyser ce corpus nous nous sommes basées sur les critères suivants :

• La disponibilité de la langue française. En effet, le public visé étant un public français, il nous semble indispensable que la solution soit entièrement disponible en français.

• L’apprentissage des recettes. La solution proposée doit permettre à l’utilisateur d’apprendre à cuisiner précisément les plats et ne pas se contenter d’une simple présentation.


11

• L’aspect historique. Afin de répondre à la problématique énoncée, la solution doit aborder l’aspect historique de façon détaillée.

• Le respect des traditions. En effet, nous désirons que l’utilisateur soit en mesure d’apprendre à cuisiner des plats typiques du Japon de façon traditionnelle.


Disponibilités en français

Type GASTRONOGEEK Livres

J’aime le Natto L’Art culinaire au Japon À table au Japon Cuisine Japonaise

12

Applications

Japanese Food Eat like Vietnamese Japan Food Quizz To-Fu Oh! Sushi Japan Centre

Sites web

Ici Japon Joranne

Apprentissage des recettes

Aspects Historiques

Respect des traditions


Tableau de synthèse

Nous avons donc divisé notre corpus par type : Tout d’abord nous avons les applications mobiles (smartphone, tablette, android, iOs…). Nous nous sommes particulièrement intéressées à cette catégorie puisqu’il s’agit du même format que notre projet (à savoir une application mobile). Cependant, au cours de notre analyse nous avons réalisé que si la plupart des applications présentent les recette de cuisine, aucune n’apporte d’informations historique au sujet des plats. De plus, les recettes présentées ne respectent pas toujours les traditions japonaises puisque les plats sont parfois adaptés au goût occidental. Enfin, on remarque que peu de ces applications sont disponibles en français. La deuxième catégorie que nous avons analysé est composée de livres. Nous avons ainsi remarqué qu’il existe des livres de cuisines qui présentent les recettes de plats japonais mais que ces derniers n’abordent pas l’aspect historique et culturel. A l’inverse, les ouvrages spécialisés dans l’Histoire ou la culture du Japon ne détaillent pas la réalisation des plats évoqués.

Enfin, nous avons étudié le cas des sites internet. Nous sommes parvenues à analyser des supports assez complets tel que Ici-Japon.fr qui propose des recettes et des informations sur l’Histoire et la culture japonaise mais nous avons remarqué que ces deux aspects sont séparés via des catégories différentes sur le site.

13


Bilan de l’état de l’existant

14

On remarque que les aspects historiques et culinaires sont bel et bien séparés sur ces multiples supports. Dans les cas ou les deux sujets sont rassemblés, ils mélangent les différentes cultures d’Asie et l’aspect cuisine n’est pas prioritaire. Ce ne sont donc pas non plus des concurrents directs. Dans la plupart des cas, le respect des traditions n’est pas présent, les supports proposent des recettes pouvant être revisitées et modifiables. Nous en déduisons donc qu’il y a un besoin existant quant à l’authentification des plats asiatiques ainsi que dans la mise en avant de leurs Histoire.

L’analyse de ces différents supports met en lumière des points forts qui nous ont inspirés :

L’accompagnement de l’utilisateur lors de la recherche des ingrédients nécessaires.

• L’aspect de gamification à base de quizz ou de questionnaires permet une forte implication de l’utilisateur et une meilleure rétention de l’information.

• La vulgarisation du point de vue ethnologique est le type de discours dont nous voulons nous rapprocher.

• Le fait d’aborder la culture par l’angle du jeu est un point d’entrée attractif. Nous avons travaillé cet aspect pour la découverte du maniement des baguettes. • L’utilisation d’un compte utilisateur afin de conserver le parcours. • La présentation des différents plats sous la forme de photographies et non d’illustrations donne envie. • Le classement des recettes par catégories. Dans notre cas, il s’agit d’un classement par période historique.

(Voir fiches d’analyse détaillée en annexe page 25-33)


Cependant, certains écueils sont à éviter : L’aspect de gamification ne doit pas prendre le dessus du discours historique. Il faut éviter que l’utilisateur se retrouve face à des mots qu’il n’est pas capable de prononcer. Il faut éviter une surcharge cognitive par le texte. Pour ne pas perdre l’utilisateur, nous avons pris le parti de présenter le contexte historique sous forme de courtes vidéos. Il faut être attentif à l’authenticité des recettes. Afin d’éviter la transformation des recettes, nous avons fait le choix de ne pas avoir d’aspect participatif au sein de l’application car la communauté incite à adapter les plats, ce qui nous éloignerait du concept.

Notre positionnement consiste donc à mettre en avant l’aspect historique de chaque plat présenté tout en détaillant les différentes étapes de sa réalisation le tout via des vidéos et visuels fixes afin de rendre l’apprentissage accessible. De plus, nous porterons une attention toute particulière au respect de la tradition et de la culture japonaise en ce qui concerne les explications et les ingrédients et méthodes utilisées.

15


16


Recherches sur les utilisateurs La cible Nous avons d’abord accès notre réflexion sur une cible entre 25 - 30 ans et qui s’intéresse au Japon mais qui en a des connaissances limitées voire superficielles. Il s’agit de personnes de nationalité française qui souhaitent se mettre à cuisiner mieux. Ils veulent manger japonais mais sont déçus par les restaurants japonais (surtout ceux où les plats ne sont pas vraiment typiques du Japon). Ils cherchent à vivre sainement, manger équilibré et veulent parfaire leurs connaissances de la culture japonaise et de l’histoire de ce pays. Afin d’affiner notre vision des choses, nous avons effectué des enquêtes de terrain.

Nous avons visité différent types de restaurants japonais (de la grande chaîne Chinoise au restaurant traditionnel Japonais) et avons pu aller à la rencontre du personnel et de la clientèle. Nous avons aussi enquêté dans un Salon de thé sur la thématique de la culture populaire japonaise et auprès d’étudiants en licence de japonais.

17


Entretiens semi-directifs

18

Pour cette étape, nous avons identifié deux types d’entretiens possibles. Nous avons besoin d’informations venant des professionnels du monde de la restauration et venant des potentiels utilisateurs déjà initiés à la culture japonaise par le biais des mangas par exemple. Pour ces deux entretiens, nous avons élaboré un canvas de questions à évoquer durant les échanges. Les questions sont donc adaptées à la discussion. L’ensemble des réponses obtenues seront ensuite analysées afin de constater des besoins que nous n’avions pas identifiés ou encore avoir simplement des points de vue différents. En analysant l’ensemble des échanges, nous avons remarqué plusieurs problèmes ou besoins récurrents. Dans l’ensemble, les personnes questionnées ont une attirance pour la culture japonaise qui s’opère par le biais de la culture populaire. En effet, elles sont attirées par les mangas / animés, la musique, la mode et les façons de faire. Cependant à leurs yeux, l’idée de définir la culture japonaise par l’idée des mangas et/ou cosplay est stéréotypé et cliché. La confusion entre la culture japonaise et les autres cultures asiatiques est un élément qui est récurrent chez certaines personnes interrogées. On constate alors deux typologies de personnes : celles qui font l’amalgame des différentes cultures d’Asie et celles qui sont agacées par cette confusion et ce manque de curiosité et de recul.

(Voir en annexe page 4-18)


19


On en déduit également que les potentiels utilisateurs sont à la recherche de l’authenticité des plats. Il est donc intéressant pour notre projet de prendre ces informations en considération afin de pallier les manques de connaissances sur les origines culinaires du Japon.

20

Nous avions émis l’hypothèse que le point d’entrée pourrait se faire via la connaissance de la culture populaire japonaise que possède déjà le potentiel utilisateur. Il nous a donc semblé évident d’aborder la question du manga à travers le cheminement historique que l’on fait des différents plats.


21


Les enquêtes de terrain

22

Les enquêtes de terrains nous ont permis de remettre en question notre point d’entrée de l’application concernant la culture populaire avec l’idée des mangas. En effet, nous pensions que la cible principale trouverait un point d’entrée à l’application par le biais de la culture populaire japonaise avec l’univers graphique qui en émane (c’est-à-dire les mangas et animés par exemple).

Or, les entretiens ont démontré que cette cible connaît la plupart des plats typiques du Japon mais pas le contexte historique de leur création et évolution. Ce contenu serait donc un réel bénéfice pour elle. De plus, la possibilité de préparer le repas à la maison en ayant un bon geste est vraiment apprécié par la cible qui cherche à bien faire les choses, en respectant les traditions.

Or, les entretiens nous ont démontré que la cible n’est pas forcément attirée par cette culture populaire. En effet, elle connaît la culture populaire japonaise mais possède déjà une connaissance du Japon assez importante pour se détacher de la culture populaire et se diriger vers des connaissances plus précises et aussi plus spécifiques.

De même, il est très important pour nous de proposer une application correspondant à une cible française. Il ne faut donc pas créer de visuels surchargés tels qu’on peut en trouver dans les usages du Design Graphique contemporain japonais, mais au contraire, se diriger vers une ligne graphique épurée qui va rassurer l’utilisateur. Ainsi, ce dernier ne sera pas bloqué par la ligne graphique, l’interface ou encore une application au style trop cliché qui pourrait repousser certains.

Nous avons donc décidé de prendre en compte ces remarques et d’orienter notre projet vers une connaissance du Japon qui dépasse la culture populaire. Nous ne voulons pas tomber dans le cliché du monde du manga et de l’animé, qui est la solution de facilité lorsque l’on crée un projet concernant le Japon. Notre intérêt étant de proposer à l’utilisateur de découvrir ce pays sous un nouveau jour, et dépasser tous les clichés que nous avons en France sur le Japon. L’idée est vraiment de proposer un contenu plus riche à l’utilisateur.

Concernant le prototype, ces enquêtes de terrains nous ont donc orienté vers une application possédant en premier lieu un aspect historique très ancré. Nous avons décidé de diriger l’application vers quelque chose de plutôt centré sur l’aspect historique plutôt que culinaire aux premiers abords.

La cible potentielle pourrait être un étudiant de licence de japonais à Lille 3. Cette cible a déjà des connaissances importantes sur le Japon et son Histoire. (Voir détails en annexe page 20-21)


23


24


Dans un deuxième temps, nous ne voulons pas abandonner totalement la seconde cible. Celle-ci possède des connaissances du Japon beaucoup plus superficielles et imprécises que la cible primaire. Elle s’intéresse principalement à la culture populaire du Japon et a surtout envie d’apprendre à cuisiner japonais à la maison. Nous avons constaté lors de divers entretiens que cette cible ne cherche pas forcément le côté historique des plats mais que l’idée de préparer des mets en respectant la tradition l’intéresse énormement. L’aspect historique est pour elle quelque chose de nouveau, qui va lui apporter une autre vision du Japon, et peut-être alors l’initier à un autre aspect de cette culture.

25


Personas principal À la suite de ce constat nous avons créé deux personas :

26


27


Personas secondaire

28


29


Cartes d’empathie

30


31


User journey

32


33


User journey

34


35


User journey

36


Etape 0 L’utilisateur arrive dans sa cuisine, il prends sa tablette, l’allume, Etape 1 démarre l’application et arrive sur la page d’accueil Il clique sur démarrer Etape 2 Il choisit une période historique à explorer. Etape 3 Il choisit parmi les recettes, celles qu’il souhaite découvrir Etape 4 Il lit les ingrédients dont il a besoin Etape 5 Il prépare les ingrédients et va chercher ceux qu’il ne possède pas Etape 6 L’utilisateur visionne une vidéo animée expliquant le contexte historique de l’apparition et de l’évolution du plat sélectionné Etape 7 L’utilisateur pose la tablette et commence la recette, il lit étape par étape. Etape 8 Une fois son plat terminé, il prends en photo son repas Etape 9 Il gagne un sticker associé à la recette qu’il vient de valider.

37


38

Intentions du design d’expÊrience u t i l i s a t e u r


Cahier des charges fonctionnel L’application devra répondre à l’ensemble des fonctionnalités présentées ci-dessous.

Identification de l’utilisateur L’application doit permettre d’identifier l’utilisateur courant via un système de compte afin de permettre une expérience personnalisée. L’utilisateur a donc la possibilité de créer un compte et de se connecter.

Parcours historique L’utilisateur a la possibilité de suivre un parcours historique afin d’inscrire les plats dans le contexte de l’Histoire du Japon. L’application doit donc proposer à l’utilisateur de choisir une période historique afin d’accéder à certains plats.

Visualisation des recettes L’application doit permettre à l’utilisateur de visionner les recettes étape par étape. Chaque étape consiste en un texte explicatif associé à une image ou une courte vidéo.

Visionnage de vidéos explicatives L’utilisateur doit pouvoir visionner des vidéos expliquants le contexte culturel associé à chaque recette.

39


Cahier des charges fonctionnel

Validation des acquis

40

L’utilisateur doit pouvoir valider les connaissances acquises à chaque vidéo explicative via un quizz.

Gestion des stickers L’utilisateur gagne un sticker lorsqu’il a réalisé une recette. Il doit pouvoir les retrouver dans son inventaire.

Photographie des plats L’utilisateur peut utiliser l’appareil photo intégré à sa tablette pour prendre en photo le plat qu’il vient de réaliser. Les photos sont sauvegardées.

Partage sur les réseaux sociaux L’utilisateur doit pouvoir partager les photos des plats réalisés sur les réseaux sociaux.

Localisation des fournisseurs L’application doit permettre à l’utilisateur de localiser les épiceries Asiatiques les plus proches ou, à défaut, les magasins en ligne.


Traduction automatique L’application doit permettre à l’utilisateur de traduire les textes sur la boite des ingrédients en utilisant l’appareil photo intégré à la tablette et l’outil de traduction de Google Translate.

Écoute de la prononciation des textes japonais L’application doit permettre à l’utilisateur d’écouter la prononciation des différents textes japonais contenus dans l’application.

Commande vocale L’utilisateur doit pouvoir passer les étapes de la recette via une commande vocale.

Recherche de recette L’utilisateur doit pouvoir trouver une recette précise sans avoir à passer par le parcours historique.

Sauvegarde des recettes déjà réalisées L’application doit permettre de retrouver facilement les recettes déjà réalisées.

Visual trad

明 治 時 代

41


Scénario d’usage Il a aidé à estimer le parcour de navigation des utilisateurs. Nous en avons déduit que l’utilisateur principal serait amené à cliquer plus directement vers le premier parcours, celui mettant le plus en avant l’aspect historique.

42

Lors des tests utilisateurs nous avons remarqué que notre cible principale sélectionne volontier le premier parcours ou présenté une curiosité sur l’ensemble de l’application. quand aux autres personnes, elles cliquent généralement sur le deuxième parcours, accédant directement aux recettes ou sélectionne le premier parcours de manière “machinal”.


43


44


Prototypage papier

Le prototype papier a permis d’avoir un premier aperçu des interfaces. Il nous a aussi permis de commencer l’aspect U.I. design. Il permet principalement d’analyser la dimension ergonomique du prototype.

Cette étape de prototypage papier est cruciale puisqu’elle permet d’éliminer les erreurs structurelles immédiatement afin de s’assurer de pouvoir construire l’application sur une base solide.

L’avantage du prototypage papier est qu’il offre la possibilité d’analyser le parcours des utilisateurs. Nous avons imaginé les parcours utilisateurs possibles afin de réaliser la première version du prototype papier que nous avons ensuite fait évoluer lors d’itérations successives en nous basant sur les retours des utilisateurs. Cela nous a permis d’analyser la clarté et la fluidité de l’application.

Cependant, l’aspect papier limite la projection de l’utilisation sur tablette. En effet, certains utilisateurs ont éprouvé des difficultés à s’imaginer en situation réelle et sont donc passés à côté de certains aspects tels que l’utilisation de l’application lors de la préparation des repas. De la même façon, ce support crée de la confusion chez certains utilisateurs qui ne savent pas s’ils doivent prendre le prototype en main pour photographier le plat, par exemple. C’est pourquoi il est nécessaire de concevoir un prototype interactif à la suite de cette étape.

Notre prototype nous a démontré que les utilisateurs n’éprouvent pas de difficulté dans la navigation. Ils ont cependant mis en avant différents aspects. Tout d’abord, les utilisateurs interrogés semblent préférer l’idée de swippe entre les pages. Nous en avons déduit que nous devions prendre en considération la littératie numérique et les préférences de chacuns. C’est pourquoi, grâce au prototype papier, nous avons décidé de laisser le choix entre le swipe et le clic pour passer d’une page à une autre de manière plus aisée.

45


46


Prototypage écran Lors de la phase de prototypage écran, nous avons commencé par réaliser les interfaces sur illustrator puis nous les avons intégrés dans un prototype intéractif. Notre choix s’est d’abord porté sur Invision puisque nous maîtrisions déjà cet outil cependant il s’est rapidement avéré qu’il est impossible d’y intégrer du contenu vidéo. Notre projet reposant en grande partie sur le motion design, nous avons donc décidé de rechercher un autre outil de prototypage et nous avons finalement opté pour proto.io qui s’est avéré remplir les critères nécessaires à la réalisation d’un test utilisateur complet. Afin d’être le plus proche des conditions réelles des conditions de l’application, nous avons effectué des tests dans une vraie cuisine. Les utilisateurs étaient invités à réaliser un plat en suivant les étapes de Itadakimasu. Ce protocole de test nous a permis de mettre en lumière des aspects liés au contexte d’utilisation, sur tablette, dans une cuisine. De plus, l’action de réaliser la recette en circonstances réelles permet de mettre en avant les avantages et inconvéniants qu’offre le prototype que nous avons conçu. Enfin, nous avons pu voir que la vidéo d’introduction au contexte historique du plat est compréhensible et intéressante pour l’utilisateur et que le choix d’avoir des vidéos d’étapes de recttte muettes est pertinant dans le contexte d’une cuisine bruyante.

47


48


Bilan des tests utilisateurs Les tests utilisateurs nous ont donné un regard extérieur et nous ont permis de remettre en question les différents éléments défaillants. Certains utilisateurs ont réclamé des fonctionnalités mais elles ne correspondaient pas au concept de notre application. Nous avons donc repensé les éléments comme la création de profil ainsi que la capture photo pour qu’ils ne les éloignent pas du concept. D’autres éléments ont été améliorés comme l’agrandissement des boutons cliquables pour respecter les loi de FITTS, le fil d’ariane, l’ajout de plus de boutons de sons pour entendre la prononciation des mots (ce qui permet d’appuyer la dimension culturelle), et quelques modifications de mise en page. Nous avons remarqué que lorsque l’on cuisine on peut avoir les mains sales, ce qui n’est pas forcément pratique pour swiper. Les utilisateurs nous ont suggéré un compte à rebour pour les étapes de préparation mais nous voulons respecter le rythme de chacun et allons possiblement ajouter une commande vocale.

(Voir annexe page35-49)

49


Pour notre prototype, nous avons voulu nous appuyer sur un système ou l’utilisateur choisit le parcours à effectuer. Dès le menu, on lui propose plusieurs choix : l’Histoire culinaire du Japon, les recettes, les bonnes manières, manier les baguettes ou quitter. L’Histoire culinaire du Japon est mis en avant car il s’agit de la première proposition et que le bouton est plus large ce qui incite l’utilisateur à cliquer sur ce dernier. Il s’agit, en effet, du parcours privilégié. Nous nous sommes appuyé sur un système de navigation linéaire afin de maximiser une navigation intuitive pour les utilisateurs et nous laissons aux utilisateurs le choix de swiper ou de cliquer pour passer d’un écran à un autre.

50

Par la suite, les tests utilisateurs nous ont permis d’avoir un regards extérieur sur notre prototype et nous ont permis de remettre en question les éléments défaillants. De multiples propositions de changement ont émergées, tel que l’ajout d’une communauté, la possibilité d’annoncer les modifications de recettes d’autres utilisateurs ou encore de partager ses photos ou de mettre des recettes en favoris. Bon nombre de ces propositions ont été étudiées puis rejetées. Ces tests nous ont permis d’observer des aspects auxquels nous n’avions pas pensé tel que la précision du but de la création de profil pour éviter toute confusion avec l’aspect communautaire que cela peut induire.

De plus, nous avons réalisé qu’il serait judicieux d’ajouter des icônes de partage sur les réseaux sociaux au niveau de la prise en photo des plats. D’autres ont été acceptées comme l’agrandissement des boutons cliquables, la refonte du fil d’ariane, la possibilité de signaler si il y a un problème avec un magasin signalé dans la map “où trouver ses ingrédients ?”, l’ajout de plus de boutons de sons pour entendre la prononciation des mots et quelques modifications de mise en page. Concernant la finalité de notre projet, nous voulions garder l’aspect de “faire soi même” sur laquelle on s’est appuyé depuis le début. Nous étions parties sur l’idée d’un scrapbook personnalisable avant de rentrer dans un processus d’itération. Nous avons cherché de multiples supports à personnaliser avant de finir par demander directement l’opinion des utilisateurs. Nous nous sommes aperçues qu’ils sont dans une optique où ils veulent tout avoir. C’est pourquoi nous sommes encore en questionnement sur ce point. Actuellement, nous nous questionnons sur la possibilité de débloquer des stickers pour personnaliser un kit d’éléments contenant des accessoires de cuisine tel que des assiettes, des tabliers ou autres. L’utilisateur pourrait alors commander ces objets personnalisés.


51


52


Maki Maki : un mini-jeu pour manier les baguettes En introduction de l’application, il nous a semblé logique de montrer les bonnes manières pendant un repas car elles sont différentes de celles en France. La base de la culture culinaire au Japon consiste d’abord à bien se comporter à table. Nous nous sommes également dit qu’il faudrait apprendre à l’utilisateur à manier les baguettes. C’est souvent ce qui est le plus difficile pour les débutants. Il est important de savoir manier les baguettes afin de savourer le plat tel qu’il a été pensé et conçu. C’est là que le makey makey intervient. Pour apprendre, il faut pratiquer. Nous nous sommes rendues compte de l’importance de faire un kit d’initiation à la baguette dès introduction de notre application. À travers un mini jeu, on demande à l’utilisateur de tenir ses baguettes, d’attraper un sushi avec, de le tremper dans la sauce soja puis de le reposer dans une assiette. La répétition du mouvement lui permet de valider cette compétence clef. Si notre utilisateur ne sait pas manier les baguettes, il ne peut pas manger. Nous essayons alors de remédier à ce problème en lui proposant ce jeu / tutoriel qui permet un apprentissage sous forme de challenge.

L’utilisation d’un guide à baguette est possible si l’utilisateur a des difficultés à utiliser les baguettes ex : handicap. Le nom du mini-jeu : Maki Maki est un jeu de mot entre l’outil Makey Makey et le Maki qui est une sorte de sushi. Il est à noter que ce jeu n’est pas directement intégré à l’application puisqu’il nécessite du matériel spécifique. Il s’agit donc d’une extension de l’expérience qui peut être achetée séparement ou présentée lors d’évènements promotionnels.

53


Intentions du design graphique

Introduction

54

Cette charte graphique détermine les règles d’utilisation du logotype de l’application itadakimasu ainsi que l’ensemble des visuels qui l’accompagnent. Le respect de cette ligne graphique renforce l’image de qualité attachée à notre projet. Il est donc essentiel de s’y conformer. Cette charte présente également les principes de déclinaison sur les différents supports de communication. Ces lignes directrices constituent les standards du logotype. Toutes les règles ont été prises en compte pour créer un matériel de communication déclinable avec une certaine flexibilité créative. Ce logo ne doit être ni déformé, ni amputé, ni penché, il devra respecter les indications techniques énumérées dans ce guide.


55


Moodboard Premières recherches graphiques

56

Au départ nous avons réalisé un moodboard général, sur les boutons, les interfaces ainsi que les illustrations qui nous ont intérésées. Pour le choix du design graphique, nous nous sommes concentrées sur la cible. La cible européenne qui apprécie le Japon veut en apprendre plus sur la culture du pays qu’elle admire. Il est donc important de rester cohérent et d’orienter le design graphique dans ce sens. Nous avons donc fait des recherches sur le design graphique au Japon et nous avons conservé les aspects qui servent mieux notre concept. Nous avons donc décidé de travailler sur un style graphique qui rassure l’utilisateur.

Nous ne voulons pas le perturber et le surcharger d’informations. Le style épuré est donc celui qui semble le plus adapté pour notre projet. Il nous permet de mettre en avant les plats et éviter une surcharge cognitive. Afin de constituer un moodboard efficace, nous avons procédé en quatre étapes. Nous avons composé un moodboard pour le Design traditionnel qui correspond à l’épuration, un moodboard sur le Design de réclame alimentaire qui représente la vitalité et un moodboard sur le Design moderne, qui se caractérise par l’aspect contemporain.


57


Moodboard

58

Après avoir réalisé les trois moodboards, nous en avons créé un final, en faisant une selection.


59

Moodboard final


Moodboard

60


61

Nous avons également réalisé un moodboard photographique grâce à notre étude de terrain ainsi que nos entretiens avec de potentiels utilisateurs qui nous ont partagé des photos de leur voyage au Japon.


Les recherches de logotype Au départ, nous avons pensé à une représentation simplifiée de l’union entre la nourriture et l’Histoire par le biais d’un sushi et d’un livre. Nous avons alors disposé un livre au-dessus d’une boule de riz, dans le but de remplacer un crevette. Le marque page reprend la forme de la queue de crevette. Nous avons expérimenté plusieurs versions de logotype, que ça soit en français ou en japonais.

62

Nous avons décidé de ne pas conserver ce logotype. En effet, nous voulons éviter de faire référence au sushi car il est beaucoup trop répendu dans la culture mondialisée et fait parti des clichés que nous avons sur la culture japonaise. Nous avons donc cherché à représenter un univers plus axé sur le côté traditionnel et historique du Japon.


63


Les hypothèses de logotype Après la phase de recherche, nous avons établi des hypothèses de logotype. Nous avons retenu le concept de la ligne qui fait référence à la nouille qui est un ingrédient très présent dans la culture japonaise. Cette ligne est reprise dans l’application pour représenter la dimension temporelle. Elle sera représentée tout au long de la navigation dans l’application.

64

Nous avons décidé de conserver l’idée du livre d’Histoire de notre première recherche de logotype. Elle est ici présente de façon moins littérale via l’évocation du marque-page par sa forme. Enfin, nous avons décidé de reprendre l’aspect traditionnel en utilisant un Noren qui est un court rideau en tissu que l’on accroche à l’entrée des restaurants japonais.


65


ITADA KIMASU

ITADA KIMASU 66

ITADA KIMASU

ITADA KIMASU Hypothèses de logotype sur Illustrator

ITADA KIMASU


Police Police du logotype

Take It Or Leave It Medium Aa Bb Cc Dd 0123 .;!? # abcdefghijklmnopqrstuvwxyz

Police de titraille pour la UI

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789$&@# (.,;:/?!=+*"’)

Police du texte de labeur pour la UI

Courrier New Aa Bb Cc Dd 0123 .;!? # abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789$&@# (.,;:/?!=+*"’)

67


Logotype

68

ITADA KIMASU


69


Déclinaisons

ITADA KIMASU

ITADA KIMASU

ITADA KIMASU

70

Sur fond rouge

Valeurs de gris

Sur motif bleu


Couleurs #25549c

#e94d4e

#f7bec0

Couleurs Primaires

#bfccde

#aaa3a0

#b594a7

Couleurs Secondaires

#bfccde 50%

#e4241f 20%

#e4241f 30%

Motifs

71


chapitre 6

Splash screen

72

Storyboard


Éléments graphiques sur illustrator

ITADA KIMASU

Animation réalisée sur After Effects

73


L’application Nous avons mis en place une charte graphique basée sur des couleurs bleu et saumon afin d’aller à l’encontre du stéréotype rouge et noir en tant que couleurs du Japon, tout en restant dans une ambiance entre tradition et modernité. Nous avons pensé une ligne graphique basée sur un système rappelant la frise chronologique. Ce principe nous a été inspiré par le jeu des pleins et des vides des estampes japonaises.

74


75


L’application

76


Les stickers

77


Intentions techniques Différents outils sont nécessaires à la réalisation de ce projet : Réalisation graphique • Adobe Illustrator Adobe Illustrator est un logiciel de création graphique vectorielle. Il nous a semblé le choix le plus judicieux afin de réaliser les différents éléments graphiques de l’application.

78

• Adobe After Effects Afin de réaliser les différentes animations en Motion Design présentes dans l’application, nous avons opté pour Adobe After Effects puisqu’il est parfaitement adapté aux animations vectorielles que nous désirons obtenir et qu’il est pensé pour être utilisé conjointement à Adobe Illustrator. • Adobe Photoshop Nous avons choisi de travailler avec Adobe Photoshop pour la retouche photographique nécessaire pour présenter les différents plats. Prototypage • InVision InVision est une application permettant de réaliser des prototypes interactifs. Nous avons utilisé cette solution lors de la réalisation des premières versions de notre prototype interactif, cependant InVision ne nous semble pas pertinent pour la suite puisqu’il ne permet pas l’intégration de contenu vidéo et sonore. Or notre application reposant grandement sur ce type de contenu, il nous faut donc envisager une autre solution de prototypage comme Klymt ou Proto.io. Ces différents outils sont encore en cours d’étude et le choix définitif n’a pas encore été acté.


Développement informatique • React native ITADAKIMASU étant destiné à être développé sous la forme d’une application pour tablette windows, android et iOS, nous avons donc opté pour l’utilisation d’une technologie multiplateforme afin de faciliter le portage de l’application sur ces 3 formats. Notre choix s’est arrêté sur React Native, un framework permettant le développement d’applications natives pour Windows, Android et iOS en se basant sur le langage Javascript et la technologie React développée par Facebook. En effet, ce choix nous semble pertinent puisqu’il se base sur des technologies web qui sont maîtrisées par un grand nombre de développeurs. Interfaces de programmation (API) Dans le cadre du développement de l’application finale, nous devrons utiliser plusieurs interfaces de programmation afin de faire appel à des fonctionnalités d’applications tierces : Cloud Vision API et API Cloud Translation pour le développement de la fonctionnalité de traduction via la caméra de la tablette. API Google Maps pour la localisation des fournisseurs d’ingrédients japonais. APIs des divers réseaux sociaux afin de pouvoir proposer de poster automatiquement les photographies des plats sur ces mêmes réseaux sociaux. APIs de reconnaissance vocale pour permettre l’intégration de commandes vocales. Ces interfaces seront différentes selon la plateforme cible (iOS, Android ou Windows).

Verrous technologiques Traduction automatique via l’appareil photo Nous avons défini que l’application doit permettre de traduire les textes Japonais présents sur la boite des ingrédients en utilisant la caméra de la tablette. Pour cela nous nous sommes basés sur l’application Google Translate cependant google ne permet pas d’intégrer directement cette technologie. Afin de développer cette fonctionnalité il est donc nécessaire d’intégrer deux API fournies par google : la Cloud Vision API permettant l’analyse d’images et l’API Cloud Translation permettant la traduction de texte dans de nombreuses langues. De plus, la question de la disponibilité de cette fonctionnalité sans connexion internet est à étudier. Une phase de recherche et développement est donc nécessaire pour évaluer les limites de ces technologies et la viabilité de cette fonctionnalité.

79


Conduite de production Nous avons identifié différentes compétences métier nécessaire au développement de l’application : Chef de projet chargé de mener un projet et de gérer son bon déroulement. Développeur full stack chargé de développer l’application entière, de l’interface utilisateur jusqu’aux potentielles fonctionnalitées natives. UX designer chargé de la conception et l’évolution de l’expérience utilisateur.

80

Designer graphique chargé de la conception et la réalisation des différents éléments graphiques. UI designer chargé de la conception des interfaces utilisateur. Motion Designer chargé de la conception et de la réalisation des animations. Rédacteur chargé de l’écriture des textes explicatifs et du script des vidéos Comédien chargé d’enregistrer les voix accompagnants les vidéos explicatives et la prononciation correcte des textes japonais. Découpage en tâche et estimation du temps de développement. Nous avons fait appel à un développeur professionnel afin d’estimer le temps de de la phase de développement de l’application. Nous en déduisons un total approximatif de 25 jour-hommes pour la partie développement.


Nous avons ainsi pu ĂŠtablir les estimations suivantes :

81


Budget Budget

82

Moyens humain

TTC/jours

Quotité

Total

Chef de projet

450

15 jours

6750

Développeur full stack

450

25 jours

11250

UX designer

320

15 Jours

4800

Designer graphique

320

15 Jours

4800

UI designer

320

15 Jours

4800

Moyens matériels Ordinateurs Mac

1300

1300

Ordinateurs Windows

1200

1200

Tablettes IOS

1200

1200

Caméra

700

700

Appareil photos

700

700

Trépieds/extension

30

30

Licence Adobe

30/mois

4 mois

120

Licence Invision

25/mois

3mois

75

Licence Proto.io

0

15 jours

0

TOTAL

37 725


Réalisation du dossier

30/12

30/12

30/12

Réalisation du prototype final

10/01

20/04

01/03

13/01

Goodies

14/01

Tests V3 en situation réel

21/01

PPT

18/05

18/05

18/05

Préparation soutenance - entrainement

03/05

20/01

Réalisation du prototype final

Script + storyboard

03/05 03/05

04/03

trouver logotype

08/01

Faire version 3 sur in vision

02/01

Contenu vidéo + motion design

rédaction du contenu

25/12

Faire les écrans de la version 3

22/12

20/12

04/02 15/02 Décision final de la finalité du projet

04/02

Budget

20/12

01/02

Rétroplanning

83


Retroplaning ITADAKIMASU Soutenance

Owner

Add View

Unsubscribe

/1

Priority

Timeline

PPT

Low

Jun 3 - 18

Préparation soutenance / entrainement

Low

Jun 3 - 18

Goodies

Low

May 20 - Jun 2

Priority

Timeline

 

Urgent

Dec 26 - 27

Urgent

Dec 28 - 30

Urgent

Dec 30

Priority

Timeline

Userflow

Owner

Faire les dessins refaire les écrans V1/v3 mise en page

Proto V3

84

Owner

script + storyboard

High

Jan 14 - 20

améliorations de la V2 ( boutons, mise en page, fil …

 

Urgent

Jan 8 - 13

High

Mar 1 - Jun 18

Correction des interfaces

High

Jan 12 - 13

Simulation dans les cuisines/avec ustensiles

 

Low

Jan 21 - Feb 1

Medium

Feb 4 - Mar 3

Low

Jan 2 - 5

High

Feb 4 - 15

Priority

Timeline

Medium

Jan 4 - 7

High

Jan 4 - 7

Priority

Timeline

 

Urgent

Dec 26 - 30

Urgent

Dec 20 - 30

 

Urgent

Jan 2 - 4

Medium

Jan 4 - 7

Urgent

Jan 5 - 7

Prototype final

contenu vidéo, motion design Faire le prototype numérique complet sur in vision Décision final de la finition du projet

 

Charte graphique Trouver logotype choisir une typographie

Owner

 

Dossier projet pro rédaction du contenu Budget mise en page + visuels Dépot des vidéos impression

Owner

Hey Amandine Bizet! Your trial with monday.com has ended. Want to edit your boards, tasks and updates? Now's a great time to upgrade :) Upgrade now


Conclusion

85


Conclusion

Notre première version du projet nous a permis d’avoir un premier regard sur notre application. Elle nous as permis de poser les bases de notre prototype tant sur le contenu et l’ergonomie que sur ses fonctionnalités.

86

Pour conclure, les enquêtes de terrains ont fortement influencé notre prototype. Elles ont permis de nourrir le projet sur le contenu comme sur sa forme.

Le prototype intéractif et la réalisation de tests en conditions réelles, nous a permis d’affiner notre concept et de mettre en lumière de nouveaux axes d’améliorations liés à l’utilisation de l’application dans une cuisine. On souhaiterait par la suite mieux définir la partie des “goodies”, régler les problèmes d’interface actuels et continuer de faire évoluer le projet en prenant en compte les avis des utilisateurs. Aujourd’hui, nous avons une base solide pour la réalisation d’une application complète et fonctionnelle.


Pour Amandine :

Pour Pauline :

Ce projet s’articule parfaitement avec mon insertion professionnelle pour plusieurs raisons. Tout d’abord, le sujet même sur lequel nous travaillons m’intéresse particulièrement puisque la société au sein de laquelle j’ai l’occasion d’effectuer mon stage de fin d’étude possède des bureaux à Singapour et à Taïwan, c’est donc en lien direct avec l’Asie.

Ce projet est très enrichissant pour moi car il m’a permis de travailler réellement les domaines de l’UX et de l’UI design. Itadakimasu s’est présenté comme étant un projet complétant mes acquis et mon savoir faire dans les domaines de la post-production de projet et de la conduction de projet. Ce projet m’a aussi permis de comprendre que les aspects budgétaires ou certains aspects techniques n’étaient pas les plus adaptées pour moi. Ce sont donc des domaines que je dois parfaire. Il m’a permis aussi de m’améliorer socialement grâce aux échanges avec ma camarade et avec les utilisateurs. Ces échanges ont été instructifs et riches en informations, ce qui m’a donné envie d’essayer d’entrer dans les domaines de l’UX et UI design.

La réalisation de ce projet m’a apporté une ouverture sur le monde et particulièrement sur les cultures d’Asie ce qui m’a permis de me défaire de certains préjugés et de nourrir mes connaissances culturelles. D’un point de vue technique, j’ai eu l’occasion lors de mon stage de première année de m’initier au Motion Design lors de la réalisation d’un spot publicitaire. Cette expérience m’ayant particulièrement plu, j’ai décidé d’approfondir mes connaissances dans ce domaine et d’axer ma recherche de stage de fin d’étude afin d’en faire ma mission principale. Ainsi, il me semble tout à fait pertinent d’avoir laissé une place importante au Motion Design au sein de ce projet afin de parfaire mes compétences dans ce domaine.

Après avoir remis en question mon projet professionnel lors de mon stage, j’ai décidé de me pencher davantage sur le domaine du graphisme. Je souhaiterais plus tard approfondir ma polyvalence en travaillant en freelance et en intégrant parallèlement une agence de graphisme. Ce qui me permettrait de garder l’aspect UI/UX tout en me perfectionnant avec des projets de graphisme.

87


あ り が と う

Profile for bizetamandine

Dossier ITADAKIMASU  

Dossier ITADAKIMASU  

Advertisement