Case Study — Tutory OS · 2026

Lead Airport

The TV in Tutory’s sales room showed a table. In one week, I turned that table into a live 3D airport — every lead is a plane that lands, and the team started watching the operation happen, not just the number.

Client
Tutory · EdTech, Brasília
Period
Oct 2026 — 1 week
Role
Product Engineer — design + code, solo
Product
Tutory OS · Aeroporto de Leads 3D
Shipped
Live on the sales-room TV
Lead Airport 3D: isometric scene with the Mentoria and Hub hangars, planes on the apron and the goal cards on top

Tutory OS is the traffic and media-operations panel I built for Tutory: Meta Ads, Google Ads, HubSpot and the lead database in one place. One of its screens, the Lead Airport, stays open all day on a TV in the sales room — and, like every table on a TV, soon nobody looked at it anymore.

The question that became the project: what if the room could see the leads arriving? In one week, from concept to deploy, I replaced the table with an isometric 3D airport. Every lead that enters the database is a plane that lands; qualified, it enters the hangar; disqualified, it leaves the apron. The goals became the control tower. Same data, same rules — now with motion, characters and real time of day.

What I did

Concept & metaphorArt directionProcedural modelingCharacters & animationHUD & design systemReal-time dataSmart TV performanceAccessibility
1 wkfrom idea to the sales-room TV, October 8–14
10.7klines of code for the scene, HUD and characters
0models imported for the scenery: runway, hangars and planes in code
20 sfrom the lead hitting the database to the plane landing
3lighting moods from the real clock: day, dusk and night
4graphics quality levels to run on a Smart TV

01 — The room

A TV nobody looked at

The first version of the Airport already lived inside Tutory OS: a TV-mode screen with the qualified-lead goals and the month’s arrivals list, refreshed every 20 seconds. It worked — and it was invisible. A number sitting still on a wall becomes wallpaper in two days.

The team already spoke the language: a lead "lands", a rep "clears" it, the apron "fills up". I didn’t invent the metaphor; it was in the room’s conversation. My job was to take it seriously all the way: if a lead is a plane, then classification is the tail color, product is the hangar and the goal is the control tower.

Interface crops: the hangar apron with planes tagged by lead name, goal cards and Cadu’s portrait
Plane = lead. Tail = classification. Hangar = product. Tower = goals. The room gets it from across the floor.
02 — A landing in real timevideo · fictional data
The lead enters the database, the screen says who arrived and from where, and the plane flies the approach, touches down and taxis to its stand. All in real time: the screen checks the database every 20 seconds.

02 — The metaphor

Every plane is a lead. Every hangar, a product.

The airport has two hangars, one per Tutory product — Mentoria and Hub — with five apron stands each. A new lead lands on the runway, taxis to its stand and waits for the team’s classification. The tail color says where it stands: green is qualified, yellow pre-qualified, red disqualified, grey still pending.

When the team qualifies a lead in the CRM, Dan — the apron marshaller — clears it and the hangar door opens. When they disqualify one, the plane is removed: a scanner disintegrates it or, depending on the day, a UFO abducts it. More pending leads than stands is overbooking: planes hold in the sky and Cadu, who greets everyone on the apron, gets visibly angry. The room reads the state of the operation without reading a single row.

01 — The whole screenday · 1600 × 1000
Full Lead Airport screen by day: goals on top, isometric scene in the middle, chart, month arrivals and control tower
Today, week and month goals on top; the airport in the middle; leads per day, month arrivals and the control tower below. Everything the room needs, without scrolling.
02 — Overbooking
Camera zoomed in on the Mentoria apron: an angry Cadu with his protest sign, Dan marshalling with batons and missing-in-HubSpot alerts
More pending leads than stands: Cadu walks out with his protest sign, Dan marshals the apron and the table flags leads that never reached HubSpot.
03 — Hangar selected
Mentoria hangar selected, camera zoomed in and the inspector showing leads, source and qualification rate
Click a hangar: leads today, this week and this month, source by platform and who is on the apron.

03 — The screen

Glass over the scene: an interface that doesn’t compete with the airport

The scene is the protagonist; the panels sit quietly on top of it, in white glass with a blue-tinted shadow, and the brand blue only shows up where there is action or selection. On top, the qualified-lead goals for today, this week and this month — Mentoria only, the way the business measures it. Below, leads per day, the month’s arrivals and each lead’s status in HubSpot.

Clicking anything opens the inspector. The tower sums up the month in a classification donut; the hangar shows source and qualification rate; the plane tells the lead’s journey — landed, reached HubSpot, in service, classified. If the lead never showed up in the CRM, the screen flags it as "Missing": the automation may have failed and someone needs to enter it by hand. The airport became an integration monitor too.

01 — The lead’s journeyinspector
Selected plane with the camera zoomed in and the inspector open with the lead’s data and journey
One click on the plane: source, role, students, contact and the step-by-step journey — landed, HubSpot, service, classification. Data shown here is fictional.
02 — The panelsHUD
The interface cards laid out on blue: brand and clock, today, week and month goals, month arrivals, control tower, leads-per-day chart, legend, landing notice, mood switch and Cadu’s portrait
Every card as it is in the product: goals with progress bars, month arrivals, the control tower with its classification donut, leads per day, the lead’s journey and Cadu’s portrait. Big numbers and blue only on action, to be read from three meters away.

04 — Real time

Real clock, real light, real lead

The screen checks the database every 20 seconds. A new lead comes in and the plane appears high on the right, flies the approach, touches down and taxis to its stand, with a notice on screen saying who arrived and from where. The light follows Brasília’s clock: sunrise and sunset are computed for the day, and the scene moves through day, dusk and night on its own, with street lights coming on and the sky changing.

Every ten minutes the airport can hand the screen over for a minute to the indicator round: a plane drags in the sky of the period, Cadu or Dan greets the room — a morning wave, ramen at lunch, pajamas and tea at night — and bento-style chart frames go by with the same numbers as the goal cards. Then the airport comes back. No money values anywhere: the screen lives in a shared room, and that was a rule from day one.

01 — Indicator round
Indicator round: Cadu greets the room with bento charts behind him
Every ten minutes, one minute of charts: the host changes with the time of day.
02 — Chart bento
Second frame of the round: bento charts of leads per day, source and classification
Leads per day, source by platform and classification — the same numbers as the cards.
03 — Dusk
The airport in the late afternoon, with warmer light and a bluish sky
The light follows Brasília’s clock: late in the afternoon the scene warms up and the sky changes.
04 — Night
The airport at night, with lit windows, lamps and runway lights on
After sunset, windows, lamps and runway lights come on by themselves.

05 — Engineering

Everything generated in code — and light enough for the room’s TV

No 3D model was imported for the scenery: runway, apron, hangars, tower, Tutory’s headquarters, the neighboring buildings and the planes themselves are geometry generated in code with three.js, with no build step — like the rest of Tutory OS, plain HTML, CSS and JavaScript served by Vercel. The same function that paints the yellow lines on the ground guides the plane, so the wheels run exactly over the paint.

The characters come from a public-domain pack of 52 figures, assembled from "recipes" — body, hair, beard and color per part — in a generator I built for the project. The room’s TV is a Smart TV browser, and that dictated the engineering: four graphics quality levels, automatic step-down when the frame rate drops, static geometry merged, card blur switched off and every heavy job spread across several frames so a landing never stutters. A test page measures the cost of each part of the scene on the TV itself.

01 — Character gallery
Gallery of the 52 pack figures at the same scale and camera
The 52 pack figures at the same scale and camera, with filters — the base Cadu, Dan and Marlom come from.
02 — Character generator
Character generator: body, hair, beard, hat and colors, producing the recipe used in the scene
Body, hair, beard, hat and color per part become a "recipe" in code — that is how every character in the scene is assembled.

06 — Outcome

The room is looking at the TV again

The 3D Airport is live on the TV in Tutory’s sales room, next to the Tutory OS that feeds the rest of the operation. The numbers match the dashboard because the rules are the same — Hub never added to Mentoria, goals for Mentoria only, the day counted the way the database counts it. What changed is that now you can see the lead arrive, and the room reacts: cheers the landing, chases the classification, notices the apron filling up.

One week, one person, from concept to deploy — and a BI panel that became the screen the team asks to keep open.

Results

What changed for the team

  • +Live screen all day on the sales team’s TV
  • +A new lead visible within 20 seconds — as a landing
  • +Classification, overbooking and integration failures readable from afar
  • +The same numbers and rules as the dashboard, no money on screen
  • +Runs in a Smart TV browser with adaptive quality
  • +Delivered in one week, no build step, no handoff

Stack

three.jsJavaScriptHTML & CSSSupabaseHubSpot APIMeta Ads APIGoogle Ads APIVercelQuaternius (CC0)Figma

Got a dashboard nobody looks at?

I turn data into something the room wants to watch — concept, design and code, from the first sketch to deploy.