The Key

The brief

The Key is an institutional affordable-housing venture with one sharply defined mission: deliver genuinely affordable homes for key workers, close to where they work, at rents pegged to a fixed share of income. The nurses, teachers and transport staff who keep the city running should be able to live near the work they do.

The site had to serve two very different audiences at once, and give one of them the tools to actually underwrite the venture. So this was never a single website. It was two products behind one brand: a public, brand-led marketing site that explains the mission and the investment thesis, and a secure, invitation-only data room where professional counterparties run their own diligence. Both share one design language and one codebase.

The approach

We started with structure, not visuals. The public site was mapped around its readers before any design work began: a home that frames the social problem and the ESG case, then two clear pathways, one for the people the housing serves, one for institutional stakeholders, with dedicated tracks for investors, development partners and the delivery pipeline.

The design leads with the people. A serif display face paired with a clean geometric sans, a warm off-white paper background with a deep-navy and considered blue accent, staggered scroll reveals, and a strict rule against default framework aesthetics. Refined and editorial rather than corporate-generic, mobile-first and accessibility-conscious throughout. Every page was designed and signed off in the Meko portal, with feedback pinned directly on the previews, so nothing was built until The Key had approved exactly what they were getting.

The data room

This is the core of the build: a single-page application, entered only after authentication, that turns the marketing promise into something a professional can interrogate. It runs on five working areas.

A permissioned document library, where different roles see different diligence sets. Nothing is served from a permanent public link. Every preview or download resolves a short-lived signed URL at the moment of access, so files cannot be shared or scraped after the fact.

An Opportunity Map that answers one question for any site: how many key workers work within walking distance? Drop a marker or a postcode and the tool sums the key-worker population inside a one-mile catchment, then queries nearby hospitals, schools and transport. It blends open census, employment and pay datasets at a fine workplace-zone geography, and an in-app explainer documents every source and the catchment method. The whole pipeline runs client-side, so no user data leaves the browser.

And the Site Assessment, the centrepiece: an interactive financial model that computes affordable rents anchored to local key-worker income, builds the rent roll across income bands, and runs the full development economics for both development-funding and forward-purchase structures. It carries sensitivity controls, scenario analysis and a break-even goal-seek, fed by a live gilt benchmark. We engineered it to reconcile line by line against the venture's authoritative spreadsheets, with a firm rule of diagnosing definitional differences rather than fudging figures to match.

From there, users export lender-grade PDFs entirely in the browser: a Financial Summary and an Asset Overview, complete with composited map imagery rendered from tiles rather than screenshots. Team profiles, secure in-app messaging, and an admin back-office for user management, permissions, pipeline editing and live presence round out the environment.

Security by design

Because the data room holds commercially sensitive material, security was a first-class deliverable, not an afterthought. Server-side authentication with per-collection access rules, anonymous access denied outright. Mandatory two-factor by email code, with authenticator-app and passkey sign-in as parallel options so a lost device never locks anyone out.

Password secrets stored separately and hashed with salted scrypt. Rate limiting on every sensitive endpoint, instant offboarding, daily encrypted backups, a strict Content-Security-Policy, and periodic self-audits against a security checklist. The public site is deliberately cookieless: no tracking, no pixels, no third-party storage, exactly as its published privacy and cookie policies state.

What shipped

A fully bespoke, hand-coded build with no templates and no page builders: statically served marketing pages plus a real-time data room on serverless auth, document-signing and background jobs. It is mobile-first, passes Google's Core Web Vitals, and shipped with technical SEO in place from day one, clean URLs, structured data, and copy written to be found.

The work ran through the Meko portal from kickoff to launch, with live previews at every stage and a formal sign-off before anything went into production.