BACKGROUND /OVERVIEW

  • This feature was built for a product with payment acceptance capabilities.
  • Goal: to set a standard or establish a library of empty state template that aligns with core personality of the product.

GOALS

1. Research

  • Competitive Research
  • Mapping out Personas, Customer Journeys

2. Design

  • Layout features / format
  • Consider color psychology & limitations

Research Takeaways

  • Reduce burden on service
  • Helps make user journey or task more meaningul and productive
  • Educate users on the new features and possibilities

FOCUS

Empty States should seek to answer:

  • What is this screen or feature?
  • Why am I seeing it?
  • How do I benefit from using this feature?
  • How or What can I do to fix this problem?

Empty State Designs must be:

FORMAT

  • Headline: primary message
  • Sub Headline: secondary message (supporting headling; what a user can do with this feature)
  • Action Component: answer “how” or “what next?” in the workflow
  • Graphic/Image: stimulating a visual representation of the feature.

Solution

Experiences drive the story empty states are required to narrate. The experience of a first time user with a payment tool may be starkly different from an already on-board user learning about a new feature.

Therefore, at least two different types of empty states need to be considered:

  1. New Feature Empty State – to introduce a new feature to the user
  2. No Data Empty State – to alert or re-engage the user to perform an action to see data

An overlay over the existing feature page that explains in detail about the feature, benefits and what the user can do with it.

A friendly reminder within the field of view prompting the user to perform an action to see the populated data.

HIGH FIDELITY MOCKUPS

NEXT STEPS...

Although we were able to establish the semantics, visual language and guidelines, the solution needs to adapted to other use cases.

Consider the following use case:

The product allows access to multiple users under one account. It is common to have multiple employers working for business owners. The solution currently addresses the experience of a first-time user and existing user. However what if there are multiple users? How can we ensure that all users independently have the opportunity to learn and understand new features?