Ce portfolio est pensé pour un écran d'ordinateur. Le mobile c'est chouette mais pour montrer du design, rien de mieux qu'un écran avec un peu d'espace. Vous voyez donc une version simplifiée.

Rémi Garcia

Strategic Product Designer

Poser les bases
Porter un point de vue
Pimper le quotidien

... L’utilisateur répond. (Et parfois avec humour)

Donner un visage et une voix au produit pour le faire oublier et construire une relation en pensant tout le parcours comme un dialogue.

 

On choisit son coach, il ou elle parle…

Speechlab

Avec Speechlab, Fastlane Education voulait aider les 15-25 ans à prendre la parole en public de la façon la plus autonome possible grâce à une IA vocale pour évaluer la progression.

Mais cela peut vite ressembler à une suite d'exercices qu'on enchaîne sans grand plaisir.

Produit racheté par Projet Voltaire, LA référence de l’apprentissage de la langue française, avant même qu’il soit officiellement sorti.

Trois écrans de Speechlab : le début d’un module, une explication et la fin du module, avec le coach illustré
PRO

FastR, SFR

FastR est le logiciel des conseillers du service client SFR. Vieux de plus de 10 ans, il a besoin d’un coup de jeune et surtout d’être plus accessible afin de réduire les erreurs.

Après un premier lifting, il fallait traiter le problème des erreurs et du manque d’autonomie pour éviter l’aliénation du script décisionnel due à une formation trop légère et un turnover important.

La nouvelle interface de FastR : fiche client, forfait, suivi de ligne et recherche de la demande du client

... L’interface s’adapte pour n’afficher que les blocs utiles et lui propose des solutions pour répondre à la question

Le conseiller tape la question du client...

FASTR avant
la refonte

PRO
FastR avant la refonte

Beneylu School

Beneylu School est un espace numérique de travail spécialisé pour les écoles primaires.

En face, des concurrents sérieux, purement fonctionnels, et pas franchement engageants pour des 8-12 ans et leurs professeurs.

Une quinzaine de modules créés (du blog à la boîte mail en passant par la messagerie ou un gestionnaire de documents).

Utilisé par plus de 50k classes en France

Des activités et des mini-jeux éducatifs pour rendre l’expérience encore plus fun.

Une ergonomie basée sur quelques principes d’interactions :

 

  • Une zone de contenu à droite,
  • une colonne pour naviguer
  • une barre en haut de l’écran pour les actions.

Chaque module est thématisé et possède son propre univers graphique illustré

Le module messagerie
Le module blog de Beneylu School : navigation à gauche, contenu à droite, actions en haut
PRO
Un module illustré
Un mini-jeu de calcul mental

Muyu

Muyu est une expérimentation personnelle qui explore comment ressentir le temps autrement.

Tester muyu

... et l’année par les saisons qui défilent.

L’heure est donnée par des variations colorimétriques qui simulent la course du soleil ...

Muyu au fil des saisons
Muyu, l’heure par la course du soleil
L’horloge de Muyu

Blindternet

Blindternet est une expérimentation personnelle qui part du constat que l'accessibilité numérique prend souvent pour point de départ des designs pensés pour les personnes valides et qui sont adaptés après coup pour les autres.

Tester Blindternet

Une télécommande et la voix pour tout piloter.

Une interface vibe codée qui simule une navigation internet 100% audio basée sur une structuration différente des contenus

L’interface de Blindternet : « Vous pouvez consulter. » et la barre de commandes
La structure des contenus en colonnes

Je m’appelle Rémi Garcia et je conçois des produits numériques depuis 2009.

Je suis spécialisé dans le lancement et la refonte de projets. Avec pour missions d’explorer les possibles et poser les bases, de la vision à l’expérience.

Ma méthode : le pra-gma-tisme. Se focaliser sur l’essentiel pour que ce soit le plus efficace possible pour tous.

Je crois qu’un bon design, c’est avant tout un point de vue, à la jonction de la vision et des valeurs business, une expérience engageante et la volonté d’améliorer concrètement le monde.

Majoritairement solo designer, j’ai exercé une bonne moitié de ma carrière dans l’EdTech mais j’ai également pu me frotter à d’autres secteurs comme, entre autres, l’automobile (usagers et professionnels), les RH, le e-commerce ou la relation client.

Mais concrètement,
sur quoi puis-je aider ?

Six étapes reviennent régulièrement au fil des projets que j’ai effectués
et qui me permettent de tenir mon rôle de 0 à 1

01 - Cadrer l’intention générale

Un bon design commence toujours par une vision claire d’où on veut aller et pourquoi on fait les choses. Et comme c’est un objectif collectif, je questionne, je guide, j’ouvre des pistes pour mieux en fermer d’autres. J’engage des ateliers pour construire le consensus, des entretiens pour comprendre le contexte des utilisateurs.

Mais règle importante : je ne fais de recherche que si elle aide vraiment à décider.

Trouver la voie qui satisfait tout le monde - Speechlab

Des ateliers pour choisir le sujet, puis pour se rassembler sous une vision commune : chacun raconte l’expérience qu’il imagine en une dizaine de post-it, puis on explore les fonctionnalités, les modèles économiques (licence, abonnement, achat unique) et les publics (scolaire, missions locales). En parallèle, les grandes intentions de l’entreprise : quelle ambition à 20 ans, combien de produits, sur quelles compétences.

Il en est sorti la contrainte qui a guidé tout le reste : une expérience qui dure dans le temps, mais qui peut se boucler en deux ou trois semaines dans une classe selon l’organisation de l’enseignant.

Les post-it de l’atelier de vision Speechlab

Mieux comprendre les enjeux - Studizz

L’intention de Studizz était de construire un outil de gestion de la mobilité interne en entreprise. Alors que l’on partait avec l’intuition que l’outil devait permettre de mieux gérer les évolutions de carrières des salariés, on s’est vite aperçu, suite à des entretiens auprès de responsables des Ressources Humaines, que le besoin était avant tout un outil d’anticipation : gérer au mieux les effectifs dans le temps et prévoir les besoins futurs selon les décisions stratégiques de l’entreprise.

Identifier le vrai problème - Rue du Commerce

Initialement mandaté pour structurer l’équipe design et apporter des corrections rapides au parcours d’achat, j’ai vite compris que le diagnostic méritait d’être interrogé : les ajustements à faire étaient en réalité mineurs.

J’ai donc décidé de mener une phase de recherche : examen des parcours utilisateurs et des habitudes de navigation, connaissance client par les différentes BU, analyse du chiffre d’affaires, des retours clients, test de notoriété.

Il est apparu que le problème était ailleurs : une marque peu connue en dehors de ses habitués, une marketplace qui causait plus de problèmes qu’elle ne rapportait, une acquisition trop agressive.

Les recommandations étaient claires : recentrage sur les catégories historiques (électronique, informatique, high-tech et domotique), offre simplifiée, rebranding. Des recommandations qui ont été appliquées suite au rachat de Rue du Commerce par ShopInvest (propriétaire des 3 Suisses). Puis la cession à LDLC, spécialiste de la vente d’informatique en ligne, a fini de démontrer leur pertinence.

02 - Explorer les possibles

Au fil des projets, on m’a souvent confié de la recherche conceptuelle.

Le but : explorer les possibles pour montrer plutôt que décrire. Une maquette de la version future ouvre la discussion mieux qu’un document : chacun voit ce qu’on peut faire, et peut réagir. Des versions différentes permettent de voir l’étendue des options et de statuer autrement. Et aujourd’hui, un prototype vibe codé permet d’aller plus loin : le tester en vrai.

Imaginer un nouvel usage - Renault

Au sein d’une équipe design internationale pour l’alliance Renault-Nissan-Mitsubishi, qui travaillait sur un générateur d’applications mobiles connectées aux véhicules des marques, j’ai été missionné par le responsable de la branche Véhicule électrique, pour imaginer un concept d’application dédiée.

J’ai proposé, pour des véhicules ne pouvant déployer qu’une centaine de km d’autonomie, un concept basé sur la navigation intelligente permettant d’organiser ses trajets et de les adapter aux besoins du conducteur.

Imaginer le e-commerce du futur - Rue du Commerce

La direction voulait donner un nouveau souffle à la marque. J’ai donc lancé un chantier exploratoire avec tout le pôle design, designers et PO. D’abord un atelier de design prospectif, avec une seule consigne : « Imaginez le e-commerce de demain ». Chacun a planché de son côté, puis on a mis les propositions en commun pour repérer les concepts et les fonctionnalités les plus prometteurs.

Restait à leur donner une direction. Quelques mois plus tôt, la direction avait défini huit valeurs de marque, chacune incarnée par un mot. Mais un mot s’interprète de mille façons. Avec l’équipe et quelques membres des directions, on a transformé chaque valeur en une phrase activable, pour en faire un manifeste. Puis, le long de l’experience map du parcours client, on a cherché pour chaque valeur les fonctionnalités qui l’incarnent.

Dernière étape : un toolkit des éléments retenus, à partir duquel l’équipe a prototypé son site idéal. Le chantier s’est arrêté avec le rachat de Rue du Commerce par ShopInvest.

Photos de l’atelier de design prospectif

Trouver une nouvelle direction - Woonoz

À l’occasion d’un appel d’offres et au moment où l’équipe de Woonoz voulait redonner un coup de fouet à son produit, on m’a demandé de travailler à une refonte de la solution. L’enjeu était double : convaincre en interne pour obtenir du budget face à Projet Voltaire, le produit phare de l’entreprise, et impressionner un prospect. J’ai donc agi en deux temps.

D’abord en interne en proposant une exploration des possibles afin d’ouvrir la discussion sur la suite à prendre. Après avoir analysé ce que faisait la concurrence, qui se focalisait sur la génération de parcours de formation en IA, j’ai voulu proposer des approches générales ou expérientielles différentes de ce qu’ils avaient imaginé jusqu’à maintenant.

Puis en développant la vision choisie de l’adaptation dynamique des parcours et du catalogue pour la tester durant l’appel d’offres.

La proposition a plu, mais nous n’avons pas été retenus : l’écart avec la version actuelle et la taille de l’équipe (un développeur) leur ont fait craindre de ne jamais être livrés à temps. En interne, cependant, les évolutions ont démarré.

Écrans de l’exploration Woonoz

Expérimenter - Muyu et Blindternet

L’exploration permet aussi de tester des idées qui sortent de ce que l’on peut faire habituellement. Comment représenter et faire ressentir le passage du temps différemment ? Comment sortir d’une accessibilité technique, basée sur l’adaptation de production pour les personnes valides, pour proposer des approches qui répondent vraiment au handicap ? C’est ainsi que sont nés Muyu, une horloge qui suit le soleil et les saisons, et Blindternet, une simulation d’un navigateur audio qu’on pilote à la télécommande et à la voix.

Grâce à des prototypes vibe codés, on peut même tester les concepts en vrai plutôt qu’en maquette.

Trois écrans de Muyu et l’interface de Blindternet

03 - Développer un point de vue

Pour moi, la plus grande valeur du design, c’est de développer un vrai point de vue : une façon d’être au monde. Le travail du designer, c’est d’en tirer des concepts qui portent la vision du monde de l’entreprise. Les projets en haut de cette page en sont des exemples.

Speechlab

Speechlab part d’une conviction : le coaching individuel ne devrait pas être réservé à quelques-uns, et personne ne devrait progresser seul. Tout le produit en découle : une IA qui évalue la progression de l’apprenant au fil de l’eau, un coach incarné qui l’accompagne, et des séquences pédagogiques pensées comme un dialogue.

Beneylu School

Chez Beneylu, on pensait que l’école pouvait aussi être un moment joyeux et stimulant. De là sont nés un univers illustré qui nourrit l’imaginaire des enfants, des activités ludiques, et jusqu’à un univers de fiction à part entière : Beneylu Quest, une box de lecture où l’enfant est recruté par une organisation secrète. L’univers, le packaging, le livret, les goodies et le site y racontent tous la même histoire.

Les illustrations de l’univers Beneylu et la box Beneylu Quest

FastR, SFR

Sur FastR, l’enjeu était de passer d’une culture du contrôle à une culture de l’autonomie des équipes. Plutôt que de faire suivre un script décisionnel aux conseillers, on leur a proposé une interface qui s’adapte à eux et les aide à gagner en autonomie.

04 - Produire avec pragmatisme

Tout projet doit s’adapter au réel : au budget, au temps, à l’équipe, à la technique. Mais scoper un projet ne se fait pas au hasard. Je pars toujours de la vision idéale du produit, celle qu’on cherche à atteindre à l’instant T. Puis l’objectif est de déterminer ce qui va rentrer dans la première version, en dimensionnant ce qu’il est possible de faire concrètement mais en gardant toujours à l’esprit des possibilités d’évolution.

Tout poser à plat, puis choisir - Speechlab

Pour Speechlab, j’ai été en charge d’une grosse part du travail de définition et du dimensionnement du produit notamment à travers la rédaction des principes et des fonctionnalités d’une version idéale, la production des user flows, parfois jusqu’au point de vue technique.

Les user flows de Speechlab

Ensuite, pour dimensionner le projet au temps disponible et à la taille de l’équipe, et mettre tout le monde en ordre de marche dans la même direction, j’ai organisé, avec toute l’équipe, des associés aux développeurs, un grand atelier de priorisation pour choisir ce qui allait entrer dans la V1.

Trois jours, pas un de plus - Opérations spatiales

Opérations spatiales est une expérience (réussie) pour tester la possibilité de produire des activités ludiques en 3 jours maximum, design et développement inclus.

Trois écrans de l’activité Opérations spatiales

Évoluer graduellement - Woonoz

Woonoz partait d’un existant et, avec une équipe d’un seul développeur, il était impossible d’envisager une refonte complète de l’outil. En partant de la vision idéale du produit, nous avons choisi d’avancer fonctionnalité par fonctionnalité pour atteindre l’objectif final, en commençant par faire vivre le coaching en temps réel qui adapte les séquences pédagogiques, le cœur du produit, d’abord selon l’état émotionnel de l’utilisateur puis en fonction de son taux de réussite durant la séquence.

Quatre écrans du coaching en temps réel de Woonoz

05 - Confronter vite au réel

Le meilleur test, c’est le test réel. Un produit pas fini entre les mains des gens vaut mieux que tous les workshops de quatre heures. On peut ajouter des étapes intermédiaires si on en ressent le besoin.

Tester en trois temps - Speechlab

Avant même la moindre ligne de code, j’ai créé un flyer pour tester l’intérêt pour le produit lors d’un salon où l’équipe était présente, face au public cible. L’engouement a vite démontré qu’on pouvait se lancer.

Le flyer Speechlab
Le flyer du test d’intérêt, avec une première identité visuelle, très en amont.

Le reste des tests s’est passé en deux phases :

D’abord, un POC très peu designé, pour tester un premier parcours et l’IA de reconnaissance vocale : quinze jours entre les mains de jeunes, encadrés, avec un journal de bord après chaque séance, puis des entretiens avec les élèves et les encadrants.

Enfin, un test avant le lancement, pour s’assurer des bénéfices du produit (la montée en compétences, l’agrément du parcours…) : un questionnaire, des entretiens et, côté pédagogie, l’analyse du taux de réussite et de la progression des apprenants.

06 - Préparer pour la production

Faire en sorte que chacun puisse être autonome sur le projet, et rester disponible pour les moments de doute. Être proche des développeurs, répondre à leurs questions en direct, ajuster le design en temps réel.

Les maquettes ne doivent jamais faire foi - Beneylu School

Un problème fréquent rencontré sur les projets est l’écart entre le code et les maquettes : le moindre changement demande d’entretenir tout un tas de documents dont les maquettes. Et modifier des maquettes, c’est toujours infiniment trop long.

Afin de résoudre ce problème sur Beneylu School et limiter au maximum d’avoir à passer des heures à produire des maquettes pixel perfect et réduire la recette des interfaces, j’ai développé un document de principes d’interaction et de navigation, mais également de toutes les tailles, couleurs, typographie, composants et j’en passe, applicables à chaque module.

En somme, un design system avant les design systems.

Extrait du document de principes Beneylu School

Rendre l’équipe autonome - Speechlab

Sur Speechlab, j’étais le seul designer, et une ingénieure pédagogique structurait en parallèle tout le contenu de l’application. Si chaque écran de chaque parcours devait passer par une maquette, tout le projet passait par moi.

Dès le départ, j’ai donc pensé le design pour être le plus modulaire possible. Chaque composant était codifié, du titre au composant interactif. Par-dessus, des types d’écrans : ouverture, contenu, entraînement IA (en réalité une séquence d’écrans), fermeture… Les écrans de contenu étaient 100 % modulaires, les autres des gabarits plus fixes.

Restait à composer les parcours. Pour ça, un simple fichier Excel en trois colonnes : le code de l’écran (1.2.04 pour niveau 1, séquence 2, écran 04), ses composants dans leur ordre d’affichage, de haut en bas (titre, texte, timer, bouton suivant…), et pour chacun, son contenu ou ses règles. L’équipe pédagogique y composait elle-même ses parcours et les transmettait directement aux développeurs, sans repasser par la case maquette.

Résultat : 18 séquences d’une vingtaine d’écrans chacune, sans avoir à maquetter chacun de ces écrans.

Fichier de contenu · niveau 1, séquence 2

CodeComposantContenu ou règles
1.2.04TitreRespire avant de parler
TexteAvant de prendre la parole, inspire par le nez pendant 3 secondes, puis expire lentement par la bouche.
Timer30 s, démarre à l’affichage
Bouton suivant« C’est parti ! », actif à la fin du timer
1.2.05Titre…

Au-delà des projets

Mon travail ne s’arrête pas aux projets. Faire grandir les designers qui m’entourent, partager les bases du métier et questionner le rôle du design dans le monde en font aussi partie.

Management

Jusqu’à une dizaine de designers accompagnés, avec un principe simple : chacun sait faire son travail, mon rôle est d’aider quand ça coince.

DEEX

Une newsletter lancée en 2018 pour apprendre les bases du design en 52 épisodes, suivie par une centaine de personnes sans aucune promotion.

Score U

Score U

Une grille pour évaluer ce qu’un projet apporte aux personnes, à la société et au vivant, au-delà de sa forme et de sa rentabilité.

remigarcia.fr/score-u →

Les exemples sont détaillés dans la version desktop.