Time to Throw Away Your Receipts

UX/UI Case Study : Finance / Budgeting App

Elaine Choo
13 min readMar 30, 2021

In Singapore, a recent survey done by OCBC Bank (June 2020) states,

“2 in 3 here don’t have savings to last past 6 months.”

It’s not only the coronavirus that we need to protect ourselves against but also our wallets. Are we spending wisely? Do we still maintain our extravagant lifestyle when we lose our jobs? Yes, many of us have monthly bills that we cannot avoid, but there’s still a lot we can do to spend less, save more or get out of debt. To take control of one’s financial health, we must have full visibility of one’s financial status.

The challenge

We are tasked to come up with a solution that would help users manage their finances — A budgeting app! So we thought. Here’s our journey to discovering its not just a budgeting app that would suffice.

Steps We Took to Solve the Problem

Our design process are divided into these key phases consist of empathize, define, ideate, prototype and test. The process is non-linear and does not take place in the order listed. As we uncover new insights, we would do additional research, re-define, improve prototypes and test and repeat whichever phase is necessary to continuously optimize and improve the design.

Pockette Design Process

We started out not know much about budgeting app. None on our team uses a budgeting app. Tackling budgeting and finance seems like such a daunting project for some of us but we are hopeful we can find a solve.

We Had Many Questions …

Do people manage their finances? If not, why not? If yes, how? Who manages their finances? How is it done? And what tools do they use to manage their finances? What are the pain points they have if any?

We ran our first survey with 21 people to identify who are our target users, their goals, spending habits, whether they manage their finances, the tools they use but the data collected is inadequate to paint the whole story, understand the users and the frustrations they have and how they manage their finances.

In Survey 2 we had 41 participants. We dug deeper into the financial tools used and why they chose the tools of their choice.

57% of them uses Microsoft Excel to manage their finances.

66% surveyed do not use a budgeting app

I was so puzzled. I wondered why do we even bother developing an app?

However, the reasons for not using a budgeting app were not particularly strong.

Survey Results : Reasons for not using a budgeting app.

Should our user know of an amazing app that serves their needs, would that then change their minds?

We decided to conduct interviews as the survey results were not enough to learn their ‘needs’, what they found ‘cumbersome’ , and why the participants do not want to pay for the app.

We interviewed 10 people. 4 believe they have a grasp of their financial health but think they can always spend less but it is hard to know where to start. 7 have very high level estimation of their daily expenses and are not really keeping track of their finances; generally relying on bank apps to see how much they have in the bank.

One interviewee said,

“Money goes out in different directions and it’s hard to keep track.”

We asked “What do you need to make good financial decisions?”

7 out of 10 believed that having visibility to how they are spending their money, amount of money they have left in their budget before the end of the month so they don’t overspend, keeping track of their cash expenses since those are not captured on their bank statements, monitoring expenses made by their spouse and children.

Two of the interviewees volunteered for a contextual enquiry, both had felt they managed their finances reasonably well and we observed the steps in which they would take to manage their finances.

It is only through observing the users that these pain points surfaced:

  • Gathering receipts (not on bank statements) to record.
  • Remembering expenses without receipts
  • Recording receipts information
  • Consolidate transactions from multiple sources and accounts
  • Visibility of financial status and analyzing expenditure can only be available when the manual updates are done.

Desk Research & Competitor’s Analysis:

We search online for the best tools in the market for managing finances, budgeting and track expenses. We tested 16 in the first round. Most of the apps have basic functions of adding transactions, budgeting goals, creating multiple accounts or wallets (as some apps calls it) bank syncing function, overview balance and how much is spent in each category.

We picked the ones with the best experience and complied our evaluation in the chart below.

Competitor’s Analysis

Key findings from competitors’ app:

We will not be covering all the apps we tested here but we have narrowed and picked these few that we thought were the best for our users.

01- Most budgeting apps developed outside of Singapore, did not have a bank connection available to local banks. OCBC bank in Singapore did have that feature but features such as adding cash receipt transaction was not possible.

02- Recording of cash receipts still required manual entry of date, merchant name, amount and category. However, we found Foreceipt app — an app that have an amazing OCR receipt scanning function that captures all of the information, therefore user would not need to manually create the transaction information which we would like to leverage when building our app.

03- YNAB — an award winning software, was actually the one app none of us on the team liked, we tried it for a month and some of us still have difficulty learning how use the app to its full capacity, maximize the goal features, and managing the transactions was surprising time-consuming.

04- Money Lover, an app developed in Vietnam was the winner compared to all the apps we tried because the interface was clutter-free, clean, easy to use and generally had everything a basic budgeting app needs however, Singapore banks were not available to connect but we were surprised to find many other international banks were listed on the app.

One big hiccup

After rolling out our first prototype, we discovered a few new apps that wasn’t under our radar. I was definitely taken aback by how fast new apps are developed in a matter of weeks.

One particular app that stood out was Planner Bee.

It is developed in Singapore and it has the ability to sync with not just the local banks, but insurance and investments as well. Kudos to them! They did it! But where does that put us?

We went back to the drawing board, re-looked the pain point our users (personas) has and have they been addressed? What other value can our product bring to our users?

Learnings from our research …

There is no one type of research method that is the best or most effective, but rather, what are the questions do we have, and if the chosen research method is able to answer those questions accurately. Yes, in every project we always wished we had more time and more resources, but if we don't do our research right, those research data loses its validity and value.

Defining Who & What are We Solving for…

Now, that we have accumulated massive amount of information, we then analyze our observations and synthesize them to define the core problems identified. We formed Personas, Customer Journey Maps to help us define our Problem Statements and Value Proposition.

Persona

We develop these personas that best represents our target users with similar goals, needs and behavior in managing their finances. Creating the persona helps the team focus on a standardize user’s need and find solutions faster. It was particularly helpful when we discovered so many features we can add to create a super multi-purpose app but when we pull out our user profile, we were able to re-focus and prioritize our user’s needs.

Persona 01_Eleanor & 02_Daniel

Customer Journey Map

Even though, we are creating a brand new product, we felt it was important to create a visual representation of the different touch points, actions and pain points our user encounter as she manages her finances. By visualizing the emotional “up” and “downs” of the experience, it shows the various touch points that require improvement thus creates opportunities for better product.

CUSTOMER JOURNEY MAP

Our Problem statement

01- How might we make it simple and easy to record expenses with or without receipts.

02- How might we make it easy to consolidate financial statements from multiple bank account and sources.

03- How might we view up-to-date financial status anytime, anywhere.

Our value proposition

“To make recording expenses effortless and budgeting simple.”

We Challenged Our Assumptions and Create Ideas

With data on hand, we had a brainstorming session to look for alternative ways to view the problem and identify innovative solutions to the problem statement you’ve created.

The team came together to share our findings and make sense of all the information. We saturated the space with all the information/data and organized them into groups, assigned titles based on their theme.

Through this exercise, we were able to connect the information, see new insights from other members of the team and share our thoughts on the information collected individually. Although there were many similar findings, I was able to see a much broader scope of the problem being investigated. This information is important even if it is not deemed as a priority for our users now, its a pain point we can address for future iterations of the product.

Affinity Mapping through Brainstorming Session

Our initial information architecture (IA) was quite bare with little thought to how each screens and experience would be like, we mapped out the basic structure of how we think the app should look like.

Our First Information Architecture — Version 1

After our second round of app reviews (21 apps in total) we re-visited our IA structure, as compared to the new apps we found, Pockette initial IA just wasn’t robust enough and here’s why.

Firstly, we wanted a login experience that was fuss-free yet secure so we chose single sign-on (SSO) experience through Google, Apple or Facebook. We also gave a ‘Skip’ login where users can quickly access the record receipt function without needing to create a login formally. However, user would have limited access to all functionality and would still require to have an account before full access allowed.

Secondly, for easy receipt recording (which was the biggest pain point) we made it at a global level where there’s immediate access to it. With Siri assist feature, user will be sent a notification with pre-set merchants & category to create a transaction entry immediately by verbalizing the dollar amount.

Thirdly, we added a level for addressing security and privacy concerns. As we found that some users hesitated in installing a financial app also have concerns regarding security, privacy and data leak.

Lastly, we made some minor refinements to have a more global level accessibility. Many of the functions & features will be laid out on the footer as well as the header. The ‘Dashboard/Home” page will also provide easy access to other level.

If time permits , we also wanted to add a bonus feature. It’s called “preferences”. This feature which will allow user to customize the app experience to what’s most important to her and colors that appeals to her. Users would be have the ability to change footer functions buttons, dashboard widgets and colors scheme.

Information Architecture — Version 2

Wireframes

In version 1 of my wireframe, I was focused on an in-app experience, so I created a user flow based on initializing the audio function and verbalizing each information step by step. For example, the cursor would rest on a blank form, and user would be required to verbalize the information in the order that was displayed on the form. User would be required to wait for the information to be filled out as she speaks. First she would say the merchant name, then the cursor would move to the second line, user will say the amount, and either say or click on the category, finally clicking on the confirm button to complete the receipt entry. After running a some user testing,

I noticed that it would be faster if the user just keyed in the information rather than verbalizing it.

User Flow 01: Audio Recording_1st Draft

Determined to find a simpler solution, I went on to do more research but did not find any other apps with a good solution.

As I kept imagining my persona walking out of the wet market with hands carrying groceries, how can we make it easy for her to record her last purchase? We wanted an interaction that require user as little effort as possible.

I knew Siri would help with launching an app, but an idea came to mind when I received notification on my phone’s lock screen that I have arrived at a particular destination. By connecting the two ideas, location service and Siri technology could be connected to the app. And to make the experience even easier, user would pre-set frequently visited merchants and the transaction category. When user is detected near the ‘saved’ location, a notification would appear with the pre-set information.

The only thing the user would need to do is to press and hold the notification to activate the audio recording of the amount spent.

Wireframes of 3 user flows (Invision)

At last, we reached an MVP cool enough to show…

USE CASE 1: AUDIO RECEIPT CAPTURE
USE CASE 2: PAPER RECEIPT CAPTURE (INTERACTIVE PROTOTYPE)

The Outcome

We were quite pleased with the outcome of the app. Even with the hiccup of discovering a strong competitor after the first prototype, we were able to learn from it and make ours better. After all, the design process is an iterative one. With a minimum viable product (MVP) in mind, we rolled out this app anyhow, at this moment when this is written, there are no known app that has this feature. We hope our users will be happy, stay with the app as we work on the next version.

Next Steps

01
Continue to add and make more banks and institutions available for our users. Syncing should be done automatically without multiple steps of re-accessing banks as noticed in some apps.

02
Sprinkle a little gamification. Give tangible rewards like rebates to encourage savings and app engagement. Customization -providing the flexibility for users to change dashboard widget preference, footer functions and colors of the interface.

03
Make this app a true wallet. Develop payment capabilities like ‘fave pay’ and rewards system where users are able to save while they spend.

What I learnt…

01
Just when we thought we had the best idea or product, a new competitor emerges with something similar. Don’t sweat it, learn from the competitor and make ours better than theirs.

02
If we don’t learn enough from our users, or make generalizations too quickly, it will lead to poor design decisions.

03
Collaboration is key. You can’t do it all. Disagreements is just a matter of different perspective. Understanding the other perspective is also Empathy.

Final Thoughts …

This is my first financial app project. We are quite pleased with the outcome given the amount of time we had. In the course of this project we discovered so many financial and budgeting apps in the market which at some point we were a little disappointed as it slims the opportunity for market penetration, however, as we dug deeper we discovered a major pain point which was not addressed — recording of cash transactions easily.

As Singapore moves towards being a cashless city, as of right now, there are still more than half the nation’s merchants that have not accepted digital payments. All of the merchants that has started accepting digital payments, not all of them adopted all payment channels. This further reduces the likelihood of a successful digital payment transaction. For example a merchant only accepts Grab pay but the customer only has Fave Pay.

By rolling out Pockette app now, we would capture many potential customers who are struggling to keep track of their finances. I believe this solution would keep our users happy while we iterate future versions.

Incase you are wondering …

This article is written on the 18th week of our project timeline.

Project timeline

And Not Forgetting Those Who Made This Project Possible

Team Members : Andy Tay, Apple Lee, Ray Ang, Juddee Torres & myself.

My Role: Team Lead & Product Designer.

I lead the team through establishing Product Strategy, User Research, Information Architecture, Prototyping & Testing, Pitching.

Tools Used: XD, Figma, Invision, Photoshop, Illustrator.

Platform: iOS

Thank you for reading. Hope you enjoyed this article.

If you have any comment or ideas to share about the project, I would love to hear from you. I love finding solutions to everyday pain points and make our lives just a little easier a little at a time. No idea is a bad idea!

Let’s have a chat. Contact me @ Linkedin/in/echoochiu

--

--

Elaine Choo

I create solutions that not only meet the needs of users but improves people’s lives.