When To Ask For Payment In An App Ux Design

Conversion rate optimization always reminded me of curling.

In curling, the main player throws a giant puck-shaped stone, aiming to reach a certain point, while 2 sweepers use their brooms to sweep the ice in front of the stone and slightly modify its path or speed until it reaches the target.

The path to optimize a product's conversion rate involves a lot of curling-style tasks: UX/UI polishing, text modifications, psychological hacks, measurements, tons of experiments, numbers, and some more measurements.

There's nothing sexy with those hundreds of small tasks that usually drive minor improvements, but then again, there's nothing sexy in curling either…

A sisyphean task, but hey, it can get you an Olympic medal

While it's hard to find improvements that will skyrocket your conversion rates, there is one topic that can easily knock it down if it's badly implemented:Money.

Whenever money is involved (purchases through the app, paid services, booking), the users become much more sensitive to security risks, uncertainties, unclear text, bugs, and practically anything that is not 100% perfect.

When your product deals with payments - even the smallest hiccup can drop your conversion rates to the ground.

Here are 10 lessons we've learned over the years, that encapsulate the sensitivity of dealing with payments in a B2C product along with some tips for improving the product's UX and overall conversion rates.

I must warn you though, some of the examples are not for the faint-hearted...

1. Start with trust

Users are used to trying out new products. Some products stick around, others are being dumped and forgotten, it's a common thing, just like providing an email address or a phone number.
But dealing with payments requires a whole new level of trust. It's a different level of commitment that users are willing to provide only to the must-have products or the ones that are already well established and famous. When it comes to new products - this can become a challenge.

According to Nielsen Norman Group, users have 5 levels of commitments, and to move from one level to the other - you need to pass certain relationship trust tests.

When we just launched Missbeez (a marketplace for lifestyle services on demand) - my wife used to invite friends and neighbors over for "wine and beez" evenings where they had a chance to try the product, receive discounted treatments, and have some fun, while we had a chance to see how real users behave and use the app in a relaxed, friendly environment.

I remember one of the things that always struck me was how surprised (and probably unhappy) those users were when they had to enter their credit card details before placing the order.
There was always this kind of feeling (and I'm sure I was over-sensitive about it, but nevertheless) that those users (although they knew my wife and surely trusted her when she said I'm perfectly normal despite my looks) were very suspicious of the app ("is it safe?", "will they charge me right now?", "isn't there a way to pay with cash?") and extremely reluctant to enter their credit card details to an unfamiliar app.

This was 5 years ago, and those habits have changed since, but the bottom line is still valid: users are suspicious about new products, and if those products involve payments - the sensitivity grows tremendously.

That's why building trust is key.

It requires special attention across the board: within the boundaries of the product but also outside of it, long before it's installed (through app store product page design, reviews, brand awareness, and more).

One good way to build trust is to use social proof techniques such as user counters, customer logos, testimonials, media mentions and quotes, certifications, and case studies.

2. Make sure the user feels safe and secure

Users love certainties and hate risks, especially when it comes to spending money.
Make sure to address the zero-risk bias early in the process, by promoting your secure payment, money-back guarantee, free shipping, or anything else that can make the users feel safe and secure.

Minimizing risks by promoting your advantages (plus some good UX writing a bunch of cool security logos) can improve conversion rates and reduce potential drops.

Make them feel safe and secure

The formula is very simple:

Fewer risks = fewer drops

Put yourself in the user's shoes, what bothers him/her? What makes them suspicious or concerned? Try to address those concerns by providing useful information that will help them gain confidence.

3. Clarity = Conversion

Clarity is one of the keys to creating a good UX, but when payments are involved - it drives conversion.

In every step within the payment/ordering process, the product must provide a clear and accurate status of what's happening right now, what's coming next, what's the expected cost, when will the payment takes place, etc.

A lack of clarity might create friction, which in most cases will lead to some conversion drop.

Here's an example that helped us address one of our users' concerns and improve our conversion rates:

Remember: clarity = conversion

In the example above, a small explanation label can make a dramatic impact: if users fear that the "book now" button will perform the payment (before they even got the service) - some of them may try to avoid it, but since there's no other way to proceed with the booking process - many of them will simply quit in the middle of the process.

By adding a tiny explanation saying: "you won't be charged yet" - we managed to eliminate the risk and make users feel confident with the booking process.

Here's another example involving coupon codes:

Discounts and coupons might be confusing, especially for first-time use

On the left side (and I faked the scenario a bit to simplify the example): the user enters the coupon code and hits the "place order" button.

The problem with this design is that users may fear that their code is invalid, have been used already, or simply doesn't work. The UI doesn't explain what's going to happen if the code will be rejected: will the transaction take place without the discount (full price)? Will it fail and let the user fix the problem and try again?

It's unclear.

The right-side example fixes this uncertainty by providing immediate feedback for the coupon code. By hitting the "apply" button the users get a clear status of their coupon code: either it's valid and good to go, or it failed and needs to be fixed.

So clarity is key, and unfortunately, lack of clarity can be found everywhere: special deals that don't mention the exact timeline or the terms of use, discounts that are a bit too blurry, uncertainties about additional fees, and more. Make sure to review your UI and texts over and over again from the unbiased user's standpoint and try to imagine what can possibly go wrong in order to find those potential pitfalls.

4. Simplify

When the right timing comes - ask for the user's payment details. Make sure to ask for the payment details as late as possible in the process and give the user enough time to get used to the app, build trust, and feel more incentivized to complete this action.

The experience of filling the payment details should be well designed.

Remember the rule of thumb: more steps, more drops.

This rule applies to the process of collecting payment details as well: so you need to make it as fast and simple as possible.

• Set up your payment system in a way that will not require the ID and the CVV number (fewer fields to fill).
• Make sure your payment system supports all types of credit/debit cards.
• Add multiple payment options (PayPal, Apple Pay, Google Pay).
• Store the payment details securely (or if you can't, use a 3rd party for that) so that the next purchase will not require re-entering the payment details.
• Follow this set of UX rules for providing a great mobile typing experience when entering the payment details.
• Incorporate a credit card scanning feature to save manual typing (researches indicate a 4%-5% increase in conversion rates when scanning feature is available).
• For heavy shopper apps - allow adding more than one credit card.

5. Make your cart accessible everywhere - even if you don't have a cart.

This goes back to clarity but it's a big one: users get distracted easily, they forget what they did just 30 seconds ago. Make sure to include a detailed order summary and make sure it's always accessible through a single click.

In the early days of our product, we didn't have a cart because we didn't see ourselves as a classic shopping app. Users had to select 1-2 services, preferred time and location, and hit the "order now" button. Pretty simple right?

But as the product evolved, we started using balancers to balance between the demand and supply. As our demand always exceeded our supply, we ended up increasing the price through additional costs such as travel fees (for small orders), weekend rates, same day (VIP) service, etc. When we wanted to boost our demand we used in-app promotions such as happy hours, special deals, coupons, and more.
The product still dealt with 1-2 services per order, but with all of these additions/reductions, the final price was pretty dynamic.

We were always very transparent about it by presenting an accurate bottom-line cost and explanation labels across the entire order flow, but since money was involved, users wanted to see the details. They wanted to understand how exactly we got to the final price and make sure we weren't messing with them.

We got many questions about it in our customer support chat:

• "Why is there an extra cost?"
• "Will I really get a discount?"
• "How can I be certain that my gift card will be used?"
• "Did you receive my promo-code?"
• "My booking is next week, will the discount still be applied?"

As mentioned above, uncertainties cause doubts, doubts cause hesitations, and hesitant users don't convert.

Uncertainties cause doubts, doubts cause hesitations, and hesitant users don't convert.

In our case, some of them dropped and some contacted us with questions.
Both options were bad for our business so we decided to add a cart.

The card was accessible at every step of the funnel. The cart icon was clickable, and when expanded, it presented a detailed order summary with all the special discounts and special fees (if existed). It was fully transparent, extremely detailed, and customers loved it.

A few weeks later - the questions stopped.

6. Avoid dark patterns even if you are desperate to move the needle.

I recently made a collection of 20 dark patterns to avoid when designing products.
Many of those devious patterns mislead the users into additional/unplanned costs:

• Hidden costs for certain shipments or packaging
• Sneak into basket techniques where weird items are added to the basket automatically
• Confusing terminology causing users to accidentally subscribe to expensive plans

Regardless of how desperate you think you are to move the needle and improve your conversion rates - avoid using any of those 20 listed patterns, especially the ones dealing with money. They will just make your users frustrated and angry and will lead to a long term churn and a bad reputation.

7. When it comes to money - surprises are always a bad thing

It is very easy to "surprise" the users with unexpected payments that can jeopardize the whole "trust" thing that you are trying to build.
Take ghost credit card authorization (this annoying $1.00 transaction that's made to validate the card) or a badly written button caption that performs the payment a bit too early (from the user's point of view).

Dig deeply into your UI and locate those pitfalls.

There are many ways to do it, one of them is to work closely with the customer support/success teams. They know what pisses off customers and they'll be more than happy to share the frequent complaints with you. Double-check their answers with real data and you'll get a perfect picture of where to begin.

One issue that popped up by digging through our support tickets involved our product's gift cards:
Originally, we promoted our gift cards as cool gifts our users could purchase and easily send to their friends, but after a while, we started getting a lot of complaints from users who wanted to purchase a gift card for themselves (and take advantage of a small discount some of those cards provided). They complained that the process was too cumbersome.

We realized we had an unplanned scenario to support: purchasing a gift card for the buyer herself.
This piece of information (which, BTW was pretty hard to detect through our mobile analytics because this workflow was never on our radar) motivated us to add a new option to purchase a gift card without sending it as a fancy email to a friend and instead add the card value to the balance of the buyer. Pretty straight forward isn't it?

Here's what we did:

When it comes to money - surprises are always a bad thing

Pretty genius isn't it?
I know!

Soon enough, we started getting more complaints from users who have tried the new option - and were charged by mistake (according to them).

Apparently, the new option was inconsistent with what the users were used to (or expecting), and the payment was perceived as an unexpected (and unwanted) "surprise" because it didn't have that extra step of adding the addressee details.

Of course, this was not a devious plan or a dark pattern, we just didn't think that an extra step was required since there was no addressee, but for our users, the actual payment simply happened too fast.
It surprised them, and surprises that actually make the users pay unexpectedly are trust killers.

So we fixed it by adding an extra step that didn't do much but gave the users a chance to better understand what's about to happen and solved this issue for good.

Basic? Yep.

Not a story to share on LinkedIn? Tell me about it…

And still, this scenario demonstrates how sensitive users become when money is involved, and how important it is to maintain a consistent workflow.

8. No bugs, please

In a world of frequent shipping, where companies release new features and tons of experiments on an hourly/daily/weekly basis - there are also occasional hiccups.

But because money is such a sensitive topic for users - hiccups must not happen in any of the payment workflows: security bridges when payment details are involved, privacy issues, bugs in payment processes, issues with special discounts or invalid coupon codes - whenever money is involved - there's absolutely 0 tolerance for product hiccups.

As a company policy, we always defined a special test plan (with tons of regression) for every product release that involved any of our payment modules.

9. Transparency

What's the right way to launch a policy change or a new pricing model in a B2C app?

Should the company announce it and share it with the customers in advance? Or should it just "appear" the next time the users use the app?

From our experience - it's better to announce it and share the rationale of each change with the customers and use it to promote the change (as well as all the rest of the good stuff…).

Sure, the vocal minority will shout, but they will shout anyway, so that doesn't count.

What counts is that the silent minority may see such transparency as good and honest behavior.

In our case, we had a few chances to be completely transparent with our users: we changed our pricing logic a few times, added new policies, changed them, and made sure to communicate those changes transparently with our users. It worked well.

The only time we didn't follow this guideline was when we had a critical bug involving our payment gateway that caused many of our transactions to fail.

The bug was kind of messy and took us a few weeks to fix it. Once it was fixed, our gateway company performed the faulty transaction retroactively.

It was a very bad move because many users got a notification about a transaction they didn't remember doing. When we explained what happened and that the original transactions never happened in the first place - it was already too late to fix the bad impression.

My conclusion from this case was that it's always better to communicate changes that involve payments in advance.

10. Make it super easy for users to contact you in realtime

I've mentioned clarity, trust, security, setting the right expectations, and consistency. They all help to prevent user friction and can minimize drop-offs.

But what if you missed something? What about things you didn't think of, that are causing user doubts or concerns you are not aware of?

Well, why not ask them directly?

I truly recommend adding a live chat button so customers can ask questions and address their potential uncertainties in realtime,without leaving their current stage within the app.

A few years ago we added intercom as our live customer support chat and it helped us improve our conversion rate in 2 levels:

1. We were able to address user inquiries in almost real-time, help users gain trust by answering their questions real fast, make them feel secure with the process, and convert better.
2. We were able to label and then analyze the types of questions we received, and polish our funnel using qualitative insights (as opposed to the common quantitive data you get from mobile analytics).

Talk to your users. In realtime.

I absolutely love Intercom for making this functionality so friendly and super easy to implement. Users can use the chat button to contact the customer support team and get instant clarifications to their questions.

As a side note, make sure your chat button is always visible and accessible so users can contact you every step of the way.

Not a summary:

Cool.
We've reached the end of lesson number 10, and you know what they say about lesson number 10...

If you've read through the whole thing you are either bored or a true friend, but that also means you may be interested in subscribing to my occasional newsletter and become 23% more awesome than average.

Rumor has it that it's really good. I'm afraid I can't deny this rumor.

When To Ask For Payment In An App Ux Design

Source: https://www.mobilespoon.net/2019/09/10-lessons-learned-payment-through-our.html#:~:text=Make%20sure%20to%20ask%20for,details%20should%20be%20well%20designed.

Posted by: simpsondincovizincy.blogspot.com

Share this post