Growth & Marketing
October 25, 2020
July 13, 2020
Growth & Marketing
October 25, 2020
July 13, 2020
The design of a checkout page is a central matter to ensure sales in an e-commerce: CRO practices, a good UX, and an infallible form are the main ingredients for a successful conversion. Today, we review 5 major e-commerces from different sectors to analyze what their techniques are.
Ikea's online shop requires users to create an account. Users can opt to create a simple account or an IKEA Family account, that gives access to a more private shopping with special deals. To differentiate these, Ikea's signup flow displays a dynamic form with different paths.
When creating an account in Ikea, we're first asked what kind of account we'd like to create. According to the answer provided, two different forms are displayed — a longer and precise form to enroll the IKEA Family program and a rather concise one to simply create an account.
After creating an account, users are redirected to their welcome page. There, they can go shopping, review their personal details, or complete their profile with additional questions about their home and decor preferences. This progressive profiling technique allows enriching users database without hurting conversions.
While the initial form was short enough to maintain high conversion rates, this form is used to complement the previous information for a better experience.
While Ikea's signup form is simple and concise, the checkout process feels rather complex. Users are redirected to a subdomain, making it harder for customers to modify the details of their shopping cart.
Ikea's checkout flow is a multi-step form consisting of three steps: Shopping Cart, Billing & pick up information and Review & pay.
The first step displays all the items added to the shopping cart. Users can modify the amount of items or remove products.
Secondly, users continue to pick up information, where they can choose the date and time slot they'd like to pick up their purchase.
This is the longest step: it consists of a rather long explanation of pick up instructions and store hours, plus a form with 13 form fields on billing details.
Lastly, users can review their order and proceed to enter their payment details. Unfortunately, it seems to be a problem with the subtotal price.
✅ Progressive profiling. Keeping a concise signup form doesn't have to be counterproductive. You can compensate for this lack of data with a progressive profiling technique. Ikea's additional form complements perfectly this information with useful data about their customers' home. Smart!
✅ Dynamic forms. Depending on the user's own preferences (or time), customers can fill in a shorter or longer form. We're sure this is a great way to improve their conversions!
❌ Multi-step form. We do love multi-steps forms for checkout processes. But in this case, every step is filled with pick up info that delays the actual form.
❌ UX. While we love Ikea's signup form, the checkout process feels rather tedious. The subdomain system makes it hard to add other items or modify the existing ones. Plus, customers are redirected to an additional subdomain to check if their items are on stock, being a rather long process.
Zara allows customers to choose between purchasing as a guest or creating an account. Both systems have their pros and cons, but displaying both options probably translates into great numbers.
When choosing to purchase as a guest, users are prompted to fill in a form with the basic shipping and payment details. The form consists of three steps, being Shipping, Payment and Summary.
When filling in the longest field —the address field— an autocomplete feature powered by Google helps the user enter the details. Furthermore, this is a way of verifying the veracity of the address entered.
The next step consists of choosing the shipping methods. This is a choice field that includes different delivery methods as well as dates for each of them.
On the Payment step, customers can first select the payment method, and then proceed to further details or be redirected to their payment platform.
Finally, we can review our purchase and authorise the payment. Sadly, there seems to be a lack of credit card validation at this stage. Since validation will be executed after clicking on Authorise payment, users will have to fill in their payment details again.
✅ Multi-step form. Three steps with the ideal number of fields in each of them —that's our idea of a good multi-step form. The path to the final checkout is clear and concise enough. Great!
✅ Autocomplete feature. The easier the form is, the better conversion rates. A simple feature like an autocomplete feature saves precious time and effort and encourages customers to continue to the following step.
✅ Guest checkout and customer checkout. We like the idea of giving customers the option to choose between these two, especially for this sector.
❌ Credit card validation after submission. While the whole process is as smooth as possible, we missed a hint of validation when we entered a fake credit card number, before clicking on Authorise payment.
Disney Shop's checkout is a single-step form disguised as a multi-step form. Let us elaborate on this — while the form is marked with different steps, users have to keep scrolling to fill in the entire form, so the steps are not really pulled apart from each other.
One of the first things we notice when we check our shopping cart is that more than half of the screen is filled with special deals. We're uniformed about the results of these ads, but suspect this makes it harder for customers to see their bag and continue to checkout.
When proceeding to fill in the shipping details, users have to enter basic location details, with a fair amount of easy-to-fill fields.
Then, the address has to be confirmed so it matches the USPS system, which adds up an extra step for the customer. Addresses can be filled with an autocomplete feature, but they have to be verified afterwards.
By the end of the checkout form, users have to fill in their email account. Unfortunately, the email field is pre-filled with a null value.
If the null value is not corrected by the user, they will encounter an error. The validation takes place after submission and customers have to pass the re-captcha again and correct their mistakes.
✅ UX. Disney Shop displays a good UX with great conversion-friendly practices: the summary of the bag is present throughout the shopping, Disney's branding reinforces the good experience, and the amount and organization of the fields feels right.
❌ Lack of credit card verification. The verification of the credit card is only executed after submitting the form. Still, there is no error message, which makes it rather difficult to fix. Plus, customers have to fill in the re-captcha again when errors are encountered.
❌ Long single-step form. Such a long checkout form should be organized in different steps, so each step could give a satisfying sense of completion.
❌ Bug. While the null value bug in the email field is a just a small error, it leads the customer to submit the form without knowing something is wrong.
Rituals' checkout process presents a multi-step form with 4 steps: Shopping, Delivery, Review and Payment.
Once again, purchases at Rituals can be done as a guest or as a customer. We'll now see the path of checking out as a guest.
Users can first choose when they'd like to receive their purchase.
On the Delivery step, some of the location details can be filled with an autocomplete feature, that eases the process and verifies the address, as we saw in a previous example.
Customers can review their purchase right before proceeding to payment.
After choosing the payment method, customers can fill in the card details or be redirected to their preferred payment method.
✅ UX. What's not to love about this form? Four simple and short steps, the ideal number of fields, a summary of the purchase, and CTAs that are visible no matter where you go.
✅ Multi-step form. Four well-defined and organized steps are all your need to complete the purchase. It's the ideal number of steps and fields, so the checkout feels short and easy to finish.
✅ Autocomplete feature. Once again, we find an autocomplete feature, that both eases the effort for the user and serves as a verification system.
✅ Guest checkout and customer checkout. Another great example of choosing between purchasing as a customer or as a guest.
Privalia is one kind of private e-commerce, where customers have necessarily to create an account to enjoy exclusive offers. This selling system requires an efficient signup method. In this case, users can sign up with social login (one-click signup) or with email and password.
After creating an account, Privalia now displays the possibility to activate a personalization method, where customers can see offers from their favorite brands, location, and so forth.
Privalia's checkout is a multi-step form with 3 steps: Personal data, Shipping details and Payment.
When entering personal data, the name field is pre-filled with the information coming from the email. While this probably needs to be edited, it saves some time and effort for the customers.
The Shipping details steps are usually the longest, and this one is no exception. Still, the step doesn't include unnecessary fields, which helps conversion numbers
✅ Multi-step form. This is one of the shortest forms in our list, with just three short steps. We like fields being organized and a form that feels short and concise.
✅ Autocomplete feature. In this checkout, we can see a different kind of autocomplete feature, that may work for many checkout forms. Worth giving it a try!
✅ UX. While branding in this case is not as present as in other examples, we can see some of the fundamental UX practices are present: the summary of the purchase is available through all the steps, the CTAs are clear and always visible and the progress of the multi-step form eases the form filling.
Would you like to build your own checkout form with all these best practices? Build yours with Arengu and add every aspect you want, with your own personalized rules.
© 2022 Arengu. All rights reserved.
Backed by Y Combinator
