Light
Dark
Light
Dark

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