The product: 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 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 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 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.

Split Expenses With Payment Plugin - UX Case Study - Before and After
What the Payment Courier plugin looked like before the project and after

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 🙂

Split Expenses With Payment Plugin - UX Case Study - Kickoff Workshop
Sneak peek from the kickoff meeting

Challenges & Solutions

Challenge 1: Working without personas – designing a product for anyone and everyone

After kickoff, 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.

Split Expenses With Payment Plugin - UX Case Study - Flow
Payment options the Buyer has

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.

Split Expenses With Payment Plugin - UX Case Study - Payment options
You can choose between Delegated Payment or Split Payment

Modifying the original process

Originally, they broke down the flow into four steps:

  1. Set up payment method
  2. Create link
  3. Send link
  4. 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:

After the user tests, we shortened our process to three steps.

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.

Split Expenses With Payment Plugin - UX Case Study - Original and New
Before and after :  Switch between split payment methods using tabs instead of radio buttons

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.

Split Expenses With Payment Plugin - UX Case Study - Delegated Payment
Modified flow with three steps (delegated payment)

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.

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.

Split Expenses With Payment Plugin - UX Case Study - Colors
Personalized screens for different merchant sites

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.

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.

Split Expenses With Payment Plugin - UX Case Study - Screen Changes
From the demo version to the final UI

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 !

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 free worldwide shipping!

Want to read more case studies? Here are a few that you might like:



Source link https://uxstudioteam.com/ux-blog/split-expenses/

LEAVE A REPLY

Please enter your comment!
Please enter your name here