Jouer à StrongFish

Case Study

Bienvenue sur le case study du projet StrongFish. Je vais vous expliquer comment j'ai mis en place mon projet de fin de 2ème année à la haute École Albert Jacquard dans la section DWM.

Tout commence par la présentation du projet par le coordinateur de l'option. Un side-project, le but est d’imaginer un projet qui nous intéresse. L'année passée, l'accent était mis sur la mise en valeur de nos capacités autour de notre projet dans le but de trouver un stage. Cette année, j’ai trouvé intéressant que l'accent soit également mis sur la résolution d'une problématique !

Une passion, un projet !

Le poker est une de mes plus grandes passions et ce depuis longtemps. Vu que le sujet me correspond, je trouve rapidement une problématique. Bien que ce jeu soit vraiment fascinant, il possède également une partie sombre propre à tous les jeux d'argent…

La problématique majeure que j’observe au poker, c'est la façon dont un joueur non expérimenté et avec des connaissances insuffisantes se fait littéralement exploiter et dépouiller de ses jetons (de son argent) par les joueurs réguliers. C’est pourquoi j’ai eu l’idée de créer StrongFish, un petit jeu de poker qui teste les connaissances des utilisateurs.

L’arborescence du projet

La première étape de mon travail fût de réaliser l'arborescence de mon projet. Une fois le projet défini et le thème validé par mes professeurs, je me lance dans la recherche des inspirations. Dès lors, je réalise l’architecture d’information de mon projet. Je me lance dans la rédaction du contenu de chacune des pages de mon projet.

Le contenu est principalement rédigé par moi-même grâce à mes connaissances mais également à l’étude des règles et des ficelles du poker acquis auparavant.

représente l'arborescence du projet
représente plusieurs feuilles ou l'ont peut voir des plants de site dessinés

Wireframes

Le contenu du site établi, je procède à la création des wireframes de mon projet. Beaucoup de personnes sont souvent surprises par la façon dont je réalise mes wireframes « à l'ancienne », comme on peut le dire. En effet, je préfère prendre une feuille et un crayon pour réaliser des wireframes, ça m’aide à visualiser et à réaliser ceux-ci. Je gagne un temps précieux quand je les réalise à la main parce que j’avance plus rapidement et je réussis à voir plus vite certains problèmes. Par la même occasion, j’en profite pour faire mes premiers tests utilisateurs et améliorer le projet.

Inspirations

Mes wireframes étant terminés, je passe à l'étape suivante. Ce qui est pour moi une étape cruciale ! J’ai souvent eu des difficultés dans mes designs. J’avoue. J’oubliais souvent l’étape du moodboard lorsque j’ai débuté dans le web. Celle-ci permette de s’inspirer et de rester dans un style cohérent d’un point de vue graphique tout au long du projet. Grâce aux moodboards et à mes inspirations, j’améliore le design de mes projets.

représente un ensemble de differents sites

Pour mon projet, je suis partis sur un style assez épuré afin de mettre les utilisateurs en confiance sur le sérieux de la page sur laquelle ils se trouvent. J'ai donc décidé de partir sur un thème général plutôt sombre et j'ai principalement orienté mes recherches là-dessus. J'ai également récupéré des éléments de certains sites que je trouvais sympathiques et que je pourrais réadapter pour mon projet.

Design et embûches

Ensuite, une fois l’inspiration terminée, je commence par faire quelques recherches graphiques notamment sur le logo du projet.

Voilà les premières ébauches du logo. C’est la première identité visuelle. Je suis encore sceptique à propos de certains logos. Finalement, j’opte pour le dernier ! J’aime bien le contour qui rappelle le jeton de poker.

Je rentre dans le vif du sujet et une des plus rudes épreuves pour moi, c’est le design de l'ensemble des pages. Je veux rester sobre et cohérent dans l'ensemble. Je doute souvent de moi quand il s’agit de placer les éléments sur ma page. Que ça ne donne pas, ça ne soit pas ergonomique ou harmonieux mais avec la persévérance, je continue et j’améliore petit à petit mes designs. c’est ici que les designs de chaque page sur smartphone débutent leurs premiers jets.

les designs des pages du projet strongfish

À cette étape du projet, Il manque encore l'onglet permettant à l'utilisateur de tester ses connaissances. Patience ! Cette rubrique est une partie plus compliquée à mettre en place, je la garde pour un peu plus tard… Sur ce qui est accompli, j'ai encore quelques doutes notamment sur la homepage qui est selon moi à changer. Le système de news ne me convainc pas et je pense à une navigation vers les autres onglets du projet dans le style de celle présente sur mon moodboard.

les designs des pages du projet strongfish

En ce qui concerne mon projet, je décide d’opter pour un style assez épuré afin de mettre l'utilisateur en confiance sur le sérieux de la page sur laquelle il se trouve. Je choisis alors de partir sur un thème général plutôt sombre et j’oriente mes recherches là-dessus. Ce qui donne à l’utilisateur également l’ambiance générale ressentie quand on joue au poker. J’affine ma recherche et je m’inspire par la suite des éléments de certains sites que je trouvais sympathiques et que je puisse adapter à mon projet.

Changement de table et de direction

Le projet prend ensuite un virage à 180°. Je juge qu’à l'heure actuelle, le projet est surtout rempli de texte et ne démontre pas assez les capacités que je veux mettre en place. Sans compter le fait que beaucoup de site propose déjà un contenu similaire et parfois plus complet. Je laisse alors tomber la partie information qui est trop rébarbative pour me concentrer sur la partie jeux/test des connaissances des utilisateurs qui est beaucoup plus intéressante et ludique.

représente un site version smartphone on peut voir deux grands losanges

La page d'accueil reste sensiblement la même dans sa forme sauf qu'au lieu de diriger vers différentes explications les boutons lancent les différents niveaux du jeu qui sont déblocables progressivement.

Une fois le jeu lancé, le site passera obligatoirement en mode paysage sur smartphone pour permettre une meilleure expérience d'utilisation.

représente le jeux strongfish sur smartphone on peux y voir la mascotte ainsi qu'une table de poker

Le jeu prend forme

représente le jeux strongfish sur smartphone on peux y voir la mascotte ainsi qu'une table de poker représente le jeux strongfish sur smartphone on peux y voir la mascotte ainsi qu'une table de poker

Comme je le cite auparavant lors de l’étape des wireframes, plusieurs problèmes sont mis en évidence lors des tests utilisateurs que je réalise. Notamment, le système de dialogue avec la mascotte, où l’utilisateur doit toucher le poisson pour fermer et ouvrir la bulle afin de voir la question, n’est pas pratique du tout. Lors des questions à choix multiples, l’aspect des propositions ne montre pas ce qu’elles sont…

Quelques améliorations

Représente un screen du jeux StrongFish ou l'on peut voir une question à choix multiples

Je redesigne les propositions lors des questions à choix multiples pour qu’elles ressemblent réellement à des propositions cliquables.

Représente un screen du jeux StrongFish ou l'on peut voir une question ainsi que des cartes sur la table ainsi que de chaque cotés

La question apparaît maintenant sur le dessus de la table, l’utilisateur ne peut plus faire apparaître/disparaître la bulle ça lui enlève une contrainte. La bulle n'apparaît que pour donner des infos et ne gêne plus le jeu.

Ma partie préférée

Je vais maintenant vous parler de comment le projet a été développé. L'ensemble du projet repose sur le language Javascript et l'utilisation d'un json. Le json contient toutes les données relatives aux questions, aux réponses ainsi qu'à l'affichage des cartes. Le Javascript est principalement utilisé pour transformer les données du json en éléments HTML. Ce n'est pas la première fois que je fais ce genre de choses, je n'ai donc pas eu de problèmes majeurs lors du développement.

représente du code javascript permettant de vérifié les réponses de l'utilisateur