Nimbus — Case Study
A self-initiated concept: designing and hand-coding a conversion-focused landing page for a fictional AI-native project tool — from competitor research to a shipped, responsive front-end.
The brief I set myself
The project management space is crowded and beautifully designed — Linear, Notion, Height, Asana and ClickUp all invest heavily in their marketing sites. I wanted a realistic exercise: invent a credible product, Nimbus, and build the kind of landing page that would actually convince a busy product lead to start a trial.
The goal wasn't just "make it pretty." It was to practice the full loop a real client engagement needs — positioning, competitor analysis, conversion structure, and a fast, hand-coded front-end — and to have a tangible piece that demonstrates each.
What the best SaaS sites get right
Before designing anything, I studied the category leaders and pulled out the patterns that consistently drive conversion. A few clear themes emerged:
Cross-referencing conversion research confirmed the fundamentals: headlines under ~44 characters, social proof placed next to the CTA, benefit-led feature storytelling over feature lists, one strong testimonial, transparent pricing with a single highlighted tier, and an FAQ to clear objections before the final call to action.
Finding Nimbus a wedge
Competing on "another project tool" is a losing game. So Nimbus took a page from Height and picked one sharp promise: "the workspace that keeps itself up to date." The AI does the busywork — status updates, sprint rebalancing, risk flags — so teams get their Fridays back.
That single idea drove the headline ("Ship faster. Manage less."), the product mockup (a live task board with an AI panel writing the status), and the metrics band (fewer meetings, hours saved). Everything on the page reinforces one message.
Choices that made it feel premium
Dark, glass aesthetic
An OLED-black canvas with soft mesh-gradient orbs and frosted glass — the visual shorthand for modern, technical SaaS.
Product-led hero
Rather than a stock image, I built the interface in CSS — a real-looking task board and AI assistant — so value is visible instantly.
Asymmetric bento
Features live in a varied grid — one hero card for the AI story, smaller cards around it — to break the boring 3-column rhythm.
Motion with intent
Custom-eased scroll reveals and button micro-physics add polish, gated behind prefers-reduced-motion for accessibility.
Fast, hand-coded, self-contained
The whole page is a single hand-written HTML file with inline CSS and a few lines of vanilla JavaScript — no framework, no build step, no external images. The product mockup is pure CSS, so it stays razor-sharp at any resolution and adds nothing to load time.
Motion is done right: scroll reveals use an IntersectionObserver (never scroll listeners), and every animation runs on transform and opacity only to stay smooth on mobile. The layout collapses cleanly to a single column, and the floating nav becomes a full-screen glass menu on small screens.
How I'd measure it
As a concept there are no live conversion numbers — so instead of inventing them, here's exactly what I'd instrument and optimise for if Nimbus were real:
- Hero-CTA click-through as the primary north-star metric, A/B tested against headline variants.
- Scroll depth to the pricing section — the industry median SaaS page converts at ~3.8%; top quartile ~11%+.
- Core Web Vitals in the green — a self-contained, image-light build makes this achievable out of the box.
- Free-trial starts vs. demo bookings, to learn which CTA the audience actually prefers.
Want something like this built?
This is the kind of landing page I design and code for real products. If you've got one to launch, let's talk.
Start a project →