Mon système de conception détaillé rien que pour vous.

Tester Wayback En savoir plus

Émersion

Wayback

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.

Photo des différentes pistes

Émersion

La règle des 5W

À quoi sert cette règle ? La règle des 5W est utilisée pour structurer et améliorer la lecture des informations.

Émersion

Mes recherches

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.

Photo de mon formulaire

Conception

Architecture de l'information

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 ? ».

Photo de l'architecture

Conception

Couleurs et typographie

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.

Couleurs

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

Design System

Finalisation

Prototype Papier

Photo prototype
Photo prototype

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.

Photo prototype
Photo prototype

Finalisation

Prototype XD & Navigation Design

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.

Photo prototype
Photo prototype

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, ...

Photo prototype

Finalisation

Place au développement

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.

Photo du code

Finalisation

Remerciement

Je remercie tous mes professeurs de m’avoir aidé à tant progresser dans le domaine du design et du code. Je remercie Aline , Dimitri et Jérôme d’avoir été présent pendant ce blocus particulier.

Retour en haut