01.05.2019 - 13.07.2019
Lusia Heinz,
Paul Schänzlin,
Kalle Reiter
Interaction Designer
Concept Ideation
Interaction Design
Visual Design
Prototyping
Project Management
This project was completed in collaboration with Luisa Heinz and Paul Schänzlin at the Hochschule für Gestaltung, Schwäbisch Gmünd. In the Application Design 1 course (supervised by Prof. Hartmut Bohnacker) we developed new approaches to an existing problem: Loss of overview in personal financial management.
The aim of this project was to sensitize us students to the use of various methods and to apply them in a design process.
In this design process the following phases were passed through: Empathize, Synthesize, Ideate, Prototype. It should be noted that no work was done with users. In the project outlook the prototype should be tested in the next step.
Empathize
We started with a broad market research of existing applications. We tried to research interesting projects more closely to see how existing concepts work.
Note: The “Daily Budget Original” application offers a very good overview of the existing elements due to the minimalist pages.
Note: In the application "MoneyControl" we considered the function of the "shortcuts" as particularly valuable. This enables you to create output templates and enter them in the following in only a few steps.
Note: The "My Budget" application caught our eye particularly because of the skeuomorphism pages.
We discovered a pattern in used elements. This graphically represents the data of financial inputs and outputs in the form of an ellipse.
In many products we could find a plus and a minus symbol on the main page. These elements serve as action fields for entering inputs and outputs.
We developed a content architecture for the application "1Money". This gave us a good overview of the application structure. The "1Money App" served us as the basis for our project in the further course of the project.
We analyzed the main functions in their usability. How many interactions does the user have to make to activate the desired function? For the interaction context of the input and output functions, time is an essential factor that has a direct impact on users experience. The faster and easier the user can activate his function (input or output), the better!
Synthesize
With all the insights gained in the empathize phase, we were able to apply various methods in the Synthesis Phase to develop the basis for our application concept.
In the further process we created an affinity map. There we arranged all the main functions in a two-axis coordinate system. The X axis represents the importance of the functions, while the Y axis represents the frequency of use. The most important functions with the highest frequency of use formed the basis for our Minimum Viable Product (MVP).
We also developed a new simplified content architecture. This allowed us to collect all the necessary functions and arrange them hierarchically. Marked in red is the shortest interaction path through the main function.
Ideate
In the ideation phase, we developed the core concept of the application as well as all important interactions.
Interaction concept of navigation and gesture control.
Interaction concept of short cut for money input and output tracking.
In the visual design language, we first developed a dark variant, but then decided on light backgrounds in order to guarantee a constant contrast and therefore legibility of the contents.
we developed a style guide which we used afterwards to implement further areas of the application for the prototype.
We developed fluid interactions for the new operating concept, allowing the user to enter various information with just one gesture and activate the desired function in a suitable form.
Interaction bit 01: In the first phase of the interaction, the user chooses whether he wants to make an input or an output. By dragging the respective icon into the inner area, the function is selected and further input options appear.
Interaction bit 02: In the second phase of interaction, the user chooses which of his accounts he wants to post this input or output to. By swipe to the right, the user selects this option and further input options appear.
Interaction bit 03: In the third phase of interaction, the user selects the product he wants to buy. Here he is presented with options that might be relevant for him. By leaving the device interface at the desired position, the user activates the function. The user can interrupt the function at any time by moving his finger to the outside area and leaving the device surface there.The product video shows the process flow of the interactions. (see above)
Source Directory
Designing Fluid Interfaces
(https://developer.apple.com/videos/play/wwdc2018/803/)
