Redesigning HighLevel’s invoice builder into a high-velocity billing workspace
This project wasn’t about redesigning an editor. It was about redesigning trust.
Date
January, 2026
Role
Product Designer, Leading Payments
Company
HighLevel
Services
Product design for complex billing and financial workflows
Context
HighLevel is an all-in-one platform used by agencies and businesses to manage CRM, marketing automation, payments, and revenue workflows at scale. Invoicing sits at the center of that system, it’s where work turns into cash.
When I took on the invoice builder redesign, the problem wasn’t visual inconsistency. It was fragility.
Creating and managing invoices was slow, click-heavy, and anxiety-inducing, especially for users dealing with partial payments, recurring billing, taxes, reminders, and accounting sync. Small configuration mistakes could delay payments or break automation across the system.
This project was about rebuilding trust in one of the most revenue-critical workflows in HighLevel.
The real problem
The existing invoice experience suffered from a set of systemic issues:
Users had to leave the editor to configure payment methods, reminders, layouts, or accounting sync, breaking flow mid-draft.
Global and invoice-level settings were not clearly separated, creating fear around changing anything.
Payment schedules and partial payments required repetitive manual input, increasing the chance of error.
Automation existed, but users couldn’t clearly see or trust what would happen.
Errors didn’t just frustrate users, they delayed or blocked real payments.
The problem wasn’t “users need fewer fields.”
It was that too many systems were fragmented across too many surfaces.
Design principle
I anchored the redesign on a single principle:
Everything required to create, customize, automate, and send an invoice should live in one uninterrupted workspace, without sacrificing correctness.
This principle guided every decision, from layout to interaction models to where automation lives.
The solution: one screen, many systems
A single, persistent workspace
The redesigned invoice builder is a single screen where drafting, configuration, automation, and preview all happen together.
Left: authoring and configuration
Right: live invoice preview (PDF-accurate)
The preview isn’t decorative. It’s a real-time representation of what the customer will receive. Every change updates instantly, reinforcing trust and reducing send anxiety.
The toolbar as a control surface
Instead of navigating away to settings pages, I redesigned the top toolbar as a command layer for invoice-specific actions:
Record payment
Payment settings
Invoice layouts
Accounting sync
Invoice reminders
Recurring invoice settings
Each action opens inline, in context, without disrupting the draft.
This keeps users in flow while still exposing powerful configuration when they need it.
Designing for financial reality
Line items, taxes, and totals - safely
Adding products, discounts, and stacked taxes happens inline, with totals recalculated immediately. The system supports complex tax combinations while keeping the UI readable and predictable.
Populated invoice with taxes and discount
Deposits and payment schedules without math anxiety
One of the hardest problems was supporting deposits and split payments without manual calculation.
The redesigned flow allows users to:
Apply an upfront deposit
Automatically split the remaining balance into scheduled payments
See the exact breakdown reflected in the invoice preview
Populated payment schedule and deposit
The UI communicates not just amounts, but intent, removing guesswork while ensuring financial correctness, including penny-rounding edge cases.
Recording payments where the work happens
Recording payments, whether charging a card or logging an offline payment, happens directly inside the editor via a sidebar.
This avoids context switching and makes payment state visible immediately, reinforcing trust in the system.
Invoice-level payment overrides
Global payment rules are powerful, and dangerous.
To solve this, I designed invoice-level overrides for:
Partial payments
Late fees
Tips
Processing fees
Allowed payment methods
This lets users handle special-case invoices without fear of breaking automation elsewhere.
Automation without fear
Layouts with live preview and template customization
Users can switch between invoice layouts and customize them inline to match their brand — without ever leaving the editor.
Each layout supports brand-level customization such as:
Logo placement
Brand colors
Typography and visual hierarchy
All changes are reflected instantly in the live preview.
Invoice layout selector and layout customization / brand settings
Different invoice styling layouts
There are no reloads and no separate configuration screens. The preview updates in real time, showing exactly how the final invoice will look when sent to a customer.
This allows agencies and businesses to maintain brand consistency at the point of billing, while still moving quickly through invoice creation.
What users see is exactly what their customers receive.
Accounting sync that’s visible and explicit
Accounting integrations (QuickBooks, Xero, Wave) live directly in the editor, showing connection status and allowing manual sync when needed.
This avoids silent failures and gives users confidence that data is flowing correctly.
Invoice reminders, decoupled safely
Reminder schedules are configured at the invoice level, not hidden in global settings.
Users can clearly see:
When reminders trigger
How many will be sent
Which templates are used
Automation becomes predictable instead of scary.
Recurring invoices with guardrails
Recurring invoices are configured inline, with clear rules and constraints that prevent invalid states.
The UI communicates system behavior upfront, reducing surprises later.
The invoice dashboard: managing at scale
The redesign didn’t stop at creation. It extended into how invoices are managed day to day.
A dashboard that reflects financial reality
The invoice dashboard surfaces:
Invoices due, sent, overdue, and paid
Total amounts at each state
Clear status indicators
Accounting sync status per invoice
This allows business owners to understand cash flow at a glance.
Empty states that drive action
For new users, the empty state doesn’t just say “no invoices.” It explains why and guides them toward setup.
Quick actions without friction
Contextual actions like edit, resend, clone, delete, and convert to template are accessible directly from the list.
This supports speed without sacrificing control.
Payment history transparency
Each invoice exposes a full payment history, making partial and recurring payments easy to audit.
This is critical for trust, especially in long-running or subscription-based billing.
Outcome and impact
This redesign transformed invoicing from a fragile, multi-page flow into a high-velocity billing workspace.
While exact metrics vary by account, the impact included:
Reduced time to draft and send invoices
Fewer support issues related to invoice configuration and sync
Increased confidence using automation features
Clearer understanding of payment state and cash flow
Most importantly, users could move faster without fear of breaking things.
Reflection
This project reinforced a core belief I have as a product designer:
Designing financial systems isn’t about simplifying UI, it’s about making correctness feel effortless.
The hardest part wasn’t layout or interaction polish. It was designing interfaces that respected money, edge cases, and real-world workflows while still feeling approachable.
If I were to continue iterating, I’d explore:
Bulk invoice actions at scale
Deeper reporting and forecasting views
