Jobber UI design & app screens

Running an office and a truck from the same data model

Jobber's hardest design problem is that two very different people touch the same job: a dispatcher at a desktop and a technician standing in a customer's driveway. The web app leans into a three-pane layout — a left navigation rail (Clients, Schedule, Jobs, Quotes, Invoices), a list column, and a detail panel — so an office user can scan the day and drill into a work order without ever leaving the page. The iOS app collapses that same job record into a single scrollable card, promoting the two things a tech actually needs on site: the address with a one-tap route, and the checklist of line items to complete.

What holds it together is that a job is one object rendered at different altitudes. On desktop you see the full history — quote accepted, visit scheduled, invoice sent — as a vertical activity trail; on mobile you see today's slice of it. Designers building any dual-audience tool should study how Jobber resists making two separate products, and instead varies the density and the default action of the same entity depending on who opened it.

The scheduling calendar as the product's center of gravity

The calendar is where Jobber does its most confident interaction design. Visits render as colored blocks across day, week, and month grids, color-coded by team member so a dispatcher can read coverage at a glance, and drag-to-reschedule is treated as a first-class gesture rather than a power-user shortcut. Unscheduled work sits in a side drawer that you pull items out of and drop onto a time slot — the same mental model as a physical job board, translated cleanly to the screen.

Notice the map view layered onto the same data: assigned visits plotted as pins so routes can be sanity-checked geographically before they're locked in. This is the pattern worth stealing — one dataset, two synchronized representations (temporal grid and spatial map), with edits in either reflecting instantly in the other. It's how Jobber lets a small business optimize a day without spreadsheets.

Turning a quote into money with the least friction

The quote-to-invoice pipeline is Jobber's revenue spine, and the UI makes the state of that pipeline unmissable. Documents carry loud status pills — Draft, Sent, Awaiting Response, Approved, Paid — in a consistent color language, so a business owner can open the Quotes list and instantly see what's stuck. Line-item editors share the same building blocks across quotes and invoices, meaning an approved quote converts to an invoice with almost no re-entry.

The client-facing side deserves attention too: quotes and invoices are sent as clean, branded web pages where a customer approves or pays inline, and that action flips the status back in the owner's app in real time. For anyone designing B2B billing flows, Jobber is a strong reference for making the same financial object legible to both a professional operator and a one-time customer without dumbing it down for either.

Frequently asked questions