Zero state’s goal is to provide our customers with the single most important value proposition for any offering or feature within QBO, and compel our customers to take action. At a quick glance, our customers should understand the “how” and “why” of this product or offering.

Usage

Zero states should always align with the end-2-end workflows within the ecosystem.

Illustration/ Photography

  • An illustration or photograph is used to help convey the value proposition for the Zero state page
  • The illustrations should tell either what QBO is doing in the background or the steps that the user will be taking in order to see the value of the page they’re on
  • Both illustrations and photography should follow brand guidelines
  • When applicable, animation may be used to help communicate feature functionality (TBD)
  • Photography can be used in place of illustration if there is a compelling business rationale or use case. E.g: in the accountant services marketplace, user testing results informed the use of photography as the most effective way to communicate a connection with a real live person.

Headline

Primary messaging provides the value proposition for a particular product or offering. The headline provides the “why” for our customers and prompts our users to act.

Sub headline

Secondary messaging is used in support of the primary value proposition. Messaging should always speak to a targeted customer segment.

Action component

The “action component” is located directly underneath the value proposition provides the “how” for what’s next in the workflow.

Primary call to action

Is located in close proximity and/or directly below the action component.

Secondary call to action

Drives to learn more page if customers need additional information about the offering or feature.

Tertiary call to action

Can be utilized only if it’s in support of the primary call to action.

Visual specs

 

Use cases

Banking

 

Invoicing – Add customers

 

Employees Payroll



Zero state on table

Next iteration

  • Left-aligned layout: To align more with brand, content is left-aligned vs. centered.
  • Guided zero state: Customized setup wizards that contextual to the page and guide users in accomplishing specific tasks.

  • Created by
  • Last modified September 1, 2017 by
  • Was this Helpful?
  •