Case Study — King Pushup #RebootFactory

Nous sommes mardi 16 décembre, c’est aujourd’hui que commence le deuxième workshop de l’année…
Imaginé l’année passée par Rémy SaintCricq et Arnaud Di Nunzio, le Reboot Factory met en avant le développement d’applications mobiles.

Au programme, des cours sur : le SVG, les bases de données locales, les animations mobile et le responsive.

Le lancement

Plusieurs semaines avant le lancement du workshop, les professeurs nous ont demandé de penser à différents sujets d’applications mobile à développer.

Le jour même, par groupe de deux dans un premier temps, nous avons listés un maximum d’idées exploitables. Plus tard, après s’être regroupés par quatre, nous nous sommes mis d’accord sur une seule application, l’unique, celle qui sera développée.

La première idée du groupe vise les utilisateurs curieux de surveiller leurs habitudes. Cette application ne verra pas le jour durant ce workshop, toutefois l’idée est d’entrer des habitudes de vie dans l’application et de calculer la fréquence de celles-ci.
Par exemple, combien de bières est-ce que je bois par mois, ou encore, combien de fois est-ce que je prends le bus ? Nous avons décidés de la mettre de coté pour une idée plus amusante.

Une application unique dans laquelle le joueur doit s’investir, une application mélangeant une part de fun et de l’exercice physique.

Comme par magie, une idée nous vient, créons une application de challenge sportif axée sur les pompes. Toutefois l’idée à elle seule ne suffit pas, il faut y ajouter un caractère unique. Intégrons le smartphone au jeu, rendons le essentiel et indissociable

Le smartphone est à terre, entre les deux mains du joueur et pour chaque pompe, il suffit de toucher l’écran avec le nez pour la valider.

Ajoutons à cette base différents modes de jeu comme le multijoueur afin de défier nos amis, un système de trophées et une série de défis qui vont pousser le joueur à surpasser ses précédents records et ceux de ses amis. Pour pousser le fun à son maximum, la caméra frontale filme le joueur en pleine action et la vidéo est disponible après l’exercice pour les autres joueurs.

L’idée est validée, la machine est enfin en marche, nous partons côte à côte vers la réussite !

Le soubassement

Entre huit yeux autour d’une table, chacun lance ses idées, une explosion de propositions, un brainstorming d’où naissent les premières fonctionnalités de notre projet.

Avant de se lancer dans la création et tout ce qui s’en suit il faut procéder méthodiquement. Pour cela nous allons suivre une série d’étapes proposées par les professeurs dans le but de construire une architecture de l’information la plus solide possible.

Le premier outil qui nous est conseillé est le card-sorting ou le tri à cartes. C’est une méthode qui consiste à lister toutes les fonctionnalités auxquels on pense, puis de les organiser par groupes et par thèmes.

Dans notre cas, en plus des membres du groupe, quatre personnes se sont prêtées au jeu. Elles ont listés toutes les fonctionnalités et les options intéressantes selon leurs points de vues.

A notre grande surprise la technique du card-sorting s’avère très bénéfique, il en ressort une multitude de nouvelles fonctionnalités à exploiter telles que les statistiques, un système de malus, un nouveau mode de jeu, ou encore le fait de pouvoir jouer sans compte, mais sans accéder aux modes multijoueur.

Les tests utilisateurs

Nous continuons nos expérimentations avec les batteries de tests utilisateurs. Papier, ciseaux et feutres, c’est parti pour l’atelier bricolage !

Une méthode pleine de sens qui met en scène un utilisateur type dans un contexte particulier avec une mission bien déterminée. Plusieurs fois, avec différentes personnes…
A nouveau les propositions et les tests de nos collègues de classe lors de cet exercice nous aident à perfectionner nos prototypes et nos interfaces.

Dans ce cas ci, nous demandons au testeur de lancer une partie multijoueur, il essaye d’y parvenir, puis il nous donne ses impressions, son ressenti, les modifications à apporter selon lui.

C’est un garçon !

Trouver un nom, rien de plus simple, quoi que…
Dans un premier temps, une tâche confiée à un seul membre qui est vite transformée en tâche collective. Nous avons longuement cherché à faire des jeux de mots, tantôt en français, tantôt en anglais et même dans d’autres langues…

Pour nous aider dans notre quête, nous avons gardé une ligne directrice autour de la force, la puissance, les pompes. Le futur nom doit être porteur de sens et du thème autour duquel tout va tourner.

Après moultes recherches nous sommes tombés d’accord sur “KING PUSHUP”. Un nom fort qui annonce directement la couleur.
Il ne reste plus qu’a le dessiner. Crayon, papier…!

Wireframe Sketch

Malgré les heures de recherche vers le logo de idéal, nous prenons tout de même le temps de commencer les wireframes sur sketch. De quoi avoir une idée des futures pages de l’application.

C’est le moment parfait pour penser à la grille, aux polices d’écriture, au tailles et rapports de proportion.
Nous choisissons un corps de base de 16 pixels et le Major Third comme rapport de proportion. Il est facile à utiliser sur mobile. L’interlignage du corps de base est de 27 pixels et en ce qui concerne la grille, elle est de 9 pixels.
Quant à la police, Roboto Slab sera utilisée pour les titres, et Roboto Sans Rounded pour le reste.

Congés d’Hiver

Il est temps de poser les armes, de ranger nos instruments, nous sommes à quelques heures de deux belles semaines de vacances. Décompresser, se détendre et passer du temps avec nos proches.

Bon, nous sommes tout de même en DWM et que seraient des congés scolaires sans quelques devoirs ? Philipe Thronte, notre professeur de code nous demande de faire preuve de créativité en créant une bibliothèque d’animations qui pourraient être utilisées dans l’application.

Le retour de la suite qui contre-attaque

Bienvenue en 2015 !

Pour égailler les premiers jours, quoi de mieux que d’y mettre un peu de couleur. Un jaune, un rouge, des couleurs proche du “material design”. Nous définissons la gamme que nous allons utiliser.

Commençons l’année avec de bonnes résolutions et de bonnes initiatives en achevant le logo.

Au même titre que le nom de l’application, le visuel est porteur de sens. Nous avons fait de nombreux projets et sommes tombés d’accord sur une forme et des couleurs. Quelques variations plus tard, nous avons notre logo !

Tous nos éléments, l’interface, les menus et les icônes prennent vie.
L’application gagne en cohérence, enfin des résultats, le moral des troupes est au plus haut.

Le challenge, la compétition, les titres et les rangs

Toujours dans l’optique de rendre l’application plus intéressante, nous créons une série d’icônes. Pour rester dans l’idée de King Pushup nous établissons cinq niveaux de hiérarchie. Nous représentons donc dans l’ordre le couvre chef du fermier, le casque du soldat, du chevalier et la couronne du prince et du roi !

Pour une cohérence maximale nous partons de formes géométriques et utilisons une grille.

Nous optons pour des icônes en deux teintes et sans contours. Un cadenas gris est présent pour signaler les succès inachevés.

La fin du voyage

Les jours qui défilent nous rapprochent de la fin du workshop, à force de courage, de travail et de persévérance, nos objectifs sont atteints et nous voyons la fin du tunnel.

Pendant que l’application est codée, le site de présentation, lui, s’apprête à voir le jour.

Nous passons même quelques heures au studio photo afin de figer quelques précieux instants à l’aide de Michel le photographe. Des clichés repris dans le site et pour l’affiche A3.

Le dénouement

Nous sommes Mardi 13 Janvier, c’est aujourd’hui que se termine le deuxième workshop de l’année… Imaginé l’année passée par Rémi Saint Cricq et Arnaud Di Nunzio, le Reboot Factory nous offre la possibilité de nous transformer en véritable développeurs pendant deux semaines. Nous éclater sur un projet libre et profiter des talents de chacun. Une superbe entente, une bonne humeur constante et de belles rencontres. Ce workshop est pour nous l’un des plus réussi et des plus prometteurs pour les futures années.

Bref, nous concluront ce case study en exprimant notre gratitude à Itchy et Scratchy pour leur initiative et leur motivation durant ces quinze jours.

Merci d’avoir validé ce projet un peu fou. Merci également aux autres enseignants pour leur présence et leurs conseils.

De notre point de vue

Jérémie

La vrai surprise de ce workshop c’est qu’on puisse concrétiser aussi rapidement un projet. Deux semaines de travail intensifs et une pensée, une idée voit le jour et devient une application.

Sur le chemin qui nous mène au jour de la présentation, on apprend un tas de chose sur le plan technique, on apprends surtout à connaître les gens avec qui on travaille.

La finalité de ce projet nous prouve à tous qu’avec de la cohésion, du travail et de l’écoute on peut arriver à nous surpasser.

Mikhael

Si je dois retenir une chose de ces deux semaines c’est qu’aucun défis technique n’est insurmontable si on prend le temps de le comprendre et de le travailler.

Ce workshop m’a prouvé qu’ensemble nous pouvons arriver à un travail de qualité. J’ai beaucoup apprécié travailler avec mon groupe.

Yvann

C’est durant ces deux semaines de Workshop que j’ai pu approfondir mes connaissances de manière exponentielle, j’ai du apprendre à être efficace et rapide, et les procédés de création appris en cours m’ont réellement été utile. Mon rôle était principalement de réaliser la partie de présentation de l’application, et ce fut pour moi un réel défi n’ayant jamais eu une telle responsabilité dans un projet autant personnel que commun.

J‘en retiens une réelle cohésion de groupe ainsi qu’une compréhension totale entre chaque membres de celui-ci, permettant d’avancer extrêmement vite afin d’aller encore plus loin dans la réalisation de ce projet.

Constant

Ce workshop a été pour moi une des meilleures expérience de cette année, mener un projet à terme de A à Z en groupe est très enrichissant.

Il m’a aussi permis de découvrir la technologie Web sur un nouveau support, le mobile, de nos jours, c’est pour moi très important de connaître celui-ci, qui se développe de jour en jour.

C’était la première fois que j’utilisais certaines méthodes, comme le card-sorting, ou les tests utilisateurs pour réaliser l’architecture, ou lister toutes nos fonctionnalités par exemple, je me suis rendu compte qu’elle sont vraiment très utiles dans le métier d’UX Designer !

Enfin, pour parler brièvement de l’ambiance dans le groupe, je me suis vraiment senti à l’aise tout au long du workshop, l’entraide, la bonne humeur et l’envie de réussir étaient réellement présent !

Lien vers le site de King Pushup: