Design web & mobile

Drag Up Your Life, le jeu complètement drag!

Drag Up Your Life est un jeu de mémoire qui vous permet d’en apprendre plus sur la culture drag. L’application est née suite à la demande de création d’un side-project du corps professoral de la section Design & Web Mobile de la Haute-École Albert Jacquard. Après m’être demandé comment je pouvais apprendre aux gens en les amusant, j’ai décidé de me pencher sur différents moyens de rendre mon application accessible pour tous. Ce Case Study relate mes exploits.

Étudier pour la fin de l’année scolaire ? En voilà un concept bien trop simple. À la Haute-École Albert Jacquard, il est important d’innover et de proposer des alternatives à la “normalité”. Les étudiants en deuxième année de Design & Web Mobile ont ainsi eu la consigne de réaliser un side-project mettant en avant leurs compétences dans les divers domaines qui parsèment l’Internet. Le but est de montrer les capacités dont font preuves ces futurs travailleurs pour, par la suite, proposer leur projet comme portfolio auprès de diverses agences spécialisées dans le Web. Cherchant à sortir du lot, j’ai eu l’idée saugrenue de travailler sur un projet lié à la drag culture pour proposer un contenu amusant mais permettant d’apprendre, de sensibiliser les gens et de leur ouvrir les yeux sur un univers cher à mon cœur. Je tenais aussi à sortir des sentiers battus et montrer à mes futurs maîtres de stage que, même si je ne maîtrise pas tous les langages du Web, j’étais prêt à me donner un maximum et à apprendre. Voilà comment émergea l’idée que serait « Drag Up Your Life ».

J’avais une idée, certes. Mais quel genre de jeu cela pouvait-il bien être ? Comment apprendre aux gens en les amusant ? Très vite, je me suis dit que je ne voulais pas faire un simple projet dont seule la victoire en serait la clé. Pour moi, approfondir sa culture était le maître mot de toute cette démarche – je voulais que l’utilisateur termine son expérience en se disant : « J’ai appris quelque chose ». Mais quel utilisateur ? À quoi devait-il ressembler ? Après avoir dressé quelques profils d’utilisateurs types, je me suis rendu compte que je voulais « casser les codes » et toucher un maximum de personnes avec ce projet. Plutôt que des profils, j’ai listé des caractéristiques types. Des caractéristiques, c’est plutôt bien, mais pour quoi ? Si je tenais à toucher un maximum de personnes, il fallait trouver un jeu accessible à tous. C’est en discutant avec certains de mes camarades de classe que l’idée du jeu de mémoire m’est venu. Déclinable sur tous les appareils et écrans existants, pouvant même être réalisé en vrai, il ne m’en fallut pas plus pour me convaincre.

Cette idée se concrétisa après la réalisation d’un storyboard relatant tout le processus – du lancement de la page à l’écran final félicitant l’utilisateur. Après quelques essais sur d’autres étudiants (notamment à l’aide de la méthode d’A/B Testing) et plusieurs modifications, je me dirigeais vers la destination souhaitée. Ainsi, il en a découlé qu’à chaque paire de cartes trouvées, un fait lié à l’illustration présente sur la carte serait affiché en modal, laissant ainsi le temps à l’utilisateur de le lire avant de le fermer et de poursuivre son jeu. Je me suis donc lancé dans la réalisation de wireframes pour mon application et les pages liées à cette dernière. La première occasion de montrer à mes professeurs l’avancement de mon projet et ainsi récolter des avis. Avec des retours positifs et la validation de tous : l’occasion d’attaquer le design et l’identité.

Il me fallait un nom qui claque, un nom qui rappelle mon thème mais qui soit aussi “pétillant”. C’est grâce à la chanson « Drag Up Your Life » – littéralement “mettez un peu de drag dans votre vie” – issue de l’émission RuPaul’s Drag Race que le nom a été choisi.

Comme son nom, je tenais à ce que mon jeu possède une identité graphique et des couleurs colorées. J’ai donc décidé de partir sur du rose et du jaune, deux couleurs qui se marient bien entre elles et qui symbolisent la joie, la confiance et la bonne humeur.

Le logo représente une armoirie, symbolisant la royauté des termes « drag queen » et « faux king ». À l’intérieur de la couronne se trouve un cœur qui montre que la culture drag n’est qu’amour, comme l’est la communauté LGBTQ+.

Les couleurs utilisées pour les cartes sont un dérivé du code couleur appliqué au site web. Le logo a été modifié et retravaillé pour correspondre à l’esthétique de la carte en général. Les illustrations sont des représentations vectorielles du fait qui leur sont liées.

J’ai réalisé différentes illustrations présentes dans tout le site. Vectorielles et inspirées du travail d’artistes comme Malika Favre ou encore Christoph Niemann, tous deux illustrateurs pour – entre autre – le New-Yorker, je tenais à illustrer le quotidien de ces artistes souvent mal compris.

Les deux polices d’écritures utilisées dans toutes mes pages sont ‘Satisfy’ pour le logo et certains titres ainsi que ‘Fira Sans Condensed’ pour le reste. Tandis que la première colle bien avec l’univers rond et coloré de mon logo, la seconde se décline en plusieurs graisses, ce qui lui donne une certaine versatilité dans son utilisation. De plus, les deux sont des polices d’écritures facilement lisibles.

Une fois que l’on mélange tous ces ingrédients dans le mixer, que l’on y ajoute un soupçon de code en respectant la recette que sont nos wireframes, nous obtenons la meilleure des recettes : un site web opérationnel !

Ce fut un exercice éprouvant qui m’aura permis de m’améliorer en tant que futur web designer, mais aussi en tant qu’humain. Ce case study n’est que la partie visible de l’iceberg qu’était ce travail, les efforts fournis étant à peine visible. Néanmoins, je suis heureux d’avoir apporté ma pierre à l’édifice et je pourrais dormir tranquille si j’ai, grâce à ce jeu, appris quelque chose et ouvert l’esprit à ne serait-ce qu’une personne.

     Projet au hasard