[intro]A look into the design process behind the empty screens in Abacus.[/intro]
You know when you’re at the grocery store and strolling up to your favorite brand of crackers only to realize the shelf is completely empty? Are you in the wrong section? Did they sell out? Are they coming back soon? All these questions could be answered if only the store put up a sign saying “Hey buddy, we know you were expecting to have your favorite crackers today, but they’re totally out of stock. We promise we’ll have them back on the shelf tomorrow!” In doing so, this grocery store is not only acknowledging your frustration, they’re providing an explanation on what’s coming next. This, dear reader, is why we take the time to design empty states in the Abacus product. Like a sign on an empty shelf, we use empty states to acknowledge and inform our users.
Empty… what?
An empty state is an empty screen in a product; a point in the user experience when there is nothing to display. It’s a seemingly unimportant detail (empty screens that are rarely encountered), but acknowledging a user’s experience on a small scale can make a big impact on the overall impression of Abacus.
Instead of having a generic catch all for an empty screen, we craft specific messaging and imagery that is informative and actionable. Each empty state is made up of three components; a tagline, a call to action, and an illustration. What those components look like depends on two things; the user’s state of mind, and what we want them to do next. Is the user likely to feel frustrated or relieved? Do we want to educate the user about a helpful feature or redirect them towards a particular action? The scenario dictates the design of our empty states. Regardless, we want our empty states to inject a specific personality into our product, and reflect our desire to give the user an enjoyable experience.
Watch your tone
The biggest challenge in designing empty states is adding the appropriate personality in our illustrations. The image needs to match the mood of its associated state. Is this a celebratory moment? Will the user be annoyed to see an empty screen? The mood of the user will dictate if the illustration should be serious and literal, or humorous and metaphorical.
For example, when designing our 404 Error page, the important thing to remember is that no one is particularly thrilled to be there. We don’t want to add to the frustration by designing a patronizing or sarcastic image. We want to acknowledge that it sucks to be on this page, but that there are solutions to leave it. It seems easy enough but we actually went through a lot of different ideas before landing on the right design.
Some were way too violent:
Others were a little too silly:
In the end, we steered clear of broken computer imagery and created a playful interpretation of our logo using doughnuts.
The doughnuts playfully lighten the mood. Who would possibly be peeved at desserts? Sure, it’s possible to feel annoyed when you realize someone took a bite out of your doughnut… but everything will be fine! There are still doughnuts to be had.
When it’s not like emptying an email inbox
Having an empty email inbox is worthy of a city-wide parade. However, in Abacus, having an empty anything, whether that be an expense inbox, receipt view, or corporate card dashboard, isn’t as celebratory. It basically just means you’re not using Abacus to its full potential! Instead of celebrating with images of smiley faces and confetti, we want to suggest that the user take steps to fill it in with information, or learn more about that feature. We accomplish this by crafting simple messaging, call-to-actions with clear next steps, and illustrations that act as a playful metaphor. For example, this is what you see when you hit the Saved Receipts empty state:
The goal of this state is to act as a friendly suggestion for our users. We want to give the user the opportunity to utilize the saved receipts feature in Abacus, without implying they’re doing something wrong. So the messaging is more neutral in tone and informative, as opposed to celebratory. To compliment the messaging, we created a simple illustration that plays on the idea of encountering a “receipt desert” without being patronizing or distracting.
The corporate card dashboard is an important feature in Abacus and we want users to take full advantage of it. So using messaging and a call-to-action specific to setting up a card program help users quickly understand its’ value. The tone of the illustration is optimistic (look how beautiful the sky full of corporate card constellations is!) and a metaphor for the endless visibility you can gain by setting up a card program. All together, we have an empty state that is instructive in nature, with a delightful image to put a smile on your face.
Behind the scenes
There were a lot of illustrations that didn’t make the cut because of the challenges already discussed. The reasons for getting nixed range from inaccurately representing a feature, to just looking really sad. However, I think it’s important for designers to show the bad ideas because it helps to understand the work that went into the good ones. So without further ado, here are some the rejected concepts:
Making Something out of Nothing
One of our most important company values is that every experience matters. So there was never a question about whether or not we should spend time on such a small detail of our product. Designing empty states with informative messaging and unique illustrations turns blank screens into opportunities to help users understand the product and take advantage of its best features. Plus, who doesn’t like to come across a delightful little cactus when doing their expenses?