Web Development
BoxLi Marketing Website
Translating complex proptech into clear value for six audience segments
A nine-page, SEO-optimized marketing site that turns LiDAR scanning, ANSI compliance, and AI-powered room classification into clear value propositions for appraisers, lenders, AMCs, insurers, and property data collectors.
Client
Clearbox Technology, LLC
Industry
Proptech / Real Estate
Role
Brand Partner / Lead Dev
Timeline
2026
Background
BoxLi is the flagship product of Clearbox Technology — a proptech company building trusted property data infrastructure for the real estate industry. The app turns LiDAR-enabled iPhones and iPads into professional-grade property scanning tools, producing ANSI Z765-compliant floor plans instantly using AI-powered room classification.
My relationship with Clearbox extends well beyond this project. As a long-standing brand partner, I designed their original logo, built their website, and have developed the visual identity for most of their associated brands. That history gave me a deep understanding of Clearbox's positioning, audience, and business goals — context that informed every decision on the BoxLi site, from information architecture to the interaction design of the enterprise demo flow.
Project Scope
- ✓9 custom pages
- ✓Component library & design system
- ✓6 audience-specific use-case pages
- ✓Enterprise demo request form
- ✓PDQ credential & badge system
- ✓Centralized content configuration
- ✓Zero external runtime dependencies
The Challenge
Clearbox needed a marketing website that could communicate a technically complex product to a diverse, often skeptical audience. The site had to serve appraisers, property data collectors, lenders, AMCs, insurers, and real estate agents — each with different technical literacy, different pain points, and different objections to adopting LiDAR-based measurement tools.
Beyond product marketing, the site also needed to introduce the PDQ (Property Data Qualified) credential program — a unique trust layer for verifying data collectors that Clearbox is building as a standalone industry credential. And for enterprise buyers, the site needed to present integration options (API, SDK, white-label, digital twin feeds) and capture qualified demo requests.
The underlying tension: explain enough technical depth to earn trust from industry professionals, without overwhelming the non-technical users who would actually be downloading the app.
The Approach
Brand Extension, Not Reinvention
Because I own the Clearbox brand system, the BoxLi site didn't start from a blank canvas. I extended the existing identity — the navy and green palette, the Neulis Neue typeface, the dark-theme design language I developed for the BoxLi pitch deck — into a cohesive web design system with semantic color tokens, consistent spacing, and a custom animated glare effect on the hero tagline.
This continuity matters. The same design language carries across Clearbox's investor materials, training content, and marketing site, reinforcing brand credibility across every touchpoint a prospect or investor encounters.
Architecture for Change
Working with Clearbox, I've learned to design for frequent content pivots. The client's direction can shift quickly, so the codebase needed to absorb changes without requiring deep component surgery.
The solution was a centralized configuration architecture: navigation items, footer links, pricing tiers, process steps, and FAQ content are all defined in a single TypeScript constants file. Content updates happen in one place, with full type safety, and never touch component code.
Multi-Audience Information Architecture
Rather than building a single linear narrative, I structured the site around audience entry points. The homepage acts as a router — trust indicators and a high-level value proposition at the top, then audience-specific targeting that directs appraisers, data collectors, lenders, and enterprise buyers toward the content most relevant to them.
I also built dedicated use-case pages for each audience segment (appraisers, PDCs, AMCs, lenders, insurers, and real estate agents). These are complete and staged in the codebase, ready to be activated in navigation when Clearbox is ready to drive segment-specific campaigns.
Pages Delivered
Home
Hero with device mockups, trust indicators, value propositions, how-it-works flow, audience targeting, PDQ credential callout
Product
Technical deep-dive into the 5-step workflow: Scan, Classify, Validate, Generate, Certify
Pricing
Dual-track model (pay-per-scan vs. membership), scan packages, PDQ credential tiers
PDQ Badges
Credential program overview, tier comparison, vendor search, real-time badge verification
Enterprise
API/SDK integration, white-label options, enterprise deployment, digital twin feeds, demo request form
Company
Vision, mission, who Clearbox serves, interoperability commitment
FAQ
17 detailed Q&As addressing industry objections around LiDAR, ANSI compliance, and GSE requirements
Resources
Supporting materials, documentation, and educational content
Use Cases
Audience-specific pages for appraisers, PDCs, AMCs, lenders, insurers, and agents (built, staged for launch)
Implementation Highlights
Responsive Mobile-First Layout
Dedicated MobileMenu component with slide-out navigation and desktop dropdown sub-navigation for clean multi-level information hierarchy across all device sizes.
SEO-First Metadata System
Custom createMetadata() utility generating consistent, page-specific meta tags with title templates, descriptions, and canonical paths across all routes.
Enterprise Demo Form
Interactive lead capture form designed to lower the barrier for enterprise prospects while collecting the context the sales team needs for qualified follow-up.
PDQ Credential System
Real-time vendor search and badge verification components, enabling lenders and AMCs to validate a data collector's credentials directly from the site.
Industry Objection Handling
Comprehensive 17-question FAQ addressing the most common resistance points: LiDAR accuracy vs. tape measures, ANSI Z765 compliance, GSE acceptance, and data privacy.
Centralized Configuration
Navigation, footer links, pricing, process steps, and FAQ content defined in a single TypeScript constants file. Content updates happen in one place with full type safety.
Connected Work
The BoxLi website doesn't exist in isolation. It's one layer of a broader engagement with Clearbox that includes:
PDQ Training Modules
Writing and producing scripts for a six-module training program powering the PDQ credential. Research-grounded against current 2026 GSE standards, formatted for AI text-to-speech production.
Investor Deal Room
A separate web application for BoxLi's fundraising efforts, using the same dark-theme design system to maintain brand continuity across investor-facing materials.
Brand System Ownership
The Clearbox logo, visual identity, and associated brand development — including new product naming and trademark research — as part of an ongoing creative partnership.
BoxLi Brand Identity
The original brand identity, launch campaign, and marketing materials that established BoxLi's market presence — view that case study.
What Was Delivered
9
Custom Pages
6
Audience Segments
~45
Source Files
0
External Dependencies
17
FAQ Objection Handlers
Kevin knocked it out of the park
Joan Trice
CEO/Founder, Clearbox Technology
Technical Details
Technology Stack
FrameworkNext.js 16 (App Router)
UI LayerReact 19
StylingTailwind CSS 4
LanguageTypeScript
Runtime DepsNext.js + React only
ConfigCentralized TypeScript constants
Architecture Highlights
- •
Server-Rendered, SEO-Optimized
App Router with server components for optimal performance and search indexing
- •
Modular Component Library
Reusable UI primitives (Button, Card, Badge, Section, Container) paired with domain-specific components organized by page context
- •
Brand Token System
Semantic color tokens extending the Clearbox design system with consistent spacing and typography
- •
Zero External Runtime
Only Next.js, React, and React DOM in production — lean bundle, small attack surface, high performance ceiling
The Bigger Picture
A fast, accessible, SEO-optimized marketing site that translates a complex proptech product into clear value propositions for multiple audience segments. The site supports the full customer journey — from initial education through FAQ and product pages, to conversion via pricing and free-trial CTAs, to enterprise sales through demo requests and integration documentation.
More importantly, it's a site built by someone who understands the business, not just the technology. Every architectural decision — from the centralized content config to the staged use-case pages — reflects a working knowledge of how Clearbox operates, how their audience thinks, and where the product roadmap is headed.
Need a Similar Approach?
If you're launching a technical product and need a marketing site that speaks to multiple audiences without dumbing down the message, let's talk.