Case Study

Reboot Factory

Le workshop Reboot Factory vient de se terminer. En l’espace de deux semaines, tous les étudiants du groupe DWM, divisés en groupes de 4, ont développé une webapp de A à Z. Voici notre case study.

Développement d’une idée

Après avoir listé une série d’idées entre nous, et évalué les points positifs et négatifs de chacune, nous avons sélectionné l’idée qui nous semblait être la meilleure : elle est originale, innovante et nous plaît.

Notre application permet de découvrir les lieux insolites, hors du commun, d’une ville et ainsi sortir du tourisme “mainstream”.

Afin de débuter le projet, nous avons élaboré une liste de fonctionnalités à tester avant de nous lancer.

  • Géolocalisation sur carte
  • Mettre en favoris / d’évaluer le lieu
  • Suggérer de lieux
  • Commenter les lieux

Après discussion avec les élèves et les professeurs, nous avons décidé de retirer les fonctionnalités de commentaires et de suggestion de lieux : notre but étant d’avoir un éventail de lieux de qualité avant tout, nous avions peur que la fonctionnalité de suggestion de lieux deviennent vite une longue liste “poubelle”.

Ainsi, nous avons retravaillé l’application en profondeur pour qu’elle puisse répondre le mieux possible aux besoins des utilisateurs de la manière la plus simple et efficace, en abandonnant certaines fonctionnalités et en facilitant d’autres — le résultat final très différent de notre point-de-vue initial.

Tri à cartes

Après plusieurs itérations, et notamment grâce au tri à cartes, nous avons pu commencer à réaliser l’étape suivante : les prototypes papier.

Prototypes papiers et tests utilisateurs

Étape primordiale avant de se lancer sur ordinateur : la création d’un wireframe papier. Cette technique est rapide, facilement modifiable et l’on se rend vite compte de ce qui fonctionne, ou non. Nous avons imaginé différents scénarios afin de tester les différentes fonctionnalités établies préalablement ci-dessus. Nous nous sommes également posés différentes questions telles que :

  • Comment passer d’un écran à un autre ?
  • Où placer tel ou tel bouton pour qu’il soit affordant ?
  • Devons nous placer tel type de bouton ? Si oui, comment ?
  • Tous nos écrans sont-ils utiles ?
Prototypes papiers

Avec ces prototypes, nous avons réalisé des tests avec de potentiels utilisateurs. Nous avons analysé leurs manières d’atteindre leur but et avons ensuite analysé les problèmes rencontrés. Nous avons cherché des solutions et refait différents tests avant de se lancer dans l’intégration HTML.

Nous avons aussi élaboré des animations pouvant être utilisées dans l’application, pour résoudre les problèmes d’interface et de feedback que nous avons rencontrés.

Prototypes HTML et UI

Nous avons donc élaboré sur ordinateur la version finale de nos prototypes, afin de pouvoir les tester une dernière fois avant l’étape du design. Cela nous permet de nous assurer que notre architecture de l’information est bonne, et que l’expérience utilisateur sera la meilleure. Les prototypes HTML utilisés nous aiderons précieusement par la suite lors du développement HTML, CSS et JS.

Style Tiles

Pour l’étape du design de l’interface utilisateur à proprement parler, nous avons créé un style tile. L’UI a été itérée de nombreuses fois afin de choisir les couleurs. Étant donné que nos premiers choix menaient vers une application fade et sans peps, nous avons décidé de colorer notre application.

Développement

Nous pouvons maintenant passer à l’étape d’intégration HTML de notre application. Cette étape fut la plus longue, mais nous nous sommes répartis le travail au sein de l’équipe, pour arriver à la fin dans le temps imparti et avec les différents supports demandés. Nous nous sommes toujours organisés au sein du groupe afin de combiner nos forces et de nous diversifier. Ainsi, chacun a pu tirer profit de ce workshop et apprendre, aussi bien au-niveau de l’organisation, que du design, ou encore du code.

Nous avons rencontrés “quelques” difficultés au niveau du JavaScript, mais avec un peu de bonne volonté nous avons toujours réussi à contrer nos problèmes.

Que retenons nous du Reboot Factory ?

Grâce au travail de groupe, nous avons pu mettre à profit les compétences de chaque membre. Nous avons toujours poussé la réflexion plus loin et nous avons fait beaucoup d’itérations. Nous sommes tous satisfaits du travail accompli et, surtout, du résultat obtenu.

Si nous avions eu plus de temps, nous aurions aimé aller encore plus loin dans l’intégration de l’application.

Le mot d’ordre pendant tout le workshop aura été :

Visiter le site de présentation

Remerciements

Nous remercions l’équipe des professeurs de DWM pour ce workshop, leur feedback et leurs conseils tout au long de ce projet. Merci également à toute personne qui, de près ou de loin, nous a aidé dans la réalisation de ce projet.

Remerciement spécial à Emile Duval pour son renfort de dernière minute.

Travail réalisé par Gwen Bierlier, Loïc Cravatte,
Brieuc Mertens et Morgane Van Oncem.