Building the Rolo website: from prototype to production

When we started building the Rolo marketing site, we had a problem most early-stage companies have: how do you show someone what your product does without making them sign up first?

The typical playbook is straightforward. Write copy about your features. Add screenshots. Maybe a short video. Sprinkle in some testimonials and a pricing table. Ship it.

We tried that. It felt hollow.

Rolo is a relationship intelligence product. The entire value proposition is that the product thinks - it runs a 5-step AI search pipeline, generates meeting prep briefs from your actual conversation history, tracks relationship decay with a logistic curve, and extracts entities from voice memos in real time. None of that comes through in a screenshot.

The prototype phase

We started with two HTML prototypes - a marketing-focused v8 and an app-focused v9. Both were single-file pages with inline CSS and JavaScript: working search with a real scoring algorithm, microphone-powered voice capture with Web Audio API waveforms, and 3D tilt cards tracking mouse movement. The prototypes were useful because they proved that the feel of the product could exist outside the product itself.

The v8 prototype had a working search bar that scored contacts against a 12-person dataset. It auto-detected whether a query was a simple keyword lookup or a semantic natural-language request. Type "Marcus" and you get a fast keyword match. Type "Who knows someone at Stripe?" and the UI shifts to semantic mode with a different visual treatment. That behavior difference - the product recognizing your intent - was the thing we needed the marketing site to convey.

From mock to mini-app

The biggest decision we made was to treat each feature section as a self-contained mini-application rather than a static illustration. The search showcase on the features page isn't a screenshot of search results - it's a real input field connected to a scoring function. Type a query, and the results filter. Switch from Quick mode to AI mode to Rank mode, and the entire results layout transforms: list view becomes a narrative with expandable match breakdowns, then becomes an S/A/B/C tier grid with confidence dots and reasoning tooltips.

The voice capture demo has animated waveform bars, a recording button with pulse rings, and three token-quality levels that instantly swap the transcript content and entity extraction results. Token 1 gives you keywords. Token 3 gives you a full narrative with highlighted people, companies, and action items.

Every piece of data across every demo comes from a single shared file. One set of 12 contacts. One set of timeline entries. One set of meeting prep data. This eliminated the duplication problem we had early on - at one point, the same Maya Chen search result was independently defined in five different component files with slightly different field shapes.

What we learned

Three lessons stood out.

Show the logic, not just the layout. The demos that feel most convincing are the ones where the user's input produces a visible, intelligent output. A search bar that actually filters is more persuasive than any amount of copy about "powerful search."

Each feature should appear exactly once. We spent time building a dashboard showcase, then realized it appeared on both the homepage and the features page. Now the homepage shows the dashboard, search, and people grid. The features page shows search (full version with rank mode), profiles, meeting prep, voice capture, and six additional feature demos that don't appear anywhere else. No duplication.

The product is the proof. The best marketing for a product that thinks is to let the thinking be visible. When someone switches the search from keyword to rank mode and watches their results reorganize into S/A/B/C tiers with reasoning tooltips, they understand the product faster than any paragraph could explain.

We're still iterating. The compare page needs richer mini-widgets. The blog needs more posts. The connected demo flow - where clicking a search result scrolls to the profile section and swaps the displayed contact - is wired but still rough around the edges.

But the foundation is solid: every demo runs real logic, every interaction produces real output, and the data layer is shared so nothing falls out of sync. That's the bar we're holding ourselves to.

This is the first post on the Rolo blog. We'll be writing about product decisions, relationship intelligence as a category, and what we're learning building in the AI age. If you want to follow along, check back here or sign in to try the product.