A meeting-room booking system
A mockup of meeting-room booking for ten rooms across five floors of a head office: a daily schedule, a floor plan, booking straight from the schedule by dragging across it, and a screen showing how much the rooms are actually used.
clash check behind every way in - the form, a drag on the schedule and Find a room - so two meetings cannot end up in the same room at the same time.
This is a mockup. The logo and brand name inside it are removed from every picture on this page.
What was done
The day's schedule is drawn as a grid of rooms against time, with a floor plan above it showing which rooms are free right now. Drag across a row of the schedule and the booking form opens with that room and that time already filled in.
The utilisation screen answers the question a facilities manager actually asks: how many hours each room is booked, what share of the available time that is, and how many bookings are still waiting for approval. The boardroom and the auditorium cannot be booked outright; bookings for those two are held as pending until facilities approve them.
One HTML file, 869 lines, no outside library. Bookings are kept in the browser, so this mockup can be tried without a server.