Émersion
Au début de notre projet, nous devions trouver 10 pistes. La piste validée par mes professeurs étaient « Comment ne plus jamais arriver en retard ? ».
De cette piste, j’ai réfléchis à une autre question « Comment se souvenir du temps passé ? ». C’est à partir de cette nouvelle idée que j’ai créé Wayback. Une application qui permet à l’utilisateur d’envoyer des messages souvenirs dans le futur.
Émersion
À quoi sert cette règle ? La règle des 5W est utilisée pour structurer et améliorer la lecture des informations.
Une application pour envoyer des messages dans le futur.
Pour se souvenir de quelque chose dans le futur.
Toutes personnes voulant transmettre un message dans le futur.
Quand l’utilisateur le souhaite, Il pourra choisir lui-même la date de réception du message.
Sur l'application Wayback.
Émersion
Vu le confinement actuel, j’ai décidé de faire ma recherche utilisateur et mes tops tasks via un google form. Voici les réponses du User Research , les réponses des Tops Tasks et les conclusions que j'ai pu en tirer.
J’ai également fait 3 user journey pour améliorer l’expérience utilisateur sur mon application.
Conception
Quand j'ai commencé l'architecture de l'application, étape très importante pour une bonne réalisation,
je me suis posé cette question « Quelles sont les fonctionnalités premières de mon app ? » et ensuite « Quelles sont les sous-fonctionnalités de celle-ci ? ».
Conception
Point de vue couleur, j'ai choisis le bleu.
Pourquoi ? L'envoi d'un message dans le futur fait penser à une nouvelle technologie. Raison pour laquelle, j'ai choisi d'utiliser un vocabulaire spatial pour l'envoi des messages et la couleur bleue pour son côté un peu plus scientifique.
Pour la typographie, j’ai décidé d’utiliser Nunito et Roboto. Nunito est une font sans serif, je l’ai choisie principalement car son aspect arrondi correspond parfaitement au caractère fun que je veux donner à mon projet. Je l’utilise principalement pour les titres. J'utilise la font Roboto pour ce qui concerne les paragraphes.
Conception
Typographie : Nunito, sans serif et Roboto, sans serif.
Couleurs : Dans les tons de bleu pour l’aspect science, technologie et mauve pour apporter un peu de chaleur dans mon design.
Logo : J'ai cherché un design fluide et fun et ai décidé d’y apporter une illustration de fusée car mon projet se base sur l’envoi de messages via une fusée dans l’espace.
Personnalité de mon projet : Sympathique, créatif, simple, propre, cool.
Style de communication : Jovial, fun ainsi que sérieux, neutre.
À quel moment ? Lors de tâches plus sérieuses (inscription, case study) et lors de l’utilisation de l’application.
Mon guide de style en css se base sur la méthode BEM (Blocs Éléments Modificateurs) et j’utilise camelCase pour mes noms de variables.
Mon approche se base sur quelque chose de fun, de sympathique, dans l'idée de mettre mon utilisateur à l'aise avec l'application.
État d’esprit : Joyeux, amusé.
De manière générale, mon objectif à été de choisir des petites phrases faisant référence au spatio-temporel, à l’univers spatial.
Lors des tâches plus sérieuses et administratives, le ton choisi est un ton plus formel.
Call to action, de couleur mauve. Actions secondaires de couleur turquoise. Icones outlines.
Finalisation
Pour la création de mon premier wireframe, je me suis basée principalement sur mon architecture de l'information et mon design system. Sur conseil de Monsieur Marchal, j'ai placé l'inscription / connexion après l'envoi du message pour insité l'utilisateur à poursuivre son expérience. Suite à ces quelques modifications, voici le résultat final.
Finalisation
Faire le prototype de l’application m’a pris du temps, mais je suis contente du résultat. J’ai fait énormément de recherches pour apprendre à utiliser au mieux les animations, à créer un swipe ou encore les états hover, ... Dans le but d'améliorer l’expérience de l'utilisateur.
Pour ce qui est de la navigation, je me suis inspirée de différentes applications, tels que messenger avec son système d'ajout de photo dans un message ou encore l'application message de samsung pour son système d'enregistrements vocaux. J'ai tenté de rendre l'application la plus réaliste possible en simulant, par exemple, l'apparition d'un clavier lorsque qu'on clique sur un input, ...
Finalisation
La partie code à été la plus complexe à réaliser de part les différents modules techniques. Après quelques console.log et modifications, ça fonctionne !
À tel point que je finis par aimer le javascript et en apprendre davantage pendant mes temps libres.
L’HTML et le CSS ne m'ont pas posés trop de soucis, j'ai porté une attention particulière à bien utiliser la méthode BEM et à bien respecter les indentations.