Money is a mobile and desktop app for private finance management.

Project Description

Private financial management is an active topic and there are already a few solutions out there, some as great as Simple Bank. Yet we chose this topic for our Application Design project, because we still saw a gap: On the one hand we wanted to focus an a larger demographic, not just digital natives that are ready to ditch conventional banking all together. We also saw some regional problems: Simple is not available outside of the USA and in Germany in particular most people still pay a large amount of purchases in cash.

We didn’t find a product that tackled both problems – most apps consider either cash money tracking or electronic banking. So we decided to design a software that suits all users and is built for electronic as well as cash transactions.

Introducing: Money

To make this possible the user can add various bank accounts and a savings account to Money. It is also focused on making adding cash transactions manually as easy as possible. We wanted the users the gain a lot of information from the collected data and make exploring it both informative and pleasurable. Thus the user can browse several infographics and even more of them are integrated into the interface. We thought it was vital that there is a mobile and a desktop application. Each one is focused on specific tasks but designed with each other in mind.

We chose a bold, classical visual style in order to convey a sense of trustworthiness. To make the app not feel dull and boring we complimented this with small, delightful details like animated icons, tipps and nice notifications. We also added a bit of gamification: Keeping track of you money is a boring task and we wanted to create some extra motivation. We kept it down to gaining point for various actions in order for it not to become childish or too non-serious.

Mobile App

Add an expense

All fields are filled with smart defaults and suggestions – usually the user can just swipe though!

Budgets

Budgets are available for a quick glance before making decisions.

Transactions

The last week of transactions is available for reflection.

Unlock with TouchID

The app can quickly be unlocked with TouchID.

Unlock with a code

A passcode can also be used.

Move your mouse over the hotspots to see the different parts of the app in action!

Our mobile application is stripped-down and condensed. It focuses on a quick overview of your current money, your budgets and the last transactions. The main feature is the seamless process of adding an expense. It relies heavily on smart suggestions based on the users previous transactions. We tried to make this process as fast and unintrusive as possible, so that adding you cash spendings isn’t something you dread.

Desktop App

Easy to understand, interactive visualizations help gaining insight about large scale correlations.

All past transactions are show by date and can be searched with simple or complex search terms.

A graph helps keeping track of repeating, past, current and future budgets.

The savings section is for defining goals to save for and track the progress made.

Move your mouse over the hotspots to see the different parts of the desktop application in action!

Our desktop application provides a larger overview. It’s main purpose is to allow deeper analyzation of ones spending behavior.

There is an overview of all past transactions that can be searched using just a simple term like a date or a recipient, but more complex terms and combinations using logical operators are possible too.

In the visualization section there are interactive graphs of the users income or spendings. They can be represented as clusters if shown by category, as bar charts if shown by recipient or as circles on a heat map if shown by location. Users can select a period and toggle every category on or off. We picked those chart types because they give lots of information at a glance but also allow deep insight if worked with more intensely.

Details

1/4 – The barchart is an easy-to-grasp visualization and a user interface element at the same time.
2/4 – Your account number is always at hand – just keep the cursor over the name of the account for a moment.
3/4 – Small, unintrusive notifications inform the user and keep him motivated but don’t demand too much attention.
4/4 – If you scroll down to the end of the list of transactions you are shown a small tipp to help you save more money.

Process & Technology

My focus in this project was on process design, visual design review and (mostly) protoyping.

We created this project using an old school waterfall process with Personas, User Storys, Use Case Flowcharts and so on. We went into wireframing (which included some basic Framer.js explorations) early and I started prototyping the mobile app as soon as the first screen designs were finished. In the ended we created both a desktop and a mobile prototype in HTML, CSS and JavaScript with NodeWebkit and PhoneGap. This allowed us to create real interactive visualizations (with D3.js and Mapbox) and use features like TouchID and GeoLocation.

During the concept phase I wrote a small database application with a basic interface and tracked my real transactions for a month. We used the collected data for our final prototypes.

Meta

This is a student project created during winter semester 2014 as part of a course in Application Design by Jürgen Graef.

Team partners

Ester Harter
Florian Ludwig

Links

Product Video