“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

For various reasons, users may encounter a state on the Reports screen where no data is present. When someone goes from seeing a nice chart to seeing “no data,” it’s jarring. We have the opportunity to make it less so, as well as reinforce the YNAB brand.

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

You mentioned wanting to see my thought process and how I arrive at my conclusions. That sparked an idea. Why not journal my progress? My colleagues and I would be working together on a day-by-day basis, so, besides hiring me and seeing for yourselves (which I hope you do!), this gives you the clearest picture of what I would really be like to work with. I won’t focus just on external outputs or the end result. Instead, I’m going to throw open the hood so you can see the mechanics of how I think and work. By the end I hope you’ll have a better understanding of why I’ve made my design recommendations and how I got there.

Monday (8/8)

While home on my lunch break I got the email from Jesse about advancing to the next phase! After hyperventilating for a minute (true story), I shot back to the office to finish out my day. Later that evening I did what I usually do when starting a project, I thought about how I would approach it and broke it down into tasks. At this point I didn’t have any concrete ideas for how to solve the problem, just a sense of the steps I would be taking to find a solution.

Tuesday (8/9)

Realizations

With a fairly busy schedule this week, I knew Tuesday was my chance to get a lot done. I hit the ground running early in the morning and made three important 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

I also recalled from my experience designing for e-commerce that a screen like Reports, where data would be expected — but in a state where data is absent — would need to be at least two things:

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

Jobs to Be Done

That evening I revisited my original research into the three fundamental “jobs” people “hire” YNAB for. When I designed the “Today View” widget, I went straight from business goals and those jobs into idea generation. Since then I’ve learned a bit more about the whole Jobs to Be Done theory, and decided to refine my process for going from jobs to ideas.

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

Just like I did last time, I decided to list out the ideas that came to mind — good and bad — in order to get them out of my head. Here they are along with my original notes.

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

Tuesday was a doozy! I wrapped up by emailing Jesse two questions I had about how Reports would work, one having to do with selecting future date ranges (not possible), and the other having to do with whether the state of the Reports screen is saved between views and sessions (the answer was yes). This confirmed that YNAB hasn’t figured out time travel yet (future transactions haven’t happened and aren’t reportable in the present), and that users could potentially get stuck in the “no data” state unless the interface offered a clear explanation and way out.

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)

Tuesday felt like a marathon. It was time for a little break. A mid-morning webinar by Nir Eyal, author of Hooked: How to Build Habit-Forming Products, got me thinking about behavior change and product design, but I pretty much left this project on the shelf that evening.

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

Thursday (8/11)

Idea #5 intrigued me. It seemed like a good way to reduce the time required to figure out where your money is going by providing a familiar navigational pattern — the “Back” button. This is sometimes referred to as a “historical breadcrumb” pattern, and it’s different from the “hierarchical breadcrumb” that YNAB will be displaying above the graph.

• 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.

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)

Between a busy day at work and grocery shopping in the evening, I didn’t spend much time on the project on Friday. I did read a good article on comparative marketing by Greg Davis (Intercom) and was struck by this quote:

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)

With Sunday just around the corner, this was my last day to wrap everything up. I focused my energy on sketching some of my ideas, particularly #2 (navigational aids to get to a state where data can be shown) and #6 (telling a story with example data).

Sketches for Idea #2

For idea #2 I went back to the two guiding principles I had identified earlier, that the “no data” interface must be both informative and instructive. Here’s an interesting sequence of sketches which led me to what I think is a really neat solution.

This is what’s there today. It’s neither informative nor instructional.

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.

This is more informative. Users get the impression that there is data, just not for these dates.

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.

This provides more complete information, citing both categories and your selected dates as the reason why the report is empty.

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

I thought it would be worthwhile to mock up my ideas in the context of the actual interface. Sketches are sufficient to express an idea, but as I close in on a specific design direction, I find it’s important to get my idea closer to its final form.

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

I’m intrigued by the idea of using the “no data” state as an opportunity to sell trial users on the benefits of using YNAB. Again, it’s not about the pretty graphs and charts. It’s about the story those graphs and charts tell. Why not design an experience specifically for trial users who have no accounts, no transactions, and therefore, “no data,” that evokes empathy? What if the Reports screen showed sample data from real-life individuals that would inspire new users to get on a budget, subscribe, and see results like those people saw?! That’s what I’m exploring in this sketch.

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

Conclusion

It might seem as though I went down a long series of interconnected thought trails in this project. That was intentional and planned.

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. :)