Posts Tagged ‘Apple’

Designing iPhone Apps – Expenditure

Tuesday, July 13th, 2010

By Nicolas Thomsen (@apporacle) of ShapeHQ.com

Ever since man went from caveman to something more advanced he has had a need to keep track of his values. At first “money” were merely big chunks of shiny material and had to be kept in a big bag, later actual coins were made and they got lighter, smaller and easier to carry. Still people kept them in a bag or their pockets. When they went to the market they could easily see how much they had left to spend. When credit cards were introduced things got more complicated because now your money is kept in the bank and you don´t have the same overview of your balance when you are around and about.

But even though you no longer have all your money in your pocket, there is something else you always have with you – your iPhone. In my opinion the iPhone is the perfect tool to track your expenses. The truth is, tracking expenses, while extremely ordinary, is a very useful utility for many people. And while there are countless expense trackers for the iPhone, none of them hit the sweet spot between ease of use and a polished UI. So it really was the perfect first app for us to build as a team. I just wanted to spend a little time writing about how Expenditure came to be.

Picking your spot

The audience for the app was an important factor. After looking at the different apps in the finance category we felt that we could divide them into three groups.

Group 1

Apps that are easy to use, with a simple functionality but not a great focus on the interface and the user experience. Usually priced at 0,99$ – 1,99$

Group 2

Apps that focus on a polished interface and a nice user experience. The functionality of these apps tends to be more advanced, which means that they can be less easy to use. Usually priced at $3,99 – $4,99

Group 3

Apps with lots of functionality. Tends to target the more hardcore users. Very little focus on the interface and the user experience. Usually priced at $4,99 – $7,99.

Diagram

We concluded that we wanted to target casual users with Expenditure. We wanted it to be somewhere between Group 1 and 2, with a high focus on a polished interface and user experience but at the same time we wanted to make sure that the app was very easy to use. On top of that we thought that $1,99 would be a good price point for an app like this.

Designing the Interface

I wanted Expenditure to have a unique interface that was relevant for the purpose of the app. I went for a custom interface but I wanted to avoid that it looked like a toy. There is a fine line between when After a lot of brainstorming I settled on a design inspired by an ATM machine.

Inspiration

It didn’t take long to come up with a working solution for the interface. I thought that the most important information to show the user is how much money you have left. Therefore the biggest element ought to be a screen that shows the user´s balance. After I decided that the UI should be inspired by an ATM machine it was a given that most of the app should have a subtle metal feel to it. We thought it made a lot of sense to show each transaction as a receipt that you could tear off when you wanted to delete it.

expenditure

The User Experience

Our primary goal for Expenditure was for it to be the most efficient expense tracker app there is. We wanted to get you from point A to point B with the least amount of taps. The most important function is obviously to be able to add a new transaction. I’ve used most of the expense trackers in the app store and from my own experience the factor that decided if I kept using it or not was how easy it was to add a new transaction. Being a GTD geek myself I am a big fan of getting things out of your head as quickly as possible, and that is the main idea behind the way you add transactions to Expenditure.

I wanted Expenditure to be a tool to help people to get an expense “out of their head” as fast as possible. That meant creating a new workflow than the one found in most expense trackers. I didn’t want Expenditure to force people to categorize their transactions when they added them unless they wanted to, instead users should be able to add a transaction while they carry a bag of groceries in one hand, before they hurry off to the next shop. The idea is that you can just add a transaction and worry about categorizing it later. Basically it’s a 3-step workflow where you tap the “New transaction” button, enter the amount and then tap “Save transaction”.

3 steps

The Icon

Designing the icon caused me some difficulty. It was really obvious from the beginning that the two, I wanted a clear connection between the app and the icon, to have a miniature ATM machine on the springboard. But what about the little screen? Most people who saw the icon liked it, but they thought that there should be something on the screen. In the perfect world the icon would be active (like the Calendar.app icon) and you would be able to see your current balance on the tiny screen in the icon. However since that wasn’t possible I had to think of something else, first we thought of showing the price of the app, but there were two reasons not to do that.

Firstly it would be of very little importance to the user after they had bought the app, it wouldn’t make much sense to be reminded of how much they paid for an app each time they looked at their springboard.

Secondly it wasn’t really possible since Expenditure is available in various countries with different currencies so each country would need to have each own icon. Then I thought there should be some number on the screen that would seem random but a number that would actually be a reference to something, kind of like an easter egg. I picked the number 499 because the original iPhone was priced at $499. In the beginning of the design process I kept the number of the screen but eventually I decided to remove it. First of all because your eyes were drawn to the number, the icon stood out in a bad way and on top of that the number wouldn´t make sense to a lot of people so I ended up removing it. It turned out I like the icon better with a “clean” screen.

Icons

If you have any questions or comments related to the design of this app, feel free to write in the comments below. I’ll try to answer them as good as possible.

Expenditure is available on the App Store.