Splitiwse Banner image

A Senior UI/UX feature design project for the expense splitting mobile application Splitwise.

My Contribution

UX Researcher, UI Designer, Prototyper

Team

Patricia Sugiarta, Kezia Taufiq

Tools

Figma, After Effects

Overview

This is a project for an Senior Interaction Design university course that aims to familiarise ourselves with working on an existing design system before developing a new design system in a later project with Fureverhome. My team and I were assigned to research and create a new feature for Splitwise, a payment app that automatically calculates multiple bills and splits expenses for a group of people.

Jump to implemented feature ↓

Research

To start our research for the app, we first looked at the app itself, studying its existing design system and interaction. Afterwards, each of us conducted secondary research online to find potential problems with Splitwise currently, this would help us narrow down our scope and assist us with identifying what we wanted to look at during our primary research being user interviews and observing users interacting with the app.

These secondary research hinted at the potential friction between users as Splitwise relies on the trust system to manage people's expenses which could strain their in-person relationship.

"I am two degrees of separation away from a woman who lost an entire friendship group because she clicked “settle up” on Splitwise after a holiday but never actually made the bank transfer, and doubled down when she got found out."

— The Guardian's review of Splitwise, 2023

Competitive Analysis

During our research, we also looked at other expense spliting application to help us understand what features Splitwise have and how they compare with others in the same market. As Splitwise has both a free and pro version, we had to take into account of the different features they offer.

Splitwise Competitive Analysis
Splitwise competitive analysis

User Interview Insights

To get a better understanding of what frustrations current users have with Splitwise, we conducted two rounds of on-site user interviews with 7 participants each time. While there were various issues and potential improvements to the app that the interviewee would like to be implemented, these interview pointed towards a general frustration when they aren't aware when and if they received money from their friends and also found troublesome to ask acquaintances to settle up their debt due to social pressure.

User Interview Highlights
User Interview Highlights

Brainstorming feature and persona

Through interviewing users, our team came up with 3 initial ideas: A preferred payment info to let people know how to pay someone, an import spreadsheet feature to help new users coming from other expense tracking apps and finally a location-based currency feature that automatically changes the currency based on the user's location and numbering format of a specific currency.

After doing a second round of user interviews in combination with feedback from the teaching staff, our team decided to go ahead with the payment information idea with an added functionality being a 2-way verification feature. In the process, to help us visualize our users and how they would approach Splitwise and our proposed feature, we formed a main user persona below.

Initial 3 ideas
Initial Feature Ideas for Splitwise
Final mini persona
Final mini persona

Implemented Feature

The "Payment information and 2-way verification" feature lets users see their friends' preferred payment methods when settling debts. Additionally, through real-time updates, users can see the status of their payments and know precisely when they have been received. Simplifying the process of managing shared expenses streamlines the process and ensures peace of mind for all users involved

Alex's POV
Jeanne's POV

Final Interactive Prototype

When making the final prototype in Figma, I wanted to showcase the different scenarios that users might go through and as such I suggested to my team to create 3 different flows and created screens for Alex's POV which can be seen through the videos below or through the interactive prototype!

Use fullscreen for the best experience of the prototype.

Splitwise's settling up and 2 way verification prototype
Splitwise's settling up and 2 way verification prototype
Splitwise's adding preferred payment prototype
Splitwise's adding preferred payment prototype

Reflection

Through working on this project, I have gained experience with working with an existing visual and interaction design system. It has also reaffirmed the importance of designing for actual users' needs and not simply using assumptions from the design team! I've also gotten a preview into how current UX and product designer would constantly ideate and develop new ideas to further improve their products to elevate the end user's experience