Semaine 1
Demande et premières réalisations
Ce deuxième workshop de l’année se base sur la réalisation d’une web application pour mobile, par groupe de quatre. Le choix et le thème de l’application est très libre. Il faut « développer une seule idée mais bien la développer. » Elle doit être originale, efficace, design, utilisable, et professionnelle.
Une affiche A3 ainsi qu’une page web responsive présentant l’application devront accompagnées.
Le concept de notre application est simple : permettre aux utilisateurs de pouvoir créer rapidement et intuitivement leurs listes de course.
Ils pourront y enregistrer leurs listes de course, les nommer, et décider quand et où ils iront les faire.
Premiers prototypes
Après avoir échangé nos idées sur l’application, nous sommes partis sur ce projet que nous avons fondé “Easy Buy”.
La création d’une application ne doit pas être fait n’importe comment. Il était nécessaire de commencer notre projet sur une bonne base.
Par conséquent, les 2 premiers jours du workshop étaient basés sur la réflexion et l’itération.
Nous avons commencé par fonder une hiérarchie. Pour cela, nous avons noté sur des post-it tous les éléments intéressants qui pourraient figurer dans notre application. Nous les avons ensuite disposé sur une table de façon à voir quel élément renvoyé vers quel élément.
L’utilisateur doit pouvoir :
- créer une liste de course et l’enregistrer.
- modifier une liste à tout moment.
- choisir le magasin ou l’on va faire ses courses.
- pouvoir se repérer dans le magasin grâce à un plan.
Une fois terminé, nous avons simulé un prototype de l’application sur papier. Cette étape nous permis d’effectuer un premier test utilisateur, afin de déterminer quelles tâches pouvaient être susceptibles de ne pas être compréhensibles.
Un membre d’un autre groupe est venu tester notre prototype papier, et a énoncé les choses qui le dérangeait, ou qu’il avait du mal à comprendre. Nous avons répété cette opération plusieurs fois avec une personne différente à chaque changement, et ce, jusqu’à ce que notre application soit parfaitement clair.
Après cette batterie de test, nous sommes arrivés à la conclusion que nous devions simplifier notre application. Pour ce, nous avons commencé par limiter les fonctionnalités de Easy Buy pour nous concentrer sur sa
fonction principale : faire des listes de courses et diriger l’utilisateur à travers le magasin.
Le « plan » de notre application mobile, avec tout ce qu’il fallait intégrer était fait. Nous avions notre base.
Design & Marshmallow
Après cette longue étape, nous sommes passés au design de l’application. Nous avons défini tout d’abord une multitude palettes de couleurs, puis nous avons choisi celle qui nous paraissait la plus adaptée.
Afin d’y voir un peu plus clair, nous avons réalisé une première version d’écrans statiques via Illustrator et Photoshop. Cette étape nous a permis de conserver des éléments graphiques intéressants.
L’application se devait d’être un peu plus vivante. Par conséquent, les professeurs ont demandé à chaque membre du groupe de réaliser cinq animations. Nous avons créé une bibliothèque les regroupant, et seulement après, nous avons sélectionné les plus intéressantes à intégrer.
http://adrienpierre.be/projets/rebootfactory/animation/anim1.html
Semaine 2
Codage et café
Jour de la rentrée, la remise avance à grand pas… Le codage de notre application a déjà débuté pendant les vacances.
Pour ne pas prendre de retard, nous avons décidé de séparer les tâches en deux groupes distincts. Deux membres s’occupaient de la partie codage, tandis que deux autres s’occupaient du site internet et de la réalisation de l’affiche.
Rapidement, les wireframes et le style tiles du site sont réalisés. Le codage du site peut débuter.
De l’autre côté, l’application prend forme. Avec beaucoup de persévérance et grâce à l’aide de nos professeurs, de nombreuses fonctionnalités assez compliquées à intégrer commencent à voir le jour.
Les derniers jours
Il ne nous reste que quelques jours pour achever notre projet. Tout va bien, nous ne sommes pas en retard. La situation est la suivante :
-Le site de l’application est terminé
-L’affiche A3 également
-L’application est sur le point d’être opérationnelle
Les animations sont intégrées à l’application, des fonctionnalités jQuery sont retravaillées. Notre application est prête à voir le jour !
Nous commençons la réalisation des slides sur Keynote pour le jour de la présentation.
That’s today.
Jour J, tout est fait . Notre application est fonctionnelle, nous sommes prêt à présenter. Notre affiche A3 est imprimée, et est prête à être affichée sur le mur de la cafétéria au petit matin.
Accéder au site de l’application
Accéder à l’application
