Mythic — Case Study

Margaux Membré
8 min readJun 6, 2019

--

Les étapes de la création de mon travail de fin d’études.

Tout a commencé par plusieurs étapes :

  • Trouver un sujet;
  • Définir un design process;
  • Réaliser le maximum pour le MVP (Minimum Viable Product);
  • Faire son possible pour améliorer d’ici la Bêta;
  • Améliorer encore ce qui doit l’être pour le jury final, le 14 juin.

Le projet fini :

http://margauxmembre.fr/projets/tfe/ — site de présentation.

http://margauxmembre.fr/projets/tfe/application/index.php — application.

Trouver un sujet…

J’ai eu plusieurs idées depuis Septembre, mais la plupart concernaient une histoire avec des choix qui en changeraient l’issue.

Un peu avant le début du stage (novembre), Julien et moi nous mettons à regarder 50 nuances de Grecs sur Youtube. Ça me donne alors l’idée de faire quelque chose sur la mythologie grecque, puisque c’est quelque chose que j’ai toujours beaucoup aimé et que je trouve un peu complexe à appréhender. En effet, il s’est passé beaucoup de choses et lire de longs pavés sur Wikipédia me décourage un peu.

Je décide de faire de mon TFE (travail de fin d’études) une application de style applications de rencontres avec des résumés des dieux, de leurs alliances et de leurs litiges. Pour mieux comprendre qui couche avec qui, qui se batonne avec qui et ce qu’ils ont vécu.

Redéfinition…

Nous avons un premier workshop (en février) qui me permet de redéfinir un peu mieux les choses. Le professeur qui me suit trouve que c’est sympa, mais qu’il manque quelque chose. C’est un peu plat. Il me suggère de mettre en place des discussions entre l’utilisateur et le dieu. L’idée de mêler des choix et une narration qui m’avait effleurée pendant la première partie de l’année revient en force.

J’avais fait quelques tests de collages avec des statues grecques et de l’aesthetic, mais ça ne semble pas plaire à tout le monde et j’apprécie beaucoup de faire des illustrations, je me suis donc lancée !

À gauche, le premier essai version “collage”, et à droite la “première” illustration.

J’avais l’idée d’appeler mon projet “Les ragots de la Méduse” (merci

et ) mais après discussion avec les professeurs, je change de direction pour Mythic. La base de mon projet est définie, il n’y a plus qu’à travailler !

Mythic, c’est quoi ?

Mythic est une application mobile qui tend à vulgariser la mythologie grecque. L’utilisateur aura l’occasion de “matcher” avec un dieu et de découvrir ce qu’il a vécu au travers d’une discussion. Il pourra également compléter ses connaissances en visitant le profil du dieu qu’il a “matché”.

Design Process ?

Nous avons un cours de design process où il nous est demandé de définir plus clairement les étapes par lesquelles nous allons passer. Je suis très motivée et liste beaucoup de choses, que je ne réaliserai pas forcément…

Je vous invite à lire les prémices de mon projet dans mon article introductif. J’y liste, à la toute fin, les étapes par lesquelles j’aimerais passer.

Et le design tout court ?

Concernant le design, je suis passée par plusieurs phases. J’ai eu une idée très précise de mon projet très rapidement, mais je doutais concernant les couleurs. J’avais une envie : du violet, du rose, le genre de couleurs que je n’utilise jamais.

Oui mais… Entre les envies et la réalité, il y a un fossé. Je trouvais que mon design était joli mais un peu “fade” et il ne faisait pas assez grec. Qui plus est, il ne faisait pas non plus très “application de rencontres”. Rien n’allait !

Une image vaut mieux que mille mots. Après réflexion et brainstorming, le rouge et doré semble plus approprié et me permet de caser quelques détails visuels qui représentent mieux les dieux grecs : nuages et frises.

Et le MVP (Minimum Viable Product) est arrivé…

C’est le premier rendu depuis le début du projet. Pendant tout ce temps, j’ai donné mon maximum pour coder ce qui devait l’être. J’avais des objectifs très précis et assez ambitieux : je voulais que tous les écrans qui étaient designés soient réalisés, et ajouter à ça 3 conversations. Il me fallait donc :

  • Le swipe fonctionnel;
  • Les conversations avec le système de choix et d’apparition des messages qui fonctionne;
  • Le contenu des 3 dieux (illustrations, résumés, descriptions, alliances et litiges);
  • Mettre en forme et coder tout le reste, dont le système de web app qui me permettrait de passer d’une page à une autre.

Et grâce à l’aide de

et de mon frère, Rémi Demeulemeester, je suis parvenue à avoir ce que je voulais. Je vous laisse le découvrir ici : http://margauxmembre.fr/projets/tfe/mvp/

Concernant les remarques que j’ai eues, elles ne sont pas bien nombreuses : on m’a dit que le bouton “entrer” n’était pas très parlant. Je devais donc changer le mot pour quelque chose de plus symbolique. Très bien, c’est parti !

Mais ça ne m’a pas suffit : je voulais creuser et voir chaque professeur pour avoir des retours complets sur ce que je pouvais améliorer.

Les améliorations à apporter…

Forcément, je demande des remarques donc j’en ai. La plupart des choses à améliorer ne sont pas bien compliquées, et les professeurs continuent de me dire que ce sont des améliorations et que donc, si elles ne sont pas faites, ce n’est pas très grave.

Mon carnet de TFE se remplit ! Les remarques principales concernent :

  • Le swipe qui n’est pas assez “smooth”;
  • Le bug principal qui n’avait pas été réglé pour le MVP (Minimum Viable Product) qu’il faut éradiquer;
  • Faire quelque chose de la page profil : après réflexion, ce sera la proposition d’un compte premium qui sera “bientôt” disponible;
  • Les cartes qui n’apparaissent pas toujours dans le même ordre;
  • Montrer de manière plus visible qu’on peut accéder au profil du dieu dans les messages.

J’aimerais aussi ajouter :

  • Une flèche vers le bas sur les cartes pour montrer qu’un résumé est disponible; ✔
  • Une icône (un rond avec un numéro) qui renseigne sur le nombre de conversations qui sont accessibles dans la messagerie après avoir swipé les dieux; ✔
  • Réaliser le contenu de Zeus, Hadès, Apollon et Artémis; ✔
  • Réorganiser mon SCSS. ✔
Le scroll plus “smooth” et l’indication des messages.
La page supplémentaire avec un beau minotaure bien viril. Chez Mythic, on n’a que faire de vos tendances sexuelles. Venez comme vous êtes !

Et la Bêta, ça a donné quoi ?

Pour la Bêta, je suis parvenue à avoir presque tout ce que je voulais :

  • Une page de présentation; ✔
  • Remplir la page “utilisateur” : devenue page premium; ✔
  • Un swipe plus “smooth”; ✔
  • Pouvoir changer de conversations; ✔
  • Zeus, Hadès, Apollon et Artémis disponibles; ✔
  • Notification qu’un message est en train d’être écrit; ✗
  • Terminer la web typographie des messages. ✔

Concernant les remarques des professeurs, elles n’ont pas été très nombreuses :

  • Le terme fonctionnalités est un terme de la profession qu’un utilisateur lambda ne comprendra peut-être pas (sur la landing page);
  • Faire attention à la manière dont je formule mes choix : “connu beaucoup?” n’est pas forcément très clair;
  • Faire une animation pour signifier que le swipe à droite engendre une notification et un nouveau message.
La landing page finale.
Les illustrations finales de tous les dieux : Aphrodite, Apollon, Artémis, Athéna, Hadès, Poséidon, Zeus et Hermès.

Les améliorations pour le final :

J’ai changé ce que les professeurs m’avaient demandé lors de la Bêta en priorité. Qui plus est, j’ai essayé pour le 14 juin d’améliorer encore ce qui pouvait l’être :

  • Notification qu’un message est en train d’être écrit; ✔
  • Refaire le responsive comme Chroma afin que l’application soit visible sur tous les devices; ✔
  • Animer et faire des transitions entre les pages;
  • Mieux gérer mes images sur ma landing page; ✔
  • Enlever tous les espaces insécables après les smileys qui créent des retours à la ligne assez étranges; ✔
  • Faire des affiches et des cartes de visite pour le stand; ✔
  • Créer le contenu et les illustrations d’Hermès. ✔
La carte de visite.
Les quatre essais d’affiche. En haut, les deux premiers, et en bas, les deux derniers après avoir eu l’avis d’un graphiste.

Evolutions futures ?

Dans le futur, j’adorerais que Mythic contienne plus de dieux, de demi-dieux, de mortels ou de créatures mythologiques. J’aimerais aussi que Mythic puisse traiter de toutes les mythologies connues : nordique, égyptienne, etc. J’adorerais que Mythic devienne une référence agréable et accessible pour la vulgarisation de la mythologie et que chacun puisse venir y piocher des petites informations pour parfaire ses connaissances à ce sujet.

Dans le futur, j’aimerais beaucoup qu’il y ait un test de personnalité à faire, et que selon les résultats, l’utilisateur ait plus ou moins de chances d’obtenir un “match” avec le dieu qui lui plaît et de pouvoir lui parler. Ou, au moins, que ça change le comportement du dieu et des réponses de l’utilisateur.

Les crédits…

Pour la Mythologie Grecque, je me suis inspirée de :

  • La mythologie pour Les Nuls;
  • 50 nuances de grecs, par Jul et Charles Pépin (et Arte pour ses animations);
  • DIEUX : 40 dieux et héros grecs, par Gallimard Jeunesse.
  • Percy Jackson et le voleur de foudre, par Chris Columbus;
  • Hercule, par Walt Disney Pictures.

Pour l’application :

  • Tinder pour beaucoup;
  • Bumble;
  • Pickable.

Pour les illustrations :

  • Jessica Rabbit (Aphrodite);
  • Léona, League of Legends (Athéna);
  • Parthénon, Assassin’s Creed Odyssey (Athéna);
  • Elfe de la nuit, World of Warcraft (Artémis);
  • Jay Alvarrez (Apollon);
  • Les Sims (Hadès et Poséidon);
  • Illustrations de Cerbère (Hadès);
  • Illustrations du Mont Olympe (Zeus);
  • Cole Sprouse (Hermès);
  • Unsplash (fonds et certaines poses).

Pour finir…

Ce travail a été long et éprouvant. Les professeurs ont eu tendance à me dire de prendre du temps pour moi et de me déstresser, mais je suis une bosseuse et j’avais des ambitions que je me devais (pour moi-même) de réaliser. Je suis très contente de mon TFE, qui est à la hauteur de mes espérances (et même plus que mes espérances de février). Ça a été un travail de longue haleine qui m’a fait beaucoup apprendre.

Vous pouvez retrouver tous mes articles ici si vous souhaitez approfondir la découverte de mon projet de façon hebdomadaire.

Merci aux professeurs pour leur soutien et leur présence. Merci à mes parents pour leurs tests réguliers et leur avis. Merci à mon frère pour son aide, mon projet n’en serait pas là sans lui. Merci à Julien pour ses retours, sa patience, sa présence.

--

--

Margaux Membré

I'm a UX/UI Designer who loves discovering news things and sharing them. ✨ And I love lamas ! 🦙