Invoicing framework
Summary
Redesigned the QuickBooks Invoicing experience to be more scalable, on-brand, consumable, and easier for small-to-medium sized businesses to get paid by their customers.
Summary
Redesigned the QuickBooks Invoicing experience to be more scalable, on-brand, consumable, and easier for small-to-medium sized businesses to get paid by their customers.
Summary
Redesigned the QuickBooks Invoicing experience to be more scalable, on-brand, consumable, and easier for small-to-medium sized businesses to get paid by their customers.
Customer problem
The QuickBooks Invoicing UI was becoming overwhelmingly busy, and it was hard for invoicers to find what they were looking for. As a result, we were noticing more negative invoicer feedback.
Business problem
The interface did not scale for new features, as it was already cluttered with many form components and buttons. We were losing out on potential revenue that we could have gained from new features.
Customer problem
The QuickBooks Invoicing UI was becoming overwhelmingly busy, and it was hard for invoicers to find what they were looking for. As a result, we were noticing more negative invoicer feedback.
Business problem
The interface did not scale for new features, as it was already cluttered with many form components and buttons. We were losing out on potential revenue that we could have gained from new features.
Customer problem
The QuickBooks Invoicing UI was becoming overwhelmingly busy, and it was hard for invoicers to find what they were looking for. As a result, we were noticing more negative invoicer feedback.
Business problem
The interface did not scale for new features, as it was already cluttered with many form components and buttons. We were losing out on potential revenue that we could have gained from new features.
Goal
Evaluate and update the Invoicing UI and framework to accommodate incoming features, and make it easier for businesses to get paid.
Team
1 PM
4+ engineers
1 engineering manager
1 data scientist
Platform
Responsive web and native mobile
Project duration
1 year
My responsibilities
Create and document a new invoicing design framework.
Create and document new invoicing design components.
Deliver designs for 20+ features that use the new invoicing design framework.
Goal
Evaluate and update the Invoicing UI and framework to accommodate incoming features, and make it easier for businesses to get paid.
Team
1 PM
4+ engineers
1 engineering manager
1 data scientist
Platform
Responsive web and native mobile
Project duration
1 year
My responsibilities
Create and document a new invoicing design framework.
Create and document new invoicing design components.
Deliver designs for 20+ features that use the new invoicing design framework.
Goal
Evaluate and update the Invoicing UI and framework to accommodate incoming features, and make it easier for businesses to get paid.
Team
1 PM
4+ engineers
1 engineering manager
1 data scientist
Platform
Responsive web and native mobile
Project duration
1 year
My responsibilities
Create and document a new invoicing design framework.
Create and document new invoicing design components.
Deliver designs for 20+ features that use the new invoicing design framework.
Understand
Usage
We analyzed existing features and functionality usage, including how much time they spent doing different tasks.
Previous experiment data
We also evaluated a recent invoice experiment, which tested a WYSIWYG approach against the old invoicing UI. We knew it was not as effective as its predecessor based on low invoice create-to-send rates, low adoption of the WYSIWYG approach, and negative behavioral invoicer feedback.
Understand
Usage
We analyzed existing features and functionality usage, including how much time they spent doing different tasks.
Previous experiment data
We also evaluated a recent invoice experiment, which tested a WYSIWYG approach against the old invoicing UI. We knew it was not as effective as its predecessor based on low invoice create-to-send rates, low adoption of the WYSIWYG approach, and negative behavioral invoicer feedback.
Understand
Usage
We analyzed existing features and functionality usage, including how much time they spent doing different tasks.
Previous experiment data
We also evaluated a recent invoice experiment, which tested a WYSIWYG approach against the old invoicing UI. We knew it was not as effective as its predecessor based on low invoice create-to-send rates, low adoption of the WYSIWYG approach, and negative behavioral invoicer feedback.
Persona
Based on previous interviews, surveys, and quantitative data on QuickBooks invoicers, we shared a persona with our stakeholders.
Typical invoicer
Small-mid sized, primarily service-based businesses
Invoices on web (97% of QuickBooks invoicers)
Needs
Make it easy for their customers to pay
Save time
Pain points
Feel overwhelmed managing payments and want to spend more time running their business
Don't understand what's going to be shown in front of their customers
Persona
Based on previous interviews, surveys, and quantitative data on QuickBooks invoicers, we shared a persona with our stakeholders.
Typical invoicer
Small-Mid sized businesses that work in personal services, professional services or the construction industry
Primarily (75% + of the time) invoice their customers to get paid.
Have 2-10 W2 employees, an annual revenue more than $100K and have been in business for 3 years or more.
Needs
Make it easy for my customers to pay me
Save me time
Help me stay on top of my cash flow
Help me feel professional, confident, supported
Pain points
Time - Are busy running a small business. They are often juggling the responsibilities of running a business, accounting, and getting paid
Money - Are cost sensitive.
Support and confidence - Are new business owners, are looking for help to know they’re making the right decision.
Persona
Based on previous interviews, surveys, and quantitative data on QuickBooks invoicers, we shared a persona with our stakeholders.
Typical invoicer
Small-mid sized, primarily service-based businesses
Invoices on web (97% of QuickBooks invoicers)
Needs
Make it easy for their customers to pay
Save time
Pain points
Feel overwhelmed managing payments and want to spend more time running their business
Don't understand what's going to be shown in front of their customers
Define
Update the responsive web Invoicing UI and framework to make it scalable and easier for SMBs to invoice.
Primary success metric: Invoice create-to-send rate
Define
Update the responsive web Invoicing UI and framework to make it scalable and easier for SMBs to invoice.
Primary success metric: Invoice create-to-send rate
Define
Update the responsive web Invoicing UI and framework to make it scalable and easier for SMBs to invoice.
Primary success metric: Invoice create-to-send rate
Create and test
Over the next few weeks, I planned, facilitated, and synthesized 2 design sprints with other product designers and cross-functional stakeholders from external teams.
The result was an inventory of all invoicing features and functionality, sorted by usage frequency, and ideas for the layout. I spent the next few months defining the right layout, information architecture, interaction, content, and visual patterns, testing the framework with real use cases, and optimizing it based on customer feedback.
Information architecture and layout
I tested use cases with Quickbooks invoicers, iterated based on their feedback, aligned our designs more closely with the Quickbooks design system, and created scalable invoicing components.
Interaction patterns
I created durable patterns based on the following principles: Less clicks is better, give easy access to what invoicers need, and keep global settings separate and out of the way.
Test real use cases
I then integrated key invoicing features into the new framework to pressure-test it.
Refine visuals and content
I increased fidelity by aligning with and contributing to the Quickbooks design system, making previews and visual cues more apparent to create user confidence, and refined content based on card sorting results.
Create and test
Over the next few weeks, I planned, facilitated, and synthesized 2 design sprints with other product designers and cross-functional stakeholders from external teams.
The result was an inventory of all invoicing features and functionality, sorted by usage frequency, and ideas for the layout. I spent the next few months defining the right layout, information architecture, interaction, content, and visual patterns, testing the framework with real use cases, and optimizing it based on customer feedback.
Information architecture and layout
I tested use cases with Quickbooks invoicers, iterated based on their feedback, aligned our designs more closely with the Quickbooks design system, and created scalable invoicing components.
Interaction patterns
I created durable patterns based on the following principles: Less clicks is better, give easy access to what invoicers need, and keep global settings separate and out of the way.
Test real use cases
I then integrated key invoicing features into the new framework to pressure-test it.
Refine visuals and content
I increased fidelity by aligning with and contributing to the Quickbooks design system, making previews and visual cues more apparent to create user confidence, and refined content based on card sorting results.
Create and test
Over the next few weeks, I planned, facilitated, and synthesized 2 design sprints with other product designers and cross-functional stakeholders from external teams.
The result was an inventory of all invoicing features and functionality, sorted by usage frequency, and ideas for the layout. I spent the next few months defining the right layout, information architecture, interaction, content, and visual patterns, testing the framework with real use cases, and optimizing it based on customer feedback.
Information architecture and layout
I tested use cases with Quickbooks invoicers, iterated based on their feedback, aligned our designs more closely with the Quickbooks design system, and created scalable invoicing components.
Interaction patterns
I created durable patterns based on the following principles: Less clicks is better, give easy access to what invoicers need, and keep global settings separate and out of the way.
Test real use cases
I then integrated key invoicing features into the new framework to pressure-test it.
Refine visuals and content
I increased fidelity by aligning with and contributing to the Quickbooks design system, making previews and visual cues more apparent to create user confidence, and refined content based on card sorting results.
Iterate
After multiple rounds of stakeholder feedback, customer testing, and iterations, I shared the new data-backed invoicing framework with the team. We shipped the product refresh to a small percentage of customers in phases to help us identify and refine any other areas of improvement.
Iterate
After multiple rounds of stakeholder feedback, customer testing, and iterations, I shared the new data-backed invoicing framework with the team. We shipped the product refresh to a small percentage of customers in phases to help us identify and refine any other areas of improvement.
Iterate
After multiple rounds of stakeholder feedback, customer testing, and iterations, I shared the new data-backed invoicing framework with the team. We shipped the product refresh to a small percentage of customers in phases to help us identify and refine any other areas of improvement.
Results
Customers sent more invoices: +2% invoice create-to-send rate, resulting in over $12M in annual revenue.
Usability: Decreased average time-on-task by 30% (from 9 minutes to 6.3 minutes).
Organizational velocity: 4x more invoicing contributions, and +42% increased speed of feature contributions by the following year.
Decreased technical debt: -30% technical debt by building on top of a more modern tech stack.
2%
increased invoice pay-enabled create-to-send rate
increased annual revenue
$12M
Results
Customers sent more invoices: +2% invoice create-to-send rate, resulting in over $12M in annual revenue.
Usability: Decreased average time-on-task by 30% (from 9 minutes to 6.3 minutes).
Organizational velocity: 4x more invoicing contributions, and +42% increased speed of feature contributions by the following year.
Decreased technical debt: -30% technical debt by building on top of a more modern tech stack.
2%
increased invoice pay-enabled create-to-send rate
increased annual revenue
$12M
Results
Customers sent more invoices: +2% invoice create-to-send rate, resulting in over $12M in annual revenue.
Usability: Decreased average time-on-task by 30% (from 9 minutes to 6.3 minutes).
Organizational velocity: 4x more invoicing contributions, and +42% increased speed of feature contributions by the following year.
Decreased technical debt: -30% technical debt by building on top of a more modern tech stack.
2%
increased invoice pay-enabled create-to-send rate
increased annual revenue
$12M
Copyright © Anna Vu