Lelivrescolaire, c'est un éditeur de manuel scolaires orientés autour de 3 valeurs clés, à savoir : l'innovation, le collaboratif, et la gratuité.

DESIGN SYSTEM

Ma première mission a été de construire le Design System de chez Lelivrescolaire (LLS, pour les intimes), tout en respectant l'écosystème dans lequel le produit était déjà inscrit. La création des manuels suit une chaîne de production qu'il faut respecter, et qui commence par le contenu éditorial. C'est le pôle Édito qui crée les contenus des manuels, en collaboration avec les directeurs d'ouvrages, les relecteurs, et autres intervenants, qui sont tous des professeurs. Une fois le manuel créé, il passe dans les mains de l'Édito numérique : ils s'occupent de faire une saisie numérique de l'ensemble des manuels. Enfin, c'est à ce moment que le pôle Produit intervient, en offrant un contexte de lecture et des fonctionnalités numériques avancées aux utilisateurs.

Cela signifie que l'usage de certains composants est déjà défini par l'Édito numérique, lui-même ayant reçu des contraintes de l'Édito. Ainsi, on peut y retrouver les composants classiques tels que les Buttons et les Option controls, mais il y en a aussi des plus spécifiques comme les Sheets qui permettent de voir la copie d'un autre élève au sein d'un manuel, ou les Quote pour citer un auteur. Ce n'est pas moins de 37 molécules et 20 organismes que l'on retrouve dans ce Design System (sans parler de la Librairie et des Templates) !

L'ESPACE PREMIUM

En parallèle du cycle de vie du Design System, le Produit prenait deux formes : une version gratuite disponible gratuitement pour tous nos utilisateurs, et une version premium qui offre des fonctionnalités clés en main et des ressources exclusives. Une des premières problématiques qui s'est présentée à moi a été le fait que nos utilisateurs se limitaient à la version gratuite. Pour ceci il a fallu revoir notre page d'accueil et les arguments de vente que nous mettions en avant, la manière dont la plus-value du premium était perçue par nos utilisateurs, mais aussi trouver comment limiter l'expérience gratuite. Ce retravail était aussi l'occasion de revoir l'expérience de navigation au global et les fondements de notre aspect collaboratif. Évidemment, chaque solution est pensée pour tous les supports à la fois que nous pouvions retrouver en classe, à savoir : le Desktop, la tablette mais aussi le mobile.

ONBOARDING

Quand bien même le produit est destiné à des professeurs, ce sont les chefs d'établissement qui s'occupent des bons de commande. En effet, les professeurs se regroupent chaque années aux mois de mai et d'août, afin de savoir vers quel éditeur leur établissement va se diriger, avant d'aller voir le chef d'établissement pour donner leur verdict final. Ainsi, on retrouve des Espaces Numériques de Travail (ENT) qui centralisent tout pour les élèves et les professeurs. Leur connexion à notre produit n'est donc pas directe : il y a un intermédiaire qu'il faut prendre en compte. C'était donc l'occasion de revoir le processus de connexion dans son entièreté, et l'expérience d'Onboarding.

LES CLASSIQUES

Chez Lelivrescolaire, nous nous sommes lancés sur les Classiques de la littérature. C'est une collection d'ouvrage construite par plus de 50 professeurs qui façonnent les contenus, donnent leur avis, partagent leurs idées, et imaginent les outils numériques indispensables à leur pratique.

EXPLORATEUR DE RESSOURCES

Tout en assurant la vie de notre Produit et la maintenance du Design System, nous identifions des opportunités d'évolution à travers l'amélioration continue. Pour planifier ces évolutions, nous mettons en place des ateliers d'idéation au sein du pôle Produit, où chaque intervenant peut se lancer sur un sujet qu'il pressent et ce durant une semaine (voire deux) complètes. C'est comme ça qu'est né l'Explorateur de ressources : un outil de navigation intelligent permettant de trouver une ressource, et d'autres qui lui sont connexes.

L'ESPACE PRIMAIRE

Comme je vous l'expliquais plus haut, l'éducation est un environnement très changeant. Nous sommes dépendants des établissements et des professeurs, et notre période commerciale ne s'étale que sur deux mois dans l'année. Cependant, les annonces du gouvernement peuvent aussi influer sur notre activité, comme c'était le cas avec les nouvelles réformes du ministre de l'éducation. C'était l'opportunité pour nous d'aller sur un nouveau marché : le Primaire.

Plusieurs projets ont alors vu le jour : un Design System et sa charte graphique dédiée, un espace Primaire où les professeurs peuvent retrouver tout ce dont ils ont besoin, et enfin les contenus comme le manuel des élèves, le guide pédagogique, les différents cahiers d'exercices et les ressources qui vont avec.

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

Un design system est une bibliothèque de principes et de règles qui définissent l'aspect et la manière dont se comporte un produit ou un ensemble de produits.

Design system isn't a project. It's a product serving products.

Nathan Curtis, co-fondateur @EightShapes.

LE PROJET

Lors de ma dernière prise de poste, l'objectif de ma mission a été la création d'un design system dans un contexte de production et d'acquisition de multiples produits digitaux. Sa mise en place a permis entre autres d'accélérer les phases de conception et de développement grâce à un ensemble de ressources homogènes, avec leurs comportements et règles de gestion.

Contexte : au sein du pôle Product Design, j'ai participé à la mise en place du design system (jusqu'à la version 1.8.1) en me rapprochant des parties prenantes, coordonné son évolution en favorisant la collaboration, et cadré les besoins et demandes qui y étaient directement liées. Un effort particulier à été apporté à l'évangélisation du design system, à la définition de sa roadmap ainsi qu'à l'ergonomie des différents composants.

LE DESIGN SYSTEM

Ce Design System a été construit sur la base de Material Design (le design system de Google) et sur les principes de l'Atomic Design de Brad Frost. Ces approches nous ont permis de normer les échanges avec les équipes de développement et de gagner en productivité. Nos expertises UX et UI deviennent alors le parfait liant entre ces deux univers.

L'ÉVOLUTION GRÂCE À UN CAS CONCRET

Voici un exemple concret d'évolution d'un produit grâce au Design System. Il s'agit d'un portail de déclarations fiscales pour les entreprises, dont on peut voir la transformation "Avant – Après" :

PROTOTYPAGE – L'OUTIL LE PLUS ADAPTÉ

La mise en place du design system se faisant, nous devions aussi penser à notre workflow. Une des grandes problématiques que nous rencontrions était la manière de récolter des feedbacks utilisateurs lors de tests sans que ceux-ci ne soient altérés par la qualité du prototype. Ainsi, j'ai effectué une étude sur les différents outils qui existent que vous pouvez consulter via le lien suivant :

Consulter le document

LE JEU DE CARTES

Étant dans une grande structure, l'évangélisation du design system et de notre workflow était primordiale. J'ai donc créé un jeu de cartes afin d'expliquer aux différentes parties prenantes quels sont les objectifs et les avantages d'un design system.

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

À l'approche du ramadan de l'année 2019, des millions de fidèles en France se préparent à jeûner. Dans ce contexte, il est important qu'ils puissent trouver facilement les mosquées aux alentours afin de pouvoir faire les cinq prières journalières, ce qui n'est pas toujours facile quand le quotidien est partagé entre son domicile, les transports et son lieu de travail.

Pour répondre à cette problématique, Mawaqit sort une application qui permettra à n'importe quel utilisateur de localiser les mosquées autour et d'être notifié pour chacune des cinq prières (chaque notification peut être affectée à une mosquée différente).

LOGO & PICTOGRAMMES

Afin d'être le plus lisible possible, un réel travail de fond a été effectué sur les pictogrammes, aussi bien sur ceux qui sont de nature indicative que ceux qui permettent de naviguer. Le logo a aussi subit beaucoup d'itérations, avant d'évoluer vers sa version florale. Celle-ci représente une une horloge dans une Onagre bisannuelle : une fleur qui s'ouvre lors de l'appel à la prière.

ONBOARDING & ARBORESCENCE

L'APPLICATION

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

Durant l'année 2017, j'ai travaillé pour le groupe Colgate-Palmolive et ait rejoint la start-up Kolibree. Je les ai accompagnés sur leur projets Ara et Magik : deux brosses à dents connectées. La première est à destination des adultes et l'autre des enfants. L'objectif principal est d'instaurer de bonnes habitudes de brossage pour palier les éventuels problèmes.

Peu avant mon arrivée, Kolibree a été acquise par le groupe Colgate-Palmolive, leader et spécialiste incontesté de l'hygiène buccale. Ils ont participé aux orientations des choix et mes livrables les ont grandement séduit. Ces derniers leur étaient soumis en continu avant validation, et un représentant du siège venaient toutes les deux semaines travailler avec nous dans nos locaux.

L'APPLICATION ARA

Ara, c'est donc une brosse à dents munie de capteurs (gyroscrope, accéléromètre, etc.) qui peut se jumeler avec une application smartphone. Cette dernière se range dans la catégorie quantified-self et permet de mesurer la qualité de vos brossages, vos progrès dans le temps, votre assiduité, les zones brossées et même la durée de chaque brossage ! L'application est aussi munie d'un coach et de jeux, et a été développés sur smartphone (iOS & Android) et sur smartwatch. Voici un extrait de l'ensemble des écrans :

Comme mentionné précédemment, Ara a aussi vue le jour sur Smartwatch. Le document est consultable ici :

Consulter le document

L'APPLICATION MAGIK

L'homologue Magik utilise une technologie un peu différente : la reconnaissance d'image. Cette brosse à dents se vend à un prix réduit et est accessible au plus grand nombre. En plaçant un embout particulier, on offre aussi aux enfants la possibilité de personnaliser leur brosse à dents. Une application embarque la technologie et rend l'activité fun en laissant place à la "collecte de masques" : un des nombreux mini-jeux dans lequel l'enfant va pouvoir évoluer. À chaque fin de brossage, les enfants peuvent se prendre en photo en arborant le masque qu'ils venaient de gagner ainsi que leur plus beau sourire. Les parents ont un espace dédié où il est possible de consulter les statistiques de ses enfants.

LA PLATEFORME KOLIBREE PRO

Nous étions en collaboration avec beaucoup de dentistes à travers toute l'Europe. Ils conseillaient la brosse à dents Ara aux patients qui en avaient besoin, et pouvaient observer leur évolution sur une plateforme qui leur était dédiée. Cette plateforme, c'est Kolibree Pro.

LE SITE COLGATE CONNECT

Cette plateforme a destination du groupe Colgate-Palmolive sert à présenter les nouveaux produits ainsi que ceux à venir. Il possède aussi une partie blog afin d'informer, et une partie boutique pour faire ses achats en ligne.

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

LE PROJET

Elements est une nouvelle boisson explosive ! Ce projet de communication couvre énormément de supports différents. L'objectif est de concurrencer les plus grands mondiaux à savoir Red Bull, Monster ou encore Burn.

LOGO & AFFICHES

CARTON D'INVITATION, PACKAGING & VOILIER

DOSSIER DE PRESSE

Enfin, le dossier de presse était un des supports les plus amusants à faire ! J'ai dessiné des maquettes de mises en pages sur un carnet afin de rythmer chaque page avec des éléments graphiques, de jouer avec les titres, et de mettre en avant certains mots-clés pour donner du dynamisme à l'ensemble.

Consulter le dossier de presse version n°1

Consulter le dossier de presse version n°2

Consulter le dossier de presse version n°3

Consulter le dossier de presse version n°4

CHARTE GRAPHIQUE

Avec le développement du projet, j'ai pu établir une charte graphique qui reprenait les différents éléments et qui explicitait les règles d'usage du logo.

Consulter la charte graphique

Elements est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

LE PROJET

Création de deux écrans pour un jeu de simulation automobile réaliste pour console, à savoir l'accès à une course solo et le sélecteur de véhicule.

LES INTERFACES

Ce document contient toutes mes pistes de réflexion UX et UI, ainsi que les derniers écrans.

Consulter le document

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

LE PROJET

L'objectif de ce projet est le passage du journal quotidien Libération aux supports numériques. Il fallait mettre en place un e-magazine d’information hebdomadaire qui permette de créer une expérience personnelle et qui soit vraiment proche de l'utilisateur. Il a donc fallu étudier l'histoire du journal, son organisation, les lecteurs et potentiels lecteurs, la concurrence, et avoir une réelle approche d'UX Designer. De plus, l'identité graphique de Libération est vraiment très forte et il fallait la conserver pour que la marque reste reconnaissable et que les usagers actuels n'aient pas l'impression de lire un autre éditeur.

L'APPLICATION POUR SMARTPHONES & TABLETTES

LE SITE WEB

Le document qui suit contient toutes les phases du projet. Il présente les interfaces, mais aussi toutes les démarches UX : le champ de recherche (Empathize) et le concept (Ideate), et y introduit les personas (Define) et de nouveaux wireframes et design (Prototype).

Consulter le document

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

LE PROJET

L'idée de ce Media Picker est de donner la possibilité à un utilisateur de joindre des fichiers à son post lors de sa publication. Cela implique qu'il doit aussi avoir une interface qui regroupe tous ses espaces de stockage, comme celui de son entreprise ou encore son Google Drive.

LES INTERFACES

ARBORESCENCE

Ce document contient l'ensemble des pistes de réflexion UX, le brief ainsi que les interfaces finales :

Consulter le document

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

LE PROJET

Anciennement "Souffle", "Damoclès" est une installation faite pour sensibiliser les gens sur la qualité de l'air de Paris. Composée d'un gonfleur électrique et d'un ballon, l'objectif est de représenter de manière tangible et sensible quelque chose de non-palpable et d'invisible.

Ce projet a été exposé à la Maison des Arts de Créteil, puis à la Galerie Joseph pour les Designers Days !

COMMUNICATION & INSTALLATION (1e VERSION)

COMMUNICATION & INSTALLATION (2e VERSION)

L'installation présente la pompe, l'électro-vanne, un cathéter qui achemine l'air, et une pièce 3D qui maintient le ballon dans le socle

Test en posant un écran à led, pour voir ce qu'envoyait exactement Processing à Arduino

Le document qui suit présente le projet :

Consulter le document

Damoclès est la propriété de ses auteurs, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans leur accords préalables et explicites.

LE PROJET

frost&snow est un projet qui a pour ambition de réinstaurer les camions de glaces dans les villes comme on le faisait à l'époque. Il est bien entendu présent sur les supports digitaux, et viens aussi s'inscrire dans différents événements. Un des principaux points de différenciation réside dans la composition des pots, qui peuvent accueillir entre deux parfums des pétales d'amandes ou d'autres suppléments. Une fois n'est pas coutume, j'ai travaillé avec Justine Gaudin sur ce projet.

LOGO, SITE WEB & ÉLÉMENTS DE COMMUNICATION

Ce document contient plusieurs pistes : une étude de la concurrence de laquelle on en déduit la cible et nos USP (Unique Selling Points), une moodboard, des wireframes et quelques éléments graphiques.

Consulter le document

frost&snow est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

LE PROJET

Wethere, combinaison des mots "We" et "There" (se rapprochant du mot anglais "Weather") est une application météo qui se veut claire et lisible au premier coup d'œil. La simplicité de son interface lui permet de s'adapter sur tous les types de supports, quelqu'ils soient. Nous avons abordé ce projet en binôme : Justine Gaudin et moi-même.

WIREFRAMES & PICTOGRAMMES

MAQUETTES

Le document qui suit contient les classiques benchmark et moodboard, les wireframes ainsi que les interfaces finales. Il y a aussi une interview d'Achraf Chouk, spécialiste du responsive web design !

Consulter le document

Wethere est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

LE PROJET

Souvenirs d'eau est une installation interactive qui questionne l'expérience du "home cinéma", et plus particulièrement des souvenirs qui s'en dégagent. Divisé en deux termes, le "home cinéma" est la possibilité de (re)vivre l’expérience sonore et visuelle du cinéma chez soi, dans notre bulle de confort. En effet grâce aux avancées technologiques, nous pouvons maintenant recréer le dispositif du cinéma dans notre environnement personnel. Les usages que les gens avaient du cinéma ont donc changés ; cette expérience prend place en un lieu et temps choisi par l’utilisateur, mais surtout sur un support qui est aussi défini par ce dernier. Nous avons de plus en plus de contrôle sur ces installations, mais nous sommes aussi plus sujets aux stimulus extérieurs et donc à des "ruptures" ponctuelles de ces expériences. De ce fait, les émotions attendues et supposément ressenties sont amoindries, et les souvenirs que nous avons de ces expériences s’estompent au fil du temps ...

Pour réaliser ce projet, nous étions deux : Justine Gaudin s'est occupée de choisir les films et d'appliquer le traitement post-vidéo à l'aide d'Adobe Première. Pour ma part, je me suis occupé du développement du projet sous Processing. Nous avons établi le concept ensemble et choisi la technologie qui nous semblait la plus dans nos moyens et la plus optimale.

PLAN

INSTALLATION

CONCLUSION

La Maison des Arts de Créteil est aussi venue nous rendre une petite visite pour filmer notre installation ! Elle a servie pour le teaser du festival EXIT qui avait lieu du 26 mars au 5 avril 2015. Tous nos travaux avaient été très appréciés et quel honneur de recevoir des compliments de la part de tels professionnels !

Souvenirs d'eau est la propriété de ses auteurs, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans leur accords préalables et explicites.

LE PROJET

L'objectif est d'illustrer la collection "Performances" d'Arte. Il s'agit de performances artistiques théâtrales, d'opéra ou de danse, qui nécessite aussi bien de la rigueur et que de la souplesse. Aucune contrainte n'est imposée, mis à part le fait qu'il s'agisse d'une collection. Le but est d'apporter un côté sensible à travers le graphisme, qui rejoint l'univers de la collection d'Arte (dans la mesure où il s'agit de performances artistiques et où l'émotion est omni-présente). L'aplat rouge représente la scène et la vivacité de cet espace, auquel vient s'ajouter une barre noire oblique. Cette barre est à l’image des contraintes des acteurs sur scène, tandis que l'idée de collection s'établit aussi à travers la couleur : le rouge représente ici la pomme de "Blanche-Neige", tandis que le bleu symbolise la pièce "La Pietra del Paragon".

Petite particularité, cette pochette à l’instar de celle de "The Dark Side of the Moon" du groupe Pink Floyd, est interactive. Lors d’un contact des doigts de l’utilisateur avec celle-ci, des lumières "s’échappent" et viennent se balader sur la pochette de différentes manières en fonction du type de l'œuvre. "Courbée" pour une pièce de danse, à l'image des mouvements des acteurs, "Rectiligne" pour une pièce de théâtre, de la même manière que le drame que l'on peut ressentir, et enfin avec l'apparition de "Cercles" pour une pièce d'opéra, afin de symboliser l'onde de la voix et sa portance. De plus, les lumières représentent aussi les acteurs : dès lors qu'ils apparaissent, la barre oblique s'illumine transformant par la même occasion les contraintes en atouts dynamiques et créatifs. Cette prouesse est à l’image de la modernisation des pièces, et montre avec quelle grâce la technologie a pu s'incorporer dans ces œuvres.

Un livret qui contient l'histoire originale de l'œuvre qu'elle représente, des informations sur l'auteur, d'autres sur l'équipe, etc. est également founi avec le CD. Celui-ci est consultable ici :

Consulter le Livret

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

JEU

Ohayo est disponible en téléchargement ici, et sur le site de la Global Game Jam !
(Lancez "index.html", de préférence sous Firefox)

LE PROJET

Ohayo est ma toute première participation à une game jam et ce n'est pas n'importe laquelle puisqu'il s'agissait de la Global Game Jam 2016 ! Le thème de cette édition était "Rituel". C'est un jeu narratif dans lequel le joueur doit délivrer la protagoniste principale de sa routine Metro/Boulot/Dodo. Un des gros points forts d'Ohayo résidait dans l'absence d'interface (non-diégétique ou méta), qui permettait au joueur de se focaliser sur la scène au rythme très lent, très narratif : l'objectif était d'immerger le joueur. Cependant, qui dit absence d'interface dit aussi potentiel manque de compréhension, ce à quoi il fallait faire attention. Un autre concept fort du projet était l'enchaînement d'événements. Si le joueur découvre un élément dans le décor, cela peut avoir une incidence sur le reste. Par exemple, l'activation d'une lampe sur le bureau ferait apparaître le chat qui, en s'enfuyant de l'appartement, pouvait faire tomber une boîte en carton. Ces événements là sont déclenchés par le joueur mais d'autres pouvait surgir de façon indépendante de sa volonté. Par exemple, notre héroïne pouvait rentrer de son travail plus tôt que d'habitude et accompagnée. Les possibilités étaient infinies, mais par manque de temps nous n'avons pas pu l'implémenter. Enfin, un troisième point qui était très amusant : induire des éléments de storytelling via le graphisme. Si vous faites bien attention lorsque vous jouez, le calendrier indique le "31 Février" ce qui est une date qui bien évidemment n'existe pas. À chaque fois que l'héroïne fini une cycle (une journée), elle donne des indications sur les éléments manquants et tant que vous ne les avez pas tous découverts, la date reste la même. Une fois que vous avez complété le jeu et trouvé tous les objets, vous passez au "1 Mars" délivrant l'héroïne de la boucle temporelle dans laquelle sa routine la coinçait !

ASSETS

DIVERSIFIERS

Lorsque l'on participe à une game jam, il y a parfois des objectifs optionnels qu'il est possible d'accomplir. Ohayo a débloqué les suivants :

• Gandhi's Game: Le jeu ne doit avoir zéro violence dans le gameplay. Les conflits doivent être résolus par la logique.
• One hand tied behind my back: Créer un jeu qui n'est jouable qu'avec une main. Sur mobile, une seule et même main doit tenir et jouer à la fois, c'est-à-dire jouable uniquement avec le pouce. Sur ordinateur, la souris ou le clavier seulement.

Ohayo est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

LE PROJET

Le principe de Speed Phoner est simple : il vous permet de joindre une autre personne au téléphone sans jamais échanger vos coordonnées ! Le service transforme votre numéro de téléphone en un lien (possiblement éphémère) cliquable sur Internet que vous partagez ensuite avec la ou les personnes de votre choix. Ces dernières peuvent alors vous contacter en cliquant sur le lien.

L’objectif numéro un est de faciliter la rencontre, le contact et de rapprocher les gens en favorisant l’interaction sociale des utilisateurs sur des secteurs à forte croissance comme la consommation collaborative, la rencontre ou encore les petites annonces. De plus, Speed Phoner se présente aussi comme LA solution au cyber-harcèlement !

LOGO & COMMUNICATION

SPEED PHONER - SITE VITRINE

SPEED PHONER - PAGE PROFIL

SPEED PHONER - INTERFACE UTILISATEUR

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.