( Case study · Landing page · Education )
Landing page with two CTA flows
A landing page for Flex Academy, a new education product from The Flex (furnished rentals) and Base360 (property-management software), with two audiences and two doors: a free webinar for beginners and a free strategy call for operators.
( 01 ) The brief
One page, two audiences: people starting their first rental, and operators ready to grow into a company.
Flex Academy teaches people how to launch and scale a short-term rental business. It has two offers. Launch is for beginners and starts with a free webinar. Scale is for operators and starts with a free strategy call. The page had to serve both without making either feel like an afterthought.
What was required
- Desktop landing page (1440 px), full scroll
- Mobile (390 px): hero and one more section
- Both CTA flows: button state → form or calendar → confirmation
- A one-page design-notes frame with the UI and UX reasoning
What I delivered
- Full desktop landing page in the real brand colors
- Mobile hero and programs section, as a toggle
- Both CTA flows, webinar and strategy call, including confirmations and the zero-units edge case
- Desktop pop-up flow with button states: default, hover, pressed, disabled, loading
- A unified brand system: the warm Flex world, with Base360 blue only where the software lives
- Per-section annotations explaining each UI and UX decision
( 02 ) Key decisions
Beginners can act at first glance, and operators always have their own door.
Two doors
Webinar form first, strategy call second
The hero leads with the free webinar form for the main audience, with a quiet strategy-call link for operators that repeats in every key section.
Color as signpost
Blue only where Base360 lives
The warm Flex palette carries the page. Blue appears only on the Scale path, so color tells you which path you're on.
Honest by default
No hype for a skeptical audience
A row-by-row comparison with YouTube, cheap courses and masterminds, "No upsell pressure" in the form, and no income promises.
( 03 ) Desktop prototype · 1440
Try both flows. Every CTA on the page opens its real pop-up.
This is the working prototype: scroll inside the page and click any button, including the nav. In a pop-up, click the form or calendar to fill it in. Hover a numbered dot to see why each section works the way it does.
Best on a larger screen. On a phone, try the mobile prototype below.
Strategy call · 3 steps · 6 statesWebinar · 3 states
( 04 ) Mobile prototype · 390
Same two flows, rebuilt for the thumb.
Webinar: a bottom sheet
Tap “Register for free webinar” in the hero or the sticky bar. The sheet keeps the page visible behind it and uses the same three fields as the hero form.
Strategy call: full screen, three steps
Tap “Book a free strategy call”. Chips, a swipeable date row and time slots, with the main button fixed at the bottom.
Programs: a toggle, not two columns
On a phone people choose one at a time, so “I’m starting out” and “I run units” switch between the two offers.
( Next case study )
Bloom( Like what you see? )