UX Case Study: Reinventing Money Manager and Expense Tracker

Khansaa
8 min readOct 31, 2019

Project overview

Indonesian youth are still struggling to start budgeting. In this case study, the new feature will help them to start budgeting based on their financial habits.

Project goal

With this case study, the youth will be able to start budgeting in an easy way.

Living paycheck to paycheck

It is easier to make financial goals rather than building stepping stones. If you ask millennials what do they want to buy in the next three months, they will answer the question easily. On the other hand, if you ask what they have done to achieve it, they will think twice to tell you the answer.

Indonesian Millenials only save 10,7% of their money, while 51% of their income was spent on their daily needs (Indonesia Millenial Report, 2019).

Budgeting is complicated, especially when you don’t know where to start. Due to the lack of financial knowledge, they often splurge without thinking about the long term effect. Therefore, some of them just living paycheck to paycheck, with the money comes and go. This is also happened to me, as a fresh graduate, I find it difficult to manage my money when I received my first payroll. The first week I bought a new pair of shoes. The first week I had a new skirt. The third week.. “where did my money go??” :(

What can we do to help them control their spending?

Design thinking method

I used design thinking as a methodological approach to finding solutions to problems. With this method, I define the users, needs, and insights that will be processed into creating a solution. I am confident that the design thinking method will help us to create a solution that meets the three elements: feasibility, desirability, and viability.

Empathize: getting to know the users

Online Questionnaire

With more than 200 respondents filled the questionnaire, most of the respondents were within the range 24–35 years old (45,3%). More than half of them live in Jabodetabek area. Survey questions were divided into three criteria: financial habit, investing habit, and how do they manage their money. You can see the questionnaire here.

Survey results on money management and financial habit

The survey stated that more than half of the respondents (71.5%) have no particular way to manage their money, and only less than a quarter of them do strict budgeting (24.2%). Moreover, almost half of them depends on bank and e-money transaction history and not keeping any more transaction record (43.5%).

Survey results on monthly financial routine & emergency fund

More than half of the respondents (66,7%) have no specific routine when receiving their payroll every month. Surprisingly, 57,5% haven’t start saving for their emergency fund.

The conclusion of the survey results are:

  • The respondents have no particular way of managing their money
  • Most of the people are not recording their daily transaction, therefore not knowing where does their money go
  • The respondents haven’t realized the importance of emergency fund

What are the solutions that already exist?

Four applications offer the solution to this problem. However, these apps do not have a budgeting feature that connects directly to the bank. For example, Digibank by DBS offers budgeting features, but users have to manually add the transaction.

Comparative research table

Define: who are we designing this for?

Okay, let’s gather all the insights now.

To find out the solution, I put all the users’ insights to gives me a complete picture of my early research process. This process is often called an affinity map or affinity diagram. Affinity mapping is very invaluable in showcasing trends, themes, and areas of opportunity for discovery and improvement.

Affinity mapping

Based on the affinity map, the user needs to:

  • Users need to know where their money was spent to have financial awareness
  • A reminder when the user is running out of money will be very useful in creating a controlled financial
  • Users want to save for emergency fund, but don’t know where to start

The conclusion from the research was:

Users are afraid to face the truth about how much money they have spent. After receiving their payroll, they spent their money without thinking twice.

What has to be on the design?

From the research, we can conclude the users’ motivation in creating their financial habits. The design mandate will make it easier to make sure which we need to create, such as:

  • A budgeting application that connects with the bank, so they don’t have to input every transaction manually
  • Emergency fund saving method and knowledge about it
  • Reminder when the budget is running out

What kind of person that will suit the design?

Now we have all the data, time to define a user persona. A user persona is a semi-fictional representation of our ideal users. By talking to users and segmenting the demographic and psychographic data, I choose Alica as the user that will be benefitted the most with the design.

Move on to the next step… Ideate!

There’s an app that has the potential.

Jenius is a mobile banking app from BTPN. 60% of Jenius customers are from the millennial generation (Bisnis.com, 2018).

However, the categorization feature has not been utilized properly. Users can filter their transaction, but can’t see the total amount of each category.

How can we improve this feature to create a solution for our problem?

Jenius flow: after the transaction is done, the user can see their history in the ‘In & Out’ menu. Users can also filter their transactions based on automatic categorization as shown in the picture below. However, the filter is not useful since the user cannot see the total of the transaction in each category.

Jenius ‘In & Out’ User Interface

The new budgeting feature

User flow. User flow is the path taken by a user on an app to complete a task. The user flow takes the user from their entry point through a set of steps towards a successful outcome or final action. In this case, the entry point is ‘start budgeting’ at the Home.

User journey map. A user journey map is a visual representation of the customer experience and a tool for designers to look at your application from the user’s point of view. In this case, the user persona (Alica) is going to set up budgeting, input her transaction and track her budgeting status.

Prototype

Before creating a hi-fi prototype, sketching the wireframe is a crucial step to do (plus I find this part is most fun!). Wireframing is important since it allows the client, developer, and designer to walk through the structure of the app without getting sidetracked by design elements such as colors and images.

I got the wireframe paper from Bukalapak Design Roundup (thank you!)

High-fidelity prototype

After the wireframe was done, the next step is creating the high-fidelity prototype with Adobe XD. In this sense, a high-fidelity (sometimes referred to as high-fi or hi-fi) prototype is a computer-based interactive representation of the product in its closest resemblance to the final design in terms of details and functionality (prototypr.io, 2016).

Psst, you can also play with the prototype here

Test: What did the users say?

User testing is a usability technique that helps you gain valuable insights about your prototype. Is it easy enough to use? What do you think you’re going to achieve with this feature? To know the user’s thoughts, I divided the test into four tasks: budgeting, emergency fund, input transaction, and budget tracker. The testing was done to three users with persona matched to Alica.

Usability testing report

The qualitative results show that a high improvement in emergency fund feature is needed. Users are not familiar with the term and how can they count the amount. The slide bar is also confusing because the user couldn’t see the number. Moreover, improvement is also needed for budget trackers because users couldn’t decide what numbers are shown (is this my budget left? or money that I have spent?).

Lesson learned

Throughout creating this project, I learned some valuable lessons:

  • Do not use too much financial jargon: even this is a financial app, the term must be easily understood by all the users. If we have to use a difficult term, we have to provide the knowledge to be easily accessed with the users.
  • Keep it simple: when creating the user flow, I wanted to add more budgeting features like such as e-wallet automatic top-up. However, after reviewing this feature with my mentor, he suggests eliminating the feature because it is not related to the user’s experience.
  • Never stop learning: there’s so much to learn in the world! During every step of designing the solution, I am thankful for all those Medium articles, Instagram pages, and books that talk about product design.

My role

This case study was made as a final project for UX Design boot camp at Purwadhika Startup School, therefore all the elements were made by myself. During this project, I am very grateful to have Kenneth Mahakim as a mentor and evaluated by Handoko (UX Researcher at OVO).

I am looking forward to your feedback! Kindly email me at khansaafathima@gmail.com :)

Illustration: jenius.com

--

--