obOdilon BuissonTHE PROJECT NETWORK

L8 CRM DEMOS / CASE STUDY

Interactive 3D CRMs — garage and gym

Two visual CRM demonstrations: a garage and a gym in isometric 3D, where you follow each customer with a click.

Try the garage demo Try the gym demo

In production · Since October 2026

The starting point

These are two demonstrations I designed and built to show what a CRM can become when it reads like a workplace. Both are fictional: names, amounts and records are made up, and the scenery images are AI-generated.

The problem

A classic CRM is a table of rows and columns: accurate, but nobody wants to open it. In a garage or a gym, the team thinks in places and people, not in form fields.

The answer

I turn the business into a 3D map you explore with the mouse. In the garage, every vehicle sits in the zone where it is; in the gym, every prospect or member is at their place in the club. One click opens the record, moves the file to the next step or prepares a message, and a table view gives the same information in columns.

  • Isometric map of the site, with zoom on one zone (reception, workshop, paint, weights area, classes…)
  • Record of a vehicle or a person: status, amount, checklist, progress along the journey
  • Move a record to the next step in one click, with the indicators updated live
  • Table view of the customer journey, one column per step
  • Garage: repair orders, stock alerts, workshop occupancy
  • Gym: leads, trial sessions and classes, members to follow up, a follow-up message prepared (sending is simulated)
  • Filming mode: names are blurred so the demo can be shown without showing any data

The demo in pictures

Garage: overview of the workshop, with repair orders and stock alerts.
Overview: the workshop, its vehicles and its indicators. Fictional data.
Garage: zoom on the workshop, with the list of vehicles in the zone on the right.
Zoom on one zone: the list of vehicles in it appears on the right.
Garage: a selected vehicle, with its record (status, amount, checklist) and its tag on the map.
A vehicle record: status, amount, checklist and progress.
Garage: table view, records spread over columns from reception to ready.
The same information as a table, one column per step.
Gym: overview of the club, with its prospects, members to follow up and indicators.
Gym: the club, its equipment and its prospects. Fictional data.
Gym in filming mode: the names in the prospect list are blurred.
Filming mode: names are blurred so the demo can be filmed.

Try the garage demo Try the gym demo

Under the hood

Each demo is a self-contained page in HTML and JavaScript, with no server and no account: the scene is drawn on a 2D canvas in isometric projection, and the fictional data is embedded in the page. The characters, vehicles, equipment and scenery are AI-generated images, cut out locally and converted to WebP to stay light. The pages are hosted with this site.

The notable challenge

Keeping the scene readable despite the number of elements: every sprite had to overlap the others correctly, and every click had to land on the right vehicle or person even when objects overlap. I also made sure the demo can be filmed without revealing anything, hence the filming mode.

My role

I led both demonstrations on my own: choice of the two trades, design of the interface and journeys, development, generation and clean-up of the images, testing and publication.

Where the project stands

Both demos are online and free to try. They are demonstrations: no data is real, nothing is saved and messages are not sent. They show a principle, not a ready-to-use product.

What about your project?

The same principle fits other trades where you follow people or objects in a physical place. I can build for you:

  • a visual CRM for your shop, workshop or practice
  • a dashboard that shows the state of your business at a glance
  • an interactive sales demo to present your offer
  • an illustrated customer journey, with follow-ups prepared

The project’s tools

Application
HTML, JavaScript, isometric 2D canvas
Scenery images
AI image generation, local cut-out
Data
Fictional data embedded in the page
Hosting
Static pages, served with this site on Vercel

Want to see your business differently than in a spreadsheet? Let's talk about the tool that would help you.

Let’s talk about your project