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
4 product designers
1 content designer
1 visual designer
3 PMs
20+ engineers
1 marketer
1 legal partner
1 data analyst
1 customer service rep
Platform
Responsive web and native mobile
Project duration
1.25 years
My responsibilities
Create and document a new invoicing design framework.
Create and document new invoicing design components.
Deliver designs for 10+ 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
4 product designers
1 content designer
1 visual designer
3 PMs
20+ engineers
1 marketer
1 legal partner
1 data analyst
1 customer service rep
Platform
Responsive web and native mobile
Project duration
1.25 years
My responsibilities
Create and document a new invoicing design framework.
Create and document new invoicing design components.
Deliver designs for 10+ 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
4 product designers
1 content designer
1 visual designer
3 PMs
20+ engineers
1 marketer
1 legal partner
1 data analyst
1 customer service rep
Platform
Responsive web and native mobile
Project duration
1.25 years
My responsibilities
Create and document a new invoicing design framework.
Create and document new invoicing design components.
Deliver designs for 10+ 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 businesses that work in personal services, professional services, or the construction industry
Primarily (75% + of the time) invoice their customers to get paid.
Typically invoices on web (97% of QuickBooks invoicers)
Have 2-10 W2 employees, an annual revenue of 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 feel professional, confident, and supported.
Pain points
Time - They're so busy running a small-to-medium-sized business that they feel overwhelmed managing accounting and payments.
Money - They're cost-sensitive.
Support and confidence - They're new business owners looking for help to know if they’re making the right decisions and confidence that they're going to appear professional to 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 businesses that work in personal services, professional services, or the construction industry
Primarily (75% + of the time) invoice their customers to get paid.
Typically invoices on web (97% of QuickBooks invoicers)
Have 2-10 W2 employees, an annual revenue of 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 feel professional, confident, and supported.
Pain points
Time - They're so busy running a small-to-medium-sized business that they feel overwhelmed managing accounting and payments.
Money - They're cost-sensitive.
Support and confidence - They're new business owners looking for help to know if they’re making the right decisions and confidence that they're going to appear professional to their customers.
Define
If we create a new invoicing framework for responsive web, then we will be able to help businesses get paid more easily and help QuickBooks teams contribute features to invoicing more quickly.
Success metric(s):
Invoice pay-enabled create-to-send rate and time it takes for invoicing feature contributions
Define
If we create a new invoicing framework for responsive web, then we will be able to help businesses get paid more easily and help QuickBooks teams contribute features to invoicing more quickly.
Success metric(s):
Invoice pay-enabled create-to-send rate and time it takes for invoicing feature contributions
Define
If we create a new invoicing framework for responsive web, then we will be able to help businesses get paid more easily and help QuickBooks teams contribute features to invoicing more quickly.
Success metric(s):
Invoice pay-enabled create-to-send rate and time it takes for invoicing feature contributions
Create and test
Over a few weeks, my team and I planned, facilitated, and synthesized a week-long design sprint with other product designers and 10+ cross-functional stakeholders from marketing, legal, development, customer service, and product management.
The result was an inventory of all invoicing features and functionality, sorted by usage frequency, and ideas for the layout. We 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.
Determine mental models and information architecture
We tested use cases with invoicers, iterated based on their feedback, aligned our designs more closely with the design system, and created scalable invoicing components.
Define interaction patterns
We created durable patterns based on the following objectives: Less clicks is better, give easy access to what invoicers need, and keep global settings separate and out of the way.
Insert real use cases
We tried to integrate key features into the framework to pressure-test it. We made previews and visual cues more apparent to create user confidence.
Refine visuals and content
We tested use cases with invoicers, iterated based on their feedback, aligned our designs more closely with the design system, and we created scalable invoicing components.
Create and test
Over a few weeks, my team and I planned, facilitated, and synthesized a week-long design sprint with other product designers and 10+ cross-functional stakeholders from marketing, legal, development, customer service, and product management.
The result was an inventory of all invoicing features and functionality, sorted by usage frequency, and ideas for the layout. We 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.
Determine mental models and information architecture
We tested use cases with invoicers, iterated based on their feedback, aligned our designs more closely with the design system, and created scalable invoicing components.
Define interaction patterns
We created durable patterns based on the following objectives: Less clicks is better, give easy access to what invoicers need, and keep global settings separate and out of the way.
Insert real use cases
We tried to integrate key features into the framework to pressure-test it. We made previews and visual cues more apparent to create user confidence.
Refine visuals and content
We tested use cases with invoicers, iterated based on their feedback, aligned our designs more closely with the design system, and we created scalable invoicing components.
Create and test
Over a few weeks, my team and I planned, facilitated, and synthesized a week-long design sprint with other product designers and 10+ cross-functional stakeholders from marketing, legal, development, customer service, and product management.
The result was an inventory of all invoicing features and functionality, sorted by usage frequency, and ideas for the layout. We 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.
Determine mental models and information architecture
We tested use cases with invoicers, iterated based on their feedback, aligned our designs more closely with the design system, and created scalable invoicing components.
Define interaction patterns
We created durable patterns based on the following objectives: Less clicks is better, give easy access to what invoicers need, and keep global settings separate and out of the way.
Insert real use cases
We tried to integrate key features into the framework to pressure-test it. We made previews and visual cues more apparent to create user confidence.
Refine visuals and content
We tested use cases with invoicers, iterated based on their feedback, aligned our designs more closely with the design system, and we created scalable invoicing components.
Iterate
After several months of testing with invoicers and incorporating stakeholder feedback, we brought the framework to life.
Iterate
After several months of testing with invoicers and incorporating stakeholder feedback, we brought the framework to life.
Iterate
After several months of testing with invoicers and incorporating stakeholder feedback, we brought the framework to life.
Results
Customers sent more pay-enabled invoices: +2% invoice pay-enabled create-to-send rate, resulting in over $12M in annual revenue.
Feature parity: Modernized and launched 40+ responsive web and native mobile invoice and estimate features based on the new framework.
More scalable: 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 pay-enabled invoices: +2% invoice pay-enabled create-to-send rate, resulting in over $12M in annual revenue.
Feature parity: Modernized and launched 40+ responsive web and native mobile invoice and estimate features based on the new framework.
More scalable: 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 pay-enabled invoices: +2% invoice pay-enabled create-to-send rate, resulting in over $12M in annual revenue.
Feature parity: Modernized and launched 40+ responsive web and native mobile invoice and estimate features based on the new framework.
More scalable: 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