Makers Stories : la genèse d’une appli collaborative
Si vous lisez cette story, vous êtes soit sur l’application Makers Stories, soit sur Medium. Vous êtes peut-être un Maker, ou pas, un esprit littéraire ou au contraire purement matheux. Qui que vous soyez, bienvenue dans cette nouvelle aventure, qui fait collaborer et co-construire des personnes issues de tous horizons, pendant des jours, des mois, sur un projet qui leur tient à coeur : celui de créer une communauté curieuse et bienveillante, à la recherche d’idées et d’outils novateurs et qui souhaitent le partager au plus grand nombre.
Créer une plateforme “Makers Spirit”
Depuis 2014, emlyon business school a lancé une démarche “Early Makers” au cœur de son identité, de sa stratégie et de sa pédagogie. Un “Early Makers”, qu’est-ce que c’est ? C’est “un individu capable de prendre en main son destin, d’être acteur et entrepreneur de son existence, dans une démarche collaborative, en passant du “Do it Yourself” au “Do it Together”. C’est un innovateur qui concrétise ses projets.”
Je ne sais pas pour vous, mais chez BEWIZYU, ça nous parle…
Depuis quelques mois, nous travaillons avec emlyon business school et My Lucky Day à positionner l’école comme un média, par le biais d’une plateforme mobile. Cet outil collaboratif, à destination des Makers mais aussi des professionnels et étudiants, doit permettre d’écrire des ‘stories’ et de les consulter tout en proposant une expérience utilisateur innovante. Finalement, quoi de plus logique, que de s’appuyer sur une référence actuelle du marché : Medium afin de bénéficier des fonctionnalités de contributions ?
Je vous propose donc un petit retour d’expérience UX/UI sur cette aventure, qui nous a amenés, les équipes d’emlyon business school, My Lucky Day et BEWIZYU, à concevoir une application mobile : « Maker Stories ».
La story, une histoire de format
J’ai “commencé” par un benchmark des applications mobiles proposant un contenu de type news ou stories, impliquant ou non une communauté, du partage de contenu collaboratif et j’ai aussi regardé du côté de la personnalisation (et à quel niveau était-elle proposée).
J’aime ce moment, même s’il est très chronophage, car il permet de s’immerger dans des usages spécifiques. Certes, le domaine de l’actualité ou des stories ne nous est pas inconnu, mais cela reste un moment de découverte, de tests. L’étape de présentation du benchmark permet aussi de clarifier les besoins du client, de le lier à leur existant. On identifie alors un peu plus clairement le périmètre de l’application mobile.
Ce fût aussi l’occasion de proposer des wireframes afin de valider quelques pistes : le principe de floating button, la navigation par bottom bar et quels types d’entrées…
Le point motivant de ce projet, c’est que le staff d’emlyon business shool est demandeur d’interfaces et d’interactions “innovantes”. Sans aller jusqu’à révolutionner les usages, à minima proposer un parcours engageant, émotionnel. Finalement un lien plus organique avec le contenu, comme un Maker peut l’expérimenter au coeur d’un projet.
Conception ? Design ? Ideation ? Les trois, mon capitaine !
En parallèle des premiers écrans à concevoir, je me suis attelée à la charte graphique, dans le respect du branding de l’école. L’identité graphique des Early Makers est minimaliste, simple et construite en système modulaire. La simplicité au service d’un message fort. J’ai travaillé le logo de l’application, la charte graphique et les interfaces, en gardant à l’esprit cette idée de simplicité. Pour le logo, l’idée de transmettre de prime abord, l’aspect “story” était évident…
Les visuels font partie de l’ADN de la marque, et cumulés au contenu intrinsèque de l’application, il fallait bien évidemment leur trouver une place de choix. Que ce soit lors de la connexion, de la Home, d’une story, du profil et même lors de la redirection vers Medium. Avec ou sans filtre, le visuel est là. Il illustre, apporte une émotion, une information.
La Home, écran qui cristallise tous les fantasmes… et rend donc l’étape de conception la plus complexe.
Mes premières pistes de réflexion autour de la home et de la navigation, étaient soit de proposer un header simple avec accès par thématiques de story, soit une navigation par “story card” (si finalement les thématiques n’étaient pas retenues). L’idée était surtout de proposer une autre vision des contenus, différente de celle des médias type Le Monde ou même Médium.
Pour répondre au besoin d’accessibilité du pouce depuis la Home, le floating button, la bottom bar ou encore le scroll m’ont semblé évidents, puisque sur smartphone, ce dernier et la zone qui l’entoure, nous sert à interagir. Concevoir l’ergonomie autour de ce principe d’interaction est un must-have pour faciliter la prise en main d’une application ou d’un site mobile.
Autre élément devenu “indispensable” notamment dans la lecture d’une story ou d’un article : la notion de temps de lecture ou en tout cas d’avancement. On est en mobilité, on passe notre temps à courir après … le temps, donc autant le savoir en un coup d’oeil !
Et puis, tant qu’à gagner du temps, autant gagner aussi de l’espace. Les écrans de smartphone ne permettent pas de tout afficher. C’est pourquoi il est préférable d’aider l’utilisateur si l’interaction est “cachée”. C’est le cas du swipe, utilisé pour passer d’une story à l’autre. Une petite animation est proposée dans le parcours si le swipe n’a pas été découvert lors de la phase d’appropriation.
Les outils de prototypage
Pour partager les écrans, les interactions et les différents parcours, avec emlyon business school nous avons opté pour Marvel. La prise en main est très simple et les interactions proposées sont basiques mais efficaces. En revanche, avec les équipes de devs My Lucky Day, je me suis greffée à leur compte Invision, que j’affectionne aussi beaucoup (plus collaboratif que Marvel, le freehand est très “ludique””). On ne va pas se mentir, mettre à jour deux plateformes lorsque le nombre d’écrans devient de plus en plus conséquent, avec des retours (itération), ça fait beaucoup, et ce point fait partie des “axes d’amélioration”.
Voilà ! “Mes” écrans conçus sous Sketch pour Makers Stories volent désormais de leurs propres ailes. Maintenant, va se jouer le retour ultime de tout travail de designer : la prise en main par les utilisateurs finaux ! Et ce sera le début d’une histoire, entre vous et nous, que l’on souhaite longue et surtout vivante !
