Homepage > Journal > How to design Mobile Payments in E-Commerce?

How to design Mobile Payments in E-Commerce?

How you like that:

There probably isn't a person today who hasn't heard of Mobile Payments. When buying in online stores, you most likely pay with some kind of payment method (transfer, credit/debit card, e-wallet).

What role do Mobile Payments play in E-Commerce? How to design payments in online stores? Which design patterns are worth following? Read on, and you'll find out. Enjoy!

We Audit. We Research. We Design.

Why are Mobile Payments needed?

A very good insight into the situation prevailing in the Polish E-Commerce market and the development of mobile payment methods is provided by the Gemius report, summarizing 2020. Products purchased online are often paid for through a quick transfer carried out by third-party operators. The market leader is PayU, which 53% of respondents use. Mobile payments are also becoming more popular every year.

Mobile Payments in E-Commerce - PayU
One of Poland's most popular mobile payment methods is Dutch fintech PayU.

As Dariusz Adamowski observes, "A key aspect for E-Commerce is understanding the needs of customers who primarily use mobile devices and providing them with appropriate solutions and shopping experience. This aspect involves key functionalities related to, for example, support for mobile payments (Apple Pay, Android Pay)."

It's also worth noting that mobile payments are very popular among young people. According to Gemius' study, as many as 92% of respondents between the ages of 14 and 24 use them. And this group is the future of this payment method. And the future of mobile payments is really very promising.

It's always worth quoting specialists from Nielsen Norman Group. The article "The Mobile Checkout Experience" states that payments in E-Commerce directly influence how the brand is seen, willingness to repeat visits, and the organization's ability to generate online revenue.

Today the most attractive path is mobile payments. And this is a trend that is the future of E-Commerce, regardless of the place in the world.

The share of mobile shopping is growing every year, and this growth will continue in the coming years. Mobile payments have gained popularity along with mobile shopping. The relationship here is obvious and very strong, which isn't surprising.

Mobile payments are increasingly more secure and offered by trusted brands. Google, Apple, Amazon, and Samsung already offer these kinds of solutions. Also, Polish E-Commerce platforms eagerly invest in mobile payments (e.g., Allegro).

Mobile payments in E-Commerce - Apple Pay
Mobile payments are offered today as a service and technology by the most prominent players in the mobile market.

Mobile payments are quick, safe, and very convenient. They're responsible to a large extent for increased conversion rate and improved retention. They're a reason for repeat purchases and spontaneous recommendations.

What are the types of Mobile Payments?

As the name suggests, mobile payments are solutions that allow you to make payments through mobile devices (e.g., smartphones).

Their main advantage is the possibility of making payments virtually everywhere at any time. Time constraints due to bank operations don't affect them.

Furthermore, they're equally eagerly used in stationary stores (Real Point of Sale) and online stores (Virtual Point of Sale).

Mobile payments in E-Commerce - PayPal
Mobile PayPal wallet allows users for quick transfers without entering much data.

The amount of the bill or invoice is also irrelevant. With mobile payments, it's possible to process micropayments and macro payments. As if this wasn't enough, you can pay with them in Pre-Pay and Post-Pay formulas, that is, the debit and credit formulas.

What are the most important advantages of Mobile Payments?

Mobile payments, thanks to their guarantee of security, speed, easy accessibility, and universality of application (also in the sense of being able to make purchases abroad), have a huge impact on the development of E-Commerce. How?

According to the results of very extensive and reliable research performed by Baymard Institute, the too-long and complicated payment process is the fourth reason for shopping cart abandonment. One-fifth of store customers don't finalize a purchase from an online store for such a reason.

One in five of your customers will abandon the shopping cart when the payment method is too long for them, too work-consuming, risky, and requires acting in the real world (e.g., finding a debit/credit card to enter its data).

The remaining three reasons include the following:

  • Delivery time (19%)
  • The need to register (24%)
  • Additional, too-high costs (49%).

The psychological factor that speaks in favor of mobile payments is also worth noting.

Increasing the level of security of payments raises the trust in the store and payment system as well as the entire E-Commerce industry.

It's widely known that skepticism toward online payments was one of the most significant obstacles in the development of online shopping.

Mobile applications - mobile payments
The number of applications that support mobile payments is growing every year.

Even more importantly, various entities are getting involved in the development of mobile payments. The following already offer their own solutions in this area:

  • Banks and financial institutions
  • Providers of solutions and digital technology
  • Mobile network operators
  • E-Commerce platforms
  • Manufacturers of mobile devices
  • Web browsers.

Of course, these operations influence how mobile payments are perceived. They change attitudes toward them. Translate into the level of trust and acceptance. They raise their credibility and are a strong motivator for using mobile payments. They give the impression that it isn't a technological curiosity but a very useful solution that makes online shopping even more pleasant and faster.

Let's sum it up. Mobile payments for E-Commerce mean the following things:

  • Increased sales (customers who pay with mobile payments make more purchases — you can find more information about it here)
  • Higher conversion rate
  • More engagement and increased customer loyalty
  • Increased attractiveness of the store or sales platform
  • Greater competitiveness — mobile payments have already become a standard.

Mobile Wallet Design

What is a mobile wallet? It's a type of application that allows users to connect and use debit/credit cards with a mobile device. The primary advantage of mobile wallets is that they considerably speed up the payment process.

Designing mobile payments in E-Commerce
Cashless.pl - a trade portal devoted to popularizing knowledge about mobile payments.

Wallets allow users to make payments offline and online without using credit/debit card data each time. What's more, with mobile wallets, you can use discount codes, loyalty cards, and many more different marketing tools offered by sellers. With the popularization of cryptocurrencies, they, too, are increasingly being operated from within the mobile wallet app.

Mobile wallets often allow you to make payments in two ways. Namely, through the following:

  • Near Field Communication (NFC)
  • Payment application.

They enable you to:

  • Transfer funds
  • Check the balance
  • Use discounts
  • Affiliate to loyalty programs
  • Create notifications
  • Offer rewards
  • Top up the balance
  • Split receipts (e.g., in a restaurant)
  • Integrate with payment gateways (e.g., Amazon Payments, Google Checkout)
  • Generate electronic bills.
Mobile payments - cryptocurrencies
Mobile payments increasingly often allow users to pay with cryptocurrencies.

From the perspective of usability and mobile wallet design, it's essential to offer users the following:

  • Option to create profiles including important data
  • Access to managing many payments cards
  • Possibility to make payments in any amount
  • Ability to transfer funds outside the application environment
  • Gamification elements (e.g., points and rewards system)
  • Speed and security provided through cloud solutions
  • Analyzers and spending planners
  • A minimal number of interactions needed to complete a task.
Mobile finance services functions
Mobile payments allow you to meet very diverse needs. They're multi-functional solutions.

Best practices for Mobile Payments Design (E-Commerce UX)

When designing mobile payments, you should pay attention to issues regarding functionalities, usability, and security. To achieve this, you need to:

  • Use verbal, audio, or animated signals as feedback
  • Explain every error and suggest solutions for every problem
  • Avoid indicating the card issuer, as it is identified from the card number
  • Offer access to numeric keypads in case of entering numerical data
  • Provide the option to use a camera and optical character recognition system to avoid entering card data manually
  • After each operation, provide feedback from the system informing about the status and process
  • Shorten the payment process to a minimum
  • Display total costs that include tax and additional costs
  • Ensure easy access to the summary of the session
  • Provide consistency and continuity of the process on many devices (the session should be available on different devices).

How to design UX for Mobile Payments. Baymard Institute's guidelines

While mobile app design focuses on improving task performance and simplifying processes, this issue is even more pressing in mobile payment design.

User interactions with mobile payment systems should be maximally:

  • Smooth
  • Safe
  • Fast
  • Simple
  • Effective (leading to quick finalization of the payment)
  • Controlled by the user.
Mobile payments in E-Commerce and M-Commerce - NAIPO
Mobile wallets, among others, support QR codes (Quick Response).

The problem of security is critical because it's one of the strongest psychological barriers.

The issue of authentication of transactions should be a compromise between the need to finalize the transactions with one click and security requirements.

You should also familiarize yourselves with the Baymard Institute's extensive and cyclical research. It's certainly worth considering them during the process of mobile payment design. Researchers recommend the following:

  • Limiting the amount of data that users must enter into forms
  • Using single-column forms (multi-column forms are a source of numerous errors and shopping cart abandonment)
  • Avoiding the introduction of a condition of data correctness that's necessary to proceed to the next step
  • Shortening the number of form fields to up to 8 for the transaction finalization process for unregistered users
  • Laying out form fields according to the rule "the simplest fields first"
  • Ensuring autocompletion of data
  • Indicating required fields
  • Avoiding highlight fields for discount codes because they're often a reason for interrupting the buying process
  • Using clickable photos — users process visual messages faster than verbal ones
  • Using progress bars
  • Avoiding distracting elements or allowing performing an action unrelated to the payment process (e.g., clinking on a link to a social media platform)
  • Conducting the entire process on one screen
  • Avoiding redirects to external payment systems.

Mobile Payments in E-Commerce. Summary

  1. A key aspect of E-Commerce is providing functionalities related to supporting mobile payments.
  2. Mobile payments are very popular among young people. The needs of this group will shape the future of this form of payment.
  3. According to the findings of NN Group researchers in design for E-Commerce, the payment path directly affects the brand image, willingness for repeat visits, and sales volume.
  4. Mobile payments have gained popularity along with mobile shopping.
  5. Mobile payments are quick, safe, and very convenient. They're responsible to a large extent for increased conversion rate and improved retention.
  6. The main advantage of mobile payments is the possibility of making payments virtually everywhere at any time.
  7. With mobile payments, it's possible to process micropayments and macro payments.
  8. A payment process that is too long and complicated is the fourth reason for shopping cart abandonment.
  9. Different entities are getting involved in the development of mobile payments, which directly and favorably affects the image of this form of payment.
  10. When designing mobile payments, you should pay attention to issues regarding functionalities, usability, and security.
  11. User interactions with mobile payment systems should be maximally smooth, secure, fast, simple, effective, and controlled by the user.
How you like that:
Journal / Redaktor
Author: Radek
UX Writer and researcher by education + experience. Collects The Story's knowledge and shares it on the Journal.
Reviewer: Dymitr Romanowski

Are you interested in working with us? Take a look at our Portfolio