Design web & mobile

TricksToGo – Daily Tricks for your holidays

TricksToGo — Reboot factory

Nous sommes quatre étudiants de la Haute Ecole Albert Jacquard en Design Web et Mobile. Dans le cadre du projet “Reboot factory”, nous avons dû créer une application mobile sur le thème de l’empathie. Voici la démarche que nous avons effectuée pour mener à bien notre projet.

Jour 1 : Trouver l’idée

Avant le workshop, nous avions réalisé chacun de notre côté une interview d’une personne appartenant au monde du travail. Aller à la rencontre des professionnels nous a aidés à mieux les comprendre et à déceler plusieurs problèmes qu’ils rencontrent dans leur activité. Ainsi, nous avons commencé à imaginer ce qui pourrait les aider ou simplement rendre leur travail plus agréable au quotidien.

La plupart des personnes que nous avions interrogées exerçaient un métier dans le secteur de l’éducation. Copies à corriger, cours à préparer, vie de famille… beaucoup de tâches difficiles à conjuguer. Vivement les vacances ! Mais oui, les vacances évidemment ! Pourquoi ne pas faire une application qui décompte les jours restants avant nos vacances ? L’idée de base trouvée, nous avons cherché à approfondir le concept. Après de nombreux débats, nous sommes enfin arrivés à développer notre idée d’application en combinant plusieurs fonctionnalités.

Nous voulions une application rapide et facile à utiliser, qui soit motivante pour l’utilisateur. Un coup de blues sur la route du travail ? L’utilisateur n’a qu’à ouvrir l’application pour voir qu’il reste seulement 5 jours avant son départ pour le Japon ou pour toute autre destination paradisiaque. En plus du compte-à-rebours, une astuce est proposée chaque jour pour l’aider à préparer son séjour. L’astuce peut être au sujet de la cuisine locale, de la langue, des lieux à ne pas manquer ou encore à propos de légendes urbaines. L’utilisateur a la possibilité de sauvegarder certaines astuces en favoris ou de consulter les précédentes depuis un calendrier.

La fin de journée a été consacrée à la réalisation de l’architecture de l’information. L’utilisateur n’a pas à s’inscrire sur l’application pour l’utiliser, il est donc guidé lors de sa première visite lorsqu’il doit choisir sa destination et sa date de départ.

User testing

Jour 2 : Essayer et repenser

Les wireframes ont été effectués assez rapidement mais lors du user testing, nous nous sommes rendus compte de plusieurs incohérences à modifier. Lorsque l’utilisateur arrivait sur la page de sélection du pays pour la première fois, il ne savait pas où cliquer pour avoir accès à l’astuce. Nous avons donc ajouté un bouton présent seulement lors de la première visite pour guider l’utilisateur.

Nous avons également choisi de nous baser sur le material design pour réaliser notre application. Les icônes très simplifiées et les aplats de couleur nous paraissaient idéals pour réaliser à la fois un design simple et dynamique. Plusieurs recherches de logo et d’icônes ont été effectuées pour mieux visualiser le design final.

Jour 3 & 4 : Mettre en forme

La réalisation du design a certainement été la partie la plus longue. Nous nous sommes répartis les tâches afin d’avancer plus rapidement sur base d’une malgré la style tile réalisée avec tout le groupe. Nous nous sommes tout de même retrouvés avec un design assez différent sur chacune des pages.

Premiers designs abandonnés

Retrouver une cohérence sur l’ensemble de l’application n’a pas été simple mais l’avis des différents professeurs nous as orienté vers le design à privilégier.

Design final

En parallèle, le code de l’application commençait à prendre forme avec plusieurs tests d’interactions puis en prenant en compte le design qui se finalisait.

Jour 5 : Finaliser le design et coder

Mission prioritaire du jour : faire la landing page. Après avoir repoussé cette tâche plusieurs jours, il fallait enfin se lancer. Le design de l’application ayant déjà été réalisé dans la globalité, il fallait que la landing page soit cohérente mais aussi qu’elle donne envie à l’utilisateur de télécharger notre application.

Axel plongé dans le code de la landing page

Jour 6 : Régler les détails et préparer l’oral

Dernier jour de workshop, la présentation approche ! Il nous fallait structurer, répartir les temps de parole et faire des slides pour nous sentir prêts à vendre notre projet. Pendant ce temps, l’application finissait de prendre forme en code et les différentes interactions s’amélioraient.

Ça y est ! Le projet touche à sa fin après une semaine de workshop intense. Nous sommes plutôt contents pour une première application mobile. Mener à bien ce projet de A à Z nous a permis de mieux comprendre les différentes étapes de réalisation et la complexité d’un tel processus.

     Projet au hasard