The Key

The brief

The Key is an affordable-housing venture for key workers: homes 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 audiences at once, and give one of them the tools to underwrite the venture. So it became two products behind one brand: a public marketing site that explains the mission and the investment case, and an 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. 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 geometric sans, a warm off-white background, and a deep navy with one blue accent. It is set like a magazine rather than a corporate brochure, and it was built mobile-first with accessibility checked at every stage. 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: an application, entered only after sign-in, that lets a professional test the numbers behind the marketing site. It has 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, so a counterparty can run the numbers on a site and stress-test the assumptions themselves. The methodology belongs to The Key. Our job was to build it faithfully, and the tool reconciles against the venture's own figures to the penny.

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. There are also team profiles, in-app messaging, and an admin area for users, permissions and the pipeline.

Security by design

The data room holds commercially sensitive material, so security was part of the brief from the start. Every request is authenticated and authorised on the server, and anonymous access is refused. 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 backups run on an encrypted schedule. The build is checked against a security checklist on a regular cycle. The public site is cookieless, with no tracking or third-party scripts, which is what its privacy policy says.

What shipped

A hand-coded build: statically served marketing pages plus a real-time data room on serverless auth, signed document links and background jobs. It is mobile-first, passes Google's Core Web Vitals, and shipped with 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.