Hyperlocal directory · Workspace comparison · Case study
21 providers. Real prices. One independent comparison.
Offices in Leeds: a hyperlocal workspace directory on Next.js, Vercel London, Cloudflare Images and OpenStreetMap, with independent positioning.
- Next.js App Router (server components)
- Vercel London (lhr1) edge caching
- Cloudflare Images (imagedelivery.net)
- OpenStreetMap tiles
- Client-side multi-select filtering
- ⌘K command palette
- Stripe Connect payouts
- Supabase with RLS
Offices in Leeds is what a hyperlocal comparison directory should look like in 2026: single city, single category, real numbers, no SEO clickbait. The H1 reads “The Smarter Way to Find Office Space in Leeds.” The subhead, in the same breath, states the entire competitive position: “21 providers. Real prices. One independent comparison.”
This case study is about a build where the positioning and the engineering are the same decision. Every technical choice on the site, the caching, the maps, the image pipeline, exists to make one claim credible: that this is a straight comparison, not a dressed-up advert.
The challenge: an office-search market built to look independent
UK office-space search is dominated by lead-gen aggregators that sell tenant enquiries to providers. They appear free; they are not. The cost is paid by the provider, who recoups it from the tenant’s rent, who then never sees the “comparison” that was not actually comparing. Ranking follows spend, listings sprawl into the hundreds, and the tenant is left doing the real comparison work themselves in a spreadsheet.
The brief was to build the opposite of that, and to make the difference obvious the moment someone lands on the page.
The approach: narrow on purpose, honest by design
Offices in Leeds plays the opposite move on three axes:
- Single city, Leeds, with seven sub-area filters (city centre, west, east, south, and so on)
- Real prices, published price bands per provider per service type, shown rather than gated
- Independent, no provider-paid placement, no rank-for-pay in the default view
The narrowness is the positioning. A tenant typing “office space Leeds” wants 21 honest options they can actually work through, not 500 lazily-indexed listings. Scoping to one city and one category means the directory can be comprehensive, and comprehensive is what makes it trustworthy.
What we built
- 5 service categories, virtual offices, serviced offices, coworking, registered addresses, meeting rooms
- 7 Leeds-area filters, segments the city the way local search actually works
- Price band £10 to £550/mo, virtual-office floor through to premium serviced suites
- Multi-select filters, service type × area × price × amenities (combine freely)
- Side-by-side compare, pick up to four providers, see the spec sheet stacked
- Cost calculator, input headcount + tenure, get a real monthly estimate
- ⌘K command palette search, power-user UX usually reserved for SaaS dashboards
- Interactive map (OpenStreetMap), providers plotted, click to inspect
- Blog / guides / compliance calendar, editorial keeps the page alive for crawlers
The stack, and why each choice matches the positioning
Nothing here is decoration. Each piece of the stack earns its place by making the directory faster, cheaper to run, or more clearly independent.
Next.js on Vercel London (lhr1). App Router, server components by default. The build is heavily edge-cached: the home responds with x-vercel-cache: HIT at an age of several thousand seconds (multiple hours), meaning the shell is served straight from the London edge POP while the filter interactions run on a client-side filtering layer over already-shipped data. The result is a page that is cheap to run and instant to interact with, because the expensive work happened once at the edge, not on every request.
Cloudflare Images for thumbnails. imagedelivery.net URLs appear in the rendered HTML, so provider thumbnails are never raw uploads. They are resized and format-optimised on delivery, served at the resolution the user’s viewport actually needs, with no bespoke asset pipeline to build or maintain. On an image-heavy directory that keeps bandwidth, storage, and build time down at once.
OpenStreetMap, not Google Maps. The Content Security Policy allows *.tile.openstreetmap.org and nothing from Google. That removes the Google Maps SDK weight (roughly 250KB minified) and the Google JS tracker from the page bundle entirely. It matches the EU-sovereign house style: no US tracking on a UK-focused directory, and no per-load map billing on a cost-sensitive build.
Stripe and Supabase for the marketplace layer. This is not a static directory. Providers can sign up for paid placement tiers, and premium listings earn larger cards, featured-area placement, and direct enquiry routing. The listing data and tier grading live in Supabase with row-level security, and payouts run through Stripe Connect. The paid tiers sit on top of the independent default ranking rather than replacing it, so the comparison a tenant sees stays straight while providers still have a reason to list.
Why “independent” is the whole product
The positioning holds up because it answers both sides of the market honestly. The answer to “why list here?” is provider-side: because the alternatives are vendor-paid aggregators that distort the comparison, and a straight directory is where a serious tenant actually looks. The answer to “why search here?” is tenant-side: because the comparison is straight, the prices are real, and the map shows you where you would actually walk to.
That symmetric honesty is the case study. It is the same posture that drives the regulated-vertical pages on UK Web Marketing’s own site: the clinic, solicitor, school, and accountant pillars do not pretend to be objective ICO, SRA, KCSIE, or ICAEW guides; they are framed as “what a UK Web Marketing site does, given this regulatory landscape.” Same honesty, different vertical.
Patterns worth borrowing
Three engineering patterns from this build carry straight into client work:
-
Edge-cache the shell, filter client-side. The home is
HITwith multi-hour age. Filter UX is JS that operates on already-shipped data. Result: every interaction feels instant. -
Cloudflare Images for any image-heavy directory. Skip the asset pipeline entirely. Save bandwidth, save build time, save originator-storage costs.
-
OpenStreetMap for maps in cost-sensitive builds. Free tiles, no SDK weight, no tracking. The maps look identical to Google’s for non-power-user cases (provider plotting, area highlighting). Use Google Maps only if you actually need Street View, Place Autocomplete, or Directions integration.
Transferable to small-business clients
If you are building a UK hyperlocal site, a Leeds plumber-directory, a Bradford solicitors-cluster, a Manchester restaurants-guide, the Offices in Leeds pattern is the template:
- Pick a city × category narrow enough that 20 to 50 listings is comprehensive
- Publish real prices (or honest price bands)
- Position as independent
- Edge-cache aggressively
- Use Cloudflare Images for thumbnails
A comparison directory of this shape is a straightforward UK Web Marketing build: bespoke, quoted to the business, then website management from £49/month with no lock-in, cancel any time, and services may vary. Bookings and ongoing local marketing sit on top of the same management plan, so the directory captures opted-in interest alongside the search experience rather than being a separate cost. Where you are not sure what your site actually needs, the £300 Marketing and Automation Deep-Dive gives you a written audit and a fixed quote first, and that fee is credited against the build.
If you want the independent, honestly-built equivalent for your city and your sector, get in touch. We build and run it for you, with one accountable point of contact.