This week we’re really excited about the launch of spendometer.ie, a nifty little tool we designed and built with the good folks at permanent tsb.

Before reading further, you should first go check it out for yourself, make up your mind about whether we hit the mark with this one, and then come back here to read about the design thinking that went into it.

Budgeting apps are boring and painful

Our task for this project was to come up with an idea for a personal budgeting app, and to make it something that was actually a bit of fun so you’d share it with your friends.

Problem number 1:

Here’s your choice — figure out your personal spending budget or pluck off your own fingernails. Tough choice, isn’t it?

Think about it — tot up your rent/mortgage, all your utilities (TV, broadband, mobile phone, electricity, gas…), how much you spend on your daily commute, your food shopping, childcare, home insurance, petrol, the list seems to never end. For a lot of us these days, a full home budget is a necessary evil, but the whole process unavoidably stinks.

Our reflexive cringe at the idea of doing a home-budget disguises the critical failing of most budgeting apps: the app does almost none of the work for us. It’s easy to take an expense and multiply it by 12. What’s hard is figuring out how much something costs you in the first place. For a lot of these, you’ve got to go dig out your bills from the last several months and figure out the average spend. Ugh.

To calculate that, I need to check my credit card bill, my laser bill, and start keeping track of all the cash I spend (retroactively).

Another problem with the standard approach of budgeting tools is that they focus on expenses you can’t really do much about anyway. I mean, if you spend 50e a month on the bus for your commute, are you really gonna consider walking the 10 miles into work? Changing these types of expenses requires a lot of effort. And a lot of effort is exactly what we set out to avoid with spendometer.ie.

The big idea: forget your mortgage, think about those coffees

There’s another big problem with your standard budgeting apps — they ignore a lot of places where we do spend our money — our vices. I’m talking about the obvious ones, like smokes and drink, and the more innocent-seeming ones as well, like take-out coffees. Consider that person in your office who gets a couple of take-away coffees a day. Do they have any idea how much they spend each month on those café lattes?

So in a workshop with the crew at permanent tsb, we came up with a big list of spending categories, and we rated them based on five criteria:

• are they discretionary
• are they items you frequently spend money on
• are they easy to calculate
• are they provocative
• are they common to most working folks in their 20s and 30s

Here’s a partial list of the big table we came up with:

So by switching the focus from your mortgage to your coffees, we do two key things:

1. We make the process and the results much more interesting.
2. We make it useful, too. It’s a lot easier to cut down on the number of take-away coffees you drink than it is to re-mortgage your house.

The challenge: Make it a bit of fun

The brief on this project was to come up with a budgeting app that people would want to share with their friends. Given problem number #1 (budgeting does not equal fun), this was a tall order.

The heart of the solution is the spending categories themselves — as described above.

But we tried to make every other component of the site contribute to a sense of playfulness about the whole thing.

Visual design

The casual, sketchy feel of the app belies the effort involved to create and implement such a custom design. The visual theme was carried through the entire site: the images, the borders, the font, the bars in the results graph, all the way down to the drop-down menus.

Copy

We kept this to a bare minimum, apart from one-liners for each of the categories. Despite their appearances, these one-liners aren’t throw-away copy. Rather, the hope is that they gently nudge you to make it through to the end of the 11 categories.

Interaction

The whole point of this app is to make people aware of their hidden spending habits. You can’t just ask them point blank, “So how much do you spend in the pub each month?” Nor do we want people digging into their receipts or credit card statements — that’s equally pointless. So instead we used simple equations, getting people to think about the things that are easier to remember, and then doing simple calculations to get a yearly cost. Sure, it’s not super-accurate. But the point is that it’s close enough to your actual spend to be useful, and to be interesting.

We used a UX form-filling pattern that recently has gotten a bit of attention: the Madlibs style. But when we initially sketched these pages, none of us had ever seen this style before. It just seemed like the most natural way to get people to put in the information, and most importantly, to try to hide the reality that you’re basically filling in a spreadsheet.

You gotta test it

This was a small project, but that doesn’t mean there’s not room to do user-testing. We quickly knocked up an HTML prototype, brought it into the permanent tsb branch on O’Connell street, and plopped down a handful of people in front of it. The tests confirmed a few assumptions (that it was easy and quick to use) and also highlighted a few tweaks we needed to make,  like the Skip button, which we hadn’t thought was necessary.

Make it social

These days every app tries to be social. But when it comes to money, there really is a voyeur lurking in all of us. So we spent a lot of time designing the results page to draw the user into their own data, and then encouraging them to compare themselves to other people. The more people engage with the data and the comparison tools, the more likely they are to share it.

And the Facebook Connect integration adds another level of engagement, because you can snoop around the spending habits of your own circle, which gives an even stronger incentive to share the app.  And at the end of the day, that’s the critical success metric for this app — the number of people using and sharing it.

Give a call-to-action for the client

permanent tsb’s goal with this app is first and foremost to be useful and to be interesting, but getting some interest in their savings products was the way they could justify building this app in the first place. We came up with two options for the design of the call-to-action: one above the fold; the other integrated into the results screen.

I’m really happy they opted for the one that’s integrated. Being above the fold is a valid focus for something as important as the CTA on a page, but we felt the first CTA would suffer from banner blindness — it was simply too easy to ignore. Whereas the second version actually is woven into the visitors results, and thus looks and feels relevant.

So what’s your verdict?

This project was great fun to work on. But will people like it, use it, and share it? Only our analytics will tell us that. And I’d love to hear you own reaction to the design.