Frontier Tower Website

The problem

Frontier Tower is a 16-floor vertical village in San Francisco: robotics on one floor, biotech on another, an arts salon above that. Its website was mine, designed under time pressure and handed off. What shipped drifted: template gradients, generic icon grids, leftover “Taking Berlin as a Blueprint” copy on an SF building's site.

The site it replaced? I designed that one too. That's the story.

Before redesigning, I audited it. Nielsen's 10 heuristics, same rubric my build-time critique tooling uses:

The brief I gave myself: make the building legible, and close the gap between what I design and what ships.

My role

I led the design in Figma, and for the first time I carried it into production myself, with Claude writing the code while I made the design calls, tuned values by eye, and cut what wasn't working. The people around it shaped it: ops caught a tour CTA that was misrouting inquiries, and members' reactions retired my most ambitious idea (below). I'd have wanted more founder input than I got, and next time I'd ask for it earlier and more directly. The accessibility work I owned end to end, from the WCAG audit to the fixes, and I verified everything on real devices, at 360, 390, 768, and 1280px.

Ten weeks from brand to live, May to July 2026.

The system

A design system built for the landing, on purpose

Frontier Tower's app (FrontierOS) has its own design system. The landing page deliberately doesn't use it: a product UI and a marketing site have different jobs, and this one needed a more future-forward personality. What carries over is brand continuity, the purple, and the button's base design. Everything else below is a system I built specifically for the site:

• Hue 280. Every neutral is OKLCH-pinned to the brand purple's hue. Grays aren't gray; the page reads as one tonal family.
• One radius: 2px. “Just enough to not feel brutalist, not enough to feel app-y.” Buttons excepted at 10px, the one place the app system's DNA carries over, so CTAs feel like the product members will actually use.
• Hierarchy, audited. Mid-build I capped the type scale (hero 96→80, headings 56→48): maxed headings gave the page “a shouting feel.” Calibration range named in the commit: Stripe, Linear, Vercel.
• .ft-photo. Every image auto-grades to the palette: desaturate, purple-to-paper duotone, film grain. Community photos conform without Photoshop.
• No orphans, ever. text-wrap: balance on headings, pretty on body, a global CSS rule, so it holds on pages I'm not looking at.
• A11y as math. Contrast fixes documented with ratios; 44px targets; reduced-motion fallback for every animation. One exception kept deliberately, in writing: white on dark-purple at 3.2:1, a brand call.

The set piece

The tower finally acts like the tower

Click a floor: it lifts out of the stack in purple, the rest dim and re-sort, real floor photos float into the gap on tilted cards. On load, a gray-to-purple sweep climbs all 16 floors.

It started as a 1900vh scroll-hijacked experience. Members said the long scroll got in the way of exploring, and on some devices the screen shook. On the morning of June 5 I shipped a scrub fix; by the afternoon I retired the pattern entirely. One viewport, click-driven floors, the choreography intact. Weeks of scroll work set aside in an afternoon, which was only possible because I could feel the problem and make the change from the same seat.

Mobile got its own design, not a squeezed tower: scroll-snap floor browser, crossfading photos, 44px targets, no pinning.

Pointed inward

Onboarding: the same thinking, pointed inward

Built last, in review when I left: a guided flow for new citizens. The driver was support reality, members don't read text-heavy setup docs, and access questions flooded the channel.

Eight visual beats, “about 3 minutes” promised up front. The WiFi beat replays the entire UniFi enrollment as frame-accurate animations in an iPhone frame. The tour beat forks, 360° tour or book a walkthrough, and 14 Matterport floor scans load only on click, so no third-party requests fire unasked.

Growth

Growth work without a data team

• A/B tested the homepage (pricing above the fold, three sections cut). Sample too small for significance; treated it as directional, shipped the variant. The judgment call is documented in the code.
• Fixed lead routing by deleting a CTA. “Book the Friday tour” advertised a tour that didn't exist and attracted the wrong inquiries. Killed it, restored a secondary “Talk to the team” 27 minutes later: apply for commitment, talk for questions.
• SEO housekeeping: schema.org markup, a link-preview bug fixed across eight pages, verified in live scrapers.

What I killed

• The 1900vh scroll tower. The strongest version needed its central mechanic removed.
• An investor data-room gate. Three iterations in one afternoon, then I closed my own PR. The page read better without another gate.
• A scatter-text effect. The A/B said the leaner page was the better default.

Where it stands

Live in production. No analytics access anymore, so no traffic claims. What I could measure today, I did:

What didn't go well

• The site misses its own performance budget. I set TBT < 200ms; it ships at 410ms, and LCP came in at 2.7s against a 2.5s budget in the same lab run. The motion system I'm proudest of is what costs it. CLS 0.009 says the discipline worked elsewhere; these numbers say where it didn't.
• I built the scroll tower for six weeks before real users touched it. They experienced it as an obstacle. The fast kill gets told as a win; the slow feedback loop that made the kill necessary was the actual failure.
• Speed left debt. Dead scroll-era constants, stale comments describing abandoned architectures, a hook with zero call sites. Build velocity produces cleanup work at the same velocity, and solo means nobody forces it.
• My own killed pattern came back. A month after removing scroll-pinning from the homepage, I caught myself reintroducing it on a new microsite, my own critique tooling flagged it as a P0. Taste relapses. That's what the audit loop is for.

What this project taught me

As a product designer, I'd always drawn the thing and handed it to engineers to build. This was the first time I implemented one myself, end to end, with Claude doing the heavy lifting in code while I held the design and the details. It changed what I can carry from an idea to something live, and it made me a better teammate to engineers, because now I feel the cost of what I draw.

Working this closely has a real caveat: when the person who designs and ships steps away, in-flight work can stall. The docs and constraints I left behind are the mitigation, but the tension is honest. And I'd push for founder feedback earlier next time. I asked, the responses were thin, and more calls fell to me alone than I'd have liked, with members' comments as the check.

Christian reviewed the work and gated the releases, chp helped with fixes, and we refined the copy together. The design system, the accessibility work, and the build were mine, made possible by pairing with Claude.

Other design artifacts