Form field suggestions



Summary
Created an AI-driven, text auto-complete experience that predicts, seeks, and suggests information businesses need, right in the flow of creating invoices and estimates.
Summary
Created an AI-driven, text auto-complete experience that predicts, seeks, and suggests information businesses need, right in the flow of creating invoices and estimates.
Summary
Created an AI-driven, text auto-complete experience that predicts, seeks, and suggests information businesses need, right in the flow of creating invoices and estimates.
Customer problem
The tedious process of manually creating and sending invoices and estimates is a burden to QuickBooks invoicers (small-to-medium-sized businesses that send invoices as a way of getting paid). Because they spend much of their time managing the business finances doing precise, manual data entry, the process is time-consuming and prone to errors.
Business problem
Product teams spend months onboarding and integrating new AI models into our products, with model consumption taking 1-8+ weeks. The process is high-touch, stressful, and time-consuming because our AI models have no UI/UX out of the box, and developers and data scientists need to become familiar with entire tech stacks.

Creating QuickBooks invoices and estimates can require a lot of precise, manual data entry.
Customer problem
The tedious process of manually creating and sending invoices and estimates is a burden to QuickBooks invoicers (small-to-medium-sized businesses that send invoices as a way of getting paid). Because they spend much of their time managing the business finances doing precise, manual data entry, the process is time-consuming and prone to errors.
Business problem
Product teams spend months onboarding and integrating new AI models into our products, with model consumption taking 1-8+ weeks. The process is high-touch, stressful, and time-consuming because our AI models have no UI/UX out of the box, and developers and data scientists need to become familiar with entire tech stacks.

Creating QuickBooks invoices and estimates can require a lot of precise, manual data entry.
Customer problem
The tedious process of manually creating and sending invoices and estimates is a burden to QuickBooks invoicers (small-to-medium-sized businesses that send invoices as a way of getting paid). Because they spend much of their time managing the business finances doing precise, manual data entry, the process is time-consuming and prone to errors.
Business problem
Product teams spend months onboarding and integrating new AI models into our products, with model consumption taking 1-8+ weeks. The process is high-touch, stressful, and time-consuming because our AI models have no UI/UX out of the box, and developers and data scientists need to become familiar with entire tech stacks.

Creating QuickBooks invoices and estimates can require a lot of precise, manual data entry.
Goal
Reduce time and effort spent entering data in QuickBooks invoices and estimates, and enable 5k+ Intuit technologists to build AI-driven data entry experiences more quickly.
Team
2 engineers
1 PM
1 data scientist
Platform
Responsive web
Project duration
1 month
My responsibilities
End-to-end responsive web design delivery
Contribute AI-driven data entry component to the design system
Goal
Reduce time and effort spent entering data in QuickBooks invoices and estimates, and enable 5k+ Intuit technologists to build AI-driven data entry experiences more quickly.
Team
2 engineers
1 PM
1 data scientist
Platform
Responsive web
Project duration
1 month
My responsibilities
End-to-end responsive web design delivery
Contribute AI-driven data entry component to the design system
Goal
Reduce time and effort spent entering data in QuickBooks invoices and estimates, and enable 5k+ Intuit technologists to build AI-driven data entry experiences more quickly.
Team
2 engineers
1 PM
1 data scientist
Platform
Responsive web
Project duration
1 month
My responsibilities
End-to-end responsive web design delivery
Contribute AI-driven data entry component to the design system
Understand

Existing form fields on sales forms
We examined the existing form fields on our primary sales forms (invoices and estimates) and the time most QuickBooks businesses took to create and send a sales form (on average, 6 minutes and 20 seconds).
Competitor experiences
We also examined competitor experiences to understand existing mental models, such as Gmail's Smart Compose feature.

Understand

Existing form fields on sales forms
We examined the existing form fields on our primary sales forms (invoices and estimates) and the time most QuickBooks businesses took to create and send a sales form (on average, 6 minutes and 20 seconds).
Competitor experiences
We also examined competitor experiences to understand existing mental models, such as Gmail's Smart Compose feature.

Understand

Existing form fields on sales forms
We examined the existing form fields on our primary sales forms (invoices and estimates) and the time most QuickBooks businesses took to create and send a sales form (on average, 6 minutes and 20 seconds).
Competitor experiences
We also examined competitor experiences to understand existing mental models, such as Gmail's Smart Compose feature.

Define
If we use AI-generated text suggestions to help small-to-medium-sized businesses quickly create invoices and estimates on responsive web, we’ll be able to reduce the time it takes for them to create and send invoices, which will therefore increase the rate that pay-enabled invoices are created and sent.
Success metric(s):
Invoice pay-enabled create-to-send rate for all QuickBooks invoicing businesses
Define
If we use AI-generated text suggestions to help small-to-medium-sized businesses quickly create invoices and estimates on responsive web, we’ll be able to reduce the time it takes for them to create and send invoices, which will therefore increase the rate that pay-enabled invoices are created and sent.
Success metric(s):
Invoice pay-enabled create-to-send rate for all QuickBooks invoicing businesses
Define
If we use AI-generated text suggestions to help small-to-medium-sized businesses quickly create invoices and estimates on responsive web, we’ll be able to reduce the time it takes for them to create and send invoices, which will therefore increase the rate that pay-enabled invoices are created and sent.
Success metric(s):
Invoice pay-enabled create-to-send rate for all QuickBooks invoicing businesses
Create and test
I ideated four potential interaction patterns before getting feedback from my stakeholders.

Concept 1: Auto-insert
We won't show a suggestion until the invoicer enters a product/service name. After they select a product or service, we automatically show a suggestion for the description.

Concept 2: Suggest below
After the invoicer selects a product or service, we show the top 1, 2, or 3 suggestions automatically below the description field.

Concept 3: Auto-complete
As the user types, if a suggestion meets the prediction threshold, we show auto-completed text to the right of their inputs.

Concept 4: Suggested drop down below text input field
As the invoicer types, if a suggestion meets the prediction threshold, we show the top 1, 2, or 3 suggested text in a menu below it.
Create and test
I ideated four potential interaction patterns before getting feedback from my stakeholders.

Concept 1: Auto-insert
We won't show a suggestion until the invoicer enters a product/service name. After they select a product or service, we automatically show a suggestion for the description.

Concept 2: Suggest below
After the invoicer selects a product or service, we show the top 1, 2, or 3 suggestions automatically below the description field.

Concept 3: Auto-complete
As the user types, if a suggestion meets the prediction threshold, we show auto-completed text to the right of their inputs.

Concept 4: Suggested drop down below text input field
As the invoicer types, if a suggestion meets the prediction threshold, we show the top 1, 2, or 3 suggested text in a menu below it.
Create and test
I ideated four potential interaction patterns before getting feedback from my stakeholders.

Concept 1: Auto-insert
We won't show a suggestion until the invoicer enters a product/service name. After they select a product or service, we automatically show a suggestion for the description.

Concept 2: Suggest below
After the invoicer selects a product or service, we show the top 1, 2, or 3 suggestions automatically below the description field.

Concept 3: Auto-complete
As the user types, if a suggestion meets the prediction threshold, we show auto-completed text to the right of their inputs.

Concept 4: Suggested drop down below text input field
As the invoicer types, if a suggestion meets the prediction threshold, we show the top 1, 2, or 3 suggested text in a menu below it.
Iterate
After testing with customers and synthesizing feedback from stakeholders, I narrowed down to Concept 3. I also extended the design system by collaborating with the design systems team to define the behavior and visual specifications for the component.

I created design specifications in the Intuit design system for the form field component with text suggestions.
Iterate
After testing with customers and synthesizing feedback from stakeholders, I narrowed down to Concept 3. I also extended the design system by collaborating with the design systems team to define the behavior and visual specifications for the component.

I created design specifications in the Intuit design system for the form field component with text suggestions.
Iterate
After testing with customers and synthesizing feedback from stakeholders, I narrowed down to Concept 3. I also extended the design system by collaborating with the design systems team to define the behavior and visual specifications for the component.

I created design specifications in the Intuit design system for the form field component with text suggestions.
Results
Launched the first reusable AI-driven component, which I contributed to the Intuit design system
Launched form field suggestions for Advanced customers
-8% time spent for QuickBooks businesses to create invoices on responsive web
-135% time spent for Intuit technologists to re-use this AI capability, compared to other Intuit AI capabilities
8%
Less time QuickBooks businesses spend creating invoices on responsive web
Less time Intuit technologists spend re-using this AI capability, compared to other Intuit AI capabilities
135%
Results
Launched the first reusable AI-driven component, which I contributed to the Intuit design system
Launched form field suggestions for Advanced customers
-8% time spent for QuickBooks businesses to create invoices on responsive web
-135% time spent for Intuit technologists to re-use this AI capability, compared to other Intuit AI capabilities
8%
Less time QuickBooks businesses spend creating invoices on responsive web
Less time Intuit technologists spend re-using this AI capability, compared to other Intuit AI capabilities
135%
Results
Launched the first reusable AI-driven component, which I contributed to the Intuit design system
Launched form field suggestions for Advanced customers
-8% time spent for QuickBooks businesses to create invoices on responsive web
-135% time spent for Intuit technologists to re-use this AI capability, compared to other Intuit AI capabilities
8%
Less time QuickBooks businesses spend creating invoices on responsive web
Less time Intuit technologists spend re-using this AI capability, compared to other Intuit AI capabilities
135%
Copyright © Anna Vu