Empty states

Empty states shouldn’t be an afterthought. In my opinion, empty states are an interesting and engaging way to introduce your users to what your product does, and give them a sense of how it works.

State of the empty state at Bill.com

Problem:

Our empty states were in disarray. We had inconsistency in our empty states between the different screens, different messaging, and unhelpful content for users who may be coming to pages for the first time.

Here’s a few examples:

Empty state on the Bills vs Payments screens

Here you can see the inconsistency between the bills page and payments. There’s no exclamation mark in this iteration and also doesn’t give the user any idea of a “zero” state or a place where they should see payments if they had any scheduled. Also, how does creating a new invoice relate to payments?

Not terrible content, but for me it’s missing some information that might be helpful for first time users especially. How does it work and what do I need to do? What’s the difference here between paying a vendor and entering a bill?

Vendor page empty state

Contextual inference

This empty state resembles more of a zero state, where a search was performed and no results were found. The only problem is that no search was done here as it’s a first-time experience, so it’s confusing to the user, and it may seem like this is an error on Bill.com’s end.

Exploration:

Utilizing the research and understanding what I know about user behavior and best content practices, I wanted to standardize our empty states, while also giving users a clear idea of:

A: What they should see in the “typical” state

B: What they should do to get started.

Research/insights:

I explored the data and investigated how many users initiated an action (“Add vendor” as an example), but that still didn’t tell us whether the empty state messaging was effective or not. For that, we needed more qualitative testing to better understand if users found this error confusing. In our research looking at previous user testing, we observed behaviors of users clicking elsewhere on the screen, giving us a signal that they felt lost or confused as to what action we expected them to do.

Solution:

By letting users know these basic functions, it gives them a mental model of how the navigation/pages work, and sets their expectations appropriately.

Finally, isolating a single, clear CTA gives the user a path forward to creating their first bill.

Now we have a solution that makes it clear for the user where to find bills once they’ve been created, as well as when they should see bills they need to approve. We add some excitement and a personal, friendly tone to get them confidence this is the right page.

RESULT/OUTCOME

In the initial user testing after the iteration, we didn’t observe any unusual patterns from users. We observed a higher percentage of clicks on the primary CTA.

The results are still ongoing in future releases, but from a content perspective, we were able to create a better experience and have clearer messaging to meet the users expectations.