The operating system for solar, redesigned to lead with the problem and land with the product, Palantir-grade polish for industrial solar.
Client
SenseHawk
Industry
Climate Tech / Enterprise SaaS
Services
Website Design, Framer Development, Design System, CMS Architecture, Motion Design, SEO
Tech stack
Framer, Inter Display, Phosphor Icons, Custom Video Background, Scroll-Triggered Animations
Year
2026
AGR Studio redesigned SenseHawk, the operating system for solar managing 200+ GW, from feature first to problem first in a full Framer build.
SenseHawk builds the operating system for the solar industry. Its 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 site 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, and the page looked like every other enterprise SaaS template.
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. The timeline was 4 weeks, moodboard to full handover, including a CMS and a component library the in-house developer could use to build the remaining pages independently.
Understanding the Business
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.
Information Architecture
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.
Problem-First Visual Storytelling
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.
Designed Directly in Framer
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.
Custom Component System
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.
Framer-Native Architecture
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.
Interactive Sections
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.
CMS Architecture
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.
SEO and Accessibility
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.
Delivered on schedule. Four weeks, kickoff to handover. Week 1: moodboard and visual direction. Weeks 2 to 3: homepage design and build across all breakpoints. Week 4: CMS, component-library documentation, and QA.
What shipped. A 13-section homepage across 3 responsive breakpoints; a design system with 14 typography presets, 13 color tokens, and 20+ reusable components; CMS collections for blog and legal; contact and 404 pages, all structured for the in-house team to scale to product and solution pages without design dependency.
Built for handover. The developer received a fully organized Framer project, clearly named layers, linked components, documented tokens. New pages are now a matter of instantiating existing components and populating content, not rebuilding from scratch.
13
Sections Built
20+
Components
4 Weeks
Delivery
