Adding payment feature to Splitwise
Analysing an already existing and highly adopted app and incorporating a new feature into the existing product.
What is Splitwise?
Splitwise is a mobile app that allows people to keep track of shared expenses and balances with housemates, trips, groups, friends, and family.
Challenge
During this project, I had to analyse Splitwise and incorporate a payment feature into it. The feature I develop was a suggestion from a classmate and must be based on an area of functionality to be explored and compared to user input.
Project Outline
- Four days… I know…
- Tools: Figma, Google Forms, Maze and Slack.
- Approach: Designing Thinking.
Research
After interviewing some Splitwise users in Berlin, I learned they would like to use the feature if the payment would be through a third-party tool as PayPal, credit card, and bank transfer. For them, that’s a safe way to transfer money online.
To understand the application, its competitor’s features, and improve my design, I did a competitor analysis. I chose Splitwise, Stevia, the most used apps among people I interviewed and chatted about it, and Paypal, a popular payment tool in Germany.
This kind of service (payment feature inside an expense sharing app) is not very used in Germany, and it was hard to find relevant competitors. Paypall and Stevia were my choices once they:
- Offer similar content and functionality
- Provide the best overall user experience
- Use innovative designs that set them apart
- Were the strongest or most important competitors
- Were the competitors that the customers are most likely to compare Splitwise against.
Define/Design
“How might I design a payment feature in Splitwise with logical placement in its existing navigation and that allows users to use third payment methods so that they feel safe when using it?”
There are different ways of settling up a debt within the application, I decided to focus on it CLA button “settling up” (Schulden begleichen)
To fit my feature within the existent design, I decided to Keep secondary action in a secondary Screen. After selecting settling up, the users can choose if they already settled the debt outside the platform in any way or if they want to use the payment feature.
I began sketching my prototype roughly by hand and then built a Mid-Fi on Figma to test it.
Test/Ideate
Eight people have tested the wireframes remotely and unmoderated through Maze, and three people remotely moderated through Figma.
The task was to settle up a debt by transfer money withing the application.
I decided to use the Nielsen heuristics principles to justify and iterate my design.
I crafted an atomic design inventory on Figma and built my Hi-fidelity prototype using it as a reference.
Learnings
- Atomic Design saves time, and it is suitable for creating clean design guides and scalable systems.
- The Interface Inventory is the source of truth about the status quo.
- Keep the sprint and Stop the obsession with details
- Test test test!
Next Steps
- Design see invoice screen
- Preference button test for transfer screen
If you read until here, thank you!!! Do not hesitate to give me feedback (I love them;)
Ps.: GIMMME CLAPS XD
