Billcation - Trip Split Bill App

Daffa Alberta Votary

Mobile Designer
UX Designer
Figma

Overview

BillCation is an application that helps users to record and calculate group road trip expenses more quickly and accurately using automatic calculations and data collection. This is an application I & my other 2 friends made for a design competition.

Role

UI/UX Designer

Problem

We shared and discussed our problem with each other when we go on a trip. We also invited three of our friends to the discussion to gain more perspectives of their problem. We experienced the same issue: We feel exhausted when documenting the expense with stacks of bills to calculate and find out who is paying who and who need to receive X amount of money, that’s very time consuming.
People (groups) on road trips tend to take turns paying expenses. At the end of the trip they calculated the distribution of expenses to record each individual's expenses, debts and receivables between individuals. To calculate expenses and accounts payable between individuals, we will collect expense bills. Then record the spending of individuals from these bills. After everything is calculated, between individuals will make payments according to the final calculation results. When performing calculations, they must ensure that the calculations are correct and detailed.
However, when doing these calculations, data collection and counting activities must be carried out carefully which is very time consuming. In addition, it is quite difficult to track individual expenses in detail because the calculations are based on expense bills.

Solution Concept

We believe calculating road trip expenses must be done carefully enabled by an application that helps users to record and calculate group expenses will help group road trip to make the right distribution of expenses resulting in faster and more accurate data collection and calculations. From there our solution is an application that helps users to record and calculate group road trip expenses more quickly and accurately using automatic calculations and data collection.

User Story

After we have the concept, me and my team generated several user story based on what user want to see and want to do when they using the app.
Some user stories
Some user stories

User Flow

From each user story, we transformed it into user flow to show the path a user will take in application to complete the task. We created the user flow on paper because it was easier for us at that time.
Some user flows
Some user flows

Wireframe and Wireflow

After we have a clear idea from the previous processes, we created wireframes to provide a clear overview of the page structure and demonstrate what interface elements will exist on each page. We also created wireflows as a visual representation of the screens and interactions a user follows to complete tasks.

To help us speeding up the wireframing process, we used figma plugin called “Ink Wireframe” as it provides some basic wireframe components so we didn’t need to create the new one.
Some wireframes and wireflows
Some wireframes and wireflows

Hi-Fi

At this stage, we transformed each wireframe into actual app design. We sought for minimalist and clean design.
Some of hi-fi design
Some of hi-fi design

Features

Optical Character Recognition (OCR)

We want to minimize the effort of documenting the bills, so we provide automation. Just use the phone camera and Split Bill will handle the documentation process.
Automatic Bill Scanner
Automatic Bill Scanner

Multiple Split Bill

Counting balance for bills after bills is taking a long time. So in this App you just need to open the Summary section to find out how much you owe or how much you need to pay and to who you owed or need to pay.
Calculation Report
Calculation Report

Group & Personal Expense Record

With BillCation you can track your group and personal expense.
Group and Personal Expense
Group and Personal Expense
Partner With Daffa Alberta
View Services

More Projects by Daffa Alberta