Image for post
Image for post

“No Data” Doesn’t Have to be a Dead End

How I Solved a Design Challenge from the Folks at YNAB

Between June and August of 2016 I applied and was considered for a UX design position at You Need a Budget (YNAB), one of my all-time favorite companies. Out of 450 applicants I made it into their top 7, which I largely attribute to my unique application. Here’s my writeup for a design challenge they gave me later in the process.

Problem

As you’ll read below, I also decided to explore another opportunity we have with the “no data” state, specifically to drive signup-to-subscription conversion by helping trial users visualize their financial success with YNAB even when they have no accounts, no transactions — “no data.”

Timeline

Monday (8/8)

Tuesday (8/9)

Realizations

  1. A report isn’t just a chart or graph, it’s an answer to a specific question. When our users select filters and categories to report on, they are most likely doing so with a specific question in mind. We can’t tell from the filters or categories they select, however, what specific question they’re asking, which means any kind of prediction mechanism (i.e. no data found for x, but maybe you were looking for y?) would be challenging.
  2. The “no data” state isn’t necessarily a dead end nor is it something we should try to prevent. It may very well be the answer to the question someone is asking, and is just as legitimate an answer as “here’s the data you asked for.” I’ve designed filters for e-commerce contexts where you’re typically trying to prevent users from hitting the “no results found” wall, and tactics like disabling or hiding filters are common. That would be inappropriate here.
  3. There are two different reasons why someone might encounter the “no data” state: 1) there is data available to report on (i.e. they have transactions) but their filters prevent that data from appearing, or 2) there is no data available to report on (i.e. they have no transactions). The latter would lead me to some interesting ideas.

Guiding Principles

  1. Informative — Explain why there is no data.
  2. Instructive — Explain how (or provide a way) to see data.

Jobs to Be Done

Even though the problem of handling “no data” in reports is pretty tightly scoped, I wanted to make sure I grasped where the Reports feature fit in the bigger picture. “No data” seems like kind of an edge case, and is specific to the Reports feature, but until I understood the real reasons why someone would use that feature in the first place, I felt that my design would lack cohesiveness with the whole Reports experience.

I based most of my thinking on this article by Jay Haynes at thrv. And, of course, credit goes to Adam Stoddard for introducing me to these three jobs for YNAB.

  1. Do more with my money.
  2. Reduce stress.
  3. Achieve some financial peace.

The first of these — “Do more with my money” — is highly relevant to the reports feature, but it also underlies a bunch of other features in YNAB. It felt like too much of a leap to say, “people who want to do more with their money hire YNAB, and therefore… they need a reporting feature.”

I discovered from reading Jay’s article that I was missing two important concepts that would act as stepping stones between the job and all my potential ideas:

  • Job steps — The process someone goes through to do the job.
  • Customer need — A metric that the customer uses to measure the speed and accuracy of executing a job step.

For the job, “Do more with my money,” there are at least 6 job steps.

  1. Decide what my priorities are.
  2. Figure out where my money is currently going.
  3. Decide whether my spending habits align with my priorities.
  4. Figure out what behaviors or tendencies are preventing/enabling me to stay true to my priorities.
  5. Implement measures to change my behavior, if necessary.
  6. Review my progress to see whether those new behaviors are generating results that align with my priorities.

I had been spending some time on the YNAB forum reading people’s journals, and that helped me identify the following customer needs (notice how each relates to a job step):

  1. Maximize the likelihood of my spouse and I getting on the same page about our priorities (job step #1)
  2. Reduce the time required to figure out where my money is currently going (job step #2)
  3. Reduce the time required to decide whether my spending habits align with my priorities (job step #3)
  4. Reduce the time required to assess my financial health (job step #4)
  5. Reduce the time required to log my transactions (job step #5)
  6. Reduce the time required to find out whether I have money to spend (job step #5)
  7. Reduce the time required to monitor my progress on my financial goals (job step #6)

Some of these will seem irrelevant to the “no data” problem, and it’s true, they’re not all directly relevant. This process was to help me get my hands around how the Reports feature would help someone “Do more with their money.” Now that I understood the various job steps and customer needs (though I know these aren’t complete lists), I had a better grasp of how the Reports feature met some of those needs, and began generating ideas that would help that feature meet those needs even better.

Ideas

  1. Provide canned views for commonly asked questions
    When there is no transaction data available (e.g. for a trial user who just signed up and hasn’t set up any accounts or logged any transactions) show what the report would look like if there were data, emphasizing the way that users would be able to monitor progress on their financial goals. It would be some kind of splash screen that lets users preview the value offered by such a report, without having to have actually used the app.
  2. Provide navigational aids that get them to a state where data is available and can be shown
    When there is data available, but the user’s filter selection results in there being no data to show, provide controls that allow them to easily navigate to a state where there is data. E.g. “No data for date x… Click here for current date,” or “No data for category y… Click here for category z.” This type of feature would be severely limited, since there are MANY potential reasons for the “no data” state and the sequence in which filters and categories are applied doesn’t paint an obvious picture about what “question” the user was asking. Attempting to guess what they were trying to find out is dangerous. Plus, we should remember that “No spending” is just as legitimate an answer as “Here’s what you spent”! Perhaps the best implementation would be to allow them to select different filter criteria inline, e.g. show a message like “No spending in [these categories] for [these dates]” where categories and dates can be changed inline.
  3. Provide a “reset” control that restores the report to some kind of default state where there is data to display
    If there were to be some set of “default” filters or category drilldown level… Even if there weren’t, this could simply show all categories or all accounts. I would incorporate this in the right sidebar, underneath where it says “Some categories and accounts excluded.” It would provide a few different options: “Show all accounts,” “Show all categories,” and “Show all accounts and all categories.”
  4. Allow users to “undo” filter selections and category navigation
    This would take them back through their previous steps in reverse linear order. If they had just applied a filter, had drilled down to a category before that, and had switched visualizations before that, it would undo each of those actions in the order they were executed. I would use some kind of “undo” control.
  5. Allow users to navigate a historical breadcrumb
    Much like the “undo” concept, except this would be navigational like a “Back” button instead of a one-time “undo” button. We wouldn’t actually display the history, but by clicking “Back” you would navigate through your previous steps in reverse linear order. Spotify does this, activating the “Back” button for every single click during your session, even clicks that don’t seem to navigate to a brand new view. Google Maps does something similar.
  6. Tell a “story” with example data and a few sentences
    E.g. John and Suzie knocked out their $105,000 debt in 4 years. It looked like this (graph). This is much more personal than just, “here’s what an xyz report would look like if you had data, see, pretty graphs!” It tells a story about the ups and downs experienced by real people in their quest for financial peace. The design could cycle through a few different “stories” to maximize the likelihood that (potential) customers will find one that they can identify with. We could ask whether existing YNAB users would be willing to share their report data anonymously.
  7. Prompt you to enter some data, e.g. how much debt you have, and show you what’s possible
    Show new users what could happen if they took their situation in hand and got on a budget. This isn’t about looking backward on what has happened (e.g. spending) because there’s no data available for that, it’s about looking ahead, imagining that you’re in the future looking back on your journey after you got yourself on a budget. This design makes the answer to that question (“what could happen if we were on a budget?”) more personal because it starts with your actual situation instead of just some random numbers. People will be able to see themselves as the actor in that report, and identify with the success it forecasts.
  8. For new users, display an instructive, creative graphic about how reports give you “sonar” into your finances
    Something that promotes the idea of visibility into the unseen, in order to steer your finances toward where you want to go and prevent financial shipwreck that could have been avoided if you would have been more aware, sooner. Intercom does some really creative work in this same vein, where the message is implicit in the graphic and backed up with a few short sentences of text.

Enough for One Day

I was feeling pretty jazzed about ideas #6 and #7, and the opportunity to make the Reports feature meaningful even to newly minted trial users who have no accounts or transactions to report on. Here’s something I wrote that evening:

I’ll venture a guess that most people don’t get particularly excited about entering transactions, viewing ledgers, or looking at a bunch of financial data. They get excited when they start seeing those activities pay off — for real! The reports feature is an absolute gem for selling someone on the idea of budgeting. What happens, though, when you start a trial and have never used YNAB before? You have no data to report on. The “no data” state is such a great place to advertise the benefits of getting on a budget and sticking with it. I’ve never had any significant debt, so I don’t obsess over my net worth report. It’s interesting and I like to see it increase, but I’m not fighting against debt or struggling with financial stress. Many people are. This is a chance to get their attention and give them a glimpse of hope.

Wednesday (8/10)

We went to our first birth class and got gelato in Portland instead. :)

Thursday (8/11)

  • Historical breadcrumbs trace the history of where you’ve been, what you’ve clicked, etc. They are typically invisible to the user, which is best because their data is largely unstructured. Your browser’s “Back” button is an example of this pattern.
  • Hierarchical breadcrumbs simply show you where you currently are in a structured hierarchy. They typically make sense to users and are a great pattern for many interfaces.

I decided to take a cue from Spotify and, to some degree, Google Maps, and design a little “Back” / “Forward” control in the upper left of the Reports screen.

Image for post
Image for post
If we were to implement this, there are a couple things to note: 1) the browser “Back” button would continue to work as normal, navigating between screens, and 2) we would need to discuss whether we simply save the Reports screen’s state or also the history of user actions across sessions. The “Back” button is only enabled when there is history to navigate back to, so if that’s not saved across sessions, it won’t help users escape the “no data” state. Just something we would need to discuss.

Friday (8/12)

A good story should provide your audience with the key bits of information they need to form an accurate judgement about your product and it’s ability to solve their Job-to-be-Done. But information alone is not enough. You need to evoke empathy. Paul Zak, a professor at Claremont McKenna College, found stories that evoke empathy cause the brain to synthesize Oxytocin, which has been shown to increase voluntary cooperation. Or put another way, empathy paves the way for a deeper emotional connection that leads to behavior change. In this case that means buying your product instead of someone else’s. (emphasis mine)

Saturday (8/13)

Sketches for Idea #2

Image for post
Image for post
This is what’s there today. It’s neither informative nor instructional.
Image for post
Image for post
This is just like the historical breadcrumb pattern I sketched before, but provided in context. This is slightly more instructional, but it’s still not very informative.
Image for post
Image for post
This is more informative. Users get the impression that there is data, just not for these dates.
Image for post
Image for post
This is even more informative. It cites your selected dates as the reason why there’s no data to show, and implies that you can change your date selection in order to see data.
Image for post
Image for post
This provides more complete information, citing both categories and your selected dates as the reason why the report is empty.
Image for post
Image for post
This is even better. Not only does it provide you with the information you need, but it provides you with the ability to change your categories and dates inline. The text not only instructs, it lets you follow its instructions right there!

Mockup for Idea #2

Image for post
Image for post

I added “These Accounts” since that could also be the cause of “no data.” Notice the little “Back” / “Forward” buttons in the upper left. They’re designed within the context of this specific report so they would navigate you back through the filters you’ve selected for the “Spending” report.

Sketch for Idea #6

Image for post
Image for post
Not only can the “no data” state inform and instruct. In could also be used to INSPIRE.

Conclusion

I find that I reach the best conclusions when I work outward from a central idea, making connections with other ideas and keeping my eyes peeled for little insights, outside-the-box concepts, and underlying themes.

These concepts need to be reviewed by others (I would have welcomed plenty of that throughout the design process), and I have yet to unpack them into their various assumptions to determine whether any of those assumptions are risky enough to require testing.

Hopefully this gave you some insight into how I think and work. I promise I’m not this wordy in real life. :)

Written by

I'm a Sr. User Experience Designer with Home Depot, happily sipping cappuccinos in our far-from-headquarters office in southwest WA state.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store