TL;DR


Problem

Research has proved credit card usage to be the most influental factor as a determinant of compulsive buying behavior, especially among young individuals. This causes individuals to spend more than their defined budget and results in increased debts. Studies have shown that people burn 12%-18% more money when using credit/debit cards. How do we stop this?

Solution

Penny-Wise aims to attach the feeling of value back to money. It performs real-time transaction tracking using bank's API and presents animation to the user after each transaction. The application uses greedy algorigthm to calculate the exact denomination of cash as per the budget and then uses animation to provoke the feeling of loosing money in the user.

Problem Domain


Scope

Using Penny-Wise, we wish to alleviate the problem of over-spending associated with plastic money (credit and debit cards). Studies have shown that people burn 12%-18% more money when using credit/debit cards. For example, McDonald’s claim that their average ticket is $7 when using credit cards, as compared to $4.5 for cash. When making cash-based payment, people are more cautious since cash is a real & tangible that has a value attached to it. You see it and process it. Using Penny-wise, we aim to bring the sense of real money back to people. This would allow them to spend money consciously and lead to better money management.

My Role

I primarily designed and developed animations to present money and fish tank for the application. Also, I was constantly involved in all the design decisions to visualize our product. Since we followed agile design process, we had small time frames for test and re-design iterations. This allowed me to make frequent refinements to our designs based on constant research and feedback. Overall we worked a great team and managed to finish the MVP on time.

Type Group project for HackGT 2016 My Role UX/UI Designer, Interaction Designer Timeline 48 hours (September 23rd - Sept 25th, 2016) Tools Used Sketch, Framer.js, Balsamiq Mockups, Firebase, Swift, CapitalOne API

What I learned


Developing iOS mobile application
Creating animations in iOS using Swift
Practice agile design process

Ideation


A decade ago, cash was the primary paying option for buying products or settling debts with friends. This was the time when people perceived the feeling of value (money) going away from them. This allowed people to exercise caution against overspending. However, plastic money (credit and debit cards) have transformed the way people transact. Since the introduction of credit cards, using money has become a number game. For people, money has become numbers in their bank account, rather than a valuable asset. This leads to a sense of casualness while spending money, which in turn results in overspending.

After a couple of hours of brainstorming, we came up with the following process:

  • After the user creates an account and logs into our app, he has the option to login to the bank with which they maintain their account.
  • Once authenticated, the information about your account balance will be retrieved.
  • The user needs to set a weekly budget for himself based on their expense structure and day of the week to start the weekly cycle.

Since users are more likely to be sentimental while seeing their money go rather than just using plastic money, this will develop a sense of realization and motivation to save. In addition, the user can also check past weekly budgets and analyse the trend of how disciplined they are while maintaining their budgets.

Wireframes


Though it was a hack-a-thon (time crunch situation), I strongly believe that following the process is of paramount importance. Following the process always ensures that we account for all aspects of the project and stay on the right track. We started by creating a few rough sketches and quickly converted them into wireframes using Balsamiq.

Final Designs


The wireframes gave us a holistic view of the entire application. We analyzed all the user flows and identified break points. We quickly corrected these on paper, and instead of re-working on the wireframes, we incorporated those changes into the final design (in interest of time).

Home

Home (different background)

Login

Login (with sample values)

Sign Up

Profile Setup

Bank Selection

Login for Bank

Set Weekly Budget

Dashboard (Fish Theme)

Dashboard (Cash Theme)

Transaction History

Budget Week (Positive)

Budget Week (Negative)

Settings

User Flow and Design Decisions


#SignIn/SignUp

We have two levels of sign-in in our application, first is Penny-wise account that allows you to connect with multiple bank accounts and also manage your budgeting. This client side application is allows them to check past transaction history, record new expenses, budgeting, notifications, etc. the second level is sign-in to bank using the bank’s API. This allows Penny-Wise to track any transactions reported to that account. Unlike apps like Mint or Venmo, we have to worry less about security because we are not sending or receiving money. Penny-Wise only accesses the transaction information. We have received a lot of positive feedback about this and we were able to clearly explain why our app is very different from those that exists.

#Setting Budget

Once the user signs in, the user has to set a budget for himself/herself. The user can select a weekly budget cycle and then enter the amount of budget for that particular week. Once the budget is set, the user cannot modify it for that week. This is because, we want the users to stick to the budget as much as they can, and slowly the quality of staying disciplined to the budget will improve in the user.

#Theme Selection

Next challenge for our team was to come up with an idea that would invoke the feeling of losing value (spending money) within users. After hours of brainstorming we came up with the idea to present the same amount of money on the user’s dashboard as much they had in their balance. The money was presented in the form of coins and notes on the dashboard. We used Greedy algorithm to compute the minimum number of cash/coins required to compute the available balance. When you spend money, the exact amount of money disappears from your stack of cash and this is presented using animations. You can see this in the image above/below. On the left side you see a metaphor of fishes for the same concept. The size and the amount of fish reflects the amount of budget that the users have left to spend. As the budget decreases, an animation effect showing the fish disappear will provide data visualization of the budget remaining. The metaphor can also be changed to a different interface.

#Transaction History

The users can check their weekly transaction history. This provides an overview of home many times the user had over spent after setting a budget. A question was raised by one of the company about having too much load on the database. We also thought about it and we think it would be better to store data by monthly only for future plans. Once the user clicks on one of the past weeks, they are able to see their past transactions because they are logged into their bank account.

Animation


After the break, I started working on the animations for the iOS app. I spent several hours on learning Swift (programming language for iOS development). Once I was confident, I explored more on the animation domain for iOS applications and finally developed animations for money and fish tank.

Project Presentation


After the hack-a-thon was over, we presented our project to all the attendees and the judges. This included telling the story of our product, right from motivation to implementation. We received valuable feedback from industry folks and fellow students.

Interactive Prototype


What’s next for Penny-Wise


  • Integrations with all banks
  • Refine the current themes that we designed
  • Research and add more themes that have more impact on users helping them become alert and cautious about using their money
  • Analysis of user’s spending trends and empowering users to make informed decisions.
  • Better reporting feature for past transactions
  • Extend the concept to iWatch and other wearable devices, since they can give real-time notifications about expenditures and are more accessible.