Case Study
Rethinking UX

“Votre mission, si toute fois vous l’acceptez, participer à un rush d’une semaine durant lequel, par groupes de 6, vous repenserez 3 fonctionalités de Facebook.

Ce message s’autodétruira dans 5, 4, 3, 2, ...”

Voir le projet final

Projet réalisé par Danielle Rogien élève de DWM dans le cadre du workshop “Rethinking UX.”

ronds déco
ligne de séparation board

Prologue

10h30, nous sommes assis dans le B98 de l’HEAJ. Les professeurs lancent le diaporama et nous expliquent le concept et les directives pour ce nouveau workshop. Le thème ? Rethinking UX. Cependant, nous ne devons pas nous contenter de repenser un simple site web non, nous nous attaquons à un gros poissons mes amis : Facebook !

Nous devons vite exécuter la première consigne : former des groupes de 6. Sans perdre de temps, je fais signe à Clémentine et à Jonathan pour leur demander de ma joindre à eux. Ensuite, Corentin, Steven et Kylian viennent s’ajouter. Finalement, Jack nous rejoindra pour former, in fine, un groupe de 7. Yes level up !

La première partie de ce case study sera orienté "travail de groupe", si vous voulez voir mon analyse personelle et ma contribution au projet rendez-vous ici.

ligne de séparation crayon

Premier jour de mission

Choisir une fonctionalité

Premier jour du projet, nous devons d’abord définir ce qu’est pour nous Facebook, lister les différentes fonctionnalités de ce réseau social, argumenter le pour et le contre de celles-ci, en choisir une pour la mettre évidence.

Ensuite, nous effectuons des recherches pour identifier d’autres sites ayant les mêmes fonctionnalités que Facebook afin de les comparer. Nous listons les avantages et les inconvénients respectifs puis, nous terminons cette journée par une mise en commun au sein de notre groupe.

premier jour
ronds déco ronds déco
deuxieme jour
ligne de séparation photo

Deuxième jour de mission

Rethinking et wireframes

La seconde journée de workshop concerne les « aubergines » heu pardon « personnas ». Les personnas sont des utilisateurs types susceptibles d’utiliser notre site ou application. Durant la matinée nous devons chacun créer 3 personnas et leur scénario complet.

Comme nous sommes un groupe très soudé, non je rigole, car nous sommes juste trop fainéants, donc, pour la réalisation des scénarios nous nous sommes partagés pour former deux sous-groupes de 2 et un sous-groupe de 3. Nous avons terminé la matinée par une mise en commun du travail effectué dans les différents sous-groupes.

L’après-midi, premier prototype du design des sous-fonctionnalités. Ensuite, nous travaillons individuellement. Trois s’occupent de la partie mobile et les autres de celle du desktop. Etant donné que nous sommes 7, je travaille avec Kylian, partie desktop, pour le User Unboarding (tutoriel d’utilisation) pour le poste d’un statut sur Facebook.

ronds déco
ligne de séparation desktop

Dernière ligne droite

Testing et prototypes

Troisième et dernier jour ! Afin que cette journée se déroule au mieux, chacun a apporté de quoi nous aider à patienter : biscuit, gâteaux, café, bières, etc… bref une bonne équipe ! Sans tarder, nous commençons les tests utilisateurs de nos wireframes papier, une fois ceux-ci modifiés et validés, nous nous lançons dans la réalisation des wireframes numériques.

Un rush commence sur le rythme de la chanson « Manon ». Une fois la mise en commun réalisée, nous entamons la dernière tâche qu’est la réalisation des fichiers Invision (logiciel en ligne permettant la simulation d’action sur un site web ou une application). Dès que le travail est finalisé, nous terminons la journée par des questions de dernière minute aux professeurs et nous nous souhaitons un joyeux noël en avance !

troisieme jour
ronds déco
conclusion
ligne de séparation mobile

Rapport de mission

Conclusion et mon ressentit

Mon ressenti par rapport à ce workshop est vraiment positif. Etant donné que je ne m’entends pas très bien avec les gens de ma classe, j’avais donc une mauvaise appréhension pour ce projet. Cependant, j’ai eu la chance d’intégrer un groupe super chouette et j’espère garder de bon contact avec eux.

J’aime beaucoup les workshops, cela nous oblige à être très réactifs, nous empêchant de nous focaliser sur des détails, nous nous recentrons sur le plus important : l’objectif.

ronds déco ronds déco
ligne de séparation fichier

Evolution du projet

Partie avec Killian

Premiers visuels papiers, premiers wireframes, et design finaux sur photoshop. Réalisé en collaboration avec Killian .Nous nous sommes occupé du tutoriel utilisateur pour poster un statut sur Facebook

Vous pouvez tester notre application en ligne (réalisé par mon binome)

via notre Invision
post-it

Début du processus

Comme précisé précédemment, le premier jour, nous avons commencé par un brainstorming géant qui nous a permis d’un’ part, de référencer toutes nos idées et d’autre part, de lister les différentes fonctionnalités de Facebook afin de focaliser toute notre attention sur une seule d'entre-elle, car, en effet, nous la diviserons ultérieurement en trois sous-fonctionnalités que nous développerons également dans ce travail.

Nous avons donc décidé de nous concentrer sur la fonctionnalité du « post » d'un statut car nous trouvons qu’il est réellement perfectible.

avantages

Peser le pour et le contre

Après le choix de notre fonctionnalité, nous avons listé les sites ayant les mêmes fonctionnalités que Facebook, ensuite, nous en avons comparé les avantages et désavantages.

L’étape suivante a consisté à identifier des « personas », c'est-à-dire des utilisateurs types susceptibles d'utiliser notre application. Nous avons pu croiser nos observations et nous en avons déduit que le public était très vaste, en effet, il y avait des utilisateurs de toutes les tranches d’âge de la population et notamment de nombreuses personnes âgées. Nous avons vite constaté que les personnes qui ne sont pas « digital native » ont envie d’apprendre à utiliser les nouvelles technologies dont elles comprennent vite les avantages, comme par exemple prendre des nouvelles de la famille, cependant, elles hésitent car cela leur semble assez compliqué de prime abord.

C’est la raison pour laquelle nous avons décidé de séparer la fonctionnalité "poster un statut" en 3 sous-catégories, à savoir : l'importation de média, catégoriser un statut et le tutoriel utilisateur. Nous attribuer une tâche à chaque membre du groupe (qui ferait quoi ?). Kylian et moi-même avons proposé de nous occuper du tutoriel utilisateur sur desktop.

Nous nous sommes vite rendus compte que l’accès au tutoriel utilisateur était assez ardu. Par exemple, afin de le trouver, vous devez naviguer sur une dizaine de page en étant très tenace (nous avons cherché pendant près d'une heure en comptant sur l'assistance Google et Facebook). De plus, dès que vous accédez à la page, celle-ci ne comporte aucun design, uniquement du texte.

Donc, nous avons décidé qu’il fallait absolument trouver le moyen pour y remédier et de la sorte, aider « mamy Ginette » et tous les autres utilisateurs en difficulté à poster sur Facebook.

croquis

Premier croquis

Nous devions donc agir pour pallier ce manque de tutorat. Cependant, les tutoriels sur desktop sont souvent très mal perçus et dès lors, évités par les utilisateurs.

A partir de ce point, je vais développer la partie spécifique du travail que j’ai effectuée individuellement, sans mon coéquipier (cette phase individuelle sera évidemment suivie d’une mise en commun).Pour initier cette partie, J'ai listé les sous-fonctionnalités du statut Facebook afin de les analyser pour mieux comprendre les moyens que j’allais mettre en place pour les inclure dans un tutoriel.

Pour ma part, je trouve qu’il est essentiel d’une part de pouvoir écrire, mais d’autre part, de mentionner un de nos amis ou de poster une photo sur ce statut, mais également, d'y ajouter un hashtag, un lieu ou notre humeur dès que l'on poste ce statut.

Ensuite, pour la première phase de croquis, nous avons réalisé la première mise en commun entre mon coéquipier et moi-même. A la fin de celle-ci, nous avons ajusté notre travail en rectifiant quelques erreurs, puis, et avons partagé notre travail avec celui des autres membres de notre groupe.

wireframes

Wireframes et prototyping

Après cette mise en commun avec l’ensemble du groupe suivie de nouvelles adaptations, j'ai réalisé le prototype papier. J’ai ensuite demandé aux autres membres de mon groupe de le tester et aussi à ceux des autres groupes de ce workshop. Globalement, j’ai reçu un feed-back que je considère comme étant positif, même si certains points manquaient de clarté. Le principal reproche qui m’était adressé était la longueur de la durée du tutoriel. Elle leur semblait trop importante, je voudrais juste préciser que ce tutoriel n'est utile que lors de la première utilisation de Facebook.

Cette remarque très judicieuse m’a donc permis de réfléchir sur la manière de simplifier le contenu de ce tutoriel. J'ai donc décidé d’ajouter une option permettant à l’utilisateur de choisir quelle fonctionnalité il désire consulter en cliquant sur le menu hamburger.

Dès que j’ai eu terminé toutes les modifications souhaitées, j’ai continué mon travail en terminant la réalisation des wireframes afin que Kylian puisse s'occuper de l'Invision.

tutoriel

Visuel final

Après l'Invision, je me suis rendue compte que certaines transitions n’étaient pas parfaitement claires. En effet, en comparant le design de mon travail avec celui des autres membres de mon groupe, je me suis aperçue qu’ils avaient ajouté des petits éléments graphiques (notamment pour l'import des médias.) J'ai donc repris certains morceaux de leur design pour mes visuels afin que le design global de l'application soit cohérent.

J'ai également animé une partie de mon application que vous puissiez voir la fin de la vidéo au-dessus de la page.

code

Design et intégration des sites

"And then god say..." et le design fut !

En ce qui concerne mon site personnel, j'ai pris la décision de lui donner la présentation d’une page de magazine afin qu'il soit agréable à lire (même si l'écran ne permet pas de ressentir la sensation du papier glacé entre les mains).

De plus, la forme oblique des images qui illustrent ma page permet d'orienter le regard vers le texte. Ensuite, j’ai choisi de placer des petits disques décoratifs car ils permettent la transition entre les "pages" qui constituent chacune les chapitres. Même si certaines personnes n’apprécient pas la cassure que constituent « le gris et le blanc » des blocs séparant les chapitres, je l’assume car je l’ai c'est volontaire.

Pour terminer ce point, j’ajouterai d’une part, que je trouve que la présentation de mon site représente bien l'ambiance de notre groupe de travail et que d’autre part, que par le biais de ce workshop, j’ai fait des progrès en ce qui concerne l’intégration dans un groupe de travail mais j’ai également pris conscience que j’en ai encore de nombreux à faire en JavaScript.

Je me permets de préciser que je me suis également occupée du code du site commun, que Steven s'est occupé du design et John du contenu.