Easy Split

An expense split mobile app for roommates.

My Role

UX Designer

Tools & Methods

  • Sketch, Invision
  • Experience map, Mockups, Prototyping

    • Goal

    Create an app that helps roommates split expenses more efficiently.

    Overview

    I recently participated in a design workshop organized by 2 product designers from Facebook. During the workshop, we went through the basics of design process using a mobile app for spliting traveling expenses. After the workshop, I decided to continue working on this idea and design an expense split app for roomates.

    Design Process

    Phase 1. Understand the pain points

    I spoke with 3-5 people who currently have roommates and learned about the issues they encounter when they split expenses with their roommates. Then I created an experience map that shows how most roommates manage and split their expenses every month.

    Based on the experience map, I identified a few pain points that I considered the most important and wanted to address in the first iteration -

  • Difficult to keep track of what to buy and share because everyone keeps a separate shopping list
  • Difficult to keep track of who bought what items
  • Worried about losing the receipts after shopping
  • Tired of calculating the shared expenses and reminding everyone to pay

    • These pain points help me to identify the opportunities for what features to design for this app.

    Phase 2. Define the product

    Based on the importance of the pain points, I defined 4 features for this app for the first iteration -

  • Shared Shopping List : Create a shopping list for users to share and add what to buy
  • Transaction Reporting : Provider users with image upload to record receipts after shopping
  • Monthly Balance : Handle the maths and calculate how much each person should pay for the month
  • Notification : Remind users of paying for the shared expenses at the beginning of each month

    • Phase 3. Create UI mockups

    Feature I. Monthly Balance

    The goal of the Monthly Balance feature is that users will be able to tell how much they owe and how much other people owe them as soon as they open the app, without further calculations. During the process, I created different versions using different design patterns (e.g. tabs v. no tabs) and colors to see how to present the information clearly.

    I created the 5 different versions of mockups and I chose version 5 as the final mockup (for now), because users won't have to switch between tabs and it's straightforward for them to see the breakdown of the expenses for that month.

    Feature II. Shared Shopping List

    The goal of the shared shopping list is to allow users to be aware of what items have been added to the list and who will be buying them in order to avoid confusion and buying the same items.

    Following the flow, you can see the current shopping list allows user to see current items (tasks) and past items (tasks). Past items/tasks will be hidden in order to improve the performance when users use the app. Then users can create a new task specifying the item name, date (indicating if it's urgent) and quantity. Users can assign the item to a specific roommate (usually themselves) if they prefer.

    Feature III. Transaction Reporting

    The goal of this feature is to allow users to record the transaction and the receipt with image upload after they purchase an item.

    Apart from the essential reporting items such as date, item name and amount, users have the flexibility to select whom they want to split expenses with for a specific item. Also, they can always go back to editing a transaction if they realize they are missing any information, and they will not be able to edit a transaction if they didn't create it in the first place (see the edit icon).

    Feature IV. Notification

    The goal of the notification feature is to remind users of paying each other at the beginning or the end of the month depending on how they set it up in the first place.

    The current notification feature only has information about the specific amount and the person that the user owes money to. In the next iteration, I plan to use the expanded view of notification in iOS so that users can take different actions depending on their needs.

    The Current Prototype

    I connected all the mockups and built the first prototype using Invision. Play the video below if you would like to see how it works. You can also click the launch button at the bottom of this page to play with it in Invision directly.

    Next Steps

    This is the very first iteration of the app EasySplit, and I plan to keep iterating and add more features to this app. For the next iteration, the focus of the new features will depend on their impact on the core features and how we can solve problems for users in an even more efficient way -

  • Connect the Shared Shopping List and Transactions Reporting features so that users can check off items directly in the shopping list
  • Integrate with different payment methods into the Transactions feature so that users can pay without leaving the app
  • Extend the Monthly Balance feature by allowing users to see specific transactions from the overview
  • Remind users of what to buy based on how frequently they add specific items to the Shopping List
    • Try it
    Back to top