Designing the Flawless Registration and Checkout Flow for Your E-Marketplace

Making signup as smooth as possible to get as many registered users as possible is probably one of the prime goals for many young and ambitious online commerce businesses. Apparently, you may need to collect a large user base to be able to generate meaningful analytics, promote the app, and receive feedback at the early stages of product development. Did we guess it? 

As a rule of thumb, we always say that user registration shouldn’t take long, so signing up via social networks is probably the best tactic. Usually, we implemented both Facebook and Google registration in order to increase the number of potential users for e-commerce products. But the question is: when should we prompt users to sign up?

Soft spots in e-commerce apps

The e-commerce market seems to be growing quickly and intensively. 99 Firms forecasts that the total value of global e-commerce retail sales will reach around $3.5 trillion by the end of 2019, representing 14 percent of all retail sales in the world. If this trend persists, we can expect around 95 percent of all purchases to be made via e-commerce by 2040.

Still, existing e-commerce products have a number of issues that lead to a poor shopping experience. For e-commerce brands, a poor registration UX and checkout may result in a high cart abandonment rate. These statistics by the Baymard Institute suggest a few reasons why this happens: 

reasons for abandonment during checkout

Looking at these factors, we can conclude that some of them aren’t directly the product of a poor UX. For example, 55 percent of users abandon a cart because of high extra costs (shipping, taxes, fees), while 16 percent complain about slow delivery times. 

There are a number of problems, however, that can be solved by a slightly improved registration and checkout design, which can give you around a 60 percent higher conversion rate. Yeah, now you’ve guessed it: the topic of today’s article is how to optimize your checkout experience and win customers. 

Don’t mimic the giants – use guest checkout 

We tried to analyze some of the most popular e-commerce services, and it’s turned out that many of them allow users to explore the app anonymously until the first time they like an item or save an item to their wish list. Amazon, Asos, 6pm, Etsy, and iHerb allow for endless window shopping but prompt visitors to sign up once they put something in the cart. 

At first glance, this seems like a good UX pattern to follow, but later we realized that these e-commerce tycoon’s tactics won’t always work for startups. Why not?

First, because e-commerce giants don’t always adapt to their users’ needs – it may take them a while to implement a new feature, and it seems to me that some UX patterns they use are already outdated. Second, people tend to be conservative. Users may forgive an uncomfortable UX of a service they’ve used for ages but might not spend the time learning the new UX of some unfamiliar service.

All these thoughts brought us to a crossroads: On the one hand, we wanted to gain a massive user base. On the other hand, we didn’t want to scare away 34 percent of customers with mandatory account creation (check out this statistic by the Baymard Institute). 

And that’s where guest checkout comes into play. Guest checkout lets new users freely navigate an app and make a purchase without forcing them to register or log in.

guest checkout in the pottery barn mobile app

Let’s briefly describe the main pros and cons of using guest checkout in your e-commerce product:

Guest checkout pros and cons

Advantages from the customer’s perspective:

  • It saves time! It’s proven that 34 percent of purchases are abandoned because of a mandatory (and, let’s agree, time-consuming)  sign-up prompt.

  • You won’t receive those annoying advertising emails after making a purchase.

  • If you’re paranoid about apps collecting your personal data, then guest checkout is the perfect solution. 

Advantages from the retailer’s perspective:

  • Guest checkout can reduce the cart abandonment rate by 34 percent.

  • The lower the interaction cost, the more users will complete purchases.

  • Guest checkout can encourage users to return, and later register, because of their first positive experience. 

  • You can still collect your customers’ emails, so you do get useful information.

Disadvantages from the customer’s perspective:

  • You still need to enter your shipping address and credit card info, and it won’t be saved for next time.

  • You won’t get a personalized product feed, so it’s harder to discover new products. 

Disadvantages from the retailer’s perspective:

  • Customers are less likely to leave product reviews.

  • It’s harder to collect feedback from guest users.

  • Guest checkout prevents you from tracking audience analytics, which can be really helpful for product development and improvements.

If you want to create a nice experience for both a classic registration and checkout process and a guest mode in your e-commerce application, we have a couple of ideas for how to make checking out as painless as possible. 

Refine your checkout forms 

Actually, a standard checkout process can be simple: 1) fill out contact and delivery information, 2) add your credit card information (or pay with your PayPal account).

By using GPS, you can easily let your users define their current position, which can be useful when entering shipping and billing addresses. 

Making input field labels always visible is a common practice for any e-commerce service. Why? Once you’ve filled out all the fields, it should be easy to scan them to make sure everything is correct, here where top-aligned labels can help. You can find more tips for designing input fields for mobile and the web in this article. Also, to find out the basics of designing mobile input fileds for checkout, take a look at this evergreen piece from Nielsen Norman Group.

obvious text labels in the shipping address form of the asos app

We all know that feeling of frustration when the “Fatal error! You’ve just broken the internet!” window pops up after completing a dozen forms. Our task here is to:

      #1 Try to prevent this error from occurring.

      #2 If it has occurred, tell the user about it at once – don’t wait until all the fields are completed.

      #3 Make the alert clearly visible.

      #4 Be direct: Tell what happened and give a clue about how to solve the problem. For example: “This email address has already been taken. Please choose another one.”

This saves most users a lot of time and helps to avoid confusion. 

The following points relate directly to mobile e-commerce checkout.   

Show letters for text fields and digits for numeric fields. While it may seem obvious enough, this rule is often neglected. 

Correct keyboards for email (left) and phone-number (right) fields on

Try to make your CTAs always visible above the fold, waiting for the user to click on them. What’s also important is to make the copy on your buttons more declarative. For example, it’s better to write “Pay $100” than just “Pay,” since it keeps users more informed about what they’re going to do. 

Provide a smooth and secure payment experience 

Modern users expect a certain level of flexibility in how they pay for products. That’s why it’s important to let them choose among preferred payment options. As a rule of thumb, modern e-commerce platforms are equipped with payments gateways such as Stripe and Braintree that allow them to securely accept credit card payments without dealing with customers’ sensitive data directly.  

Using third-party services such as PayPal, Apple Pay, or Google Pay for checkout can not only allow for more payment options but can help you increase your sales. These services are used by the majority of customers, so they’ll feel more secure paying with them than giving their credit card number to an unknown app. 

Variety of mobile-friendly payment options in the Vineyard Vines app

As you can see from the statistics in the first section, the lack of trust is one of the top reasons for checkout abandonment. That’s why it’s crucial to address the security concern and state that paying with your app is safe right when users proceed from their cart to the checkout. This can be achieved with proper microcopy. Marks and Spencer, for example, uses a special “Checkout securely” text right on their button, which immediately answers customers’ concerns. 

You can also make your payment page look secure by adding security badges and icons. This will help users perceive the checkout page as being secure and make them comfortable sharing financial details.’s review & pay page with the secure payment badge

Serve custom sign-ups gently

Don’t be harsh when you prompt your users to sign up – gently suggest that they register. Give your customers the opportunity to decide whether they want to become a member of your “shopping community” or remain anonymous. Moreover, tell them how signing up now can make their lives easier down the road. 

It’s essential to show your customers all the perks of becoming a registered user of your app. Most e-commerce services provide their regular customers with a tailored experience, personalized feed, and the opportunity to buy items with one click. Pointing out these features can seamlessly lead your users to sign up. Still, don’t forget that it’s your app’s content that plays the key role in convincing new users to join your store. 

Provide social registration for creating accounts 

Registering with your e-commerce app via a social media account is quick and doesn’t require customers to create a new username and password. What’s more, by using the infrastructure of established social networks like Facebook, Google, or Twitter, you can demonstrate an increased level of security when it comes to dealing with users’ personal information.

When it comes to standard registration UX via email, it’s enough to ask a user for their full name, date of birth, gender, and a password at the first stages to speed up the process. Other information can easily be provided later.

As you can see, many of these suggested improvements are related to simplifying forms, offering more convenient payment tools, and refining the microcopy. If you do this, even a small e-commerce product has every chance of creating a brilliant checkout experience and delivering real value to its users. 

We strongly recommend letting your customers choose goods and pay for their orders before you ask them to create an account. Let them know that registration is the last step of the process, not the first. Customers are less likely to abandon their shopping carts if you give them the freedom to discover your app and your products. This may be the first move toward better app usability and, therefore, healthy and loyal relationships with your clients. 

If you need help creating user interface design for your ecommerce web or mobile app, we’re here to answer all of your questions. 

Source link

Leave a Reply