SenseHawk Website Redesign

SenseHawk builds the operating system for the solar industry. Their map-based SaaS platform manages 200+ GW of solar projects across 600+ sites globally, replacing legacy ERP systems like SAP and Oracle with a single, unified workspace.

Their existing website was feature-first. It listed capabilities without telling a story. The platform is genuinely complex - land management, drone analytics, no-code workflows, construction monitoring - but none of that came through. The site looked like every other enterprise SaaS page.

The goal: shift from feature-first to problem-first. Lead with the pain (manual processes, siloed data, spreadsheet chaos), then reveal the solution. Make it feel like Palantir meets Vercel - premium enterprise polish applied to industrial solar. Timeline: 4 weeks from moodboard to full handover, including CMS and a component library their developer could use to build out the remaining pages independently.

SenseHawk serves two very different audiences. Executives and investors who want dashboards and high-level reporting. And contractors in the field who need mobile data capture and progress tracking on-site. The homepage needed to speak to both without diluting the message.

We studied their SDP investor deck, the TaskMapper BI construction intelligence materials, and the Therm drone analytics brochure to extract the real positioning: not another project management tool, but the single source of truth for every phase of a solar project's lifecycle.

We structured the homepage as a narrative, not a feature list. Hero with bold claim and video background. Problem/solution split establishing the pain point. Platform overview showing the unified system. Solar lifecycle journey from pre-construction through end-of-life. Product deep-dives for TaskMapper, Therm, and NaaviX. Role-based value propositions. Integration hub showing ecosystem connectivity. Enterprise security and compliance. Social proof and stats. Each section builds on the previous one - by the time visitors reach the product sections, they already understand why SenseHawk exists.

The hero opens with a bold stat over a cinematic video background of solar operations. The overlay is deliberately subtle so the footage carries weight. Below the hero, a carousel of real product screenshots inside a laptop frame gives visitors an immediate feel for the platform without leaving the homepage.

No Figma handoff. Every page was designed and built natively in Framer across three breakpoints simultaneously - desktop (1200px), tablet (810px), and phone (390px). Real responsive behavior from day one, not assumptions that break during development.

We built a complete design system from scratch. Typography using Inter Display across 14 style presets. 13 design tokens including the signature Eco Lime accent. 20+ reusable components: navigation with 4 variants, buttons with 7 variants, section labels, stat counters, tab pills, feature cards, blog cards, FAQ items, integration logos, and social links. Everything named, tokenized, and component-based so their developer can build new pages without touching the design system.

Every element uses Framer Stacks and grid systems. No absolute positioning hacks. The navigation component has 4 variants with smooth transitions between states - the mobile menu expands inline rather than overlaying content, with dropdown indicators using the Phosphor icon set for consistency.

The solar lifecycle section uses a tabbed interface with 10 states, each showing a different phase of the project journey with real product screenshots. The platform section features an interactive slider comparing before/after views. Stats animate with scroll-triggered counters. The integration hub arranges partner logos in a radial layout.

Blog and legal pages run on Framer CMS collections with category tagging, detail page templates with proper routing, and blog category tabs for filtering. The client can publish new posts and legal pages without any design work.

Every page has unique meta titles and descriptions. Key images carry descriptive alt text. Semantic HTML tags throughout - header, nav, section, article - giving search engines clear document structure. Video backgrounds use optimized WebM with lazy loading, and scroll-triggered animations use intersection observers with configurable thresholds.

Four weeks from kickoff to full handover. Week 1: moodboard and visual direction alignment. Weeks 2-3: homepage design and build across all breakpoints. Week 4: CMS setup, component library documentation, and QA.

A full homepage with 13 sections across 3 responsive breakpoints. Design system with 14 typography presets, 13 color tokens, and 20+ reusable components. CMS collections for blog and legal content. Contact page. 404 page. Component library structured for their developer to scale independently to product pages, solution pages, and additional content.

The project was built specifically for handover. Their in-house developer received a fully organized Framer project with clearly named layers, linked components, and documented style tokens. No design dependency for future pages - just instantiate existing components and populate with content.