top of page
receiptless banner.jpg

Receiptless

Receiptless is a handy receipt management app for recording receipts, submitting expense forms and tracking expenses systematically for conducting budget control.

The problem

The goal

For who?

Not everyone likes to manage receipts. Most of them do it because their company requires it or for official use. However, many receipt management apps in the market target large-scale companies which are too informative and have too many functions making it overwhelming for smaller groups.

Design a handy receipt management app that allows users to scan, record and track expenses in a systematic and efficient way to monitor expenses with limited effort.

It mainly targets small groups and small businesses that need a simple and easy-to-use solution and is also beneficial for individuals or families.

5149062_A.jpg

My role

UX designer designing a receipt management app from conception to delivery.

Tool

Figma, Photoshop, Miro

Duration

Summer 2021

Receiptless feature 1.gif

01.

Choose a project to add a receipt by clicking Add icon, then scan or upload a photo of the receipt and create an expense record.

02.

Users can view all expenses in this project on Expense page. You can use Track Expense to find the records you need to track specific expense records. 

Receiptless feature 2.gif

03.

Users can also check their latest records and approval process on Homepage. Moreover, users can set the budget for each project and monitor it all the time on Budget page. 

Receiptless feature 3.gif

04.

To check your teammate's expenses, you can press their face icon under My teammates. You can send or receive some documents through Mail icon, and add more teammates by email or phone no. when pressing More under My teammates.

Receiptless feature 4.gif

Understanding The User

I conducted interviews and created empathy maps to understand the needs of the users I’m designing for. A primary user group identified through research were business owners and employees that spend lots of time managing expenses and feel frustrated.

 

The research also revealed that users are willing to do receipt management for business rather than personal use. This is because user problems included habit, necessity and challenges that prevent them from using any receipt management app to record expenses.

User pain points

Based on my research of the primary user group, 3 pain points are revealed during users managing their receipts.

1. Time consuming

It is too time-consuming to record every receipt to track expenses.

2. Lost receipts

Losing receipts or color fading is frustrating for accounting.

3. Efficiency

The paper receipt management processes are not efficient for users.

Design Process

In order to address user pain points, I prioritized a quick and easy receipt management navigation in the home screen to help users save time. I drafted some elements that ensure the app is glanceable.

Receiptless_paper wireframes.jpeg

Low-Fidelity Prototype

I created a low-fidelity prototype. The primary user flow I connected was adding receipts, tracking expenses and planning the budget, so the prototype could be used in a usability study.

View Receiptless

Receiptless_lofi.png

Usability Study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings

  • Users are unable to find the tracking button
     

  • Users need a clear budget navigation to set a budget
     

  • It is difficult for users to find the teammate feature

  • Users thought that to track expenses they had to click the teammate icon
     

  • Users need a guide to show the functionality of the summary page

Round 2 findings

?

Refining The Design

In the early design, the tracking button located on the right corner of the Expense page was easy to miss for users. After the usability studies, I relocated the tracking button at the center of the Expense page and highlighted it with the orange brand color.

Receiptless_mockup_1.jpg

Users thought it was hard to find the “My Teammates” feature after the first usability study, so I relocated it to the Home page from “My Profile” and moved “Total Expense” to the Summary page. It allows users to reach their teammates easily. This also made it less intimidating when looking at the number of total expenses.

 

I added a tracking feature to teammate profiles because the second usability study revealed that users want to track other people's expenses through their icons.

Receiptless_mockup_2.jpg
Receiptless_mockup_3.jpg

High-Fidelity Prototype

The final high-fidelity prototype presented user flows for recording receipts, submitting expense records, tracking expense and controlling budgets. It also provides tips to show the functionality of the Summary and Expense pages.

Receiptless_hifi.gif

View Receiptless

Takeaways

Impact

Users shared that this app meets their needs and helps them to manage receipts, control budget and expenses easily.

What I learned

Iteration is key for design. This is a must process to help create a good design. That is why I don’t need to worry too much about the first idea in the beginning. All feedback from usability studies guided me to the end of the design process.

Notebook

Next Steps

There are many parts like receiving and sending documents that should be developed.

1. Batch Photo Scanning

Consult with engineers on how to implement  “Batch Photo Scanning” feature

2. Receiving and sending documents

Create an easy way to send or receive documents in the app or through the user's email

3. Built In communication

Conduct more user research to determine any new areas of need like how to communicate with team members in the app

receiptless logo2.png
receiptless logo.jpg
bottom of page