CONCEPT 01/03 · FINTECH / B2B SAAS

Oarlock

One number, honestly.

Concept work · self-initiated · not a client commission

oarlock — conceptOpen full screen ↗
The Oarlock concept homepage, first screen.The Oarlock concept homepage on a phone, first screen.
Concept work · self-initiated · not a client commission · sample data

The brief, written in the buyer’s voice

CFOs at companies with forty bank accounts use our product every morning, but our website looks like every other dashboard vendor’s. We’re losing the shortlist before anyone books a demo.

Our insight

CFOs don’t buy dashboards. They buy the moment they stop guessing. Every treasury vendor shows a screenshot full of charts, but the question the buyer actually brings is one sentence: how much cash do we have, right now, everywhere? The site should answer that sentence before it says anything else.

The idea

One number, honestly. An oarlock is the small fixed point that lets one stroke move the whole boat. The site works the same way. One figure sits at the centre of the page, and everything else shows where that figure comes from.

What we built

In the live concept

The concept is one scrolling page. Everything below is in it and works in the frame above.

  • The hero figure (#hero, #figure). One headline cash position (sample data) under the line “Your cash position. All of it. Now.”, with a status line that says how many feeds are current and flags the one that isn’t.
  • Three verbs (#product). Position · Forecast · Move link from the hero to three chapters on the same page: a position table by entity (#position), a sample 13-week forecast chart with its uncertainty band and a minimum-cash line (#forecast), and an intercompany sweep with its approval steps (#move).
  • Two paths, one fork (#paths). Two tabs, “I sign off on it” (CFO: control, audit, time to value) and “I run it every day” (treasury team: connectivity, forecasting, exceptions). Same product, different first paragraph. Arrow keys move between the tabs.
  • A security & controls section, written for the auditor (#security). A plain-language data-flow diagram, a permission table by role, and a certifications list where every status is an empty “Supplied by client” slot.
  • An integrations block (#integrations). A search field and six placeholder tiles for banks, ERPs and identity providers. No real logos. The search field is a visual stand-in: it doesn’t filter anything yet.
  • An empty proof slot. Labelled “Customer proof, supplied by client”. There are no testimonials, real or invented.
  • A two-step demo request (#demo, #demoForm). Step one asks for bank accounts, legal entities and currencies with steppers. Step two shows those numbers back and asks for name, work email and role. The concept doesn’t send the form anywhere.

Designed, not built in the concept

  • We specified a separate Security & controls page for auditors. The concept has it as a section.
  • We specified an integrations index searchable by bank and ERP. The concept shows the search field and placeholder tiles only.
  • We specified the demo request handing the account, entity and currency counts to sales before the first call. The concept has no back end.

Signature interaction: the Reconciliation

Try it in the frame above. As you scroll the hero, thirty-eight sample account ledgers in six currencies and four time zones, each with its own bank and timestamp, slide across, convert to US dollars at one 08:00 ET rate, and settle left to right into one horizontal bar. The headline figure fills in as they land. When the bar is complete, hover, tap or focus any segment to see the bank, the entity, the local balance, the rate and the “as of” time behind it. The arrow keys step from segment to segment. One UK feed is late, and it stays in the total, marked in rust and labelled as a last known balance.

With reduced motion, the bar is already assembled when the page loads, and every segment can still be inspected.

Visual direction

These are the concept’s colours, not Vivid’s.

Role Name Hex
Ground (dark) Harbour Ink #0E2233
Ground (light) / text on dark Chalk #EEF1EE
Signal / the one number Brass #C8902E
Secondary text, rules Slate #5B6B76
Positive / settled Sea Glass #2F7D6B
Exception / unreconciled Rust #B44A2E

Type: Newsreader for display, set large and tight for the figure and headings. Geist for UI and body. Geist Mono with tabular figures for every number. All three are open-licence fonts, self-hosted in the concept.

Mood: calm, exact, unhurried. The grid is visibly a ledger, with 12 columns and a hairline every 8px of baseline. There are no gradients and no glass.

The outcome we designed for

A CFO who arrives from a peer’s recommendation should be able to say what Oarlock does after the first screen, and should reach a demo request that already carries their bank and entity count. That way the first sales call starts at the second conversation.

House-rule note

Figures inside the concept are sample data. Oarlock is a fictional brand.

Let's build yours.

Tell us what you're making. You'll hear back from the people doing the work.