How might we create an application, that helps you to document your finances simple, fast and clearly?
Status Quo
The documentation of finance requires a lot of initiative and discipline. To get reliable data of one's personal sale behavior, transactions must be continuously entered into applications. Existing applications usually shift their focus on transactions that were made with credit cards. Most applications forget that most of the payments in Germany are still made with cash. Money tackles these problems and tries to provide a documentation and reflection of one's personal steam of cash quickly and easily.
What does our solution look like?
System
Money consists of a two-component system. A mobile application enables the possibility to document your cash money fast. Within the desktop application, Money easily gives you a financial overview.
The desktop version of money offers filterable transactions histories and interactive data visualizations. Besides the desktop application Money provides the ability to optimize its financial flow by creating etas and reserves.
02.01 The desktop version of Money allows you to keep track of your finances easily and to analyze and optimize your financial flow.
With the aid of the mobile application the user can document his current cash flow in everyday life. Money informs the user about arranged etas and recent made transactions. Through intelligent suggestions, context-related instructions and dynamic responding to user inputs, the application provides an extra value.
02.02 The mobile version of Money allows users to document their current cash flow within a few taps.
Look & Feel
During the design process of the mobile application, the focus was on a clearly structured and hierarchical user interface. To provide a clean visual orientation, transactions were color-coded. When documenting transactions, classical input fields have been replaced. A faster and more intuitve input situation was developed, which enables quick selections via contextual keyboards.
Displaying numbers is a significant part of Money, therefore an application-specific typeface was developed, based on the Nitti Grotesk, in order to guarantee an optimal representation on all devices. In the desktop application, the focus is on a conscious approach to its finances. Transactions were categorized in twenty in and outcome sections and color-coded for a consistent use within the application. A key component of the desktop application are interactive data graphs, which are differentiated between cluster diagrams, heat maps and pie charts.
Product Focus
From the beginning the focus was on a long-term use. Multiple engaging micro interactions and hidden functionalities were implemented and are aimed to be explored by the users in course of time. Tiny details like animated icons in the mobile application or revealing account numbers should lead to a joy of use.
02.08 To keep the users engaged and to provide the best experience possible, we put a lot of effort in refining micro interactions.
Since financial management is a rather dry subject and threatens to sink the motivation of the user quickly, gamificated subtle elements have been introduced in order to promote long-term use. Every user action is rewarded with a system-internal scoring system. The user can achieve various ranks like “normal”, “consumer” or “financial expert”.
02.09 Subtle interactions and shortcuts were implemented to be explored by the users over time.
How we achieved it and what I learned from it?
Topic Comprehension
Money was created based on a basic waterfall process with target group definitions, detailed information architectures and SWOT analysis. As the functions grew continuously and got more complex, flow charts and the semantic connections of the different data points were essential.
Main Challenges
Creating a seamless experience in terms of functionality and visual consistency across the two devices was definitely the hardest challenge. Therefore our process was driven by fast iterations and low fidelity prototypes in order to test and validate the concepts in real world scenarios. Regarding the visual design different product characters were defined and critiqued in terms of understandability, readability and clarity.
03.01 Wireframes of some early explorations of possibile functions and layouts for the mobile and desktop version.
My Role
My role in this project was to create a visual consistency of the mobile and desktop application by developing the key components of the user interface design. Later on, I helped and worked on the prototyping of the desktop application.
Meta
Project Type
Student project at HfG Schwäbisch Gmünd during the course “Application Design I” by Jürgen Graef within the third semester 2015. Together with @Ester Harter and @Christoph Labacher.
