The Problem
Construction companies managing subcontractors, scheduling, and payments were doing it across spreadsheets, phone calls, and disconnected tools. MX Build set out to fix that — but when I joined, the platform only covered financial operations. The operational side of the business didn't exist yet.
No competitor had solved this either. HouseCall Pro, Jobber, ServiceTitan, and Procore each handled pieces of the puzzle — but none connected scheduling, work orders, estimates, and payments in a single continuous flow.
My Role
As Design Lead, I owned UX/UI across web and tablet, brand identity, and the design system. The primary challenge: design the operational layer from scratch and make it continuous with the existing financial workflows — in a startup environment, with a lean team and no extended discovery phase.
Research
I audited HouseCall Pro, Jobber, ServiceTitan, and Procore — looking for patterns worth adopting and gaps worth exploiting.
HouseCall Pro and ServiceTitan both used a job status stepper effectively. I adopted it, simplified to six stages: Schedule → OMW → Start → Finish → Invoice → Pay. Ending at Invoice and Pay was intentional — it hands the operational view directly to the financial one.
The clearest gap: no tool connected scheduling, estimates, and payments in one continuous flow. That became the core design principle for MX Build.
AI-Assisted Design Process
I integrated Claude as a thinking partner to pressure-test decisions before committing to them — comparing structural approaches, surfacing edge cases (overlapping crew assignments, mid-job estimate rejections), and stress-testing the information architecture against how contractors actually think about their work.
Designing the Job Cycle
The core design problem was connecting two halves of the platform that didn't yet speak to each other: financial operations and field operations.
I designed the job cycle as a continuous loop across three roles:
The Manager creates a lead, builds an AI-assisted estimate, schedules a technician on the calendar, and monitors job progress through the stepper. When the job finishes, the stepper advances to Invoice and Pay — triggering the financial workflow automatically.
The Technician receives the work order, sees job details and location, and advances the stepper as work progresses. Each status change syncs live to the manager's view.
The Client receives the estimate for approval. Once approved and the job completes, their profile updates from Scheduled → In Progress → Complete in real time.
The core design principle: status changes in one part of the system propagate automatically everywhere else — no one ever has to update two places.
Schedule: Technicians as rows, jobs as color-coded blocks on a timeline, live map alongside. Dispatch decisions that previously required two tools now happen in one view.
Work Order A six-stage stepper — Schedule → OMW → Start → Finish → Invoice → Pay — makes each handoff moment explicit. Ending at Invoice and Pay was intentional: job completion triggers the financial workflow without leaving the operational view.
Dashboard A single view aggregating leads, estimates, work orders, revenue, and approvals — designed so a manager can read the state of the business without navigating away.
Brand Identity & Design System
Before designing product screens, I established the visual foundation: a brand system built on deep navy (trust, precision), electric blue (action, technology), and orange (urgency, human warmth). Typography was set in Open Sans for its legibility at data-dense scales.
From this I built a component library in Figma — status badges with five states, data tables, modals, the calendar/map split layout, cards, and form patterns — documented with usage guidelines and do/don't examples for engineering handoff. The system ensured that as the product grew, new screens inherited a consistent visual language without requiring design review on every component.
Results
Designed 15+ modules from 0 — Dashboard, Projects, Sales, Operations, Scheduling, Finance, Client CRM, and AI-assisted Estimates — all on a shared design system.
Connected scheduling, work orders, estimates, and payments in a single continuous flow — a gap no competitor had closed.
Established a scalable design system that reduced inconsistency as the product grew.
Shipped features informed by real user behavior, including multi-approver payment states discovered post-launch.
What's Next
The platform is expanding its AI capabilities to reduce manual labor across the workflow — automatically matching receipts and invoices to work orders, extracting and populating fields from uploaded documents, and deepening the contextual AI assistant so managers can draft estimates, summarize job history, and surface client information without switching context.