TFE / DATUM — chapitre 3 : design

Hello, encore deux semaines de passé, dans le dernier rapport je vous avais présenté mon avancement sur les wireframes, aujourd’hui nous allons voir ce que cela donne plus concrètement.

Choix de couleurs & typographies

Je voulais quelque chose d’assez coloré au niveau de mon appli, toutefois je ne voulais pas que ces couleurs gênent l’utilisateur, je me suis donc orienté vers des couleurs pastel qui sont assez discrètes mais qui remplissent bien leur boulot de colorer l’application.

J’ai également pour chaque couleur sélectionne une alternative plus foncée afin d’offrir un contraste suffisant aux textes.

Pour le choix de la typographie, je me suis pour les titres tournés vers la “poppins”, et pour les textes la “source sans pro”.

Exemple d’utilisation

La “poppins” me paraissait être un bon choix pour les titres de par ses nombreux choix de graisse et ces formes qui je trouve colle bien avec l’ambiance générale du projet. Quant à la “source sans pro”, je l’ai choisi car elle marchait bien en paire avec la “poppins”, elle possède aussi l’avantage d’avoir un nombreux choix de graisse.

Design — Artboard

Découvrons donc ensemble les différents artboard qui composent mon application.

En premier lieu, je trouve qu’il est toujours important de solliciter les émotions de nos utilisateurs, pour se faire j’ai utilisé des “empty state” lorsqu’il y a des éléments à créer afin d’inciter celui-ci à le faire.

Pour le moment les “illustrations” sont les mêmes sur chaque artboard mais elles seront destinées à être changée pour en avoir une différente par contexte.

Attaquons-nous maintenant au vif du sujet, l’application elle-même et ses différents fonctionnements !

On retrouve donc le listing de nos sets de dates sur la homepage, avec la possibilité de supprimer un set ou de le partager en cliquant sur les “…”, on peut également créer un set de dates supplémentaires avec le bouton “+”.

Pour la création d’un set de dates on pourra choisir parmi plusieurs couleurs, entrer le nom du set et éventuellement une description.

Si l’on clique sur un set existant on y retrouve l’ensemble des dates du set que l’on peut faire défiler comme un slider et cliquer dessus pour retourner la carte et voir l’événement associé à la date. Une barre de recherche permet également de nous simplifier la tâche pour les plus gros sets de dates. Enfin on peut ajouter des dates, que l’on verra plus en détails dans les screens suivants.

La création de date : entrer la date et l’événement qui y est associée, un mode avancé et également disponible si la personne souhaite ajouter un pictogramme sur sa carte ou une anecdote qui pourrait l’aider à retenir cette date. À noter qu’il y a deux boutons de créations, l’un en haut qui permet simplement de créer la date en cours, l’autre qui permet de créer la date en cours et en plus d’entamer directement la création de la date suivante, c’est un détail qui peut paraître anodin mais si l’utilisateur est amené à devoir encoder 50 dates je pense qu’il sera heureux de ne pas devoir rouvrir à chaque fois l’onglet.

Pour finir, la partie la plus importante de Datum, l’onglet flashcard, qui permettra à la personne de réviser et de tester ces connaissances.

La personne devra dans un premier temps choisir le set de dates sur lequel elle souhaite s’exercer. Trois modes différents s’offrent alors à l’utilisateur.

Le premier et le mode “apprendre” dans laquelle la personne étudiera simplement en swipant les cartes à gauche ou à droite, à la fin la personne aura un récapitulatif des dates qu’elle doit revoir en priorité. Ce mode n’a pas pour but de démontrer si la personne est prête pour son test ou non, mais de permettre à celle-ci d’étudier en passant chaque date en revue.

Ensuite, un mode “libre” où la personne pourra choisir le mode qu’elle désire entre: un vraie/faux, un QCM et un système d’association de paire de cartes. Les artboard sont suffisamment évocateurs pour je pense ne pas devoir rentrer dans les détails.

Enfin, un mode “évaluations”, où il y aura plusieurs niveaux à débloquer, ces niveaux reprendront aléatoirement un mode de jeux libres, mais cette fois-ci il y aura un nombre d’erreurs limitées par niveau, ainsi si la personne souhaite arriver au bout, elle devra vraiment connaitre tout ces dates. À noter qu’un “mode” s’est glissé en plus dedans : le question réponse, où il faudra directement entré la date ou l’événement en fonction de la question.

Présentation MVP

C’est donc déroule ce 30/03 la présentation MVP de mon projet par un étudiant. Vous pouvez retrouver son analyse ici : https://eliedurieux.medium.com/datum-mvp-9781d2ffb313

Durant la présentation je n’ai pas eu de remarque particulière de la part des professeurs, j’en déduis donc que cela c’est bien déroulé.

Concernant les remarques qu’Elie à pu me faire je les trouve constructives, notamment celle sur le fait que le but premier de mon application est d’étudier nos dates et non d’entrer des dates sur l’appli. Je vais donc réfléchir au fait d’inverser la page de flashcard avec la home, qui plus est pour la version finale de mon projet je compte entrer un set d’exemple afin que la personne puisse tester les différents modes de jeux sans devoir commencer à entrer 50 dates.

Conclusion

Pour conclure, je dirais que je suis assez satisfait de l’avancée du projet, il me reste beaucoup de boulot notamment niveau code car je vais seulement me lancer dedans, mais je pense que je pars sur une base solide.

Merci de m’avoir lu et on se retrouve dans deux semaines pour la suite de mes aventures avec je l’espère déjà un bon bout de code ! 👋🏻🧑🏻‍💻