Receipt Wrangler

Github | 2022 - current

Overview

For individuals living with roommates or sharing expenses with family members, the ability to easily share, split receipts and keep track of “who owes whom” simplifies managing shared expenses, a common challenge in personal finance.

Current available receipt manager apps focus on business or travel expenses, often overlooking the unique needs of individuals tracking daily personal expenses among shared items.

Goal

My focus to create userflows of the web and mobile app: Managing, sharing receipts with others, CRUD, and tracking receipts and its features

  • Navigation

  • Dashboard

  • Group

  • Receipt

  • Quick Scan with AI customization

  • Quick Split with itemization

Customization for scalability

  • Personalized dashboards for spending analytics could provide insights (Amounts owe, paid, dues) about their receipts

  • Flexible customization in the future updates - intend to provide the most customization to users besides specific current use case (splitting and sharing receipt)

Create architecture

User flow

Web design

Mobile design

Usability Testing

Mobile redesign

Web redesign

Continue

2021

2022

2024

2025

Output

Current web design was made in 2021, refined once in 2022, and it’s on the way to redesign in 2024 with a slight change of approach.

While Receipt Wrangler is currently under development, we are continuously receiving great feedbacks and feature requests through awesome github & open-source community supporters, over 10K downloads!

There are many more features to be added under current design. For the redesign, we have settled with the base design structure for the web and mobile app after many iterations and usability testings.

Redesigning: Mobile to Web app

Redesign took a mobile first approach considering user behavior and use cases

Types of users: personal, business

Use cases: Receipt management(Split, share, Tracking), Itemization, Budgeting, Repository

1. Implementing current web system and redesign
2. Consider scalability on itemization
3. Integrations with other document tools using API

Mobile Design

Filled

Add Receipt

Quick Split

QuickScan

Mobile App Prototypes

Web Design

Groups

Dashboard

Add Receipt

Website

Challenges Encountered

  1. Seamless Integration
    The design should make receipt management feel effortless while delivering the customized features necessary for effective financial tracking in both personal and business contexts.

  • simplify tasks like splitting bills with friends, tracking shared expenses, or organizing receipts for personal budgeting and tax filing

  • streamline expense tracking for teams, manage payments

to name few, out of many

2. Quick Scan’s Input and Queue Process
When user sends a photo of the receipt to the hosted email, system(admin) set AI input will be filled in on “add receipts”. creating an effortless receipt filling experience.

Quick scan could fail due to many reasons. Adding a queue and streamline this process so that the User is be able to update and retry on the listed receipts without going back in and out of the receipt list.

3. Main Navigation
Tried many differnet possibilitieis through card sorting, A/B testing, we finalized and settled with

Home - Receipts - Search - Add

Trials

1 Home - Search - Add - Receipts - Groups

2 Groups - Quick Scan/Add - Search

3 Search - Add - Group

4 Group - Receipts- Search - Add

5 Multi-level Navigation

  • Changed nav on Group’s Dashboard

    • Search - Add - Receipt

  • Changed nav on Create Receipt

    • image - Split - Quick Scan

Competitive Audit

A quick study on 5 leading applications in the field of receipt and expense management to see what works and what doesn’t —Spliit, SplitPro, Splid, Expensify, QuickBooks, Wave Receipts and Splitwise.

The analysis seeks to identify the unique value propositions, user base orientation, key functionalities, and user pain points associated with each application, with the aim to guide potential users in selecting an application that best suits their specific needs.

Missing from competitors

  1. Splitting by custom categorizations

  2. Process of entering data (like costs, names, or any information) as smooth and fast as possible

  3. Messages and notifications in a way that is easy to understand and keeps everyone updated

  4. An intuitive interface is designed in a way that feels natural to use, making the user experience smooth and straightforward

  5. Quickly and accurately matching records of payments made with the payments that were due

  6. Integration with other document storage apps

Users’ challenges/limitations in Competitors

  1. Automatic scanning doesn’t work well: OCR often fails to accurately capture receipt details, requiring manual corrections

  2. Manual everything: integrations with calculators, other document apps, custom categorization and itemization split capabilities are missing

  3. Existing apps lack intuitive ways to share and split receipts among multiple users.

  4. Tracking and sharing limitations

Design

Building the App

Research indicates two predominant behaviors: many users prefer to immediately photograph receipts with their smartphones, fast image upload. input information, split and share.

Additionally, many others maintain digitized receipts in various storage solutions. To accommodate this, integrating functionality that allows for seamless import of receipts from existing digital repositories will enhance user convenience and encouraging broader adoption of the app.

  • Primary Navigation - Key tabs including Dashboard, Receipts, Groups, Payments, and Settings

  • Categories and tags

    • Receipts: Enhanced with filters for date, group, and tags, along with a quick search function

    • Groups: Tools for managing members and accessing group-specific receipt summaries on dedicated Dashboard

  • Seamless Transitions - smooth flow between tasks

  • Customization Options - Flexible dashboard widgets that users can personalize to fit their preferences

Userflow Happy Path

Server Connection - User Login - Group Creation - Widget creation inside of Group’s Dashboard - Create Receipts - Read Receipts

Ways-to-send-a-receipt-to-receipt-wrangler

Ways to send a Receipt to Receipt Wrangler

  1. Manual upload

  2. Send email with receipt as attachment (makes a draft)

Ways to upload a Receipt in Receipt Wrangler

  1. Add - Quick Scan - Autofills with default - manual entry

  2. Add - Receipt- Manual Entry

  3. Add - Receipt - Attach receipt - Magic fill

  4. Add - Receipt - Split to itemize- manual entry

Feature 1 : AI Quick Scan

Customizable AI Prompts

Hosts can tailor AI prompts for specific needs, such as setting payment methods and identifying payment owners by the last four digits of the card number on receipts

Automated Data Entry

  • AI scans and extracts receipt details (vendor, date, items, prices)

  • Reduces manual input time and reduce repetitive work

Open Source API Options (For now)

LLava: Integrates various applications for enhanced AI interactions.

ChatGPT: Provides robust natural language processing capabilities for detailed receipt management.

Feature 2 : Quick Split

Evenly

Dividing the total expense equally among all Wranglers

  • This default method streamlines the process for users who prefer straightforward and quick expense division.

  • A single tap applies the split, with clear visual feedback showing equal shares for each participant.

Evenly +

Builds on the even split by allowing slight adjustments to individual contributions.

  • Designed for scenarios where one participant covers an extra amount or contributes slightly more.

  • Users can tweak individual shares while the total remains balanced, with dynamic updates reflecting the changes.

%

Divides the expense based on percentages assigned to each participant.

  • Ideal for situations like shared projects or group purchases where contributions vary by proportional stake.

  • A slider or input field lets users set percentages, with real-time validation ensuring the total equals 100%.

Custom

Provides full control for users to manually allocate specific amounts to each participant.

  • Perfect for cases where contributions have been pre-determined or agreed upon in advance.

  • Each participant’s amount is entered directly, offering flexibility and precision.

Before Usability Testing

After Usability Testing

Paper - Low-Mid Fidelity - Usability Testing I - High Fidelity - Usability Testing II - Iteration

Wireframes

Web App - Low & Mid Fidelity

Initial Development started from web app, now transferring to mobile

Flow Screens

Mobile App - High Fidelity

Group to Dashboard

Dashboard to Receipt

Log in

Loading UI Preview

Redesign Iteration after usability testings

Prototypes

About Usability Testing I, II

  1. Usability

  • How easy is it for users to use the tool?

  • Are there any challenges or confusions encountered during use?

  1. Searchability Improvement

    • How effective is the receipt filter in improving the searchability of receipts?

    • Do users find what they are looking for quickly and accurately?

  2. Suggestions for Enhancement

    • What additional features or improvements do users suggest for the receipt filter to make their search experience more efficient?

  3. Customization and Usefulness

    • How do users find the process of creating and customizing widgets on the Group Dashboard?

    • Does the customization enhance their overall experience and meet their needs?

Cardsorting & A/B Testing I (Navigation)

Before Testing (Add)

After Testing II (Add)

Now: After Testing II (Split)

Before Testing (Split)

After Testing I (Split)

After Test Image

Now: After Testing II (Split)