Case - study

Logo

Si vous avez vu mon projet Cowriters et que vous vous demandez comment je l’ai réalisé, quels sont les étapes de ce long processus. Alors vous êtes au bon endroit.

Le début

Les thématiques

Avant de commencer le projet, il y a eu des étapes importantes, déjà, chercher un thème pour le projet. Étant encore en travail scolaire, nos professeurs nous ont demandé de trouver dix thématiques qui pourrait être un service. Bien sûr, ils nous ont pas laissé comme ça à voguer dans les mers de l’incompréhension mais ils nous ont donné des pistes, des moyens, pour trouver ses thématiques. De ce fait, j’ai chercher mes dix thématiques en faisant des allers-venues car il fallait faire de temps en temps un tri à cause de thèmes qu’on ne m’a pas conseillé ou que je ne me sentais pas capable d’y apporter quelque chose de concluant.

Mes dix thématiques

Le mercredi suivant, chaque élève a obtenu les résultats de son ou ses thèmes accepté.s par les professeurs. Pour ma part, c’est les trois thèmes en bleu dans la liste. J’avais donc un plus grand choix que certain qui devait se limiter à un seul et unique thème.

5w

À présent, nous devons créer des phrases qui illustre l’idée de notre thématiques par la voie du 5W ( qui donne qqoqp en français ), une méthode pour écrire une petite ligne explicative de ce que ciblera notre projet. En clair, c’est se poser les questions, nous allons produire quoi pour qui, qui s'utilise et quand, et pourquoi on le produit. Je l’ai fais pour mes trois thèmes, ne sachant pas me décider.

User Research

Ensuite, viendra le temps du user research, en gros, parler avec des gens qui sont ou deviendront notre public cible et qui peuvent nous apporter des solutions auxquelles nous n’aurions pas pensé seul. Avant de parler à des gens, il faut préparer ses questions, elles seront identiques pour chaque personnes questionnées, je le fais également pour mes trois thèmes.

Après discussion avec un de mes professeur, je me dis que c’est bien de choisir lequel de mes trois thèmes prendre au final. Le thème des bonnes choses de la journée me rebute un peu, normal que je l’abandonne. Le thème sur la sexualité m’intéresse beaucoup mais je prend conscience après discussion avec un professeur que les gens ne sont peut-être pas encore assez ouvert pour parler librement de leur sexualité. En plus, je pensais me focaliser sur des gens de mon âge ou du moins dans les tranches ados et jeunes adultes mais les professeurs voulaient que j'agrandisse le panel sur des gens de tout âge. Il me reste le thème sur l’écriture en collectif, qui m’intéresse beaucoup, son seul soucis que l’on pouvait prévoir, et qui était au final moins dérangeant au premier abord, est qu’il faut que je cherche principalement des écrivains ou des personnes intéressées par l’écriture pour leur poser mes questions. Du coup, je choisis le thème sur l’écriture et je réorganise mon questionnaire pour qu’il ne porte que sur celui - ci.

Les rencontres

Début d’une semaine de vacances, parfait pour lancer ma recherche d’écrivains à qui parler. La première personne fut assez simple à trouver, un professeur me parle d’une élève de l’année au-dessus de la mienne qui écrit sur son temps libre et qui a prit comme sujet l’an passé : « une plateforme pour écrire ». Je la contacte et tente d’établir avec elle le rendez - vous. Pendant la semaine, ma mère eu l’excellente idée de me dire de m’informer au centre culturel de ma ville, malheureusement le responsable qui avait connaissance des écrivains de la région n'était pas là mais on me donna son adresse mail. Je lui envoya un mail expliquant ma requête, au bout de quelques jours, je reçu une réponse avec plusieurs noms de personnes et leurs adresses mail pour pouvoir les contacter. J’envoie, de ce fait, plusieurs e - mail.

email envoyé

Entre refus et personnes qui ne me répondent pas, je reçois quelques réponses positives quand même. Dans le lot, deux écrivains, deux animatrices d’ateliers d’écritures et grâce à l’une de ces dernières quelqu’un travaillant plus dans un domaine artistiques mais qui écrit quand même beaucoup. J’organise des rendez - vous avec deux de ses personnes, les plus proches de chez moi. À la fin de cette semaine, c’était le début de l'épidémie du coronavirus dans notre petit pays ainsi que de la levée d’une demande de confinement. Je me demandais comment je vais m’y prendre pour interroger les dernières personnes que j’avais dans ma liste de rendez - vous. Solution toute simple, le téléphone. Je fis ainsi mes derniers rendez - vous en leur posant les questions via mon smartphone, j’aurais préféré le faire en face-à-face mais cas de force majeure oblige.

Les conclusions apportées

Qu’est-ce que ces rendez - vous m’ont apportés ? Des réponses auxquelles je ne m’attendais pas et des pistes que je ne soupçonnais pas. Rien que la première interviewée m’a parlé des bêta - lecteurs, quelque chose que je ne connaissais pas aussi développer une application avec comme but de rechercher des bêta - lecteurs ne me détourne pas du sujet.

Parmis les réponses, je récupère les tâches associés pour la suite de mon projet. J’écris aussi les tâches auxquelles je pense sur un document texte et je réinscris tout ça dans un formulaire qui me permettra de récolter plus d’avis de personnes et de définir les tâches les plus importantes de mon projet. Je ne suis plus trop enclin à regarder à mon projet à présent car voici que débute trois semaines d’ateliers qui se feront via Discord, cela laisse le temps aux gens de répondre.

formulaire

Malheureusement, après ces trois semaines, seul 5 personnes ont répondu aux formulaires et malgrès quelques rappels sur les médias sociaux où j’envoie le formulaire le chiffre n’augmente pas. Il est vrai que mon formulaire n’était qu’à destination de personnes intéressées par l’écriture mais le but était d’obtenir plus de réponses que de personnes interviewé au minimum ce qui ne fut pas le cas ici. Je décide de faire avec car l’on peut remarquer que la majorités des réponses étaient communes.

Document de travail

Le design

Les prototypes papier

Avant de commencer un prototype sur écran, je fais différents prototypes papier pour voir comment faire en sorte que mon système fonctionne. J’en refais à chaque modification lors du prototypage sur écran.

prototype papier prototype papier prototype papier prototype papier prototype papier

Le user journey

J’ai élaboré trois petits user journey, c’est imaginer la journée d’un utilisateur, les étapes par lesquelles ils passent pour atteindre un but précis mais surtout ses sentiments au fil de ses actions.

un user journey

La recherche

Juste avant de me lancer dans un wireframe, je regarde différents sites sur des auteurs et qui utilise un système d’écriture sur la plateforme pour savoir comment mettre cela en place.

Wattpad J'ai lu Medium

Le.s wireframe.s et prototype.s

C’est ainsi que je commence mon premier prototype sur lequel j’ai été trop loin car en discutant avec des professeurs, je compris que j’étais en train d’élaborer quelque chose de trop abouti, plus poussé que le petit projet utile demandé. Je rassemble mes idées afin de faire en sorte que mon application devienne plus simple et se focalise même sur la rencontre avec des personnes souhaitant co - écrire.

premier prototype
Premier prototype
deuxieme prototype
Deuxième prototype

Bien sûr cela n’était pas encore parfait, il faut repenser aux fonctionnalités et je suis plus proche d’un wireframe que d’un vrai design. Le filtre de recherche que je crée ainsi que tout le fonctionnement de la recherche ne vont pas donc je l’ai tenté d’une autre manière. Mon inscription n’est pas parfaite non plus je peux clairement la simplifiée.

troisieme prototype
Troisième prototype

Après cette transformation, malgrès que cela n’est pas encore suffisant mais se rapproche d’un résultat final, je me focalise sur d’autres aspect du design qui me permettront de modifier mon prototype pour qu’il franchisse un plus grand cap vers la finalisation de ce design.

Le voice & tone

Je réfléchis à mon « voice and tone » avant de me positionner. Mon projet est un projet plus pour un professionnel, du moins des gens qui veulent vraiment s’investir dans l’écriture, elle doit pouvoir faire ressentir le côté collaboration et rassembleur du projet.

Le logo - première proposition

Avec cette définition plus claire dans ma tête, je me met en marche vers la recherche d’un logo dont voici les premières élaborations.

premiers logo seconds logo

La couleur

Je fais ensuite des recherches pour la couleur, dès le début je pense à une couleur jaune pâle qui pourrait faire penser à du papier jauni et à un bleu assez foncé pour faire penser à de l’encre. De plus, d’un point de vue signification des couleurs, le bleu et le jaune sont des couleurs représentant la compétence ( donc le côté professionnel ) et en plus, le bleu est une couleur qui représente la cohésion, la concordance et le regroupement. Ce sont également des couleurs complémentaires.

premiere palette combinaison palette style vieux papier style encre

En faisant des test de couleur et en regardant la compatibilité de celles - ci, je finis par choisir la variante suivante.

couleurs finales

La typographie

Maintenant que la couleur est faite passons à la typographie ! Je recherche une typo pour améliorer mon logo, trouver une police qui puisse être plus manuscrite. Après avoir trouvé et testé plusieurs typo, j’en valide une et je passe à la recherche de typo texte et titre. Je ne vais pas trop m’étendre dessus pour le texte j’utilise de la Merriweather Sans et pour mes titres de la Playfair Display, la première a été pensé pour la lecture sur écran donc idéal et la seconde est prévue pour les titres et, après des tests, s’avère compatible avec la première.

choix typo

Le logo final

J’améliore ensuite mon logo grâce aux typos et couleurs recherchées. Je pense même au picto et à la petite icône en haut de page pour ne plus devoir y penser ensuite. Je me dis que le picto peut finalement n’être que mon logo.

logo__final logo__final logo__final logo__final

Le prototype final

Je me relance à présent dans l’élaboration du design de mon projet sur le prototype. Je retire des choses qui me semblent moins utile maintenant que dans les versions antérieures et j’ajoute d’autres système que je n’avais pas encore pris en compte, tout en y incluant le côté esthétique. J’ai également repensé à la navigation de celui - ci.

prototype final
Prototype final

La vidéo after effect

Dernière chose, la vidéo d’animation de mon site. Pas très difficile à faire, c’est une vidéo de près de 13 secondes. Le seul soucis que j’ai eu avec celle - ci c’est le redimensionnement que j’ai dû faire car la première était à la mauvaise hauteur.

Le code

Les modules techniques

Pendant le prototypage de mon site, je faisais également le code de celui - ci. Nous devions pas le faire en complet mais simplement des modules techniques des petites parties qui montre le fonctionnement des principales fonctionnalités du site. Je suis arrivé à les finir mais elle ne ressemble pas vraiment esthétiquement à mon site, j’ai essayé de les faire le plus ressemblant possible quand même.

Des erreurs

Le codage est un combat acharné contre les erreurs. La plupart sont mineures ou des fautes d’inattentions mais des fois c’est des erreurs qu’on a jamais vu et nos profs non plus.

J'ai d'ailleurs eu ce genre d'erreur causé par le fait que mon formulaire n’est pas visible dès l’apparition de la page ce qui fait que mes champs de formulaire en requis ( required )  ne peuvent pas fonctionner correctement. Cette erreur m’oblige à devoir imiter le fonctionnement des champs requis, mais finalement voyant le temps filé, je préfère que le bouton de soumission au formulaire ne soit actif que lorsque tous les champs requis sont remplis.

Une autre « erreur », plutôt un non-fonctionnement, sur mon changement d’image de profil sachant qu’il faut le faire via un système de transformation de l’image en base 64. Malgré la recherche que j’ai faite mais ayant du mal à l’implémenter, je préfère retirer le fonctionnement du changement d’image de profil.

J’ai également dû annuler certains fonctionnement à cause du temps qui me manque et d’ailleurs une dernière erreur que je n’ai pu déboguer à temps, au niveau de mon troisième module, si on arrive sur la page de recherche sans recharger la page et cela à la seconde fois que l’on entre dans le module alors il vous est impossible de cliquer sur les éléments mais si vous faites une recherche cela ne pose aucun soucis.

La landing page

Je code ma page de présentation mon projet qui servira également de page index la seule chose qui m’a pris plus de temps c’est la vidéo dans l’image de gsm.

Le case - study

Dernier petit check - up de tout mon projet et fin de la rédaction de ce case - study et codage de celui - ci.

Conclusion

Voilà c’est la fin de l’aventure ! Ce fut un sacré projet, content d’avoir pu le terminer à temps même si le dernier mois m’a paru un peu trop rapide. Je tiens à remercier Daniel De Pinho Lucas, Aline Meunier, Dimitri Jansen et Morgane Laurent. Merci les potes de m’avoir aidé pour le projet que ce soit pour des idées de design ou dans les moments de doute.