NABDIA kiosk

A health kiosk for events and clinics: a tall curved display (2160×3840) above a small touch screen (1920×540). A visitor logs in, has a 15-second face scan for vital signs, books a doctor and gets their results, all standing at one stand.

I rebuilt it as a personal project under a fictional brand, NABDIA, from the motion and UI work I'd done on a real kiosk of this type. Nothing from the original client build is used; every screen, asset and line of code here is new.

I took it from the brief to the running build myself, so nothing was lost between design and code.

1. 01BriefTwo screen sizes, one visitor flow, and one rule: improve the look, never shrink the type.
2. 02User journeySeven stages from arriving to leaving, mapped across both displays.
3. 03StoryboardThe whole journey prototyped in black and white before any styling.
4. 04Look and assetsGold on black, hairline frames, icons and the hologram loops.
5. 05MotionOne motion grammar for every screen change.
6. 06BuildOne HTML file with every screen as data, checked frame by frame by audit scripts.

Pick a stage to see both screens as the visitor sees them. The touch console keeps the original layout: the button sizes, type sizes and the single navigation slot were measured and kept.

1. 01Arrive
2. 02Identify
3. 03Scan
4. 04Book
5. 05Consult
6. 06Records
7. 07Leave

Main display

Stage 01 / 07

Arrive

Idle

Touch console

Step 01 / 13 · Idle←→

Every change uses one motion grammar: the background flares into a light-speed burst, the outgoing screen flies up and out, boxes pop open from their centre and text rises in place. The phone and calendar are live three.js; the organ and pill holograms are pre-rendered loops with baked transparency.

The kiosk runs live on a stand in a dark stone room, so you can use it instead of watching it. Real web pages run on the screens through CSS 3D, so every button you press is the working interface.

Play the live demoRuns in your browserKeyboard + mouse

The demo has its own journey: it loads behind a HUD that lays out the controls, walks you up to the stand, runs the kiosk by itself until you move the mouse, then lets you lean in, look down at the console and press through the flow.

1. 01Load
2. 02Arrive
3. 03Watch
4. 04Take over
5. 05Lean in
6. 06Use it
7. 07Explore

Step 01 / 10

The room builds

The reticle fills while the room, the stand and the interface load. The controls are laid out on either side before you go in.

←→

A client can try the kiosk before a single stand is built. The screens render in 7 to 12 ms a frame, the 3D showcase loads in about 2.4 s (down from 6.3 s), and the build is now the template for my next kiosk and multi-screen projects.