Checkout Overhaul at Paidy

Knowledge / Inspiration

Checkout Overhaul at Paidy

Continuous Delivery
UXDX APAC 2021
Slides

For most Fintech products, the checkout experience is the most crucial and income-generating part of their product. In this talk, Linmic will talk through his journey about how he initiated a full front-end overhaul of the checkout product at Paidy. He will deep dive into the following topics:

  • Any issues he encountered
  • The steps he took to ensure Buy-In from senior staff
  • The positive changes that resulted in this overhaul (including metrics!)
  • Future plans for improvement

Hey, hello everyone. My name is Linmic and I'm currently the Head of Frontend Mobile Engineering at Paidy which is a FinTech company based in Tokyo, Japan. To two years ago we overhaul the checkup process for Paidy, and I would talk about like you know why we needed a change, any changes that we faced and what the end results of the overhaul brought Paidy. I also share what specific examples we needed to change and the blocks that we faced and how we overcame them and the wins that we experienced from this journey. First and foremost, what is Paidy? So, Paidy, it's basically a fast and secure way to make purchase online using only your email and phone numbers. So, no cumbersome credit card input, no registration prerequired, and check out has been, and still is, the core product of Paidy and it is where we started. Why we initiated this project though. So, there were several reasons behind it. At first, after playing with the old checkout, I believed that there was a huge room for a performance improvement and another reason was the product was originally written with Scala and it's difficult to be maintained by front-end engineers they are from a JavaScript background. So, after cloud team more input, we also found there are several long overdue UX issues to address like from app store reviews, feedback our customer support team has been receiving not to mention we like our design uniqueness and it's hard to distinguish our product from the others. I'll show you a few examples of the issues that needed to be updated in the following slides to give you a better idea of where we were starting before this overhaul. Firstly, in the checkout flow there were unnecessary screens for this plate these three screens were mainly for explaining, there is a app for them to use to check their bills and where and when to pay. Which can totally be communicated through the consumers afterwards placing them inside of the checkoff flow will only increase the friction for the consumers. So, there was also a screen that offered different number of instruments displayed regardless if there is only one option on the screen. If there's only one option on the screen this totally can be skipped. An issue there was also reported quite often was that when the user makes mistakes in a pincode they cannot fix the pin code specifically like easily without having to input all four digits over again. As you can see on this screen the form elevation didn't really provide necessary information for the users to correct the value. We only have the rate online and the rep background that there were not enough, obviously. And people would just give up on this according to the data. UI components that we use, we're also not consistent you know, here we use the birthday input, as in this example and you can see that in the forms they were presented in totally different ways. This could be really confusing to the consumers often times. As soon as we figure all these issues out we quickly understood that the UX improvements can be done inside and outside of checkout flow And by outside, I mean, something that we could do before or after the trickle flow, for example, we can communicate how they can pay their bills only after the checkout is completed via email. But for this talk, I'm going to focus on the insight changes that we apply for the checkout. So, before we actually came to go with details, I would like to share what we have achieved. So, we were able to cut the steps from seven to four for first time users. Of course there are many more small improvements here and there and they led to a pretty amazing result. From technical point of view the UI performance has largely improved, the call-to-action button response time improved by a lot, load
time for checkout app was improved by 145% and from business point of view the overall conversion rate boosted by 9%. And this is actually, it was really huge and who, for who actually opted-in in our remember me feature there was a 40% improvement. So, for a mirroring feature, I'm going to elaborate a bit more on later slides. And more amazingly the average authorized amount increased by 4,000-yen per person. So, it's around 40 bucks meaning our consumers are willing to pay 4,000 yen more just because we made the checkout process more frictionless. And with the design system employees we were able to achieve a faster iteration for development along with better consistency. And of course, it's even easier to convince merchants to work with us, meaning a higher merchant adoption rate. So, we actually started by making a really big assumption. UI performance and UX design improvement can not only improve the user experiences, but also the conversion rate. But to the stakeholders, what we assumed didn't really mean too much to them so we need to have some sort of data or research to back us up. So, we actually did quite a lot of research but there are three they we want to mention here because they matters the most as they're conducted
and concluded by the major players in the market, which were very convincing to the executives and stakeholders. So, what the assumption is based on? There is pretty good proverb, a famous like assumption there and research by Walmart that every, 1 second improvement in load time they experienced up to 2% increase in conversions. And also, now research shows that users actually expect the pages to load in two seconds. And after three seconds up to 40% of users will abandon your site. And this is probably the most famous one like conducted by Amazon where they're saying that every 100 milliseconds delay cost them one percent of sales. And like there were many, four concerns from all the from all the inputs. So, first of all, check out was the single most important revenue stream of the company at a time. And there were many concerns that we have received from across departments, basically they're afraid of the risk of redoing the whole product from the ground up and that we totally understand. There was also feedback like, oh, it's already pretty good, do we have to do this? Is there anything we can do? Is it really worth it?
But we deeply believed there was always room for this to be better and much better. And we didn't really have much resource to support us actually especially on the backhand side, they already had their own priorities and this project is really from middle of nowhere and you know, they didn't have any resource to support us. So, in order to address this concern to sell from the stakeholders of convincing plan has to be made. After we convinced the company, even to let us just give a try but where should we start? So, honestly, all we had in mind was really just to try to make the whole user experience better. It makes our consumers' lives easier and hence and hopefully we can grow our business accordingly. So, I want to talk a bit more about the team before we go even further. So, it was me who brought up the idea of doing something about the product. Of course, just from the technical perspective. And I went to talk to Erica one of our product designers at the time. So, we actually spent a lot of time discussing what we can do and what we could plan beforehand in our power. And after a while after some hard work our product manager, Christina was finally assigned to us and made this project official. I couldn't thank more to two of my managers at the time Ken and Peter who were really supportive. Without their support and other team members support in different ways, we couldn't have made it. Talking about process on the left side, these four items are the things that we constantly had to be aware of And we wanted the changes to be frontend UX focused so that we don't affect the backend resources. We also made sure that we had the right data in place so that we knew where to start. We also continuously communicated to different departments, stakeholders to make sure they knew what we were doing is aligned with their understanding. And because we're a FinTech company in Japan, which is usually very highly regulated, we have to always make sure that we are in compliance. And having all these in mind, we iterate, between prototyping and user testing pretty rapidly. We also have a pretty strict QA process to make sure nothing goes wrong rolling out this product. My team at the time helped to write a huge amount of end-to-end tests to make sure that we could have all the test cases covered we couldn't do this without their good work.
And finally, a percentage-based rollout system was also carefully designed and built to make sure that we can release it safely. Having this all-in place was very important to us not only just to convince, but to comfort, all the stakeholders that we had a good plan and took this very seriously. So, the first thing that we came to mind, was we definitely need to deliver something that's not only just what we think the user need, but what they really need. To do that there is a UX process to go through including a user persona, a customer journey map, a flow chart, brand guidelines, new UI designs, and improved analytics tools. And all this was to understand our users. So, these are the personal groups that were created based on the data and user interviews, not only the research company, our customer support team was also involved because we believed they understood our users the best. Most importantly, we didn't really ever have this personas or customer journey ever before. The person that I highlighted in the previous slide you know; it was actually pretty much the most common user type who uses Paidy and why user type it is. So, this persona group is basically like young lady with a relative low salary, barely had a credit card, love to enjoy life, like to shopping, love to hang out with friends and financially aim to avoid overspending. And having her in mind we did workshops and create a customer journey. You really helped us to have a better understanding of how the personal group behaves and how they make decisions and what is more important is we really want to make sure we understood the overview of the service experiences and not just the checkout moment. So, this is the customer journey map that we came up with. So, from the previous slide from the customer journey map, we understood the overview of the Paidy service experiences from that persona’s perspective, that is to change our mindset to use the product from the consumer point of view. So, I want to talk a little bit more about the technology that we use. So, basically, we used to React and we use it along with a framework called Create React App often referred to as CRA. And both of them are created by Facebook and nothing else. So, this is pretty straightforward. The technology is simple. I want to keep everything simple and functional And regarding the web performance, which we also improve a lot I want to mention like several points that we did to improve the performance of the user interface. So, first of all, we dropped the custom web phones because Japanese phones can usually be pretty huge. it is not just Japanese like even Chinese, Korean, I think the phone files can also be pretty huge. And the second is critical path like for some like code splitting, DNS prefetch, we also use SVG images, files, or wherever possible because SVG images can be compressed over the internet and the tree shaking with Webpack, we also have in place. And we also try our best to minimize the number of requests within the checkout flow so because there were actually a couple of like redundant requests that could be removed at the time.
We also managed to keep FPS to 60 at all times by avoiding unnecessary renders. So, like this is the Rollout infra the diagram is for the Rollout infra that we actually designed and built. In a long story short, we actually harnessed the functionality provided by AWS Lambda. So, we create Lambda function in between the browsers and the services. So, with a Lambda function, we were able to assign these browsers in the devices with number from one to 100. And each user will have one number. And for example, if we want to release to 5% of the users, we will actually set the Five as the target and set it in Lambda. And then we will actually redirect all the traffic that it was assigned from one to five to the new services and all the others to the old services and that is how we did it. So, in terms of roll back and if we want to roll back, if there's any incident or we can just make the number to zero and then deploy again, and then all the users will be directed to the other visits again. So, this is relatively easy and give us like more confidence to deploy the changes. So, enough of the technology, I think that's pretty clear. So, I won't talk about the results. So, let's see what we did from user perspective. There was actually a redundant step for the users to agree to the terms on the left side, you can see there's a checkbox and that checkbox at the time was mandatory to users to submit a form but this only create a friction for the users because they had to actually do one more action to proceed to the next step and we make it easier by talking to the legal team. Actually, we had a really long discussion on if this is compliance with the law and in many ways. So, but finally, we were able to reach the agreement that we actually use a pretty popular way saying that by clicking this button, you agree to our terms. And you know, this was actually largely increased the conversion rate at the time. Okay. So, we also fixed the issue that the user couldn't fix the typo easily so now they could actually easily fix any specific pain any time they want. And in terms of the form validation before we only had the red outline and red background and no messages, no guidance for users, but now we have much more comprehensive messages whenever they actually make mistakes in the
inputs, they can easily fix it. We also talk about like how the birthday input in different forms and different services were not consistent. Now they are so, all the birthday inputs in like in all the forms even across all the services, and not just in checkout, now are consistent. It looks the same everywhere, even the same on either mobile or desktop they're all the same. So, now, for users it will be like pretty intuitive for them to just input their birthday. So, this is where we actually get to. So, after all the improvement that would have made these are the final screens, we actually made for first time users. So, when FFU, first time users, I mean, like whoever that hasn't used Paidy at all before. So, for first time users in the first screen we explain, what we did, what we offer and when they pay their bill and how it works. And then on the second screen, they only need to input their email and mobile phone numbers, and then they will receive a SMS and then you will or after they input the pin code from the SMS, you start. So, it's still three steps before they can see the introduction screen. So, what about returning users? You know, we talk about this is like first-time users. So, for returning users because we know they already have seen the introduction screen. So, like when he decided to remove it for return users, so you actually there was only two screens left for them before they can see this as the home screen. So they only need to input their credentials and then input the pincode from the SMS and it's done. So, it's literally just two steps. At a point in which you think about like, can we actually make this even easier for the users? Like how can we make it easier, right? So, please, I really invite you guys to take a look at the first screen so he can see the is a checkbox below the form where that is exactly a remember me feature. So, basically, it's like if you check this checkbox, we will remember you and next time onwards you don't have to fill in your credentials anymore. Like, let's you see if we actually skip desktop now, you'll be extremely convenient for the users. All they had to do is to firstly you think they'll check the information we displayed their email and their phone numbers are correct and then input the pincode from the SMS then its done. So, it's literally just one step like one click checkout experiences. But now I want to talk a bt more on the remember me part. So, for Remember Me, let's go back to the previous slide. You can see that like we didn't really check it by default. So, we actually, we offer the functionality, we offer the feature but we didn't want to check it by default for users for many reasons, for example, if you don't want to like expose your information to the browsers we respect your opinion and if you are like, for example, like there is a really big chance you're using a shared computer, you might be using the computer in the library you might be using computer share with your parents and you don't want them to be able to access that information. And therefore no, it's not checked by default, but if you decided to obtain as a remember me users like from their own words, onwards you are able to actually just input the pincode for SMS and that's it. I think this is the biggest improvement we have made like in the checkout flow and this we believe is the major reason that we could actually boost the commercial rate that much. As a summary I want to quickly go through, like what we have achieved again, not just from technical and business perspective. It also like for within a team and within a company. So, first of all like we've mentioned, we improve the overall effectiveness of our product by gaining better consumer insights and we also allowed for like better efficiency by establishing good process within a team. We also created a happier team with better job satisfaction knowing we're doing the right thing and building great products. And we also improved overall sustainability of the product with stronger trust between the different stakeholders and users. So, for example, if we want to do this kind of stuff over again for a different process, different services, or even like want to improve the checkout even more, next time onwards, it'll be easier for us to convince the stakeholders because we already had one successful experience and that is very important impression we want to give to the stakeholders. Okay. So, like after we shared what we all have achieved and have learned from the journey I really wants to invite you guys to do try it out. Although this service is currently only available in Japan so if you live outside of Japan you
probably won't be able to use it but I definitely want to invite you guys to download our app to try it out to see what we offer, see what the fuss is about and you know, of course your feedback is you're always welcome, so, okay. So, thank you if you like if you are available like later on March 5th, I really you want to talk to you guys and looking forward to have a further discussion with you guys or answer any questions that you might have. Thank you for your time. I can see you later. Bye bye.