iLab : un travail d’équipe, des rebondissements

Nous entamons la quatrième semaine en grande forme avec une première version du projet que nous mettons en commun. L’objectif était de pouvoir se mettre d’accord sur l’interface et la direction artistique, de sorte à lancer Maxime et Steven sur le développement de l’application.

Réflexion autour de l’interface

Nous commençons par l’UX imaginé par Caroline et Aude. l’application se décline sous plusieurs phases :

  1. Au lancement, trois formes associées à une couleur primaire sont affichées sur l’écran. Par une animation, l’enfant est invité à glisser une forme sur une autre, de sorte à créer le mélange de deux couleurs.
Etape 1 : Sélection des couleurs à mélanger

2. Lorsque l’interaction est confirmée, une fenêtre s’ouvre et propose un mini-jeu : l’addition des deux couleurs donnent une nouvelle couleur que l’enfant doit sélectionner parmi d’autres nuances. Une fois la couleur trouvée, une nouvelle forme se crée et s’ajoute à l’interface principale.

Etape 2 : Mini-jeu et création d’une nouvelle forme

3. Le but de l’application est de pouvoir trouver toutes les formes associées à une couleur et de constituer un tableau de formes sur l’ensemble de l’écran. Pour aider l’enfant à voir sa progression, l’app met à sa disposition une fenêtre reprenant toutes les formes trouvées et manquantes.

Fenêtre de progression du jeu

En concevant l’interface, nous avons pris conscience que créer une expérience ludique et éducative autour des couleurs n’était pas si simple que ça en avait l’air. Il fallait prendre en compte un certain nombre d’hypothèses d’interactions, anticiper les limites de combinaisons de couleur en fonction de notre schéma de référence — l’étoile des couleurs (Itten), ou encore indiquer une progression dans le jeu pour ne pas perdre l’utilisateur dans son implication.

Référence : Johannes Itten, Farbkreis, (1961)

Mise en commun

Avec ce premier visuel de l’application, nous avons été confronté plusieurs questions et constatations, notamment point de vue « développement ». Pour mieux comprendre, nous avons listé les avantages et inconvénients de l’interface :

Avantages

  • l’interaction au Drag&Drop a permis d’ajouter comme micro-fonctionnalité les contours de couleurs sur une forme que l’on s’apprête à modifier;
  • mettre en pratique le principe d’essais et erreurs par un mini-jeu;
  • donner des pistes pour illustrer la progression et l’interaction des formes avec les couleurs.

Inconvénients

  • l’aspect ludique de l’app n’est pas très bien représenté;
  • l’interaction des formes plus complexes (l’étoile par exemple) est difficile à intégrer en code (car fonctionne par un système de collision entre éléments sélectionnés);
  • l’expérience ne présente pas de réel objectif pour l’utilisateur.

Essais et erreurs

Il était évident que le projet comportait des faiblesses et qu’il nous fallait prendre un temps pour faire le point. Dans quelle direction allons-nous ? Quelles solutions seraient envisageables pour allier l’aspect ludique avec les contraintes techniques ? Est-ce que l’expérience actuelle permet à un enfant de 5 à 7 ans d’apprendre les mélanges de couleurs ?

Nous prenons alors un peu de recul par rapport à l’atelier et consultons les premiers wireframes pour trouver de nouvelles idées qui pourraient nous débloquer de la situation. Tous les membres étaient d’accord sur le principe des formes et des couleurs, de faire en sorte que l’utilisateur complète quelque chose et qu’il fallait que les deux couleurs sélectionnées soient bien visibles. Ce qui nous a donc amené à revenir sur cette interface-ci :

Wireframe de référence

En analysant de plus près le wireframe, nous remarquons que la zone d’interaction est moins importante que l’affichage du résultat et qu’il n’est pas évident de distinguer les deux zones entre elles. Pour rendre le concept plus ludique avec un objectif bien précis, nous décidons de donner comme but de compléter un dessin à partir des mélanges de couleurs trouvées. Maxime nous indique qu’au point de vue développement, c’était réalisable et qu’il pourrait s’y coller une fois une nouvelle version du prototype construite.

Naming, DA & Landing Page

Maintenant le prototype décidé, Chrysanthe et Angie nous proposent quelques pistes de branding et de contenu pour la Landing Page. Nous nous mettons d’accord sur un nom : Colors.

Branding : propositions

Fin de réunion, on se sent tous libérés d’un poids et le groupe semble motivé à travailler sur la suite du projet. Le planning se complète, nous nous départageons naturellement les tâches :

  • Maxime, avec le soutien de Steven se penchent sur le développement de l’app;
  • Caroline sur le prototype final de l’app;
  • Aude à la vidéo et les articles Medium;
  • Chrysanthe et Angie au Branding et Landing Page.

Le mot de la fin

Dans les situations comme celle de cette semaine où l’on fait face à un certain nombre de problèmes, il est important de pouvoir rebondir rapidement et faire un pas en arrière. On a également constaté que notre façon de communiquer entre nous posait parfois problème, notamment quand on confronte un prototype avec les contraintes techniques. Mais après tout, nous aussi, on apprend par essais et erreurs.

Here I am

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aude Schaff

Aude Schaff

Here I am

More from Medium

5-Management Strategies That Every Organization Must Follow

Technology and Organizational Design

Architectural practice as a work of architecture

Ambition is Your Friend — Except When It Prevents You From Starting Small