Splitwise, 2023
Categorizing expenses and tracking payments in Splitwise
UX Design
UI Design
Splitwise helps people keep track of their shared expenses and balances with roommates, trips, groups, friends, and family. During Memorisely's UX/UI bootcamp, I worked with my team partner Joana Ribeiro to improve the user experience and make this adventure even more enjoyable.
Workflow
Qualitative Research Survey
Synthesis in Dovetail
Benchmarking, IA mapping, rapid ideation
Timeline
2023, 10 weeks
Tool
Figma & Figjam
Notion
Google Froms
Dovetail
Maze
Project overview
The product:
Splitwise is a free tool for friends and roommates to track bills and other shared expenses, so that everyone gets paid back.
The goal:
The goal is to enhance the user experience in categorizing expenses and tracking payments in Splitwise to increase adoption of the paid product.
The Problem
Tracking common expenses can be a confusing process that often leads to misunderstandings and wasted time. Our goal is to improve the user experience when categorizing expenses and tracking payments in Splitwise to increase adoption of the paid product.
The Solution
By implementing intuitive and transparent features that accurately reflect who paid for what, we aim to build trust and accountability among users, leading to higher conversion rates and sustainable growth for the business. We decided that the best improvement would be to simplify the user journey and make categorization easier to implement and understand at first glance - making it more intuitive and user-friendly.
How might we help users to track their payments and categorize their expenses to increase adoption of our paid product?
Qualitative Survey
To gather information and gain insight into our target audience, we conducted a qualitative survey. The survey was created in Google Forms and then made available to the people in the target group spectrum. Our goal was to gain insights into user behavior so that we could incorporate them into the subsequent design process and significantly improve the user experience.
Affinity Map
Using Dovetail, we created our tagging taxonomy and were able to tag survey results. By grouping data points into categories, we were able to identify patterns and trends and visualize them in an affinity map. The goal was to spot trends and identify user experience issues.
Competitor Benchmarking
By analyzing our direct and indirect competitors, we gain insight into the similarities and differences between our products and theirs by better understanding the application market and how users interact with their products. We focused primarily on adding an expense and categorizing the expenses. Our goal was to show inspiration for improvements for the problems in the current user flow.
Information Architecture
By mapping the currently existing information architecture, our goal was to identify if the hierarchy and structure could be changed to make it easier for users to add a shared expense to the app and categorize it.
Ideation
In order to generate a broad spectrum of ideas, we created a mind map that focused on possible improvements and then held a “Crazy 8s” session. By combining these two techniques, we gained the benefits of both methods - the structured exploration and organization provided by mind mapping and the rapid generation of unusual ideas facilitated by Crazy 8s.
What we can improve
Improve of the visual hierarchy of the user interface, stronger emphasis on the primary CTA and the “Save” button
Improve of the categorization, e.g. detailed categorization options and an improvement of the presentation in the selection option
Simplified input options when adding an expense, such as “recurring expenses” or entering partial amounts
Improve visual clarity and highlighting of certain features, such as the photo function, the notes function, and the graphical representation of expenses or revenues
Improve of navigation, such as simplified access to the dashboard
What we can add
Adding the possibility to create your own category including a dropdown menu with different colors and icons and “last category used”
Adding an onboarding process that explains the app and its benefits and suggests the next steps to the first users, e.g. adding a shared expense
Adding a visual overview of the different expenses and assigning them to the appropriate person or group
Adding certain functions when entering an expense, such as recurring expenses or a calculator function
User Flows
The User Flow Diagram allowed us to visualize the steps the user takes to add and categorize an output. To get an overview of the wireframes needed, we first developed a user flow diagram of the current app and then a version incorporating the improvements and ideas generated from the ideation phase.
Prototyping
By wireframing the flow, we gained comprehensive insight into each stage of the enhanced user experience, affording us a detailed overview of the necessary screens, elements, and components. We used the rapid wireframing method and created simple low-fidelity sketches, which allowed us to focus on the overall design and functionality.
UI Styles & Components
To define consistent and accessible standards for our component set we initially specified our grid, colours and text styles. We defined a 4 column grid for our design, which follows the 4 pixel rule. We complemented the primary color with different shades and added a light brown tone as secondary color. We defined a neutral color palette for text and secondary actions. To visually show the different expenses and categories, we needed additional colors and defined them as supplentary color palette. We supplemented the used font “Inter” with “Overpass Mono”, as it provides a good contrast and has a personal touch, but still looks clean.
We created standard components such as buttons and cards, created an icon library that was especially helpful for categorization.
