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 much key-worker demand is around it? Drop a marker or a postcode and the map shows the workforce a site could serve, with the hospitals, schools and transport links nearby. It is built entirely on published public data, engineered so that no user data ever leaves the browser.

And the Site Assessment, the centrepiece: a full interactive financial model of the venture, live in the browser, that lets a professional counterparty run the numbers on a site and stress-test the assumptions for themselves instead of taking a PDF's word for it. The methodology belongs to The Key. Our job was to engineer it faithfully, and we held the tool to an exacting standard: it reconciles against the venture's authoritative figures, exactly.

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. Nothing is trusted client-side: every request is authenticated and authorised on the server, and anonymous access is denied outright. Two-factor sign-in is mandatory, with passkey and authenticator options alongside it so a lost device never locks anyone out.

Credentials are stored to current best practice, sensitive endpoints are rate-limited, access can be revoked instantly, and everything is backed up on an encrypted schedule. The build is audited against a security checklist on a regular cycle rather than assumed safe. 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.