← All work

Case study / Binsr

The client asked for 10 new sections. The site needed a complete rebuild.

Audit

UI Design

Development

SaaS · PropTech · Home Inspection

In this case study

01About the project→ 02Challenge→ 03Methodology→ 04What was delivered→ 05What changed→ 06Result→ 07Strategic note→

The client asked for 10 new sections.
The site needed a complete rebuild.

A Framer expansion brief that became a production Rails site, custom CMS, CRM, and deployment pipeline.

BINSR Inspect is an AI-powered home inspection platform built for solo inspectors and multi-inspector firms. The product helps inspectors write reports faster, deliver results to clients in real time, and generate additional revenue through AI-powered repair estimates and appliance analytics. The company is led by Mark Garcia, founder and CEO.

About the client

Industry

SaaS / PropTech / Home Inspection

Stage

Early-stage SaaS

Duration

8 weeks

My role

Strategy, UX, UI Design, Rails Development, DevOps

Results

100%

Critical issues fixed

3-5×

Value delivered vs. market rate

CMS section types built from scratch

Pages fully shipped

Adding 10 sections to a broken foundation wouldn't fix anything.

Mark Garcia came with a clear brief: add 10 new Framer sections to the existing BINSR site. CRM showcase, reporting, AI Quick Add, updated pricing, testimonials. He was ready to move fast.

Before touching a single wireframe, I ran a full audit. 51 issues documented across four dimensions: 4 critical, 16 high, 24 medium, 7 low.

The four critical issues explained why adding 10 sections wouldn't work. No navigation visible in the header. No pain articulation anywhere on the page. Primary CTA leading to a waitlist with zero immediate value. Pricing with 5 cards, 3 billing models, and roughly half the cards for products that didn't exist yet.

Adding more content on top of this foundation would increase volume. It wouldn't fix the conversion problem. The problem was structural.

I brought the findings to Mark with a revised proposal: don't add to the old site. Rebuild it properly. He agreed immediately.

Old binsrinspect.com: hidden navigation, waitlist CTA, and 22+ viewport scroll

Seven workstreams. Eight weeks. One governing principle: audit before designing.

UX Audit

4-block methodology: Brand & Narrative, UX, UI, Conversion. 51 issues identified before any design work began. The audit became the brief, not an add-on.

New Information Architecture

Single-page scroll → 6-page multi-page site. Every IA decision mapped to a specific audit finding. Homepage went from 22+ viewports to 6-8.

Wireframes with Functional Copy

Grayscale wireframes with real copy for all 5 pages. Narrative arc (Problem → Solution → Proof → Action) baked in at the wireframe stage. Approved before visual design.

UI Design, Desktop + Responsive

3 breakpoints (1440 / 768 / 375) for all 5 pages. Full design system with tokens, components, and section patterns. Built in Paper with reusable semantic components.

Platform Pivot Decision

Proposed Rails over Framer based on specific capability gaps for this scope: no custom backend logic, no CRM, no code ownership, and a recurring platform subscription. Framer works well for marketing sites, but not when the client also needs a lead management system, custom admin panel, and a codebase they fully own. Mark aligned in one conversation.

Rails Build + Claude Code

Opened Claude Code and started with the homepage. 4.5 hours later, all desktop layouts for all 5 pages were implemented, with CMS collections, design system, and admin panel structure already in place. The speed unlocked scope: full responsive build, 23 CMS section types, custom CRM, blog, design system page, deployment pipeline.

Deployment + Handoff

Hetzner server provisioned, Kamal 2 pipeline set up, GitHub repo handed off. Full admin access for client. CMS edits instant. Code deploys in 50 seconds.

What the client got.

Seven live systems built from a brief for 10 Framer sections. Every screen audit-driven. Every field purpose-built. No templates, no vendor lock-in.

Homepage

Single-page 22+ viewport scroll replaced with a 6-8 viewport conversion machine. Problem articulated before solution: "Sound familiar?" section with 3 specific inspector pain points. "Try Binsr Free" replacing the waitlist CTA. Visible navigation in the sticky header. Every structural decision traced to a critical audit finding.

Pricing

5 cards with 3 billing models and "Coming Soon" noise, down to 2 clean tiers. Visitors can now answer "what will this cost me?" in under 5 seconds. This was critical issue C1 in the audit. The redesigned pricing page shows exactly what is available, what it costs, and what you get at each tier.

CMS Collections

23 section types, each with structured content fields. The editor sees exactly what to fill: headline, subheadline, image, CTA. Every collection is independently saveable. Content updates happen without a developer or a deploy.

Design System: Components

Full component library live at /admin/styleguide: buttons, cards, badges, form elements, typography scale, color tokens. Every component used across all 6 pages is documented here. Mark can extend the system or onboard a new developer without opening Figma.

Design System: Sections

All 23 section types documented with live previews inside the app. Not a static PDF spec. A living reference the client uses daily. Each section shows exactly how it renders, what fields it accepts, and what it looks like before publishing.

CMS Page Editor

Drag-and-drop section reorder. Add sections, remove sections, publish or unpublish pages. All without code, without a deploy, without a developer. Changes go live instantly. The entire site is editable from one panel.

CRM: Lead Management

Custom lead management for waitlist signups and demo bookings. Source tracking, client_request field, full admin panel. No Salesforce overhead. A purpose-built system with exactly the fields a growing inspection SaaS needs and nothing it doesn't.

The same product. Rebuilt for conversion.

51 documented issues on the old site. 14 remaining on the new one. The comparison below maps the specific changes that addressed each dimension of the audit: structure, narrative, conversion signals, and platform.

Site Structure

Before

After

Architecture

Single long page (22+ viewports)

6 pages with distinct purpose

Navigation

Hidden behind hamburger menu

Visible sticky header, all pages

Homepage length

22+ viewport scrolls

6-8 viewports

Platform

Framer (vendor-locked)

Ruby on Rails (owned codebase)

CMS

Framer CMS (limited)

Custom CMS, 23 section types

CRM

None

Custom lead management + admin panel

Blog

None

Full blog with CMS

Conversion Signals

Before

After

Primary CTA

"Join our team of beta testers!"

"Try Binsr Free" (immediate trial)

Time-to-value

Undefined (waitlist queue)

Immediate (free trial)

Problem articulation

None

"Sound familiar?" section with 3 pain points

Pricing clarity

5 cards, 3 billing models, 50% Coming Soon

2 clean tiers, transparent feature lists

Team credibility

None

Full About page with photos and story

Demo option

None

"Watch Video" CTA in hero

3-5× value delivered. All critical issues gone. 0 issues remaining.

51 issues on the old site. 14 remaining on the new one. 0 critical. The narrative arc was corrected. Navigation visible. CTAs lead to a free trial. Pricing simplified. And the platform itself shifted from Framer to a fully owned Rails codebase with custom CMS, CRM, blog, design system, and deployment pipeline.

Key achievements

All 4 critical issues resolved. Navigation visible. Pain articulated. CTA value-first. Pricing clear.

Platform pivoted from Framer to Rails 8. Full code ownership, no vendor lock-in, no monthly platform fee.

Custom CMS built from scratch. 23 section types, drag-and-drop reorder, instant edits, no deploy needed.

Custom CRM added. Waitlist signups and demo bookings managed in /admin with lead source tracking.

6 pages shipped. Home, Features, Pricing, About, Compare (staged), Blog, all fully responsive.

3-5× the value vs. comparable market deliverables, driven by the platform pivot decision.

100%

Critical issues fixed

CMS section types

3-5×

Value vs. market rate

Full pages shipped

Strategic note

The most important decision on this project was made before a single wireframe was drawn.

Mark asked for 10 new sections. I ran the audit first. The audit showed that 10 new sections wouldn't solve the problem, they'd add volume to a broken foundation. Fixing it required a different conversation. That conversation happened because I had evidence, not opinion: 51 documented issues with severity ratings and specific recommendations.

The second decision was the platform pivot. Moving from Framer to Rails wasn't a technical preference, it was a business case. Framer works well for content sites, but this scope needed a CRM, a custom admin panel, and a codebase BINSR could fully own. Rails could. When I could show Mark exactly what Framer couldn't do and exactly what Rails would give him, the scope conversation took about ten minutes.

The third thing, the one I didn't predict, was what happened when I sat down to build. I opened Claude Code and started with the homepage. Four and a half hours later, all desktop layouts for all five pages were implemented. Not rough drafts. Production views with correct component hierarchy and Tailwind styling.

The speed unlocked scope.

That speed wasn't magic. It was a direct result of the rigor that preceded it: a thorough audit, a proper information architecture, production-ready wireframes with real copy, and a complete design system with semantic naming. The quality of the input determines the speed of the output.

This is now part of how I work: audit first, design thoroughly, then build fast. The speed is a byproduct of the rigor. Not the other way around.