Case study

Pour ce travail de fin d’année de l’année scolaire 2019-20 en DWM, il nous a été demandé de réaliser un PPU c’est-à-dire « Petit Projet Utile » . Ce travail avait pour principe soit d’améliorer le monde soit de répondre à un besoin ou de résoudre un problème ou encore de rendre un service  ?

Détermination du sujet

Afin d’éviter de tomber dans un sujet dit bateau. Il nous a été demandé d’établir le plus rapidement une liste de 10 thématiques.

Monsieur Marchal nous a demandé de répondre à des questions comme « Qu’est-ce qui me touche  ? » , « Je ne pourrais pas vivre sans… » ,… Ces réponses listées et triées, j’en ai ressorti plusieurs thèmes.

  1. Maîtriser la lumière en photographie ;
  2. Savoir ne rien faire ;
  3. Le commerce dans le monde étudiant ;
  4. S’exprimer par une bouteille à la mer ;
  5. La bonne technologie pour la bonne personne ;
  6. La culture par le meme ;
  7. La puissance de l’illusion dans la vidéo ;
  8. Comprendre la course automobile par les datas ;
  9. Des contraintes pour créer ;
  10. Garder le contrôle de son temps.

Nos professeurs ont sélectionné celles qui leur paraissaient les plus intéressantes à travailler. Pour ma part, mes thématiques sélectionnées ont été « Ne savoir rien faire » et « Créer avec des contraintes » .

Les deux sujets m’intéressant fortement, j’ai décidé de prendre mon temps en effectuant des recherches plus approfondies pour chacun. Après lectures de plusieurs articles, TFE, thèses et visionnage de conférences, je me noyais sous les idées et les informations. Je n’en avais ressorti que quelques bribes de concepts.

C’est en lisant un TFE, « Comment les contraintes peuvent-elles influencer le processus créatif ? » , que mon idée m’est venue. Elle y explique son stage de créativité qui s’est déroulé dans une classe de maternelle. Les élèves se disaient incapables d’être créatifs pourtant au moyen de divers ateliers, les élèves se montraient de plus en plus inventifs et ingénieux. Ces ateliers étaient basés sur des contraintes, des indications, des objets,…

Mon idée était simple : recréer cette expérience.

Créer avec des contraintes

Cette idée étant vague. J’ai décidé de me renseigner sur ce qui y ressemblait de près ou de loin. Inktober, dailyUI, 30logos, typeYou, daily vlogs,… Cela m’a donné du futur contenu, des idées de fonctionnalités.

En même temps, j’ai développé quelques idées plus concrètes au fond de ma tête. J’ai donc décidé d’interviewer des personnes afin de confronter mes idées et d’avoir différentes perspectives. J’ai donc contacté plusieurs petits créateurs de contenu. Malheureusement sans réponses d’une part et le COVID-19 de l’autre. Celles-ci n’ont pas su se faire.

Interview de masse

Afin de récolter un maximum d’avis sur mon projet, j’ai adapté mes interviews tout en ajoutant d’autres questions. Je remercie d’ailleurs les personnes qui ont répondu à ce questionnaire.

Plusieurs informations en sont retirées :

Les tâches

Sur bases des réponses, j’ai pu identifier les fonctionnalités.

Les top tasks

les tiny tasks

Le contenu

User jouyrney, Navigation design, Markdown

Pour le contenu j’ai réalisé un user journey et navigation design. Cela m’a permis d’écrire mon contenu en markdown.

User Journey Navigation Design

La base de donées

Une partie de ma base de données vient d'une base de donnée libre de droits (Je ne suis pas arrivé à la retrouver afin de la crédité.) et l’autre vient du récoupement de données.

Data base

User testing

Habituellement, l’user testing est fait après la conception des visuels ou au début du développement des modules techniques. Cependant ayant déjà une ancienne version, j’ai déjà pu récolter divers témoignages et avis. J’en ai effectué un par là suite. Ce n’était pas un user testing vidéo à défaut de webcam. J’ai donc décidé de simplement prendre note.

Voici une petite liste des remarques (de l’ancienne et de la nouvelle version) :

J’ai décidé pour la nouvelle version de ne pas reprendre le concept de challenge mensuel qui me semblait peu utile.

Les visuels

Avant de continuer, ce projet est basé sur un ancien projet. Certains éléments ont été gardés tels quels, modifiés, ajoutés et d’autres supprimés.

Tout au long de la conception de ce projet, je faisais attention à rester simple sans pour autant tomber dans la facilité.

Wireframe

Ensuite en traçant grossièrement mes wireframes papier. J’ai pu me rendre compte des différentes possibilités de disposition des éléments.

Wireframe Papier Wireframe Papier Wireframe Papier Wireframe Papier

La typographie

J’ai décidé de ne prendre qu’une seule famille de police d’écriture pour le corps de texte et les titres préférant jouer sur la graisse de la police. Les polices Sans-Sérif correspondant plus au critère de simplicité, je n’ai sélectionné que très peu de Sérif. Après élimination, c’est sur la famille Quiet Sans que mon choix s’est porté.

Quiet Sans aperçu

Á l’aide de Gridlover, j’ai pu tester différents.es couleurs de texte et rapports hiérarchiques. J’ai choisi respectivement 16px, 18px, 20px pour mobile, tablet et desktop cependant j’ai gardé une hauteur de ligne de 200 % pour chaque display. Les rapports hiérarchiques sont 1,6 pour mobiles et 1,8 pour tablet et desktop.

Couleurs de texte

Puisque j’avais choisi qu’une seule famille de police, j’ai décidé de trouver un moyen de bien différencier les titres du texte.

Test de style de titre

La palette de couleur

Initialement la palette de couleur a été créée avec l’outil d’extraction de dégradé d’Adobe Color et ne comportait qu’une couleur d’action, les gris, le noir et le blanc. Ensuite, j’ai décidé d’ajouter une couleur turquoise/verdâtre. Ce qui n’est pas une bonne idée pour une personne ayant des difficultés de perception des couleurs. J’ai donc choisi d’utiliser un bleu comme couleur et d’ajouter un peu de bleuté dans mes gris, mon noir et mon blanc.

Adobe Color Interface Ancien nuancier Nouveau nuancier

Les maquettes

Sur la première version, j’avais prototypé la version mobile et la version desktop. Je m’étais permis de ne pas faire ceux en tablette puisque j’avais déjà mes wireframes papier. Ensuite pour le relooking, je n’ai fait que la version mobile en ayant les versions papier à côté. Finalement au moment où je codais la version desktop, j’ai encore fait des modifications.

Ancien style Nouveau style

Si vous le souhaitez, vous pouvez examiner mes fichiers Sketch de la nouvelle version et de l’ancienne version pour y voir les recherches et toutes les interfaces.

Le développement

Pour la première version de l’outil, je m’étais basé sur l’idée une version démo qui n’utilisait ni localstorage ni PHP. Celle-ci comportait différentes parties : le générateur et des listes de sauvegardes de combinaisons (en cours d’exécution, pour plus tard, historique). Malheureusement, cette ancienne version comportait beaucoup de bugs et n’était que très peu fonctionnelle.

Ensuite pour cette version, j’ai décidé de contenir mes ambitions tout en visant le moins de problèmes possible. Cette version a gardé le générateur et les listes sont devenues une liste. Un module de score a été implémenté bien que ce soit un toute petite tinytask. La possibilité de changer son pseudonyme est aussi présente.

Quelques regrets

Lors du développement, j’ai dû abandonner l’historique et le système d’annotation. J’aurai d’ailleurs aimé utiliser PHP pour la gestions des comptes mais bon cela pourrait être un bon exercice pour plus tard.

Merci !

Merci pour votre lecture. Je vous encourage à découvrir Contr_art par vous-même.