I designed a connected product story, visual system, and responsive Framer experience for Coperniq—a Y Combinator-backed operating system helping multi-trade contractors run sales, projects, service, cash flow, and AI-assisted operations from one place.
Coperniq helps residential and commercial contractors manage the operational journey from the first customer conversation through sales, production, field work, service, monitoring, invoicing, and payment, across roofing, HVAC, solar, electrical, and plumbing.
My role
Product Designer · April 2024 – May 2025 · San Francisco. Product strategy, visual system, AI-agent journeys, and Framer implementation — working with founders, product, engineering, and marketing.
PRODUCT SCREEN
ASSET NEEDED — Product Overview
Add a wide dashboard showing multiple contractor operations connected in one workspace.
3D VISUAL
ASSET NEEDED — Hero Visual
Add the connected Coperniq service city with one readable product UI panel and restrained green accents.
The product was connected. The story felt fragmented across roofing, HVAC, solar, electrical, and plumbing workflows.
Two problems
The opportunity
Create one memorable product model that could explain the platform across trades without flattening their differences.
The story was grounded in real operational outcomes. Every metric below is a public customer result reported by Coperniq — not a result of this design work.
~500 active projects
Real-time visibility (Tron Solar)
Tron Solar unified five-plus disconnected tools into one platform and automated appointment-to-dispatch.
Owners and operators
Need visibility across jobs, teams, margins, and operational risk.
Sales teams
Need accurate pricing, proposals, approvals, and clean handoffs to production.
Field crews and technicians
Need fast mobile access to assigned work, forms, photos, notes, job history, and next actions.
Accounting teams
Need invoices, payments, vendor costs, purchase orders, and job profitability connected to the work.
Reducing the product to the jobs that mattered — I mapped the story around contractor outcomes instead of internal product modules: win the work, prepare the job, coordinate the build, complete field work, protect the customer relationship, invoice and collect, identify what needs attention.
Design principles before more screens — show the operating model, not a feature inventory; keep every trade inside one visual world; use green as a signal, not decoration; keep motion focused on one meaningful action.
A city made the invisible system visible — generic SaaS compositions explained features but not how jobs, people, vehicles, and workflows influenced one another. The connected-city concept gave the platform one physical mental model.
1
Reviewed product workflows, existing website content, feature architecture, stakeholder feedback, and trade-specific requirements.
Mapped the story around contractor outcomes: win the work, prepare the job, coordinate the build, complete field work, protect the customer relationship, invoice and collect, identify what needs attention.
3D VISUAL
ASSET NEEDED — Connected City
Add the full city composition showing office, field, vehicles, buildings, and service operations.
A city made the invisible system visible — generic SaaS compositions explained individual features but failed to show how jobs, people, vehicles, and workflows influenced one another. The city supported multi-trade storytelling: spatial relationships, handoffs between office and field, product UI placed beside real work, and animation without visual noise. One connected visual world became reusable everywhere — the concept extended into hero compositions across trades instead of staying a one-off image.
2
The strongest direction came from removing, not adding.
Generic SaaS panels → One connected city — floating dashboard cards could describe any product; a shared physical world made the platform’s breadth legible at a glance. Brand color everywhere → Selective green signals — green stopped being a background wash and started marking the one thing on screen that needed attention. Everything moving → One memorable animation — constant motion competed with the product story; one deliberate loop replaced a page full of independent effects.
DESIGN SYSTEM
ASSET NEEDED — Design System
Show typography, color tokens, cards, buttons, chips, agent components, spacing, and responsive rules.
A quiet foundation gave the product room to speak. Pure white and warm-neutral surfaces, black typography for clarity, Coperniq green used selectively, soft rounded geometry, and restrained shadows carried the system across trade pages, pricing, AI agents, and product stories.
Typography, spacing, buttons, cards, chips, and section patterns were kept consistent so the system could extend to new pages without new rules.
3
AI agents were presented as accountable participants inside existing workflows, not as a separate abstract AI layer.
Riley (CSR Agent) answers inbound calls, qualifies each request, books the right appointment, and escalates exceptions. Nick, Leo, Clara, and Sam cover coordination, growth, accounting, and QA.
4
I translated the visual direction into reusable Framer sections, responsive layouts, shared components, and controlled interactions.
Component reuse, consistent content widths, and motion constraints kept desktop, tablet, and mobile behavior predictable through rapid iteration and stakeholder review.
The system needed rules before it needed more screens. Coperniq spans sales, projects, service, monitoring, and cash flow across five trades.
Four principles
A quiet foundation gave the product room to speak: pure white and warm-neutral surfaces, black typography, selective green accents, soft rounded geometry, and consistent spacing across trade pages, pricing, AI agents, and product stories.
A connected visual world for connected operations. The final page system combined responsive layouts, reusable components, controlled motion, and clearer hierarchy for launch and future iteration.
| Additional workflow detail available upon request.
A curated sequence of the system in production — sell, build, service, monitor, and cash-flow workflows, AI agents, a trade-specific page, and the responsive mobile view.
[ WORKFLOW ] Sell Workflow
Show estimate creation, proposal approval, e-signature, and deposit collection.
[ WORKFLOW ] Build Workflow
Show stages, dependencies, crews, permits, documents, and job progress.
[ WORKFLOW ] Service Workflow
Show scheduling, dispatch, technician assignment, route context, and job completion.
[ WORKFLOW ] Cash Flow Workflow
Show invoicing, payments, job costs, purchase orders, accounting sync, and margin visibility.
[ WORKFLOW ] Monitor Workflow
Show asset history, system status, alerts, service records, and operational risk.
[ AI AGENTS ] AI Agents
Show Riley, Nick, Leo, Clara, and Sam with role, status, task, context, and action.
Complex products become easier to trust when the design chooses one strong mental model. This project reinforced that strong product storytelling is not separate from product design — both require understanding how the system works, deciding what matters most, and making complex relationships feel understandable.
Clarity often comes from subtraction
Removing competing colors, cards, and motion strengthened the product story more than adding new ones would have.
A visual concept becomes valuable when it scales
The connected-city concept extended across trades, product workflows, AI agents, and marketing instead of staying a one-off hero image.
Production constraints improve design decisions
Building directly in Framer exposed responsive, hierarchy, asset, and motion issues earlier than a static mockup would have.
I translated the visual direction into reusable Framer sections, responsive layouts, shared components, and controlled interactions. The hero animation used a focused 4–5 second loop; component reuse kept desktop, tablet, and mobile behavior consistent.
