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 creation 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.
Feedback on the invoice creation experience from invoicer VOC
Customer problem
The QuickBooks invoicing creation 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.
Feedback on the invoice creation experience from invoicer VOC
Customer problem
The QuickBooks invoicing creation 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.
Feedback on the invoice creation experience from invoicer VOC
Goal
Evaluate and update the invoicing creation framework to scale for incoming features and make it easier for businesses to get paid.
Team
Core team:
1 PM
10+ engineers
1 engineering manager
1 data scientist
External stakeholders:
10+ product teams seeking to contribute to invoicing
VP Product
Marketing
Sales
Customer success
Accountants
Design systems
Platform
Responsive web
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 creation framework to scale for incoming features and make it easier for businesses to get paid.
Team
Core team:
1 PM
10+ engineers
1 engineering manager
1 data scientist
External stakeholders:
10+ product teams seeking to contribute to invoicing
VP Product
Marketing
Sales
Customer success
Accountants
Design systems
Platform
Responsive web
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 creation framework to scale for incoming features and make it easier for businesses to get paid.
Team
Core team:
1 PM
10+ engineers
1 engineering manager
1 data scientist
External stakeholders:
10+ product teams seeking to contribute to invoicing
VP Product
Marketing
Sales
Customer success
Accountants
Design systems
Platform
Responsive web
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.
We also understood there was low usage for native mobile (10%) compared to responsive web (90%).
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.
We also understood there was low usage for native mobile (10%) compared to responsive web (90%).
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.
We also understood there was low usage for native mobile (10%) compared to responsive web (90%).
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 for responsive web 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.
Feedback and testing
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.
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 for responsive web 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.
Feedback and testing
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.
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 for responsive web 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.
Feedback and testing
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
The biggest part of the design we iterated on was the design of the products and services section, a section where SMBs could add line items for each of the products/services they sold for each invoice. By extending the Intuit design system and adding a new table component, I helped SMBs manage their invoices' product/services more efficiently in a way that scaled for many other Intuit use cases.
Refined product/services section in table format
The biggest part of the design documentation we iterated on was how we communicated the framework patterns and layout so external teams could self-service. I synthesized feedback from external stakeholders to refine framework pattern documentation into one, singular source of truth, which resulted in more teams self-servicing their invoicing-related needs.
Refined patterns documentation on a Figma page
Iterate
The biggest part of the design we iterated on was the design of the products and services section, a section where SMBs could add line items for each of the products/services they sold for each invoice. By extending the Intuit design system and adding a new table component, I helped SMBs manage their invoices' product/services more efficiently in a way that scaled for many other Intuit use cases.
Refined product/services section in table format
The biggest part of the design documentation we iterated on was how we communicated the framework patterns and layout so external teams could self-service. I synthesized feedback from external stakeholders to refine framework pattern documentation into one, singular source of truth, which resulted in more teams self-servicing their invoicing-related needs.
Refined patterns documentation on a Figma page
Iterate
The biggest part of the design we iterated on was the design of the products and services section, a section where SMBs could add line items for each of the products/services they sold for each invoice. By extending the Intuit design system and adding a new table component, I helped SMBs manage their invoices' product/services more efficiently in a way that scaled for many other Intuit use cases.
Refined product/services section in table format
The biggest part of the design documentation we iterated on was how we communicated the framework patterns and layout so external teams could self-service. I synthesized feedback from external stakeholders to refine framework pattern documentation into one, singular source of truth, which resulted in more teams self-servicing their invoicing-related needs.
Refined patterns documentation on a Figma page
Results
As we gradually converted all invoicing features over to the new invoicing experience using the new framework, we launched the experience in phases to all Quickbooks Online invoicers.
Usability impact: Decreased average time-on-task by 30%. Increased task success rate by 25%.
Organizational velocity impact: 4x more invoicing contributions, and +42% increased speed of feature contributions by the following year.
9%
↑ invoice create-to-send rate
↑ annual revenue
$545M
Results
As we gradually converted all invoicing features over to the new invoicing experience using the new framework, we launched the experience in phases to all Quickbooks Online invoicers.
Usability impact: Decreased average time-on-task by 30%. Increased task success rate by 25%.
Organizational velocity impact: 4x more invoicing contributions, and +42% increased speed of feature contributions by the following year.
9%
↑ invoice create-to-send rate
↑ annual revenue
$545M
Results
As we gradually converted all invoicing features over to the new invoicing experience using the new framework, we launched the experience in phases to all Quickbooks Online invoicers.
Usability impact: Decreased average time-on-task by 30%. Increased task success rate by 25%.
Organizational velocity impact: 4x more invoicing contributions, and +42% increased speed of feature contributions by the following year.
9%
↑ invoice create-to-send rate
↑ annual revenue
$545M
Copyright © Anna Vu