A New Way To Delegate And Split Expenses: Fintech UX Case Study
It's always a hassle to split expenses with friends, especially during online payments. Fintech startup Payment Courier set out to eradicate this pain by developing a payment plugin that can be integrated into any payment gateway or online payment system. In this UX case study, we describe how our team helped this startup enter the market with a well-designed product.
The product: Split expenses at checkout
We have all tried buying something together with friends. You typically pay for the total order yourself and then collect the money in cash, wire transfers or through some cost split app. But nagging your friends sucks, and someone always pays late. Or, everyone forgets and then you never see your money again.
The Payment Courier team developed a payment tool to eradicate this problem. A flexible payment page platform, it helps online shoppers either split or delegate bills. You can easily split expenses with friends without the buyer having to pay for the whole bill in advance.
Delegating the full bill can come in handy, for example, when you forward the payment request to your company’s finance person who could pay your airfare for your next business trip.
There are some companies that have developed some of this in-house. For instance, Airbnb offers a similar opportunity to split the bill. But Payment Courier provides these features as a plugin platform to every online merchant and their customers.
The scope and the team
Having gotten an opportunity to present their product at an important fintech conference in Amsterdam where they would reach potential partners, the Payment Courier team came to us to help them revamp their demo. What an exciting challenge for the UX team!
During the seven-week project, we carried out workshops, built a clickable prototype, did research and designed the new UI and a logo for the brand.
Weekly schedule
The team already had a developed a demo which was a great foundation for us. We started by finding usability problems by trying it out ourselves instead of working with hypotheses.
Here at UX studio, we usually we have design sprints each week. In this project, we cooperated closely with the client. We started each week with a client meeting where we discussed the tasks and the elements to correct for that sprint.
After implementing the changes, we sent the client the prototype for inspection before user tests on Wednesdays or Thursdays. To finish, we held a new round of feedback session and iterations on the prototype and tested it again. This meant each week had two feedback sessions.
Cooperation came easy since the startup team comprises mainly developers. They provided us with all the relevant information about the kinds of technical possibilities. They also listened to our ideas with open minds and showed amazing intuition. Good client material :)
Challenges & Solutions
Challenge 1: Working without personas - designing a product for anyone and everyone
After the project kick-off, we saw we couldn’t define a persona very well because everyone can shop online. Buyer and Payer personas exist but almost anyone who shops online could play both roles.
UXers know that if an application targets everyone, it usually doesn’t rate highly. Excellent solutions for the specific problems of a specific target group determine the winner.
What could we do? As a minimum, we introduced the advantages to the new payment method on the merchant site and kept our product as simple, easy-to-use and trustworthy as possible.
Want to read more about creating buyer personas? Download our free ebook about UX design.
Challenge 2: Clearing up the user flow
For this brand-new payment method, we had to earn user trust by making the flow very simple.
What happens when you use the plugin?
When you want to split expenses, it's always at least two parties make up this payment story. A Buyer puts together the order and sets up the link, and the Payer(s) pay.
Before finishing an order, the Buyer has to choose a payment method. To pay online, they click on the one of the payment methods. They choose Split Payment if a group of people want to pay (including or leaving you out) or Delegate Payment if only one person pays.
After setting up, we generate a unique and secure link that allows everyone to pay and track payments on the same page. The Payer gets an email that they have a request from someone.
Informing the user on the merchant website
On the merchant site, the user needs to understand both that they have two payment options, Delegated Payment and Split Payment and the difference between them.
Split Payment seems quite obvious but Delegated Payment not so much. We needed to inform the user with short texts and tooltips so they can choose the right method for them.
How we modified the original flow
Originally, they broke down the flow into four steps:
- Set up payment method
- Create link
- Send link
- Await payments
Then, we did some research about checkout flow best practices. With the results from the user test, we designed a shorter process. Here it is:
Step 1: Setup payment method
The first step proved tricky. We needed to show users the two forms of Split Payments and their differences. We named them Fix Split and Flexible Split.
Choosing Fix Split sets the amounts and the number of Payers. Flexible Split covers cases if the Buyer doesn’t know how many people want to pay and how much.
Originally, the page contained radio buttons, but a horizontal arrangement and a tab solution made it easier to switch quickly between the two options.
Step 2: Creating link
In the tests, users stopped at the second step. They thought they needed no more information after getting the payment link. They skipped the third and fourth steps because they wanted to see the Payment Page.
However, we found the missed steps important because we wanted the payment method to register as closed and to redirect to the merchant site after this procedure.
Step 3: Process closure
To make sure they understand that they have to send the generated link to the Payers and wait for the payments to finalize the order, we had to make some changes. We rephrased the texts and informed the users of their progress in the process at the moment by showing them which steps they had already completed.
We also let them know they could communicate with their group to pay without a chat feature. “Send link” buttons indicated easy email or social media options.
Challenge 3: Building trust
Again, we mainly aimed at convincing the users of product security for this new payment method.
We must build trust in them with the content so they click on the link. For that reason, we first inform the Buyer to communicate with their group – to build trust.
The Payment Page displays the most important information about the order to itemize the payment. It clearly shows the individual shares and how to pay.
It seems almost trivial, but it helped a lot according to the user tests. We used several assets such as well-known credit card icons, lock icons and security logos to confirm legitimacy and the easy and secure payment.
Challenge 4: Copywriting
An important issue came up during the project. Because of the lack of the time, we could not write all the copy for the app, even though a UX designer really should provide at least some microcopy.
Although simple instructions and clarifying that users have to send the link to their friends themselves was a high priority, the user also has to wait for the payments come in to finish the order. What to do on receiving a payment request? Where and how to pay? What happens if the payment doesn’t arrive? — We had to answer these questions with our content.
Words have power, but fitting all the required information into a single sentence demands clarity, brevity and phrasing that fits tonal expectations. To learn more about how to guide your users in your products through writing, check out Katica's article about UX copywriting and the possible testing methods.
Challenge 5: Visuals
People might want to split expenses or delegate payment in countless different scenarios. We had to figure out how to visually implement this payment extension into every possible merchant site. Every merchant has a different visual identity.
How do we show our brand identity while convincing users they will not even leave the merchant site?
Ultimately, we decided to keep it simple and stayed with a minimal visual. We specified Payment Courier’s main brand colors, but merchants can personalize the process with their own. If their accent colors don’t fit, they can stay with Payment Courier’s.
Although we believe in a mobile-first point-of-view, we decided to do the desktop screens first, and the mobile responsive ones later. We based this decision on the fact that users prefer to finalize their shopping on wider screens.
Challenge 6: Communication
In our experience working with various clients in the past, startup projects normally have project plans of a few weeks, mostly due to lack of time in their schedule or limited financial resources.
This leaves less time for design, despite their high expectations, having chosen you to work with and give their precious money to. It puts pressure on both the UX team and the client, which easily distracts and makes it hard to prioritize. Also, they usually have LOTS of ideas, so lead them and don’t lose focus.
Bring everybody to the same page on goals and expectations. We have some great workshop techniques that helped, like defining SMART business goals, Fears & Obstacles, How Might We, Impact – Effort Matrix, etc.
Learn more about useful methods in Timea's article about UX workshops.
Main learnings
1. Stay flexible
We usually do the UI phase after wireframing. In this project, we worked with and tested a detailed demo version. We decided to skip Axure prototyping and put the whole prototype together in Sketch from the start as it would take shape as a low-quality UI. Later, this decision allowed us to go through with the actual UI phase faster.
2. Know your audience...
Paying and giving credit card details makes users suspicious. Even under safe conditions, sometimes a bunch of lock icons (🔒) really helps make them truly believe you. :) Also, copy factors very highly here, which takes us to the next point.
3. ...and how to talk to them (Improve your writing skills)
As mentioned, copywriting makes up an important element of UX. We need to improve not just the visual but the written communication skills too. (This and this article contain helpful tips.)
4. Keep calm and lead others
Less-experienced designers need to learn to communicate assertively with the team in order to keep ideas and tasks under control.
We hope you enjoyed our UX case study!
Check out the Payment Courier Demo here.
Any thoughts, tips or ideas? Don’t leave without letting us know in the comment section! 😉
For additional reading, download our free ebook for Product Managers to understand our main processes better.
And did you know we also wrote a whole book about UX? Yes, we did! Check out our Product Design Book – now with worldwide shipping!
Want to read more case studies? Here are a few that you might like:
- How We Redesigned A Massive Corporate Website
- Designing An Arabic Lifestyle Magazine
- How We Designed An Online Fashion Store
Are you a designer or researcher working on your UX portfolio? Check out UXfolio, a portfolio builder tool launched by our team!
