The Flex · October 2026 · design challenge
A design challenge from The Flex. Flex Academy teaches people to start and grow a short-term rental business. The page had to work for someone with a 9-to-5 job who has never rented out a flat, and for an operator who already runs a few. I designed one page with a switch between the two readers and built it on a token-based design system in Figma. I also shipped a working prototype in light and dark, with automated accessibility tests.
problem
One page had to work for two very different readers. Both are tired of "guru" courses. A new company has no students and no reviews to show it can be trusted.
decision
The hero is a calendar. The first row is your first unit, the rows below are the units you add next: the path from Launch to Scale in a tool operators already know.
result
Desktop and mobile pages, both booking flows with no dead ends, dark mode, and a coded prototype that checks accessibility on every push. No launch numbers: it was a take-home.
the ideas that made the page work
decision 1 of 3
Operators use a calendar all day: bookings, check-ins, cleanings. So the hero is a calendar. It passes the 5-second test without a slogan: the visitor sees their own first unit and the units after it. The “You are here” marker moves when the reader switches path.
decision 2 of 3
The free webinar sits on the calendar as an event, with a date, a length and the hosts. So signing up feels like booking one hour of your time. The strategy call asks four short questions first. If you answer “no units yet”, it offers the free webinar instead, so every reader has a next step.
decision 3 of 3
I used no income claims, no countdowns and no fake testimonials. A section called “The hard truth” shows one real day across three units, first without a system and then with one.
the process, short
method · seven steps
The same steps, two ways: what I did alone in the time I had, and how I would run each step as a lead, with a PM, an engineer and a researcher.
what I did · two jobs, four principles
Two jobs-to-be-done, one per reader, and four principles that became the review criteria.
Gate: every later choice is checked against the principles.
why this step matters
The brief is about trust. Framing it that way changed every later choice.
with a team · how I would lead it
A one-hour kickoff with PM, engineering and research. We agree the jobs, the success metrics and what we will not do.
Gate: signed-off brief on one page.
what I did alone
Two jobs-to-be-done, one per reader, and four principles that became the review criteria.
what I did · fact bank, 45 references
Audited both parent brands for facts and voice. Collected 45 references, each with the one principle to take from it.
Gate: a fact bank. If a claim is not in it, it is not on the page.
why this step matters
Without a fact bank, "proof" turns into marketing copy.
with a team · how I would lead it
Same desk research, plus five short interviews per audience before high fidelity.
Gate: top three objections per audience, in their words.
what I did alone
Audited both parent brands for facts and voice. Collected 45 references, each with the one principle to take from it.
what I did · ten sections, every state
Low-fidelity wireframes for the full page and both booking flows, with every state.
Gate: the structure passes the three brief tests on paper.
why this step matters
Changing the structure in grey wireframes costs less than changing it in the final design.
with a team · how I would lead it
Wireframes reviewed with PM and engineering before any visual work.
Gate: structure frozen, so visuals do not reopen it.
what I did alone
Low-fidelity wireframes for the full page and both booking flows, with every state.
what I did · directions with the same content
Explored several art directions with identical content, so only the idea changed.
Gate: one direction, plus the best ideas taken from the others.
why this step matters
With the same content in every direction, we judge the idea itself.
with a team · how I would lead it
Two or three designers explore in parallel for a fixed time, then we hold one critique.
Gate: decision log entry with what we chose and what we dropped.
what I did alone
Explored several art directions with identical content, so only the idea changed.
what I did · one page, two paths
Built the chosen direction at full fidelity, on desktop and mobile, with both flows and the motion prototype.
Gate: both readers can act from any point of the scroll.
why this step matters
Full fidelity on both screens, because mobile changed the design the most.
with a team · how I would lead it
Weekly design review with the whole team. Usability test the prototype with five people per audience.
Gate: usability findings addressed, stakeholders signed off.
what I did alone
Built the chosen direction at full fidelity, on desktop and mobile, with both flows and the motion prototype.
what I did · tokens, components, docs
Every value on a token, every component with properties and a description, a Tokens page that documents itself.
Gate: 100% coverage on the final page.
why this step matters
Measuring coverage shows how much of the page uses the system.
with a team · how I would lead it
The tokens become an agreement with engineering, with a simple way to change them.
Gate: the token file and the CSS always match.
what I did alone
Every value on a token, every component with properties and a description, a Tokens page that documents itself.
what I did · prototype with tests
A coded prototype with CI: HTML validation, axe in light and dark, overflow checks, end-to-end flows, preview link per change.
Gate: CI green, preview approved.
why this step matters
Tests that run on every push check every change automatically.
with a team · how I would lead it
Engineering builds. I pair on the first components and review every preview link.
Gate: metrics live on day one, with the guardrails.
what I did alone
A coded prototype with CI: HTML validation, axe in light and dark, overflow checks, end-to-end flows, preview link per change.
research
I went through theflex.global and base360.ai for every public fact. Then I collected 45 references from Mobbin, Awwwards, Codrops and others. Every card ends with “Take:”, the one thing I use from it.
structure first
The wireframe had ten sections, each with one job, and both booking flows with every state. The structure worked, but the page was only boxes and lines.
wireframe final art directions
I explored art directions side by side with identical content, so only the idea changed. I judged each one against the three tests of the brief and the four principles.
every layer on a token, in Light and Dark
inspect
47 primitives, 30 semantic tokens with a Light and a Dark mode, 20 spacing steps and 8 radii. Each pin is a real layer in the Figma hero. A click on a pin lists its tokens, and Dark shows the same layers with new values.
launch/accent fill · #284E4C#2F6360 text/on-accent label · #FFFFFF#FFFFFF Button/16 text style · Geist SemiBold 16Geist SemiBold 16 radius/16 corner radius · 16 px16 px space/28 padding · 28 px28 px bg/surface fill · #FFFFFF#141D1A launch/tint thumb · #DDE9E2#1F3A36 border/default stroke · #E2E5E0#26312E radius/12 corner radius · 12 px12 px space/4 padding · 4 px4 px scale/tint fill · #E6EAFF#222B57 scale/text label · #3350DB#A9B8FF bg/surface fill · #FFFFFF#141D1A launch/accent date bar · #284E4C#2F6360 shadow/key effect · ink 14%black 50% space/24 padding left · 24 px24 px space/12 gap · 12 px12 px 15sets
component sets, each with a description
54variants
with named properties, no detaching
36styles
text styles in six roles
2modes
Light and Dark, on every page
coverage, measured by a script over all 785 layers of the desktop page
77/77 strokes on a token · 329/329 text on a style · 118/118 radii on a token · 1,182/1,182 gaps and padding
a prototype built with production habits
production habits
how I worked with AI
I used Claude as a fast helper. I made the decisions: who the page talks to first, the calendar idea, what counts as proof, which directions to drop. Claude helped me research faster, gave me options to react to, wrote most of the prototype code from my specs and ran the checks. I reviewed everything on the page.
how I would measure it, and what I learned
how I would measure it
what I learned
Added AI that answers the questions salespeople were answering by hand. Shipped in two rounds within two weeks.
AI, SaaS aisaas + Open live demo Live demo
