Built with Framer
OneTwenty | Website Concept Development
Max Iriani
Direction A Live: https://onetwenty-direction-a
Directon B Live: https://onetwenty-direction-b
The first ten seconds...
The US longevity membership OneTwenty asked for a header, a hero, and one section beneath it. The brief said two opinionated directions beat four safe ones. Here is what I did with that, and why.
01 · The brief
One line gave permission
The scope was three blocks — header, hero, and the section that has to earn the scroll — on desktop and mobile, buildable in Framer. OneTwenty sells a $499-a-year membership: a 95-marker baseline, quarterly retests, wearable and device data flowing in, and a protocol that updates on that cadence.
Two sentences in the brief did most of the steering. The first was the obvious one: two opinionated directions beat four safe ones. The second was quieter, and mattered more:
"A description of the idea, not a design. Find a better way to say it than we did."
That is permission to change the words, not just the layout. Most briefs don't give it. I took it, and it set the shape of everything that followed.
02 · Where I started
Not on the canvas
Before opening Framer I read the live site, the beta checkout, and a preview of the product itself. Three things came out of that. One of them reframed the project.
First:
The checkout explained the membership better than the entire marketing site
The beta checkout states the cadence plainly, mentions that you can upload past labs so your trend starts years back instead of at zero, mentions human coaches, and confirms a testing location near you before you pay. All of it clear, all of it specific.
Only people who had already decided to buy ever read it. The best writing the company owned was sitting behind the purchase.
Second:
Three testing frequencies, three biomarker counts, five names for one button
I first wrote those down as separate errors. They aren't. They're one gap: nothing had been written down defining what the company says, so every page was inventing its own numbers.
That costs a diagnostics company more than it would cost anyone else. When the product is the data, inconsistent numbers read as imprecision in exactly the place the brand can least afford it.
Third:
The category is visually identical
The two largest competitors both open with a cinematic portrait on a dark ground, an HSA/FSA badge above the fold, and a row of statistics. The same hero, three times over. And the best-documented complaint about the market leader isn't the price — it's data overload without guidance.
Which meant the opening could either be that hero done better, or something else entirely. That question became the two directions.
03 · The wedge
Everyone sells testing. Almost nobody sells cadence.
The membership isn't a test. It's an interval — a baseline, then retests shaped by the previous panel, then a protocol that moves every ninety days. That interval is the part a competitor can't copy in a quarter, and it was nowhere in the top of the site.
A year is a long time to guess.
Everything below that headline exists to make the interval concrete without repeating it.
04 · Decisions before pixels
Four calls that came out of the business, not the moodboard
Two of four navigation slots were going to a catalogue
The menu gave half its space to Medications and Supplements, and none to price or to how the membership works. Read cold, that is a pharmacy with a dashboard attached.
So I folded both into one item: Protocol
Not my invention, really — the product already said it, in its own words, inside the app: "Anything prescribed here runs on a loop, not a checkout." Medications and supplements are an output of the system, not the system. Naming them Protocol puts the catalogue one level down, where it belongs, and stops the navigation promising two businesses at once.
The freed slot went to Pricing
Which didn't exist in the menu at all. This was the most expensive membership in its category, and the most expensive product is the one that can least afford to hide its price.
One action, one name
The site used five names for the same button: Get started, Become a Founding Member, Join the Beta, Claim your spot, Join OneTwenty. Five names produce no memory and no measurable funnel. I proposed Start your baseline — the actual first step, in vocabulary the company already used at checkout, and unlike "Founding Member" it survives the end of founding pricing.
05 · Two directions
One is a claim. The other is a question.
The brief asked for opinionated, so I made them disagree about where the first ten seconds should start.
Direction A · The instrument
Shows you the machine.
Opens with the mechanism and proves it with real product interface. Grotesque type, sky as an abstracted ground, and the app's own colour language — lime for on target, amber for out of target. Argues by evidence.
Direction B · The publication
Based on a Framer Template... this direction makes you doubt your last result.
Opens inside the reader's own uncertainty and earns the mechanism afterwards. Serif at 136px, a photograph that holds the screen, editorial pace. Argues by tempo.
→ Direction A competes on the category's axis and tries to win it.
→Direction B declines that axis and moves the conversation somewhere the competitors aren't standing.
The part I'd defend hardest
The headline and the key sentence are nearly identical in both directions. That was deliberate.
If two directions differ in words and type and colour and pace, nobody in the room can tell which variable earned their reaction. Holding the copy constant made it a controlled comparison instead of two moodboards — the choice on the table was how the brand should sound and move, not what it should say.
06 · The moment
A section that performs its own argument
Direction B's second block pins to the screen and runs four beats as you scroll.
The portrait defocuses but keeps its colour, so the white type becomes legible without the image going flat or grey.
The line holds — roughly 500px of scroll where nothing moves and the sentence can actually be read.
The ground dissolves to white, and the header crosses from white to sage halfway through that dissolve.
Only then does a switch turn on, and the copy changes underneath it.
07 · Built, not mocked up
Both directions shipped as working Framer sites
Desktop, tablet and phone. Where the canvas couldn't reach, I wrote code components rather than faking the effect in a static image.
Progressive blur under the header: Eight stacked layers, each doubling the blur and masked to its own slice of a gradient, so the ramp never ends on a hard edge.
Scroll-linked curves: Two long strokes that are partly drawn at rest and finish exactly where they meet the switch in the section below, with a late acceleration on arrival.
Tiling film grain: Framer stretches image fills, which turns fine grain into blotches. Rebuilt as a repeating background so the texture holds its scale.
The logo as vectors: Redrawn from paths so it takes the header's colour in both states rather than needing two files and a crossfade.
08 · How I work
What this project is an example of:
I read the brief for the sentence that gives permission. Here it was "find a better way to say it than we did." That one line is the difference between decorating a page and fixing what it says.
I go to the product before the canvas. The best line in this project was already written — it was sitting in the checkout, where almost nobody read it.
I look for the single cause under a list of symptoms. Twelve inconsistencies turned out to be one gap, and naming it was worth more than listing them.
I hold a variable still so the comparison means something. Same words, two registers.
I write down the weakness in my own work before the client finds it. Direction B borrows the grammar of wellness, which is the exact register this brand needs to avoid. I put that in the handover, with the fix.
09 · Outcome
The engagement didn't continue past the exploration
It was a paid exploration ahead of a larger scope — full site, landing pages, email, packaging and app UX — and that scope didn't proceed. I'm publishing it anyway, because the part that transfers isn't the artwork.
It's the diagnosis, the navigation argument, and the decision to build two directions that genuinely disagree rather than four that politely differ.
Like this project
Posted Sep 8, 2026
Developed two website concepts for OneTwenty's membership, focusing on brand messaging.
Likes
1
Views
6
Timeline
Aug 27, 2026 - Sep 2, 2026
Clients
OneTwenty
