CONCEPT 01/03 · FINTECH / B2B SAAS
Oarlock
One number, honestly.
Concept work · self-initiated · not a client commission


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.