L'outil externe que nous utilisions depuis longtemps précisément pour ce cas d'utilisation a fini par ne plus être mis à jour et n'était donc plus adapté aux exigences actuelles. Le flux de travail n'était plus intuitif ni facile à utiliser et ne correspondait donc plus à ce que nous défendons en tant qu'agence, avec pour vision « Nous simplifions la vie des gens ». 

Nous avons donc décidé de prendre les choses en main et de créer une application permettant de transformer des croquis sur papier en prototypes cliquables.

Nous avons déjà décrit dans cet article de blog consacré au développement interne de produits.

Pourquoi une solution sur mesure ?

En tant qu’agence numérique, lorsque l’on montre aux élèves comment naissent les bons produits, l’outil utilisé doit lui aussi être à la hauteur de cette exigence. La solution externe utilisée jusqu’alors ne l’était plus. Nous voulions un outil que nous puissions contrôler nous-mêmes, concevoir selon nos propres idées et adapté aux besoins de ce jeune public, et que nous puissions continuer à développer à long terme. Et une solution grâce à laquelle les élèves puissent repartir chez eux, à la fin de la journée, avec leur idée d'application sur leur propre appareil.

Les élèves commencent délibérément de manière « analogique » et dessinent les écrans de leur application sur papier. Cela leur offre un moyen simple et immédiat de visualiser leurs idées, sans avoir à se familiariser au préalable avec un outil de conception numérique. Grâce à Prototyper, ils peuvent ainsi créer un prototype interactif en quelques minutes. 

Ce faisant, les utilisateurs se penchent activement sur la logique de leur application et réfléchissent eux-mêmes aux écrans nécessaires, à leurs liens entre eux, à ce qui se passe lors d'une interaction et où celle-ci mène. Contrairement aux solutions qui génèrent automatiquement un prototype, ils doivent définir eux-mêmes ces liens. Ainsi, ils développent non seulement leur propre idée d’application, mais acquièrent également une meilleure compréhension de la structure et du fonctionnement des produits numériques.

Ce que permet l'application Prototyper

À première vue, les exigences semblaient simples. Mais à y regarder de plus près, elles n'étaient pas si évidentes que ça.

L'application s'adresse aux adolescents qui, pour la plupart, créent un prototype pour la première fois de leur vie. Ils n'ont aucune connaissance préalable. Ils ont peu de temps. Et ils veulent, au final, avoir entre les mains quelque chose qui ressemble un peu à une vraie application.

Concrètement, cela signifie qu'après une brève procédure d'intégration, les utilisateurs accèdent à un écran principal présentant un aperçu des projets. Ceux qui n'ont pas encore créé de projet peuvent s'y mettre en un clin d'œil grâce à des instructions claires : créer un projet, lui donner un nom, se lancer. 

Les croquis sur papier sont photographiés ou importés, recadrés à la bonne taille, puis reliés entre eux à l'aide de zones de clic librement définissables. Pour chaque interaction, il est possible de déterminer vers quel écran elle mène et avec quelle transition celui-ci s'affiche. En mode « Play », le prototype final peut ensuite être testé directement.

L'expérience utilisateur dans son ensemble est conçue pour offrir une prise en main aussi simple que possible et un processus clair, afin que les utilisateurs puissent se concentrer sur leur idée plutôt que sur l'outil.

Le design avant tout

Avant même d'écrire la moindre ligne de code, notre équipe de conception a planifié l'intégralité de l'application dans Figma. Quatre grands domaines ont été privilégiés : l'intégration, l'écran principal avec l'aperçu des projets, la gestion des projets avec l'aperçu des esquisses et ce que l'on appelle le « mode Play », dans lequel le prototype final peut être testé.

L'objectif était de concevoir chaque étape de manière suffisamment claire pour qu'elle soit compréhensible sans explication. Des libellés clairs, un bon contraste, un nombre réduit d'actions par écran.

L'interface de Prototyper est volontairement sobre. Une palette de couleurs épurée, une typographie claire, beaucoup d'espaces blancs et peu d'éléments visuels facilitent l'orientation sans faire concurrence au contenu proprement dit : les ébauches d'applications personnalisées des utilisateur·rice·s.

Mise en œuvre technique

L'application est une application iOS native, développée avec SwiftUI et Swift 6. L'expérience montrant qu'une grande partie des jeunes qui nous rendent visite utilisent iOS, nous nous sommes concentrés dans un premier temps sur cette plateforme. Une version Android est envisagée pour l'avenir. Nous générons le projet Xcode avec Tuist plutôt que de le maintenir manuellement, ce qui simplifie nettement la gestion de sa structure. Les localisations sont gérées via Localise.biz ; les textes ne sont donc jamais modifiés directement dans le code, mais toujours mis à jour via l'interface web.

L'un des principaux défis rencontrés lors de la mise en œuvre a été la fonctionnalité de recadrage des photos. iOS ne dispose pas d'origine d'un outil de recadrage qui impose le bon format d'image, permette un zoom libre et puisse s'adapter à notre identité visuelle. Nous avons donc intégré la bibliothèque open source SwiftyCrop et l'avons configurée avec notre palette de couleurs de marque. Résultat : lors du recadrage, les élèves voient exactement à quoi ressemblera leur croquis à l'écran.

Pour que l'application reste fluide même sur les appareils plus anciens, nous avons consacré beaucoup d'efforts au traitement des images. Chaque image est enregistrée en deux versions : l'originale et une version recadrée, afin de pouvoir la recadrer ultérieurement sans perte de qualité. Lors du chargement, une vignette s'affiche dans un premier temps, puis l'image s'affine progressivement. Le mode « Play » charge déjà l'image suivante en arrière-plan avant même que l'on n'appuie dessus.

L'application fonctionne entièrement hors ligne. Pas de compte, pas de serveur, pas de collecte de données, pas de dépendances. Les projets créés sont sauvegardés localement sur l'appareil.

Ce que nous avons appris

On sous-estime facilement le travail et le temps que demandent la conception et le développement d'un produit maison. Entre les activités quotidiennes et les projets prioritaires, il est difficile de trouver le temps de développer son propre outil en parallèle. C'est d'autant plus vrai lorsque les utilisateurs sont des adolescents, qui ont peu de patience et ne tolèrent guère les erreurs : la barre est haute. Il n'en reste pas moins gratifiant de résoudre un problème spécifique à l'aide d'un outil que l'on a soi-même créé.

La décision, dans ce cas précis, de commencer par la conception avant de passer à la construction nous a finalement fait gagner beaucoup de temps. Non pas parce que c'est forcément la bonne méthode pour tous les projets, mais parce que cela nous a permis d'identifier très tôt les points vraiment délicats.

Quelle sera la suite pour l'application Prototyper ?

Jusqu'à présent, nous avons pu utiliser Prototyper lors des premières journées d'initiation et nous avons hâte de voir comment l'application fera ses preuves auprès de groupes plus importants. Il est particulièrement précieux de pouvoir observer directement le public cible en train d’utiliser l’application lors de la journée nationale Futur en tous genres et des journées de découverte, d’obtenir un retour d’expérience immédiat et de pouvoir en tenir compte dans le développement futur de l’application.

Prototyper est né d’un besoin concret qui était le nôtre. Mais comme nous pensons qu’un accès simple et ludique au prototypage apporte une valeur ajoutée au-delà de nos journées Futur en tous genres et de découverte, nous avons rendu l’application accessible au public sur l’App Store. Si vous souhaitez essayer Prototyper, vous pouvez télécharger l'application iOS ici et vous lancer immédiatement.
Et si vous souhaitez transformer un prototype en un produit numérique complet, vous trouverez dans notre offre plus d’informations sur la conception, le design et le développement.