NOI ENGINE

NOI Engine — Homepage Redesign

Four directions to choose from. Same content, same figures, same product — three genuinely different ways of presenting it. They are structurally different, not three colourways of one layout: different macrostructure, different typefaces, different photographic treatment, different amount of motion.

Nothing here is live. The current site is unchanged at noiengine.com and stays that way until you pick one.

Section 01

The four directions

Each panel opens its full prototype in a new tab, so you can flip between all four without losing your place here.

01 Direction One

Blue Hour

The flash option — this is what “cinematic” means.

A cinematic full-bleed photographic site where the Upstroke behaves like a real banknote watermark — visible only where the photograph’s tone lets it through.

The single best photograph available to this business has never been taken by anyone in proptech: a long lens on an apartment facade at full dark, compressed, where only some units are lit. That photograph is the occupancy rate. Put a real vacancy figure under it as a cutline and you have said the entire product in one frame, before a word of copy.

Blue Hour is built on that end to end. Each fold is a single full-bleed photograph — the asset at civil twilight, a leasing office’s second monitor with a rent roll open, a maintenance cart in a breezeway at dawn, a lease signature page under hard window light. Type is small annotation in the corner of the plate, never a centred headline over an image. The image edge is the divider; there are no rules and no cards anywhere on the page.

Who it beats: Entrata’s video hero and five-colour automation cube, Yardi’s rotating carousel over stock cityscapes, RealPage’s four equal pillar blocks. None of them has a photograph of a real building at night with a real number under it. This does not look like a vendor site — it looks like a private-credit fund’s annual report, which is the register that makes a COO slow down.

Signature move
The Upstroke watermark that behaves like a real one. Because it uses soft-light rather than a flat opacity, it appears out of the shadows and sinks back into the midtones as you scroll from a lit twilight facade to a dark boiler room. It is never the same twice on the page, and nobody looks at that and thinks a template made it.

02 Direction Two

The Tape

The credibility option — this is what converts a cynic.

The homepage as a dated, footnoted operating note — serif body copy, a masthead with a dateline, real tables, and photography screened onto the page like newsprint.

Ask what document this buyer actually reads. It is not a SaaS landing page. It is an offering memorandum, a variance report, a quarterly operating note: numbered sections, rent roll and unit-mix tables, hairline rules between rows, figures aligned on the decimal, an as-of date on every table, and a broker contact block at the end. What it does not contain is a single rounded drop-shadow card, a single outline icon in a tinted chip, or an uppercase eyebrow above every heading.

The Tape imports that grammar wholesale. It opens with a masthead and a dateline, then does the one thing AI-generated marketing never does and serious capital sites always do: it leads with the method. Section 01 is not the problem and not the product — it is what we measured and how. Blackstone publishes “All figures as of…”. Sixth Street publishes an as-of date and a methodology note next to $135B. Your ~1,100 hours/month and ~$500K/yr are simultaneously your strongest asset and your biggest liability, because right now they are naked round numbers a spreadsheet-brained COO has been trained to discount. Footnote them and date them and they stop being vendor math.

The other structural decision is serif body copy: Source Serif 4 at 18px for running text, with Archivo — a grotesque — carrying display. That inversion is the single most non-SaaS typographic choice available and literally nobody in proptech does it. It costs nothing and it changes the class of the page immediately. This direction does not try to beat Entrata’s homepage; it beats the deck the last three vendors sent, because it is the only thing that looks like it came from inside the buyer’s own world.

Signature move
The dateline and the method-first sequence. A masthead reading OPERATING NOTE No. 1 · FIGURES AS OF [DATE], a section 01 that publishes the methodology before the pitch, numbered footnotes on every figure, and a colophon that names the source. It is the one move AI-generated marketing never makes and every serious capital site always makes — and it costs a designer nothing.

03 Direction Three

The Assay

The ownable option — nobody else in proptech looks like this.

A security-printed instrument on bone stock: photographs converted to intaglio line engraving, alternating diptych plates, and the Upstroke struck once as a circular assay seal that carries its own contract terms.

The brand metaphor is currency, bullion, proof, assay. Two of the four directions honour that metaphor. This one is it. The Assay moves the ground off navy and onto bone stock — a warm, dense certificate paper, not a SaaS off-white. Ink goes colder and blacker than navy. Gold stops being an accent colour and becomes foil: struck line-work and the seal, never a tint, never a background wash. And navy survives as exactly one moment — a single full-bleed plate roughly two-thirds down where the ~1,100-hours figure is struck large. That one navy fold is the brand handshake, and it lands harder for having been withheld.

The photography is converted, not filtered: a script samples luminance along contour paths and emits one filled polygon per scanline whose thickness varies with darkness — the currency-portrait treatment, the WSJ hedcut, the $100 bill. Brick coursing, a dented mailbox bank, an elevator inspection certificate, a corridor carpet seam, all engraved in gold on bone.

It is also why section 02 of this page is “What it will never do” rather than section 07: leading with the exclusions puts the contract terms above the product pitch, which is exactly the sequence a cynic wants and never gets. This is the one where a COO forwards the link saying “look at this.”

Signature move
The struck assay seal — a circular stamp carrying the actual contract terms (ENTRATA · READ-ONLY · NO RESIDENT DECISIONS) in monoline foil, rotated off-axis and cropped by the plate edge, appearing once at ~38vw at the top of the page and again at 120px in the signature block. It is a watermark that says something, which is the only kind a CFO trusts.

04 Direction Four · built from your references

Night Watch

The direct answer to 11 Tanjung, Bywater and EPAM.

A near-black field where the photograph dissolves into the page with no scrim at all, the headline carries a luminous bullion gradient, and your portfolio telemetry runs along the bottom edge as ornament that is also proof.

Directions One to Three were specified before you sent your reference sites. This one was built after, from what those three sites actually share: full-bleed media owning the fold, display type at three to five times conventional size, no navigation bar, hairline rules as structure, and nothing centred.

EPAM's move, translated. What makes that page feel expensive is a luminous gradient accent, cyan running into violet across one phrase. Cyan-violet would make you look like every AI company. The same technique in bronze to gold to champagne reads like light moving across metal, which is what a company called Midnight Bullion should look like. 11 Tanjung's move, translated. Their decorative GPS coordinates become 10 COMMUNITIES · 2,554 UNITS · 4 STATES · ~1,100 HRS RETURNED / MO, and the thin rule that cuts through their wordmark carries "read-only into Entrata" and the reconciliation timestamp.

The discipline it keeps: cinematic for exactly one fold, then straight into a ledger of the four catches as numbered rows. Both reference sites sell one thing to a consumer and can afford a fold that is all atmosphere. You are selling software to a skeptic, so the whiplash from beautiful to rigorous is the argument.

Signature move
The photograph is masked into the field rather than dimmed by an overlay. A dark rectangle laid over stock imagery is one of the most reliable AI tells there is; here the building simply stops existing where the type begins, so the type sits on true black and the photograph is never degraded. It is also the lightest page of the four at 20KB against 76 to 108KB.
Section 02

Side by side

Every axis that determines whether two pages feel like they came from the same studio has been forced apart. This is what that looks like as a list.

↔ Scroll the table sideways to see all four

Values taken from DIRECTIONS.md. Review scores are from the post-build QA pass on each prototype.
Axis OneBlue Hour TwoThe Tape ThreeThe Assay FourNight Watch
Structure Photographic — full-bleed plates, image edge as the only divider Long document — continuous prose, single 62ch column, real tables Split studio — alternating diptych plates, side-rail nav Marquee hero — masked full-bleed plate, then a numbered ledger
Typography Newsreader display (serif, 400 only) · Public Sans body · IBM Plex Mono data Archivo display (grotesque) · Source Serif 4 body at 18px/1.68 · IBM Plex Mono data Bodoni Moda display (≥40px only) · Libre Franklin body at 17px/1.60 Archivo 200 at 84px, IBM Plex Mono for telemetry
Palette Midnight Bullion, navy-dominant. Gold rationed to ≤10% of any viewport Midnight Bullion, paper-dominant. Gold never as text on stock Pushed — bone + near-black + foil + steel. Navy survives as exactly one plate Near-black field, bullion gradient accent
Photo treatment True soft-light watermark over an assay scrim; two-scale grain Ordered-dither halftone / newsprint screen, plus a press registration mark Intaglio line engraving in foil on bone, plus the struck assay seal Masked dissolve into the field, no scrim or overlay
Photo dependency Total. Needs a real half-day shoot or it collapses Low. The screen hides the difference between a phone and a Leica Medium. Line-art conversion, plus one continuous-tone plate One hero photograph. Lowest of the four.
Motion 3 primitives, cinematic — a 900ms plate-settle, then silence 2 primitives, near-static 3 primitives, struck One primitive — scroll reveal, transform and opacity only
Best for Flash. The one that satisfies “cinematic, film title sequence” Converting a cynic. Native to the documents a multifamily CFO already reads Being remembered. The most ownable, and the most expensive to get right Matching the reference sites you picked
Review score 7 / 10 8 / 10 8 / 10 Not swarm-scored — built after the review round
Section 03

How to reply

Whichever you pick gets refined and shipped over the live site. Until then noiengine.com is untouched.

  • Simplest Name one. Ship One, Ship Two, or Ship Three — that is a complete answer.
  • Or mix Name the section and where it comes from: “hero from Two, pricing from One”, “Three’s seal, One’s photography”. Section names are on each prototype, so pointing at them is enough.
  • Or veto If one thing is wrong and everything else is right, say just that thing — “all of Two but kill the serif body copy”. That is faster to act on than a rewrite.
  • The house call If you want a recommendation: build One’s opening 100vh on Two’s document body. The first fold is the title sequence; everything below it is the operator’s memo. That satisfies both halves of the brief. Caveat — ship one of the three cleanly before hybridising, because the hero is where a direction becomes legible.

Two things to know before you decide

  • The photography is placeholder. All four prototypes use licensed stock standing in for a shoot that has not happened. This audience identifies stock on sight, so the photo tier gets locked before the chosen direction is built for real — most acutely for One, which depends on it totally.
  • One number needs your answer. The suite item counts total 52 against 51 published. The hours reconcile perfectly either way, but the item count does not, and every prototype is currently publishing hours rather than guessing. Tell me which is right.