Design web & mobile

FitTime

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.

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.

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 on a joué 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.

On a représenté les coachs 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.

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.

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.

Logo
Au départ nous voulions un logo qui exprimait le sport et la rapidité. Mais après beaucoup d’essais infructueux, on a 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.

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.

     Projet au hasard