AVAILABLE · Q3/Q4 2026

shall we talk?explore the projects
FOCUSCosmic rain // 40Hz

They trusted me

Olin.md

Josselin Hillion

Senior Product Designer & AI Builder

→ Master_Prompt

ROLE: Senior Product Designer & AI Builder. I orchestrate strategic UX, industrial Design Systems, and elite Vibecoding to transform complex architectures into production-ready software.

My approach: orchestrating AI agents (Google Antigravity, Claude Code, Cursor) bounded by strict design tokens. Eliminating tech debt by proof, dividing development costs by 5, and delivering reliable interfaces.

APPROACH:
Design System First, Frugal Vibecoding, Discovery to Delivery, Lean UX
STACK & AI:
Figma (Variables & MCP), Google Antigravity, Claude Code, Cursor, Astro SSG, W3C Tokens, Bubble, REST APIs, n8n
SECTORS:
B2B SaaS, Industry 4.0, Fintech, Mobility, Retail & Agentic AI
100% vibecoded · design system first
profil-pic.png
profil-pic.png
Portrait of Josselin Hillion, smiling, blue glasses, in an Olin.os window on an Olin pattern background
// Frame 02: my latest projects

Projects

B2B SaaS / Proptech

Excibat (Construction SaaS)

Transformation of a production Bubble SaaS: multi-organization relational architecture, Stripe and Oodrive APIs.

A founder held back by an unstable SaaS architecture, a dense construction domain (handover reports, contractor snag lists, legal warranty deadlines) and a hard requirement for certified signatures and automated invoicing. I simplified the journeys for developers, site managers and buyers, then wired the functional prototype straight into the backend and its webhooks.

  • 4.8/5user satisfaction
  • 45 daysdevelopment cycle
  • Bubble
  • Stripe API
  • Oodrive Sign
  • Automations

The build as proof

A production Bubble web app: Stripe invoicing and certified Oodrive signatures, with zero technical debt.

IN PRODUCTION // LIVEExplore the case study
  1. 01 // APIs
    Stripe BillingOodrive Sign

    Stripe Billing (subscriptions) · Oodrive Sign (legally binding e-signatures)

  2. 02 // Workflows
    // Event-driven business automation
> POST /api/webhooks/stripe-checkout
> TRIGGER oodrive.generateLegalSignaturePackage()
< HTTP 200 OK · signature token generated
  3. 03 // WebappExcibat manager dashboard in production: list of sites (Nala, Mazone, Sami) with address, status, QR code and edit action, navigation across sites, clients, companies and contractors.Manager dashboard // ExcibatThe web app in production, HD capture.(new tab)

DCX foresight vision

Renault Moments

Service design and foresight: projecting the customer experience into the era of connected services and the Renaulution.

Rather than piling widgets onto an Android tablet, we designed a “Moment OS” that orchestrates services around an experience Timeline, built on three pivotal life moments:

  1. Home-to-car : anticipation: cabin pre-conditioning and charge planning based on the day's calendar.
  2. On-the-road : adaptation: an ambience tuned to the context, without overloading the driver.
  3. Smart Charge : the value of downtime: 25 minutes of charging turned into a bubble of productivity or relaxation.

Renaulution · COMEX

Vision approved by the Renault Group executive committee (COMEX), with the in-car MVP Collections launched straight away.

Explore the case study
OpenR Moment OS screen: suggested detour to Chartres cathedral, with an audio capsule to listen to.OpenR Moment OS screen in driving mode: guidance at 3 km and the “trip to Nantes” Timeline.

Smart City & Data

DataCity Paris For You

A personalised tourist-flow web app: easing pressure on overcrowded sites with transactional and geographic data.

The City of Paris, Mastercard, NUMA, the Tourist Office and APUR around a single question: how do you spread visitors out without forcing unwanted detours on them? A streamlined interface with 3 parameters, tested by walking the streets of Paris for 2 hours.

  • 4 monthsfrom scoping to Demoday at Paris City Hall
  • SilverIIID Award 2020, data and information design

Open Data · Mastercard

From transactional data to a visitor route people actually want to follow.

Explore the case study
Designing the Paris For You screens: from wireframe to target UI, with a map of Paris and a personalised route.Wireframe ➔ target UIAlgorithmic complexity hidden behind 3 parameters.

Phygital service design

Royal Canin Phygital kiosk

Making cutting-edge veterinary science accessible, to deliver a personalised recommendation in under 90 seconds, right at the shelf.

Faced with a 15-metre aisle and 200 near-identical bags, customers were leaving without buying. Field research with pet store managers, co-design workshops I designed and facilitated, then the kiosk's entire interface, drawn in dialogue with HMY, who built the unit.

  • < 90 sfor a personalised nutritional recommendation
  • 200+products made readable right at the shelf

Pilot stores · Venture

Concept validated in pilot stores: the prototype unlocked corporate venture funding for industrialisation.

Explore the case study
Royal Canin touchscreen kiosk built into a pet store aisle: “Find the food that meets their needs in 30 seconds”, between shelves of kibble bags.Phygital kiosk // pilot storeA nutritional recommendation in under 90 s, right at the shelf.
// How we work together

The workshop: proof of the work

Frame 1: My skills

Setting the course: product vision & strategic prototyping

Clarifying the direction based on mid-term business stakes, and bringing the new customer experience to life as interactive prototypes that align teams.

  • co-design
  • figjam
  • facilitation
more details
Service blueprint “Use case: designing the before and after maintenance”
User research matrix
Collaborative video workshop with the teams

Collaborative workshops to co-create solutions tailored to your needs

My workshops foster innovation and team engagement.

  • ui audit
  • field research
  • journeys
  • wireframes
more details
UX wireframes and journey matrix
FigJam co-design workshop board
User testing report with Forum Études

Builder culture & functional prototyping

No more loss between mockup and production. I ship MVPs and working products, test with real APIs, and understand architecture constraints and tech teams.

  • PRD
  • architecture
  • MVP
  • backend integration
more details
Experience storyboard and flows
Product architecture canvas
Mobile app screen flow
// Frame 04: shall we talk?

Join your product team