Studies
Loft & Co.
Property listings with a grid and map toggle, and a mortgage calculator that does the arithmetic.
The brief
A study. Loft & Co. is not a real agency. It was built around the two things property sites are usually worst at: letting people browse the way they actually think, and telling them what a place really costs.
The constraints
- Two mental models, one dataset. Some buyers think in lists, others think in locations, and forcing either group into the other's view loses them.
- The arithmetic has to be right. A mortgage figure that is merely decorative is worse than no figure at all.
- Detail without losing your place. Opening a listing should not mean re-finding your position in the results afterwards.
The decisions
Grid and map are the same results, not two features
One toggle, one filtered set, two ways of reading it. The alternative — a map page and a listings page that drift apart — is how property sites end up showing different counts in different places.
What it costs: every filter has to render correctly in both views, forever.
The mortgage calculator computes properly
Deposit, rate and term produce a real monthly repayment using the standard amortisation formula, updating as you move the inputs. It sits on the listing, where the question is actually being asked, rather than on a separate tools page nobody visits.
What it costs: a real number invites scrutiny. That is the correct pressure to be under.
Listings open as overlays over the results
Detail appears above the grid rather than replacing it, so closing returns you exactly where you were, with your filters and scroll position intact.
What it costs: overlays need focus management, an escape route and correct dialog semantics to be usable by keyboard. And they carry the failure mode below.
The bug worth publishing: nothing on this site was clickable
A hidden overlay carried position:fixed; inset:0 and a class with display:flex. Because the class's display outranks the hidden attribute, an invisible full-viewport panel stayed in the layer stack and intercepted every mouse click on the page. The site looked perfect and did nothing.
The tests passed throughout, because driving a page with element.click() dispatches straight at the element and bypasses hit-testing entirely. A click-blocking overlay is invisible to that method.
The fix was one CSS rule. The lasting change was to the testing: interactive controls are now verified with document.elementFromPoint(), asserting the element is genuinely topmost.
What it costs: nothing but the admission. A studio that has never shipped a bug either hasn't shipped much or isn't saying.
Built with
- Vanilla JS
- Inline SVG map
- Dialog semantics
- Cloudflare Pages
