Invoice Builder
Designed and launched a novel visual document builder that evolved from handling invoices to becoming AppDirect's enterprise-wide document creation platform.
-
Role
Led design strategy and execution, defined IA for the component-based system for invoice editing, and interactions for the editing experience. Partnered with product on scoping and roadmap. Established new interaction paradigms to AppDirect’s design system.
-
Team
3 PMs over the duration
2 core engineers (1 front end, 1 backend)
Stakeholder team (1 PM, 1 designer)
Business Problem
AppDirect enables enterprises to operate white-label marketplaces where they can provide their customers a unified hub for purchasing, managing, and provisioning technology solutions.
Businesses using AppDirect's marketplace had no way to customize their print customer invoices to reflect their brand, target different customer segments, or comply with local regulations. They needed sophisticated customization capabilities and enterprise-grade control, but in a way their business teams could easily use.
Solution
Invoice Builder gives business users an easy way to create professional PDF invoices through content customization and intuitive layout controls.
Default Invoice Template
I created an invoice template that worked across AppDirect’s different product structures and pricing models. Smaller businesses had a ready-to-use template out of the box, while enterprises could adapt it to their complex needs.
The invoice was designed for print — margins, headers, foots, and a multi-page design — all needed to be considered.
Visual Editor
The visual editor lets businesses control their invoice design through style controls for brand colors and fonts and a component library for adding and organizing content.
Business users manipulate a template representation of their invoice.
Adding Content
Screen capture of launched product
Users can add new content exactly where they want it through the left panel's component list. Once added, components automatically format with pre-set paddings and margins to maintain a professional look.
Editing Content
Screen capture of launched product
When users select a component, its counterpart highlights in the template, creating a clear visual connection between the editor and preview. The editing panel slides in to reveal style and content options.
Modular System of Components
To support easily customizable templates, I developed a modular system with three types of components:
Screen capture of launched product
Basic components
Enable custom content through text, image, and listing elements
Invoice components
Pre-built, data-connected modules to support standard invoice elements
Layout components
Unlock all layout variations through multi-column sections and spacing controls.
Connecting Content with Data
A critical need for merchants was the ability to access and use any marketplace data in their invoices. I designed a universal token system that exposed all invoicing-relevant marketplace data through an omnipresent Token Lookup panel, enabling merchants to insert data into any component with an editable text field.
Results and Impact
Enterprise Adoption
Secured major EU and UK enterprise customers like Sage, ABB, and Honeywell
Platform Evolution
The framework's success led to its evolution into Document Builder, expanding beyond invoices to support quotes, credit memos, and other marketplace documents
Design Systems Expansion
Designed a comprehensive UI system for Invoice Builder that established patterns for future builder tools, contributing new navigation components and UI patterns to AppDirect's design system