top of page
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
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.
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
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.
Investigating competitor features agains Splitwise to identify key value propositions
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
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.
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.
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
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
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
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
.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
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
-3.png)
-2.png)
-1.png)
View Expense
View Amount to Pay
Confirm Transfer
Transfer to online
payment app (refer to next section for more details)
-5.png)
Add Expense
-6.png)
Add Further Details
-7.png)
Complete Expense
-4.png)
Transfer Successful
-8.png)
Recent Activity
ADDITIONAL FEATURE
PAYMENT THROUGH APP
.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
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.
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.
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.
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
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