DISPONIBLE · Q3/Q4 2026

on en discute ?explorez les projets
FOCUSPluie cosmique // 40Hz

Ils m'ont fait confiance

Olin.md

Josselin Hillion

Senior Product Designer & AI Builder

→ Master_Prompt

RÔLE : Senior Product Designer & AI Builder. J'orchestre l'UX stratégique, les Design Systems industriels et le Vibecoding d'élite pour transformer des architectures complexes en logiciels déployés en production.

Mon approche : orchestrer des agents IA (Google Antigravity, Claude Code, Cursor) guidés par des tokens stricts. Éliminer la dette technique par la preuve, diviser par 5 les coûts de développement et livrer des interfaces fiables.

APPROCHE :
Design System First, Vibecoding Frugal, Discovery to Delivery, Lean UX
STACK & IA :
Figma (Variables & MCP), Google Antigravity, Claude Code, Cursor, Astro SSG, Tokens W3C, Bubble, APIs REST, n8n
SECTEURS :
SaaS B2B, Industrie 4.0, Fintech, Mobilité, Retail & IA Agentique
100% vibecoded · design system first
profil-pic.png
profil-pic.png
Portrait de Josselin Hillion, souriant, lunettes bleues, dans une fenêtre Olin.os sur fond de motif Olin
// Frame 02 : mes derniers projets

Projets

B2B SaaS / Proptech

Excibat (SaaS BTP)

Transformation d'un SaaS Bubble en production : architecture relationnelle multi-organisation, APIs Stripe et Oodrive.

Un fondateur bloqué par une architecture SaaS instable, un métier BTP dense (PV de réception, réserves d'artisans, délais légaux GPA) et un besoin impératif de signatures certifiées et de facturation automatisée. J'ai simplifié les parcours promoteurs, conducteurs de travaux et acquéreurs, puis branché la maquette fonctionnelle directement sur le backend et ses webhooks.

  • 4.8/5satisfaction des utilisateurs
  • 45 jde cycle de développement
  • Bubble
  • Stripe API
  • Oodrive Sign
  • Automations

Le build comme preuve

Une webapp Bubble en production : facturation Stripe et signatures Oodrive certifiées, sans dette technique.

EN PRODUCTION // LIVEExplorer le case study
  1. 01 // APIs
    Stripe BillingOodrive Sign

    Stripe Billing (abonnements) · Oodrive Sign (e-signatures légales)

  2. 02 // Workflows
    // Automatisation métier événementielle
> POST /api/webhooks/stripe-checkout
> TRIGGER oodrive.generateLegalSignaturePackage()
< HTTP 200 OK · token de signature généré
  3. 03 // WebappDashboard gestionnaire Excibat en production : liste des chantiers (Nala, Mazone, Sami) avec adresse, statut, QR code et modification, navigation chantiers, clients, entreprises et intervenants.Dashboard gestionnaire // ExcibatLa webapp en production, capture HD.(nouvel onglet)

Design produit × IA first

Portfolio design & IA first (Olin.os)

D'une base graphique de 2025 à un design system synchronisé et un site Astro en production, avec des agents IA tenus par des règles.

Un projet exploratoire de 12 jours, sans processus défini au départ. Après un vibe coding hors-sol, j'ai écrit le système : Figma en MCP, playbook, linter de tokens, puis refonte Astro par lots. Le site que tu lis est la preuve de la méthode.

  • 12 joursdu 20/09 au 01/10/2026
  • 51composants Astro, 5 pages, 32 fiches de design system
  • Figma
  • Astro
  • Claude Code
  • Stylelint
  • Vercel

La méthode comme preuve

Un design system synchronisé avec Figma, un site en production et une compétence validée en entretien pro.

EN PRODUCTION // LIVEExplorer le case study
Page d'accueil du portfolio Olin.os : titre en dégradé violet et bleu, mascotte en fenêtre, bouton d'appel.Le résultat en productionProduit par la méthode que raconte ce cas.

Vision prospective DCX

Renault Moments

Design de service et prospective : projeter l'expérience client à l'ère des services connectés et de la Renaulution.

Plutôt que d'empiler des widgets dans une tablette Android, nous avons conçu un « OS Moment » qui orchestre les services autour d'une Timeline d'expérience, avec trois moments de vie charnières :

  1. Home-to-car : l'anticipation : pré-conditionnement de l'habitacle et calcul de charge selon l'agenda du jour.
  2. On-the-road : l'adaptation : une ambiance ajustée au contexte, sans surcharger le conducteur.
  3. Smart Charge : la valeur du temps arrêté : 25 minutes de recharge transformées en bulle de productivité ou de détente.

Renaulution · COMEX

Vision validée par le COMEX Renault Group et lancement immédiat du MVP embarqué Collections.

Explorer le case study
Écran OpenR Moment OS : suggestion de détour vers la cathédrale de Chartres, avec capsule audio à écouter.Écran OpenR Moment OS en mode roulage : guidage à 3 km et Timeline « voyage à Nantes ».

Smart City & Data

DataCity Paris For You

Webapp de flux touristiques personnalisés : désengorger les sites saturés grâce à la data transactionnelle et géographique.

Ville de Paris, Mastercard, NUMA, l'Office du Tourisme et l'APUR autour d'une même question : comment répartir les visiteurs sans leur imposer de détour subi ? Une interface épurée à 3 paramètres, testée en marchant 2 h dans les rues de Paris.

  • 4 moisdu cadrage au Demoday à l'Hôtel de Ville
  • SilverIIID Award 2020, data et information design

Open Data · Mastercard

De la donnée transactionnelle à un parcours de visite que l'on a envie de suivre.

Explorer le case study
Conception des écrans Paris For You : du wireframe à la maquette UI cible, carte de Paris et parcours personnalisé.Wireframe ➔ UI cibleLa complexité algorithmique masquée derrière 3 paramètres.

Design de service phygital

Royal Canin Borne phygitale

Vulgariser une science vétérinaire pointue pour délivrer une recommandation personnalisée en moins de 90 secondes, directement au pied du rayon.

Face à un linéaire de 15 mètres et 200 sacs presque identiques, le client repartait sans acheter. Recherche terrain auprès des gérants d'animalerie, ateliers de co-conception que j'ai conçus et animés, puis toute l'interface de la borne, dessinée en dialogue avec HMY qui fabriquait le meuble.

  • < 90 spour une recommandation nutritionnelle personnalisée
  • 200+références rendues lisibles au pied du rayon

Magasins pilotes · Venture

Concept validé en magasins pilotes : le prototype a débloqué le financement corporate venture de l'industrialisation.

Explorer le case study
Borne tactile Royal Canin intégrée au linéaire d'une animalerie : « Trouvez en 30 secondes l'aliment qui répond à ses besoins », entre les rayons de sacs de croquettes.Borne phygitale // magasin piloteUne recommandation nutritionnelle en moins de 90 s, au pied du rayon.
// Comment nous travaillons ensemble

L'atelier : les preuves du travail

Frame 1 : Mes compétences

Donner le cap : vision produit & prototypage stratégique

Clarifier la direction basée sur les enjeux business à moyen terme et matérialiser la nouvelle expérience client sous forme de prototypes interactifs pour aligner les équipes.

  • co-conception
  • figjam
  • facilitation
plus de détails
Service blueprint « Use case : designing the before and after maintenance »
Matrice de recherche utilisateur
Atelier collaboratif en visio avec les équipes

Ateliers collaboratifs pour co-créer des solutions adaptées à vos besoins

Mes ateliers favorisent l'innovation et l'engagement des équipes.

  • audit ui
  • recherche terrain
  • parcours
  • wireframes
plus de détails
Wireframes UX et matrice de parcours
Board FigJam d'atelier de co-conception
Compte rendu de test utilisateurs avec Forum Études

Culture builder & prototypage fonctionnel

Fini la déperdition entre maquette et production. Je livre des MVP et produits fonctionnels, teste avec de vraies APIs, comprends les contraintes d'architecture et des équipes techs.

  • PRD
  • architecture
  • MVP
  • intégration backend
plus de détails
Storyboard et flows de l'expérience
Canvas d'architecture produit
Flow d'écrans mobiles de l'application
// Frame 04 : on en discute ?

Rejoindre votre équipe produit