Sylvain Boutoille Product Designer Senior

Projets sélectionnés

Cap Collectif — Plateforme

CONTEXTE

Cap Collectif accompagne les décideurs en leur proposant une plateforme de participation. Elle leurs permet de créer des projets participatifs composé d'étapes et de modules de participations

Principal Product Designer
February 2020-2025
Figma, Notion
01

Refonte de l’espace d’administration

L'espace d'administration, basé sur Sonata un framework php (Symfony 4) était devenu un frein à l'utilisation et à son l'évolution.

PROBLÉMATIQUE

  • Back-office trop complexe
  • Minimum 2 jours de formation pour maîtriser l'interface
  • Difficulté à créer des projets participatifs

OBJECTIF

  • Accélérer la création de projets
  • Réduire le temps de formation de 2 jours
  • Simplifier et moderniser l'espace d'administration

AVANT

Espace d'administration — Avant
La création de projet prend trop de temps
Je ne comprends pas comment configurer mon projet
Je n'arrive pas à enregistrer mes modifications
Je suis perdu dans l'interface, je dois souvent appeler le support
4H de temps moyen passé en configuration de projet
72% des utilisateurs jugent l'interface trop complexe
26% de bug, incompréhension
41% demande d'aide au support

La première étape a consisté à restructurer le back-office en blocs fonctionnels, puis à concevoir un design system, avant de simplifier l'ensemble en appliquant la méthodologie HORSE : Hide, Organize, Reduce, Standardize, Eliminate.

Application de participation

Elles sont le cœur d'un projet participatif et nécessitent la configuration de formulaires qui se trouvaient en dehors des projets participatifs. Cela causait beaucoup d'incompréhensions.

Projet participatif

Regroupe les applications de participation, le contenu éditorial et toutes les contributions des participants. ex : un budget participatif a souvent une application pour déposer des idées et une autre pour voter.

Plateforme

Rassemble tous les projets participatifs. Elle permet aussi de créer des actualités et des événements avec beaucoup de personnalisation.

Design System

Avant il n'y avait aucun design système, il a été conçu pour la cohérence visuelle / fonctionnelle sur toute la plateforme et accélérer le processus de conception / développement

Amélioration de l'interface et création de nouveaux modèles de projet incluant des pré-configurations des applications de participation pour créer un projet en seulement 3 clics.

Réorganisation et classification de la configuration d'un projet participatif, optimisation de l'ergonomie, création de design patterns, implémentation du design system, enregistrement en temps réel.

"la nouvelle interface admin est bien plus intuitive et simple d'utilisation."
"Le client nous a félicité pour la nouvelle interface projet, qu'il trouve bien intuitive et bcp plus agréable ! [...] Il a dit que ça se voyait qu'on avait pris en compte les remarques des clients et que c'était satisfaisant de voir qu'on les écoute "
"j'ai mis en ligne mon projet participatif en moins de 2h"
Augmentation du CSAT
Augmentation du nombre de projets
Augmentation de la rapidité d'usage
Réduction du temps de formation
Réduction du nombre d'actions/clics
Réduction des demandes au support
02

Amélioration de l'expérience participant

Un de nos plus gros clients, nous a demandé d'améliorer notre étape de vote pour son prochain budget participatif.

PROBLÉMATIQUE

  • Taux de participation faible
  • Faible engagement des participants
  • Expérience mobile non adaptée et obsolète

OBJECTIF

  • Augmenter la participation
  • Améliorer l'expérience utilisateur sur mobile
  • Augmenter l'engagement des participants

AVANT

Expérience participant — Avant
Il est difficile de naviguer entre les propositions
Je ne trouve pas l'étape de vote
J'ai eu beaucoup de mal à valider mes votes
Je n'arrive pas à participer sur mon téléphone
90sec Durée moyenne d'une session utilisateur
24% Taux de participation
1 Vote par participation en moyenne

Principaux constats

Absence de consignes de vote

Multiplicité des modes de vote (budget/seuil/min/max/classement) sans accompagnement utilisateur, générant de la confusion.

Absence de consignes de vote

Exploration complexe

Navigation, filtres et tri peu adaptés au mobile, limitant l'accès fluide aux propositions.

Exploration complexe

Vignettes peu optimisées

Trop d'informations secondaires, nuisant à la lisibilité et à l'engagement.

Vignettes peu optimisées

Manque de flexibilité des vues

Absence de combinaison carte + liste, obligeant à alterner entre différents modes.

Absence de consignes de vote — Avant Démonstration absence de consignes
Exploration complexe — Avant
Vignettes peu optimisées — Avant

Améliorations principales

Layout et navigation repensés

Structure allégée et hiérarchisée, avec une vue interactive combinant carte dynamique et liste de propositions pour faciliter l'exploration et la participation.

Bloc de consignes de vote

Guide clair et adapté aux différents types de votes.

Filtres et tri optimisés

Conçus pour une utilisation fluide sur desktop, mobile et tablette.

Filtres et tri optimisés

Vignettes simplifiées

Informations allégées pour améliorer la lisibilité et la focalisation.

Vignettes simplifiées
Filtres et tri optimisés — Après
Vignettes simplifiées — Après
La refonte a boosté la participation de 90 % ! Ce qui nous a également permis d'éviter le churn de l'un de nos plus gros clients.
Durée moyenne de session
90sec
300sec
Taux de conversion
13%
26%
Vote par participant
1
3

Autres projets Cap Collectif

Migration Sketch vers Figma

Migration technique

Réorganisation et migration des outils de design

Parcour du participant

Entièrement repensé pour une expérience fluide et engageante, sans oublier la valorisation des données pour préparer la gamification et l'hyperpersonnalisation.

Schéma parcours participant

Dashboard Analytics

Conception d'un tableau de bord administrateur pour visualiser les performances, piloter les projets et faciliter la prise de décision.

Dashboard Analytics

Intégration de l'IA

Création de fonctionnalités intelligentes pour automatiser les tâches et enrichir l'expérience administrateur comme participant.

Design System tokens

Design System

Conception et mise en place d'un design system évolutif, basé sur des design tokens pour assurer cohérence et scalabilité.

W3C RGAA

Mise en conformité RGAA 4.1.2

Kiute — SaaS Beauté & Bien-être

CONTEXTE

Kiute est un logiciel SaaS dédié aux professionnels de la beauté et du bien-être. Il propose une solution tout-en-un pour gérer les salons : agenda, caisse, fichiers clients, site web, application mobile avec boutique en ligne, click and collect, et système de réservation et paiement.

Principal UX/UI Designer
2017 — 2020
AdobeXD, Figma, Jira
01

CONTEXTE

J'ai eu pour objectif de simplifier et d'optimiser l'application Kiute SaaS et créer son portage sur iOS et android

PROBLÉMATIQUE

  • Complexité de l'interface
  • Impossible de gérer le salon à distance
  • Trop de temps perdu
  • Manque d'ergonomie mobile et tablette
  • Surcharge visuelle

OBJECTIF

  • Augmenter le nombre de clients B2B
  • Optimisation smartphone et tablette
  • Concevoir une expérience rapide et intuitive

AVANT

Interface Kiute — Avant
La gestion des stocks et des rendez-vous sont trop compliquées !
Je n'ai pas d'ordinateur pour gérer mon salon
J'ai du mal à retrouver les informations de mes clients rapidement
J'aimerais pouvoir gérer mon salon et mes collaborateurs depuis mon mobile.
3m10 Temps moyen d'encaissement d'un client
52% Des professionnels utilisent encore le format papier

Améliorations principales

Refonte visuelle, expérience simplifiée et fluidité

  • L'interface a été repensée pour offrir une meilleure lisibilité avec une hiérarchie visuelle claire et un design cohérent.
  • Navigation fluide et intuitive grâce à une meilleure organisation des fonctionnalités (agenda, caisse, gestion des clients).
  • Réduction du nombre de clics nécessaires pour effectuer des actions courantes, améliorant la productivité des utilisateurs.

Optimisation mobile

Une interface mobile ergonomique, adaptée aux écrans plus petits, permettant une gestion facile depuis un smartphone et tablette

"Je gère maintenant mon agenda directement depuis mon téléphone, même entre deux rendez-vous"
"Avec l'ancien système, je faisais souvent des erreurs en encaissant les paiements. La nouvelle caisse est beaucoup plus intuitive, et je ne perds plus de temps à corriger des erreurs"
"J'apprécie beaucoup la nouvelle interface. Tout est plus clair et je trouve rapidement ce que je cherche"
Augmentation du
taux d'adoption
Augmentation de la rapidité
d'usage
Réduction du temps
d'encaissement (1m20 moyenne)
Réduction des demandes au support

Begital

Begital — Agence Web

Begital était une agence de communication web basée à Poitiers, spécialisée dans la création d'applications, la conception de sites web, le conseil en webmarketing et la formation digitale.


J'étais en charge de l'ensemble des créations print et web : identités visuelles, sites vitrines et e-commerce, avec un focus particulier sur des délais de conception et de réalisation extrêmement courts.

Principal Web designer (Alternance, CDD, CDI)
2015-2017
AdobeXD, Figma, Jira
01

Identité visuelle — MARGATHE

MARGATHE est un revendeur de viandes d'excellence, reconnu localement pour son expertise depuis plus de 10 ans, spécialisé auprès des restaurateurs de la Vienne. Le client souhaitait une identité moderne.

PROBLÉMATIQUE

Se démarquer des codes traditionnels de l'industrie tout en reflétant la qualité premium des produits.

OBJECTIF

  • Mettre en valeur la qualité des produits
  • Représenter l'excellence
  • Renforcer la reconnaissance locale
MARGATHE context

L'approche a consisté à créer une identité visuelle complète qui rompt avec les codes classiques du secteur : un logo distinctif, une palette de couleurs premium et un système de papeterie cohérent reflétant le positionnement haut de gamme de MARGATHE.

MARGATHE - Typographie et couleurs MARGATHE - Logo et déclinaisons
02

Projets web — Sites vitrines & e-commerce

Conception de plusieurs projets web allant de sites vitrines à des sites e-commerce, avec un focus particulier sur des délais de conception et de réalisation extrêmement courts.

PROBLÉMATIQUE

Concevoir des sites dans des délais réduits tout en respectant les exigences techniques et esthétiques de chaque client.

OBJECTIF

  • Concevoir des sites dans des délais réduits
  • Garantir un design responsive
  • S'adapter aux exigences des clients
Projets Web - Joaillerie & Coiffeur

Chaque projet visait à offrir une expérience originale, tout en respectant les exigences techniques et esthétiques du client. Les sites couvraient des secteurs variés : restauration, lifestyle, e-commerce produit et services.

Projet Web - Site Tourisme Projet Web - Site E-commerce Vins
Projet Web - Site Psychologue Projet Web - Escape Game