top of page
splitwise phone.png

Splitwise

Re-design Case Study 

Note: This case study re-design is completed as personal project and I should declare that I am not working under Splitwise. 

DURATION

72 hours

ROLE (SOLO PROJECT)

UI/UX Designer

SOFTWARES

subheading-17.png

PRODUCT CONTEXT

Splitwise is an app that lets users track expenses and split bills with friends

Splitwise is an easy way to share expenses with friends and family. It is an app that helps people organise group bills for households, trips and more.

split.png

Design Process: 
THE FOUR D's


 

For my design thinking process, I decided to adopt the Double Diamond Thinking Process to help outline the four core principles that can help me identify, address and propose solutions for key issues. 
 

01
DISCOVER

02
DEFINE

03
DEVELOP

04
DELIVER

test-01.png

CHALLENGE

PROBLEM
DEFINTION

OUTCOME

01
DISCOVER

•  COMPETITOR ANALYSIS
•  USER RESEARCH & TESTING
•  NIELSEN'S 10 USABILITY HEURISTICS

02
DEFINE

•  USER PERSONAS

03
DEVELOP

•  WIREFRAMING
•  LOW-FIDELITY MOCKUP

04
DELIVER

•  INTERACTIVE PROTOTYPE

COMPETITOR ANALYSIS

To start my case study, I decided to do a competitor analysis between Splitwise and its competitors in the market.

This analysis allows me understand the strengths and weaknesses of the app I am redesigning and the position it stands in the market. It also allows me to identify any market gaps that can be later addressed. 

Inv​estigating competitor features agains Splitwise to identify key value propositions

 

competitive.png

01

USER RESEARCH 
RESEARCH GOAL 

01  

Understanding users'
experience towards the
Splitwise app

02  

Identify frustrations and user pain points when using the Splitwise app

03  

Propose solutions to
help create a better

overall user experience


 

NIELSEN'S 10 USABILITY HEURISTICS

I decided analyse the screens using Jakob Nielsen’s 10 Usability Heuristics for Interface Design to uncover the design principles that could be adopted that addresses some of the issues.

Assessing the interface screens against usability heurisitics

 

IMG_4936.PNG
IMG_4936.PNG

PRINCIPLE 2

Match between system and the real world 

The second principle explains that the design should speak the users’ language by using words or phrases that will familiar to user. 

This is especially important for an app that may have users who are struggle with understanding online financial services. For the split options tab, the icons represent the different ways that the users can split the payment e.g. through equal amounts, percentages or shares.
4/6 of interviewed users mentioned that the icons are not enough to let us know what each of the icon means. Although users can understand what each means, they only do so by selecting each tab which they described as repetitive and time-consuming. 

IMG_4938.PNG

PRINCIPLE 4

Consistency and standards

The fourth principle states that users should not have to wonder what different words, situations or actions mean the same thing. 

One key issue that was brought up by
3/6 users was the terms used for “owe” and “owed”. Although the colours green and red were helpful in visualising incoming and outgoing payments, these words were not regularly used by them. It is important to follow platform and industry conventions as Splitwise users definitely use other online payment transfer apps. Therefore these terms can be substituted by other terms that are more commonly used in other apps. 

IMG_4931.PNG

PRINCIPLE 8

Aesthetic and minimalist design

The eight principle states that interfaces should not contain irrelevant information that distracts the user from the primary goals. For this screen, the multiple visual elements in one screen may overwhelm the user and defer them from the intended task to input the payment amount and splitting method. Moreover, due to the inconsistencies of the icons e.g. fill or outline, this might be off-putting to some users. 

USER RESEARCH

For my research, I asked 6 people, male and female, aged 21 - 42. Frequent users of the app as well as people who have never used the app before to find out different insights and experiences with using the app. 

Question:    What are some of the pain points you encounter while
                         using the app?

01  / Can you create a new group?
02 / Can you add an expense?
03 / Can you settle up payment?
04 /
Can you view outstanding expenses?

Outdated style and colours of the icons does not look modern 

IMG_4930.PNG

Doesn’t seem clickable, looks as if it is the default and cannot be edited 

Unclear if payer is paid by one person or by multiple people

Drop shadow for buttons are too bold and jarring to see 

IMG_4931.PNG

Unclear that the ‘Save’ button adds or requests payment from payees

Too many functions in one page, the additional information should be added in the next screen not to overwhelm the user

No option to attach already existing photo of receipt 

Inconsistencies behind the icons e.g. colours, fill or no fill 

USER TESTING
USER PAIN POINTS



 

No indication of today’s date

When entering a number, the ‘.’ does not automatically appear

Ethan is a penultimate year undergraduate at National University Singapore (NUS). He is planning a 4-day trip with his 3 friends to Batam to celebrate the end of their second semester. He and and his friends take turns paying for different expenses during the trip from transportation to Airbnb to food and more. 

User Needs

Pain Points

Ethan Wang

Age: 22
Gender: Male 
Marital Status: Single
Location: Singapore

•   Needs a way to record and consolidate the amount of money spent on a one-off basis 
•   Needs a way to compile the amount each person owes a specific person at the very end of the trip to make a payment transfer at one go

02

•   Too many notifications makes it confusing to navigate through recent history of expenses
•   Difficulty distinguishing which is his
expense and which is from his friends​

Background

USER RESEARCH
USER PERSONAS




 

OVERALL EXPERIENCE

lars-zhang-Emvn9asFvPw-unsplash.jpg

Background

Amanda is an international student in Singapore from Indonesia, a few months into working as a Communications Executive for her first full-time role. She lives with 4 other Indonesian flatmates in central district Singapore. Her flat mates are also working professionals with 2 working from home and the remaining 2 working from office. She often buys dinner and groceries for herself as well as her flatmates after work to bring back to their flat. 

User Needs

Pain Points

Amanda Wijaya

Age: 24
Gender: Female 
Marital Status: Single
Location: Singapore

•   Needs a way to record and consolidate the amount of money spent on groceries, food 
•   Needs a way to track who has paid and who to wait payment from 
•   Needs a way to edit and customise the amount of money owed by each of her flatmates

•   Difficulty tracking who has and hasn't paid yet 
•   Feels that interface is not intuitive when payment is done by multiple people 

OVERALL EXPERIENCE

budka-damdinsuren-IrQmtib-ER4-unsplash (1).jpg

SUMMARY
KEY PAIN POINTS

1

2

3

Viewing the recent history is too cluttered and difficult to understand
Users have difficulty tracking which expenses were created by them or by their friends


No visual representation to track who has paid back 

No indication of how much amount is still owed
Inability to make payment through app itself


Lack of breakdown when adding a new expense as it involves many steps and may be confusing, especially to new users
Expenses paid by multiple people is confusing to add
No option to add existing photos from Camera Roll as a receipt


 

RECENT ACTIVITY 

VIEWING EXPENSE

ADDING NEW EXPENSE

INSIGHTS
HOW MIGHT WE STATEMENTS

How might we help users navigate their list of expenses through a seamless and intuitive experience?

1

How might we help users identify paid and pending payments through a seamless and intuitive experience?

2

How might we help users add new expenses through a seamless and intuitive experience?

3

03

IDEATION
WIREFRAMING 


 

Untitled_Artwork 58.png

After the user testing, assumed user personas and identifying the main user pain points, I decided to wireframe the interface screens that needed priority to fix in order to achieve the user's primary goals. 

IDEATION
LOW-FIDELITY MOCKUP



 

Untitled (1)-3.png
Untitled (1)-2.png
Untitled (1)-1.png

View Expense

View Amount to Pay

Confirm Transfer

Transfer to online
payment app (refer to next section for more details)

Untitled (1)-5.png

Add Expense

Untitled (1)-6.png

Add Further Details

Untitled (1)-7.png

Complete Expense

Untitled (1)-4.png

Transfer Successful

Untitled (1)-8.png

Recent Activity

ADDITIONAL FEATURE
PAYMENT THROUGH APP


 

Ceres (2).png

A main feature that could attract more users onto the app was if the app was connected to their online payment services such as NETSPay, OCBC PayAnyone, DBSPaylah and more.

Currently, the flow of the user journey is as illustrated, the users go into the app to record expenses and request payment from payees. Once the user receives a notification that they need to pay back to another user, they will exit the application to make the payment on their own payment service then return back to the app to “settle.” This process is not intuitive for the users and requires too many steps for the users in and out of the app to complete the process.

A suggestion is to establish a payment option tab where users can indicate their preferred mobile payment option and input their card details. Therefore, once the user receives a notification to send a payment, they can simply click a ‘Pending Payment’ option that will bring the user out of the app to their preferred app with the specified payment amount already stated. Here, all users have to do left is confirm the payment. Once the payment, is confirmed with a confirmation payment screen, they will be taken back to the Splitwise app with their updated status of payment. 

 

04

PROTOTYPE
SOLUTIONS

 

RECENT ACTIVITY
Easily track incoming and outgoing payment transfers by different users through toggling and filtering feature 



 

Split.png

The expenses made by the user themselves or by their friends can be viewed and distinguished easily through the tabs 'You' and 'Other' that the user can toggle between. The terms used to describe the payments are also standardised and simplified to the three terms 'Paid, 'Received' and 'Pending,' colour-specific too. 

VIEW EXPENSE
Greater transparency & visibility behind payment experience through pie-chart as visualisation

In-built payment feature for seamless experience

 

Through research, a major pain point was the difficulty to track who has already paid, who has yet to pay back and how much amount owed. Therefore, the pie chart visualisation helps the user assess the amount that has yet to be paid back to them. 

The layout of the screen makes the payer of the expense easily identifiable. The 'Pending' and 'Paid' payments have been split into sections, while the 'Paid' section is greyed out because of less importance. Moreover, users can make payments within the app that will help direct users to their specified online payment app. 




 

img.png

ADD EXPENSE
Breakdown of information input to effectively walk users through expense-creating journey

 

A pain point brought up in the research is that there were too many information at once when adding a new expense. 

Therefore, the option to add further notes and a receipt is added in the following screen, not to overwhelm the user. They also have the option to add an existing photo from Camera Roll which was not an option before. 

Artboard – 2.png

ADD EXPENSE
Reduce friction & streamline feature of adding multiple payers to create a simple, hassle-free experience


 

In the research stage, it was discovered that users found it confusing to change the payer to someone else or to select multiple payers. In the old app, users have to click three times that directs them to two different interfaces if they want to add more payers.

With the re-design, it is reduced to only two clicks, where it automatically assumes the user inputting as the payer, but there is also has the option to add more besides. The option to add more payers is also more visible through a coloured icon and plus sign next to it. When users select their payees, the default option is to 'Split Equally.' The other members of the group are the assumed payees. 

new.png

05

TESTING
USABILITY TESTING

 

For the usability testing, I interviewed a group of 5 people aged 21-28 to test the prototype, to identify user pain points and difficulties. I asked them to complete a set of tasks that can help me observe the way they navigate through the app. I used a task completion rate to help me identify if the task could be completed and an error-free rate to measure the ease of completing the task. 
 

Can you filter activities to show the last month’s expenses only?

Can you add multiple payees to a new expense?



Can you add attachment to new expense?

TASK 1 

TASK 2

TASK 3

chart 2.png

Task Completion Rate: 100%
Error-free rate:
85% 

5 out of 5 participants were able to filter activities to show the last month’s expenses successfully
 
4 out of 5 participants were able to add multiple payees to a new expense successfully

4 out of 5 add attachment to new expense successfully 

Struggles include:

•  Lack of clarity behind some icons/buttons
•  Confusion over a particular function e.g. 'Add
    attachment, split equally'
 

05

REFLECTION
TAKEAWAYS

 

Well-prepared script and list of questions to maximise the user's understanding of the goal of user-testing session and ensure a good flow throughout

Preparedness in user testing

Due to time constraints, it would be useful to prioritise features that have the most impact with minimal effort and time

Time constraints

Iteration of screens further based on user testing to minimise confusion and increase error-free rate

Greater user testing

bottom of page