Application FitTime

Reboot factory

Création d’une application par Christelle Tassin, Jérémie Philippe, Charlie Immers et Justine Dufrasne, dans le cadre d’un workshop DWM.

Christelle: Concept, illustration, logo
Jérémie: Concept, animation, design interface, code de la landing page
Justine: Concept, design interface, logo
Charlie: code de l’application

La problématique / mission

Pour ce workshop nous avons interviewé des personnes afin de connaître les problèmes liés à leurs travail. Notre but étant de créer une application pour résoudre un de ces problèmes.

Dans les réponses que nous avons reçues, le manque de temps et le stress sont souvent revenus. C’est donc dans cette optique que nous avons cherché des idées.

Sur base des interview, nous avons cherché des idées d’applications pour améliorer leur quotidien. Les gens qui travaillent n’ont souvent pas beaucoup de temps libre. C’est donc difficile pour eux de prendre le temps de faire du sport. C’est pour cela que nous avons créé FitTime .

Le concept

On entre simplement le temps que l’on a devant soi et l’application nous donne une série d’exercices. Le tout encadré par un coach qui montrera les exercices à faire.

Les axes que nous avons voulu développer sont : rapidité, simplicité, fun/humour.

L’utilisateur avant tout

Notre but étant de faire gagner du temps à l’utilisateur, notre appli se devait d’être facile à utiliser et très intuitive. Il ne fallait pas qu’il ait besoin de réfléchir pour comprendre comment elle fonctionne.

Et pour que l’application soit le plus accessible possible, nous avons pensé à des exercices avec du matériel qui peut être remplacé par des objets du quotidien.

Nous avons fait beaucoup de tests utilisateurs avant de nous lancer dans le design. Ça nous a permis de trouver certains problèmes.

wireframe de la liste d’exercice

Par exemple, pour la page avec la liste d’exercice, beaucoup de personnes ont eu du mal à comprendre sur quelle page ils étaient et étaient perturbé par le bouton commencer en haut de la page.

On nous a également fait remarqué qu’un menu déroulant n’était pas très pratique sur mobile.

Notre solution pour que l’utilisateur soit moins perdu a été d’ajouter un titre. Cela lui permet de bien comprendre que c’est une liste des exercices qui vont suivre. Et de ne pas croire qu’il doit déjà commencer à les faire.

Nous avons enlevé les menu déroulant, à la place on passe sur un autre écran qui contient l’explication, afin que ce soit plus pratique.

wireframe de la page d’accueil

Un autre problème souvent rencontré était de trouver le mode difficile. La plupart des personnes ne le voyait pas ou ne comprenait pas. Et certains avaient du mal à le trouver lorsqu’on leur demandait de le chercher.

Pour régler ce problème, nous avons opté pour un switch, qui est plus compréhensible.

Les coach

Un de nos objectifs était d’accompagner l’utilisateur et de le motiver à faire du sport. Pour ça, on s’est inspiré des coachs sportifs, comme ceux que l’on peut voir à la télé ou dans les cours collectifs. Le fait d’être encadré et de ne pas se sentir seul pourrait encourager à continuer de faire les exercices.

Design & style graphique.

Pour le design, l’idée était de jouer sur un côté fun pour motiver les gens à faire du sport et rendre l’expérience amusante et agréable : couleurs dynamiques, gros boutons, formes arrondies, illustrations, etc.

Les coachs sont représenté en illustrations plutôt qu’en photo. De cette manière ils ont côté plus sympa et représentent bien l’univers qu’on a voulu donner à l’application.

Justine et Jérémie se sont occupé du design des interfaces. Ils ont choisit la Nunito pour tous les textes de l’application. Elle a des bord arrondis qui fonctionnent bien avec l’univers graphique. Il y a aussi la Oswald qui est utilisée pour le timer, qui attire l’oeil car elle est imposante et contraste avec la Nunito.

Pour la colorimétrie ils ont choisit une couleur dynamique et qui varie en fonction du niveau de difficulté des exercices. L’utilisateur sait donc facilement dans quel niveau il se trouve.

Le design final des écrans :

Illustration

Christelle et Justine ont fait des croquis de recherches pour trouver le style des personnages.

à gauche : inspiration, à droite : croquis de Justine

Une fois le style déterminé, Christelle a réalisé une série de personnages destiné à être animés plus tard, sur base d’une documentation de poses sportives.

croquis de Christelle

En parallèle, Justine faisait des test de palettes colorimétriques pour améliorer le contraste entre les couleurs et avoir une illustration plus unie.

à gauche : avant, au milieu : un test, à droite : couleurs finales
à gauche : avant, au milieu : un test, à droite : couleurs finales

Logo

Au départ nous voulions un logo qui exprimait le sport et la rapidité. Mais après beaucoup d’essais infructueux de Justine et Christelle, elles ont décidé de se concentrer sur le côté sportif.

Justine a vectorisé le logo, le F de FitTime est combiné à un haltère qui peut être facilement utilisé comme icône de l’application.

Animation

Il était nécessaire de réaliser des animations pour expliquer les mouvements à faire. Comme ça l’application est accessible autant pour les débutants que les habitués.

Jérémie s’est chargé des anims. Et il a bien galéré a trouver une manière d’avoir des animations avec des fonds transparents. Il a essayé avec des gifs, des vidéos … Sa solution finale : animer les personnages dans after effect comme des marionnettes, pour ensuite les exporter frame par frame et en faire des sprite.

un sprite

Code

Charlie s’est chargé de toute l’intégration (excepté la landing page, codée par Jérémie). Il a fait un timer sur lequel il est possible de faire pause si l’utilisateur le souhaite.

Il a également réalisé un slider pour la sélection du temps sur la page d’accueil, qui fonctionne par dizaines.

En dehors de ça, il a aussi intégré les animations de Jérémie, a géré le responsive, créé les animation et transitions, etc.

Conclusion

Nous sommes fier d’avoir relevé le défi, l’application est conforme à nos attentes : fun, facile et rapide à utiliser. Nous sommes contents du résultat car on a donné notre maximum pendant ces deux semaines de workshop. On espère avoir rempli notre mission et que cette application vous plaira.

l’application : http://justinedufrasne.be/projets/reboot-factory/app/index.html

landing page : http://jeremiephilippe.be/projets/reboot-factory/

Unlisted

    Justine Dufrasne

    Written by

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade