Building for a 2 GB TV and a remote with no pointer
The showroom’s main screen is a TV with little memory, a weak GPU, cropped edges and a D-pad remote. What it took to make a map of 500 buildings usable on it.
The problem
A map of 500 buildings had to run on a 2 GB TV, driven by a D-pad.
The solution
A TV mode: zone jumps, overscan calibration, a lighter renderer and a 6-minute story.
The deals map started as a desktop tool: every Mumbai building where AHA has automated homes, with plans, architects and what’s nearby. Then someone asked the obvious question. Could it run on the big screen in the experience centre, so a consultant can say “we’ve done twelve homes in your building” and show them?
The big screen is a TV, and TVs are hostile places for web apps.
Constraint 1: a remote has no pointer
A D-pad gives you up, down, left, right and OK. Picking one marker out of 500 by stepping through them is miserable.
- Zone jump (the old TV mode). The map split into a 3×3 grid, and each press narrowed it to one ninth. About 500 buildings came down to a handful in two or three presses instead of dozens.
- A magnetic, accelerating cursor. Holding a direction speeds up, and the cursor snaps to the nearest marker when it gets close.
- Holding OK, four ways. TV browsers report a held OK key in four different ways, so one small function recognises all four as “hold”.
Constraint 2: the edges don’t exist
TVs crop 2–5% of the picture at the edges (overscan), so a button in the corner may simply not be on screen. The old TV mode had an overscan calibration step, and laid itself out inside the safe area it measured.
Constraint 3: BACK leaves the app
On the TV browser, BACK left our app and opened an old cached copy of the page. Now each BACK press is absorbed by one step of in-app history (up to 40), and a service worker forces fresh loads so a stale copy can’t come back.
Constraint 4: 2 GB and a weak GPU
- LITE mode. The map draws at the screen’s native size instead of a high-DPI multiple. Browser memory fell from about 1,000 MB to about 650 MB.
- Compositor-only animation. Everything animates with
transformandopacityonly, so the GPU composites layers instead of repainting. Measured: the curtains scene went from 20 to 57 fps, the smart-lock face scan from 25 to 60, and the moments reel from 30 to 60. - Heavy things are pre-baked. Floor plans are pre-rendered from PDF to 1,800 px WebP (200–350 KB each) in headless Chrome, so the TV never parses a PDF. Vertical product films were re-encoded from 23–35 MB down to 1.5–2.8 MB.
Constraint 5: two audiences, one screen
Visitors must never see money, deal status or salesperson names. Showroom view hides every amount and deal status on screen. Team view, for staff, adds the CRM calendar and billboard planning, and switches itself off after 10 idle minutes or when the screen sleeps.
The pitch, edited
Even a working app can be the wrong length. The first guided walkthrough took 15 minutes. “Present” is now seven chapters that play themselves, about 5½ minutes when a presenter clicks through.
Takeaway
Design for the worst device first. Nearly every TV constraint, from fewer pixels and less memory to clearer navigation and shorter stories, made the laptop version better too.