The setup guide is an interactive checklist. It provides a guided user experience through the initial steps required to start jobs. To inspire confidence and encourage customers to take action, the setup guide uses ordered tasks, straightforward language, colorful illustrations, purposeful motion, and checkmarks to indicate progress.

Usage

The setup guide helps users set up a job in QuickBooks Online.

This guide appears at the top of a dashboard or homepage. This pattern offers users guided flows and helpful information, but it doesn’t contain in-depth educational content.

The setup guide encourages action through animation. Animated checkmarks reflect the user’s progress, showing the user what task their on and what job they completed. When users don’t need the widget anymore, they can dismiss it. It dismisses itself when all the steps are done.

Here’s a demo video of the setup widget and its animations. (No audio)

Appearance and behavior

The setup guide has two interactive parts:

  1. Job tabs
  2. Task cards which can show either a workflow or an inline task

The setup guide appears at the top of a page, above the fold. Only page-level alerts, page headers, sub-navigation menus and information boxes appear above the setup guide. The setup guide gets the users’ attention and encourages them to act, so it should be high in the visual hierarchy of the page.

Three responsive layouts follow the dashboard’s breakpoints:

  • three columns wide
  • two columns wide
  • large and small mobile layouts

1. Job tabs

The job tabs are a checklist of jobs a user can choose.

  • The job tabs can’t be dismissed or reordered.
  • The tabs dynamically fill the height of the widget, with a minimum of three tabs, and a maximum of six.
  • The tabs can fit up to two lines of text that clearly explain what the selected job will do for the user.
  • Before job completion, the tab shows a ghosted checkmark. The tab is marked as completed with a green checkmark once all tasks are complete. On completion, an animation plays that moves the user down the list and selects the next job tab.

Visual states:

  • Default: light gray text, ghosted checkmark
  • Selected: dark gray text, green underline
  • Hover: dark gray text
  • Complete: light gray text, green checkmark

Setup guide 3-column view

Examples

Three jobs, none complete
Five jobs, two complete

2. Task cards

A task workflow card guides the user through tasks necessary to do a job for the first time. If the workflow has a required or recommended order, it should include numbers with each task. The tasks flow in a logical order from left to right. Depending on the use case, the user may be able to click on any task or may be required to click on the steps in sequence.

The task links launch a guided setup experience or take a user directly to where they can take action. (Recommended patterns to use: step flow, landing page, learn page).

There is a focus state to indicate the current task the user should complete, which includes an ambient “pinging” animation.

Task workflow visual states:

  • Default: the state before a user takes action. Link text and illustration is gray.
  • Focus: the current task we’d like a user to take action on. It has ambient animation and full color illustration.
  • Completed and accessible : If the user can access the experience again after it’s complete, show green checkmark and live link.
  • Completed, not accessible: If the user cannot access the task after it’s complete, the link is no longer live.
  • Hover: includes a green line below the task and is used for any live links (focus and default states). On hover, illustrations scale up to 110% of their size.

Focus state – ambient animation example


Illustration guidelines:

  • Because this is a guide for new users, we try to keep the illustrations literal when possible
  • To request an illustration, bring concepts and  content to the brand team for review
  • Two states of the illustration asset are required, in SVG format
    • Gray – default and completed states
    • Green, full color – focus state and hover state

Illustration examples:

Task workflow card examples:

Banking setup guide
Payroll setup guide

3. Inline task card

If a workflow can’t be created and there is only one flow to launch for the job, or if the user can complete a task in the card, you can use a single call to action. For tasks within a card, use animations and loaders to indicate the status of the task. An illustration is included.

Inline task card visual states:

  • Required: before task – use primary button color
  • Required: task complete – indicate task completion with a green checkmark
  • Optional: task incomplete or resume task – if the user has completed part of the flow or task
  • Optional: error states, if needed

Inline task card examples:

Connect accountant – task complete
Payroll setup – before task

Responsive design and mobile

The setup widget has two responsive layouts in addition to the 3-column view. Illustrations don’t appear in the responsive views.

2-Column layout

For smaller desktop browsers, the setup guide narrows to two-columns wide, the illustrations are removed, and ordered workflows flow vertically.

 

Mobile layout (x-small mobile: 320px width, mobile: 440px)

On mobile devices, the setup guide appears in a vertical, accordion style layout.

Content guidelines for set up guides

Job tabs

  • Write job tab copy as imperative statements (verb + direct object or verb + prepositional phrase) as in “Add finishing touches” and “Connect with an accountant.”
  • Don’t use end punctuation.
  • Character limits: 50 characters and no more than 2 lines
  • Examples:
    • See how much you’re making
    • Connect with an accountant
    • Add the finishing touches
  • Voice and tone attributes: Straightforward, encouraging, experienced

Task workflow cards

  • Write task workflow card copy as brief imperative statements: Verb + direct object.
  • Don’t use end punctuation.
  • Character limits: 50 characters and no more than 2 lines. (Three lines may be needed for non-English versions.)
  • Examples:
    • Connect your bank
    • Review your transactions
    • See your profits
  • Voice and tone attributes: Straightforward, encouraging

Inline task card

  • If users can do the job in just one step, you have more room to write helpful copy, and the interaction designer can integrate a button, dropdown selection, or other simple interaction to help the user complete the task.
  • Write the following:
    • Header: no more than 90 characters and no more than 2 lines.
    • Instruction copy: no more than 170 characters and no more than 2 lines.
    • Ghost text (if needed): Copy is italicized and in sentence case.
    • Confirmation message (if needed): Use sentence case and follow with a period.
    • Button text (if needed): Use sentence case.
    • Optional additional call to action (if needed): Use sentence case and end with a link, if needed.
  • Voice and tone attributes: More room in inline task cards gives us some opportunity to flex the clever attribute. Be sure to keep the user moving forward to her next action. Straightforward, encouraging, and experienced voice attributes can help.

Content guidelines for set up guides

Job tabs

  • Write job tab copy as imperative statements (verb + direct object or verb + prepositional phrase) as in “Add finishing touches” and “Connect with an accountant.”
  • Don’t use end punctuation.
  • Character limits: 50 characters and no more than 2 lines
  • Examples:
    • See how much you’re making
    • Connect with an accountant
    • Add the finishing touches
  • Voice and tone attributes: Straightforward, encouraging, experienced

Task workflow cards

  • Write task workflow card copy as brief imperative statements: Verb + direct object.
  • Don’t use end punctuation.
  • Character limits: 50 characters and no more than 2 lines. (Three lines may be needed for non-English versions.)
  • Examples:
    • Connect your bank
    • Review your transactions
    • See your profits
  • Voice and tone attributes: Straightforward, encouraging

Inline task card

  • If users can do the job in just one step, you have more room to write helpful copy, and the interaction designer can integrate a button, dropdown selection, or other simple interaction to help the user complete the task.
  • Write the following:
    • Header: no more than 90 characters and no more than 2 lines.
    • Instruction copy: no more than 170 characters and no more than 2 lines.
    • Ghost text (if needed): Copy is italicized and in sentence case.
    • Confirmation message (if needed): Use sentence case and follow with a period.
    • Button text (if needed): Use sentence case.
    • Optional additional call to action (if needed): Use sentence case and end with a link, if needed.
  • Voice and tone attributes: More room in inline task cards gives us some opportunity to flex the clever attribute. Be sure to keep the user moving forward to her next action. Straightforward, encouraging, and experienced voice attributes can help.

Content guidelines for set up guides

Job tabs

  • Write job tab copy as imperative statements (verb + direct object or verb + prepositional phrase) as in “Add finishing touches” and “Connect with an accountant.”
  • Don’t use end punctuation.
  • Character limits: 50 characters and no more than 2 lines
  • Examples:
    • See how much you’re making
    • Connect with an accountant
    • Add the finishing touches
  • Voice and tone attributes: Straightforward, encouraging, experienced

Task workflow cards

  • Write task workflow card copy as brief imperative statements: Verb + direct object.
  • Don’t use end punctuation.
  • Character limits: 50 characters and no more than 2 lines. (Three lines may be needed for non-English versions.)
  • Examples:
    • Connect your bank
    • Review your transactions
    • See your profits
  • Voice and tone attributes: Straightforward, encouraging

Inline task card

  • If users can do the job in just one step, you have more room to write helpful copy, and the interaction designer can integrate a button, dropdown selection, or other simple interaction to help the user complete the task.
  • Write the following:
    • Header: no more than 90 characters and no more than 2 lines.
    • Instruction copy: no more than 170 characters and no more than 2 lines.
    • Ghost text (if needed): Copy is italicized and in sentence case.
    • Confirmation message (if needed): Use sentence case and follow with a period.
    • Button text (if needed): Use sentence case.
    • Optional additional call to action (if needed): Use sentence case and end with a link, if needed.
  • Voice and tone attributes: More room in inline task cards gives us some opportunity to flex the clever attribute. Be sure to keep the user moving forward to her next action. Straightforward, encouraging, and experienced voice attributes can help.
  • Was this Helpful?
  •