UX Improvements to Reduce Customer Friction in Online Checkout

Shantelle Liu at UXDX Community: Enhancing User Experience: Reducing Friction in E-Commerce Checkout and Prioritising People in an AI-Driven World. Video: https://youtu.be/Zz0G-ehhEPo

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Introduction and background

[00:00:08] Hi everyone, good morning, good evening, wherever you join. Thank you for joining me today at UXDX. Today I'm very excited to dive into a crucial aspect in the e-commerce space: reducing customer friction in the checkout process from a user experience perspective. By understanding the challenges users face and implementing effective strategies, we can create a smoother and more enjoyable online shopping experience for all.

[00:00:38] To start with, I'd like to give a quick background of myself. I am a designer with experience in UX, UI and visual design. I'm currently working at Zoom as a senior UX designer, where I'm creating design solutions to help users easily purchase and manage Zoom products online. Throughout my career I've been lucky enough to have the privilege to work with some large tech companies and public sectors, where I learned how to design at scale for a global audience. Over the past five years I've been working on e-commerce UX design for both physical and digital products, which helped me gain unique insights into how to reduce customer friction in online checkout through an e-commerce lens.

[00:01:31] So today my presentation is going to be divided into three parts. First, I'm going to talk about the why behind online abandonment in the checkout process. Then I'm going to share my top five recommendations we can use in the UX research part to understand why users abandon checkout and how we can improve the UX from the online checkout perspective. And lastly I will talk about some high-level design strategies to enhance the online shopping experience for our users.

Why checkout abandonment matters

[00:02:11] First of all, let's start by exploring the phenomenon of checkout abandonment in greater detail. According to Baymard Institute research, the average documented online shopping cart abandonment is around 69.57%. This means nearly seven out of ten online shopping carts are abandoned before the transaction is even completed, which is a very high number. It involves a lot of science, psychology and business decisions. Not everyone made it all the way through to the end, and there are a lot of reasons behind that, which we're going to talk about in a second.

[00:02:56] And why is this so important? I'm going to share a quote I like very much from Thomas Watson, the founder of IBM: good design is good business. In the e-commerce space, a well-designed user experience directly translates into higher conversion rates and customer loyalty. So it's very good for both end users and the business. That's why UX is very important when it comes to the e-commerce space.

[00:03:30] Here are six common reasons why people have such a high abandonment rate in the online checkout process. Checkout abandonment represents a very significant loss of potential revenue for e-commerce businesses. By reducing abandonment rates, a business can significantly increase conversion rates and revenue without acquiring additional traffic. That's why it's important to understand the cause of online checkout abandonment.

Six common reasons people abandon checkout

[00:04:02] From my perspective and the studies I have read, there are various reasons, and those are the top six. The first is unexpected cost, such as shipping fees or taxes added during the checkout, which can sometimes become a surprise for the users, and that causes abandonment. The second is a lengthy and complicated process. We might all have the experience of going through online checkouts with multiple steps and multiple pages, and that just creates some friction for the users.

[00:04:36] The third reason is concerns about website security, especially during payment information entry. The fourth one is requiring users to create an account before the checkout, so users have to make a commitment to a business before they go through to see what's behind that checkout process. That's why a lot of companies use check out as a guest as one of the solutions.

[00:05:03] The next one is payment options. This one is very common for localized markets. If you are a global business, for some localized markets, if you lack the payment options they are familiar with or that might be accessible for them, that might cause some issues for them, or force them to drop out in the online checkout. And the last one is usability. A bad or poor design will create difficulty for users to navigate or understand what steps they need to take in the online checkout process. That's why they might just drop out, because they don't know how to proceed to the next steps.

Heatmaps, session recordings and A/B testing

[00:05:46] Those are the common reasons, and that leads to the second part of my presentation, which is some common methodologies we can use to discover a little bit deeper about user behaviors. The first is heatmaps and session recordings. Heatmaps visually represent where a user clicks, moves the cursor or scrolls on a web page. By analyzing heatmaps of the checkout page we can identify the hotspots and the cold spots from the users. The hotspots are the areas where users frequently interact or engage on the website, which can indicate very high interest or the importance of a certain part of the website. And the cold spots are the areas where users rarely interact, which can suggest some potential pain points, friction or disinterest from users.

[00:06:48] On the other hand, session recordings provide even deeper insights by capturing individual users' interactions in real time. There are a lot of tools to do that. By reviewing those session recordings we can discover navigation patterns, to see how users progress throughout the checkout flows, and then we can see if there is any backtracking or hesitation happening to them. We can also learn about the interactions: how users fill out the form fields, how they interact, whether they encounter any errors or corrections they have to make during the process. By analyzing those two things we can pinpoint specific areas in the checkout that have potential improvements or potentially cause confusion for the users.

[00:07:44] Next is A/B testing. This is a great way to get some quantitative data from users at very large scale, and it's very common for a lot of e-commerce. That's why when you go to a website sometimes you see different versions, because they're testing different variants, and we have done a lot of that at Zoom as well. A/B testing involves comparing two or more versions of a website to determine which one performs better in terms of user engagement or conversion rate.

[00:08:19] We can conduct A/B testing on various elements of the checkout process, such as button placement and design, form field layout and formats, progress indicators, navigation cues and so on. So a lot of UI or UX perspectives can be tested. By measuring key metrics such as conversion rate, average order value or engagement click-through rate, we can identify which design variants lead to the highest level of user satisfaction and completion.

Surveys, journey mapping and usability testing

[00:08:58] The next methodology is my favorite, which is user surveys and interviews. Those can provide qualitative insights into user behaviors and motivations during the checkout process. We can ask a user a lot of questions to get a little bit deeper behind the behaviors, such as: what factors influence your decisions to complete or abandon the checkout process, what specific pain points or frictions did you encounter today, or if you had a magic wand, what suggestions would you make for this website?

[00:09:39] By collecting feedback directly from users we can learn about issues that may not be apparent or visible from quantitative data alone. So this is a great addition on top of the A/B testing data to help you make data-driven decisions.

[00:09:59] The fourth one here is user journey mapping, which is a very common UX methodology in research. During the research phase, user journey mapping is very powerful to understand the holistic experience, the end-to-end journey of users when they interact with the website, particularly during the checkout process. We can identify various touchpoints along the user journey, including initial entry points: where are they coming from, do they come from Google search, do they come from the homepage, and how do they navigate through to the checkout process, through a link or a side banner or a promotional banner? And the interactions with key elements such as product description, price information and the shipping options, to see where exactly we help users make the final purchase decision.

[00:11:02] User journey mapping reveals potential pain points and areas of friction during the checkout process. And I have to point out, this is not a one-time exercise, this is an ongoing process based on iterations and improvements, so it needs to be updated over the course.

[00:11:24] Those are the user journey mapping points, and the last UX methodology I recommend here, which I found very useful in my day job, is usability testing. I use UserTesting.com a lot to conduct quick user testing to learn about user behaviors and preferences for a specific design. This involves observing real users as they interact with the checkout process or a prototype in a controlled environment. We can recruit participants to perform specific tasks such as adding items to the cart, entering their shipping information or completing a purchase using a fake account. By observing how users navigate the checkout process, encounter obstacles or errors, and express preference or frustration along the way, we can identify areas of improvement and validate our design decisions from there.

Streamlining the checkout

[00:12:33] So those are the five UX methodologies that have been very helpful to identify user pain points and discover user behaviors in the e-commerce space. Next I'm going to move to some high-level UX strategies that will be very helpful to reduce online friction. Throughout the years I learned that one of the most effective strategies for reducing friction in the checkout is to streamline it: minimize the number of steps required from the users and simplify each interaction.

[00:13:14] Like I mentioned earlier, one of the common reasons people drop out from the checkout is the lengthy and complicated checkout process. So if there's a way we can implement a single-page checkout, a one-page checkout, then we can minimize the number of pages people have to see, so users feel like there are fewer steps they need to complete. That keeps the momentum going.

[00:13:44] The key is removing unnecessary form fields and only requesting the essential information from users. In one of the redesign projects I worked on, we made a lot of decisions on what form fields to cut, to the point where we only have maybe two optional fields for the user; the rest of them are all required or necessary information we have to fulfill in the backend in order to complete that order. So we only ask what's necessary and reduce a lot of unnecessary marketing or data collection.

[00:14:23] And then the last one is providing clear and intuitive navigation cues, such as progress indicators with step-by-step guidance. One of the common things we heard from users is that they don't know how long it's going to take for them to complete the checkout, or what information they need to prepare before they place the order. If we can give them very clear guidance, a progress indicator or a step indicator, that will help users understand how far through the process they are and how easy the checkout can be.

[00:15:01] By reducing the complexity and eliminating unnecessary obstacles, we can make it very easy for users to complete the purchase, and very quickly. In the world of the internet, customer service is important, and it's important to remember that our competitor is just one click away. So the simpler we can make it to use our products, the more likely that they're going to convert into paying customers.

Optimizing form fields and offering multiple payment options

[00:15:32] The next strategy is very important from a UX perspective: optimizing the form fields and input elements. For the most part of the checkout, once you have the product configurations done, it's the time we take the information from users, and there are a lot of form fields that can stop users from moving forward. We can enhance the usability by using autofill or autocomplete features from the native device or the browser extension to help users pre-populate some of the form fields whenever it's possible, so users just don't have to manually input the form fields every single time, which can slow down the entire process.

[00:16:23] And then the error messages, or the errors, are a great way to prevent users from making a mistake. If we can have real-time validation and provide immediate feedback for users while they're inputting information, that can help users understand if they have to fix something right away, instead of after everything has been completed, they click one button and realize there's something they could have prevented.

[00:16:49] And the last one is grouping related form fields logically and using clear labels and placeholders. On average there are around 20 to 30 form fields for users to complete, depending on how complicated your product is. By grouping them, users can easily find the relative information, especially for the B2B business, where sometimes we need to add some business-related information. If we can group them together, users will have the mindset and the logic to know how to enter that information if necessary. With the form fields we can streamline the data entry process and minimize user effort, and this can result in a very quick and smooth checkout experience.

[00:17:46] The third UX strategy I have here is to provide multiple payment options. As I mentioned earlier, payment options is one of the key factors when it comes to localized markets and different types of online audience. By offering a variety of payment options we can accommodate a very diverse set of user preferences and help increase conversion rate. Eventually we can support multiple payment methods based on the user needs and the countries they are in, so they can use whatever fits their needs the most or whatever is accessible for them.

[00:18:30] Users don't always have a credit card, but they can have other options, where we can provide flexible payment and split the payment into multiple installments to help users spread the cost. By serving the diverse needs of the customer base, we can increase the likelihood of completing the transaction and foster a positive relationship with the users.

Building trust and transparency

[00:18:57] The next one is very important. As Kay[?] mentioned in her presentation, trust is fundamental between humans and technologies, and it's the same thing when it comes to online checkout. Trust is a fundamental aspect of the online shopping experience, especially during the checkout process where users have to share sensitive and personal information with a business. So if they don't trust you, they're not going to share that, they're not going to do business with you.

[00:19:32] We can build trust and transparency by making sure we give users signals like: this website is a secure checkout, we have a security badge or an SSL certificate, or anything to indicate that all the information is encrypted with the website, so users will feel confident to share the information with you.

[00:20:00] And then we need to provide very clear and transparent pricing up front, to let users know the total cost of the products or services they are paying for. We don't want to have any surprise fees or taxes coming at the very end that change users' minds when they make a purchase decision.

[00:20:25] And then we can also offer guaranteed returns or a free trial experience, so we can demonstrate that we want to commit to a relationship with the users, and they feel comfortable buying the products if they don't have to make a commitment right away before they even try it out. By fostering trust and transparency we can reduce users' concerns and instill confidence in the reliability and integrity of the checkout process.

Mobile optimization

[00:21:01] The next one is very important and sometimes can be ignored by a lot of businesses: the mobile device. A lot of websites will have a very comprehensive and well-designed desktop experience, but when you translate that to tablet or mobile, sometimes it creates issues. With the increased amount of users that has been developing on the mobile device, this is a very crucial perspective for the business to look into: mobile optimization and responsiveness. And mobile optimization and responsiveness is not just translating whatever is on the desktop into a smaller screen. It's actually optimizing the UI and the experience so it's easier for mobile users to interact on their own mobile device.

[00:21:59] The business can do so by implementing responsive design techniques to ensure all of the viewports look really nice and clean, and no text is going to be wrapped or broken when it comes to localization. We simplify the form field input by minimizing the typing on smaller screens and provide a more user-friendly experience. We can streamline navigation and use specific interactions that mobile users are familiar with on mobile to help them navigate the entire checkout process.

[00:22:39] Yeah, I think that's everything from my desk. Thank you everyone for listening today. I hope you found this very helpful. Feel free to connect with me on LinkedIn and let me know if you have any questions. Now I'm going to turn it back over to Rory.

Q&A

[00:22:56] Rory: Excellent, thank you very much, Shantelle. That was a really good view of the different ways of looking at it. It's the last step of your process, but it can also be the most critical one. It's that conversion point.

[00:23:12] Rory: If anybody does have any questions out there, please do write them in on whichever platform you're watching this on and we'll put those questions through to Shantelle. But I'm just going to ask one, because it's a little bit of a cheeky question. It's down to the build versus buy approach in a lot of software. At what point does it make sense just to use Stripe or something like that, which is a pre-built checkout flow where they have experts who are really looking into this and trying to make it as efficient as possible, versus trying to build your own checkout?

[00:23:49] Shantelle: Yeah, that's a great question, because I have worked with businesses using both methodologies. I think Stripe is a very well established payment and checkout enterprise and they know what's best for the users, and they have done a lot of research and market research to understand what is needed for different markets and what compliance they need to make. So that's definitely a very quick and convenient way to build a business from scratch, and saving-wise it's definitely fewer things to maintain.

[00:24:29] Shantelle: But the drawback is there will be limitations in terms of styling and formatting, or you have to manage specific things in the Stripe backend. And sometimes it depends on the reliability of the service: if the service is down, which happened to our company before, then what's the backup you are going to have is something to think about.

[00:24:56] Shantelle: On the other hand, if you build something on your own, that means you have full control and full accountability to you, but that means you have to have a whole team to maintain the service, to maintain different markets, the transactions and so on. So there are pros and cons for either method. It all depends on what makes sense to the business. For us, we've been using Stripe and Zuora to support our online checkout and it has worked great. But I would see it as depending on whatever makes economic sense to your business.

[00:25:42] Rory: Yeah, I guess the big one is that I'm sure Stripe's fees are higher than if you were managing your own checkout directly. So depending on the volume of trade you're doing, that could add up to quite a significant amount of money.

[00:25:59] Shantelle: Yeah, exactly. I think this is true when it comes to development, and whatever API you use, there's always some sort of fee associated with that. So it just depends on whether that investment can make sense, can make the balance eventually.

[00:26:20] Rory: Yeah, brilliant. We're actually out of time. I have a couple more questions that I'd love to ask, but we've run out of time, so to be respectful for everybody, I'd just like to thank you once again, Shantelle, for sharing, and I hope everybody out there enjoyed it.

[00:26:37] Shantelle: Thank you, Rory, for having me. Have a good rest of your day, everyone.