Hello, my name is Ray. I’m the VP of Marketing here at Stacks, and I’m excited to dive into another conversation in our Payments Led Growth series. This time, we’re talking about designing seamless payment experiences, UX best practices and for embedded payments. And our guest today is a very special guest. We have Bianca Sanchez here. She is the director of UX at Stacks and she has led multiple product design teams across mobile merchant platforms, FinTech tools, internal systems for more than five years. And she’s built stacks of design system. She mentors a growing team and embeds user research into drive measurable outcomes. And previously she worked at a little known company, Flow Startup, Disney Resorts, if you’ve heard of them, helping to improve staff workflows and managing UX and UI there. And development teams at HeyEO Marketing and Movement Marketing. So Bianca, welcome to our webinar today, our conversation. Thanks for having me. Yeah, thanks so much. So before we get started, I’m gonna do a quick intro on Embedded Payments, and then we’re gonna dive into some UX best practices for embedded payments. So what are embedded payments? So hopefully, you know what embedded payments are if you sign up for a UX session for embedded payments. But just at a high level, just a level set for everyone, Embedded payments means your customers can take and manage payments without leaving your product. Right? So one login, one UI, one support path, and really it’s about making payments, not just another tab in your system, but a really integral part of the job. So some common use cases for embedded payments, let’s say a field tech service. We’ve actually had a ton of this at my house. Unfortunately, we’ve had a lot of field tech service people, appliance repair people coming in, fixing literally the dishwasher, the washing machine and the dryer. So we hit the trifecta there. Hopefully the refrigerator will be good. So somebody comes in, does a job, they hand you some, they had you a iPad or something, they take a payment and then you get a receipt and everything’s done, jobs closed. So that’s an example of how that could work. For healthcare, that could be going to visit your doctor. They’re collecting a copay on the front desk and then the back office runs and saves the card for other balances. And then it’s all reconciling in the same practice management system. So a couple of examples of embedded payments there. Why embedded payments matters or what are the benefits to your customers? So it’s less friction, it’s faster cash, no tool hopping, right? Everything’s all in one place. There’s trust that a checkout for your customers and for your merchants and their customers. So clear totals, familiar wallets, instant receipts for them. And really the biggest thing for your customers is speed matters, certainty matters, and all of those things are important for your software customers. So as a vertical SaaS company, why is that important or why embedded payments are important? It’s another revenue opportunity beyond the subscription and it can lead to higher adoption and retention when payments are within your workflows and makes operations cleaner, one dataset for reconciliation, analytics and support, and more users touch payments than any other feature in a system. And so when you get that right, you really should get that right. And if you get that right, then that leads to a greater satisfaction for your software. And because so many people touch payments, that’s exactly why we wanna talk to Bianca about the user experience within payments. So Bianca, my first question to you is when you think about trust in a payment flow, what are the first two moments you designed for and why those? Yeah. So when you are designing for payment flows you wanna make sure that it is matching your branding. Right? It’s always off putting if your customers are going from one experience that they’re expecting, your logos, your colors, and they land in a totally different screen, maybe doesn’t have the same colors and whatnot. You also want to make sure that you are really showing them that it’s a secure website, maybe providing like an SSL badge on there, making sure that you are using an SSL so you’re not getting those warnings from the browsers as well. Just really, focusing on that, hey, it’s safe to put in your card information on the internet here, I am who I say I am and just making sure that they feel comfortable punching in their credit card numbers. So speaking of badges and SSL, what are some of those things that actually build that trust? Because sometimes it’s like, hey, just put this little shield icon here and is that really gonna move the needle? So what to you are like, okay, these actually do help. Yeah, so you don’t wanna put too many, right? Because then it starts looking a little spammy. You wanna you wanna ride this fine line of, hey. Like, we are taking your payment securely, showing just a little blurb at the bottom is more than enough. You don’t want to overdo it and say, hey. We’re secure. We use all these things and all this stuff. Just keep it very, very simple just to give them a just that little extra that little extra push of, hey. We’re we’re secure. We promise. We we are keeping your information safe. Yeah, there is something to like over communicating and then it’s like, why are you shouting at me about how secure you are? Then maybe there’s something wrong here, right? Yeah, exactly. When a payment fails, what does clear look like and what phrasing do you avoid? Yeah. So payments can fail. I mean, it happens. The servers can time out. Something happens. What we like to do is we like to make sure that the the warnings that were popping up to the users that they are very clear to understand and that they have sort of action behind them. So a warning that is just, hey, failed payment. I don’t know whether I should retry it, whether it’s gonna retry itself. So you wanna give you wanna give your customers that extra information to know what they can do on their side. Do they need to reattempt the payment? Do they need to try a different payment method? Do they need to reach out to support altogether to try to make that payment? So failed warnings need to be just clear and provide some sort of action that they can take even if that action isn’t something that they can solve themselves. Got it. Yeah, that’s super helpful. Because unfortunately that is going to happen at some point. So making sure that that’s very clear. Speaking of things that you don’t want to happen, but is unfortunately a reality, fraud and people attempting to do bad things. So how do you kind of balance that? Like how do you communicate fraud checks without stopping real customers from coming through? Yeah. So for fraud checks usually we’re asking maybe a social security number, maybe some more sensitive information. All we what we always wanna do is provide a reason why we’re asking for this information. So in the payments industry, when you’re onboarding a new a new merchant that wants to start taking payments, we’ll we’ll typically ask for an EIN, a tax ID, social, and we’ll provide a a reason that, hey. We we need this information to validate that this is you. We this is what we’re doing with that social, that tax ID, what have you. Just giving them a reason of why they need to provide this information kind of again, helps with the trust of everything. You want them to trust that hey you’re not just what am I putting this in for? What are you going to do with my information? Because I know I I personally get a little spooked if they’re just randomly asking me for my social. I’m like, okay, but what are you gonna use that for? So providing that clear communication definitely helps calm some people while they’re going through the onboarding process. I mean, that is such an important part of your identity and you’re always just looking to protect that information. So yeah, people should be very protective of that and that clear communication is always helpful. Speaking of simplicity, trust, when you simplify, right, because we’re always thinking about how do we not overwhelm users? When you simplify a payment flow, what’s the first thing you remove and how do you know that’s safe to cut? Yeah. So the first things that you really wanna look at is any sort of fluff that maybe you could have collected before the payment process, any sort of additional information outside of their credit card information. You wanna keep it as simple as possible. The less friction you have in a payment flow, the more likely that that customer is going to actually go through with the payment flow. So just cutting out any additional things, any additional steps, any anything that the customer has to really think about, you wanna you wanna cut out because I know for myself when I have to go and find my credit card and, like, punch it in, I already don’t wanna go find the credit card, but I have I have to make the payment. So if I have to fill out more information, it’s just adding that extra friction. Yeah, that’s very good. So speaking of cutting like the amount of information, if you had to cut a form in half, what would you say these are, and then balancing the user experience with what the company actually needs to be able to do their job, right? And to be able to have the right information and how do you find that balance? What are you kind of looking at as this is the information that’s essential, we have to kind of keep this and what can we collect later or kind of get that information in a different way? Yeah, it’s really gonna vary from business to business. Most e comm sites, all you really want is their credit card information and their billing or shipping information. Everything else you should have collected beforehand or it can be collected later. If you’re looking more at services, maybe you do want to collect an ID of some sort. Maybe if you’re a auto body shop, you wanna collect the make and model of, like, a vehicle. But, again, you you wanna try to collect all of that additional information before they get to to the payments flows. And at a bare minimum, just credit card information, maybe the ZIP code. Sometimes we do wanna collect the billing address for for l two or other payment processing reasons, but for the most part, keep it in bare bones. Bare bones just give me your payment information, give me your address, and we’ll get that payment processed for you. Yeah. Keeping bare bones, just focusing on the most important information. Think those are some really good tips to kind of keep in mind. Thinking about, there’s a lot of stuff that we’re balancing with designing user experience for payments. How do you think about speed and responsiveness and more specifically when something changes during the payment? So let’s say the amount, the address, the approval, what kind of feedback do you want to show instantly? And what do you say is like not as important? We can kind of keep this more quiet. Yeah. So anytime something changes, you want to show some sort of loading state. You want you want to have that visual feedback that, hey, things are changing. Hold on a minute. Like, we’re gonna update you. The most important that I think is when they click the make payment button they’ve already filled out their information and the payment is processing to really indicate hey we’re processing it don’t refresh the page. I’ve even seen some use cases where they will put that exact phrase and have do not refresh the page. Like, we’re loading. We’re processing. Give us a minute. And then we come back again to, like, if the payment failed, we have some clear payment, like, messaging. But those loading states are gonna be really important because people do get frustrated. And, like, in this day and age, people are expecting everything to happen within half a second. Three seconds is too is too much time that I’m I’m waiting around. So if we can indicate with some feedback that, hey. We’re loading. Like, just give give us a minute. Usually, people tend to to kind of wait around. I find myself, like, when I’m buying concert tickets. Right? Like, that takes a while. There’s there’s a lot of people in the queue. A lot of things are happening, and I will sit there and wait for that that little bar to load, the little spinner to keep spinning, and tell me, yep. Your payment made it through to just make sure. So it’s it’s gonna be a mix of loading states and also your confirmation afterwards. Because if I if I don’t see that confirmation either in the UI or in some sort of email that follows up afterwards, then I’m just gonna think it never went through. Right? There always has to be a confirmation after the loading. Yeah. That’s that’s super helpful. So speaking of, like, waiting and whether that’s, you know, your system or, you know, some other network that you’re tapping into, and now we’re gonna get into some of the nitty gritty, right? So how do you decide between a spinner, a progress bar, some other thing? What are some of your go to or like depending on this situation, you should think about this versus that? Yeah. So I think between spinner and progress bar, it’s just gonna depend. I think there was a study done a while ago that if you put in a prod like users feel that progress bars are doing something especially if the progress bar has a little animation to it they feel like it’s just working faster even though it could be the same thing as just a a progress bar that’s just kind of moving along. So it’s all about the perception of speed. So this is where the spinners and the progress bars kind of come into play. If you have, just plain spinner, sure. Like, people will wait around. If you have cute little animation to entertain people while they while they they’re waiting for things to to process. That also kinda helps cut the time down for them. Like, it’s it’s gonna be the same time, but the perception of time is what we’re is what we’re kind of trying to make the user feel that that time is going by faster when it’s it’s all the same. We’re just entertaining them so that they they don’t feel like they’re sitting there waiting for ages because ten seconds can feel like an eternity now. Yeah. That’s interesting that you the perception of the progress bar and that is an interesting kind of, you know, maybe behind the curtain is like, it may not be tracking exactly to like actually what’s happening, but just the idea of seeing something progress makes people feel better than just like a thing that just keeps going around and around. And you’re like, is it working? I don’t know. That’s yeah, people are very interesting. So, okay, we talked about speed and effectiveness. I think accessibility is an important one to tackle as well. Love to ask you, when you design a payment flow for everyone, what are the first two accessibility choices you lock in? And then I’m gonna ask why those? Yeah. I’m so glad you asked about accessibility. I feel like a lot of people forget about it. And one of the one of the most important things is at least here at stacks, try to stay double a accessible, the double a standard. So making sure that your contrast ratios are there, making sure that your text is contrasting enough against the background, everything is very legible, making sure that you can tab through certain things and navigate the actual UI with a keyboard if I don’t have a mouse available. So those would be my my go tos for accessibility. Just making sure you can you can see everything. It’s high contrast and that you can navigate it through through your keyboard because they’re like, some people, they they don’t have a way to use a mouse. They they have to use the keyboard or they have to use screen readers and making sure you have all of that set up for them, especially on a payments flow. Like, you you don’t you really don’t wanna exclude anyone from using your your platform or your website. So making sure that that payments flow is very accessible to to everyone is really, really important. Yeah, that’s a good call out. And then what about on mobile device? I think most everything is happening on mobile devices these days anyway. So on a small screen, what would you say are the most important layout decisions to make that improve payment completion? Yeah. So in my opinion, the most important thing is to have digital wallets set up in your payments flow for mobile devices. They’re on their device already. They probably already have their wallet set up. You are just taking away any sort of barrier that they have because I feel like we’ve all been in that position where we’re hanging out on the couch and you’re doom scrolling on the internet and you find something you wanna buy and you’re like, my gosh. This is so cool. I’m gonna I’m gonna buy it. And it’s an impulsive decision and you go to buy it and you’re like, oh, I have to go find my my card. It’s in the car. I really don’t wanna get up. I’m really comfy. And the moment has passed. Right? So you’ve you’ve really lost out on that opportunity. Where if they have a digital wallet, it’s an easy couple of clicks there. The information’s there. So making sure that your your payments pages have those digital wallets set up is really gonna be game changer and really gonna help with that payment completion. Aside from that, making sure that your payments pages are mobile friendly is going to be really, really helpful because that’s going to also tie into what we were talking about before with the whole trust and security. If I’m on my mobile, maybe the the payment page looks beautiful on desktop, but once I get on mobile, it just it’s just not it. It’s not it’s not looking good. It’s it’s kind of all over the place. I’m gonna feel it’s a little bit spammy, maybe a little bit sketchy, and maybe I’m not gonna check out on it on mobile, and it’s because we didn’t we didn’t prioritize that. So it’s it’s all really gonna come down to to your user base as well of how many of your users are taking these payments on mobile versus desktop. But it’s it’s always a good idea to to include mobile in in all of those payment page decisions. Yeah. That’s such an interesting point that you make with mobile and making sure that the wallets are set up. I think that that’s so interesting. So if you are in a space where there is some more impulsivity to that kind of decision, For some other folks, it may not be as relevant, but again, it kind of goes back to just making sure that it’s just easier for whoever it is. So whether I’m paying for my, like I did three times already this past month for my appliance repair, even if it’s doing that for me to just not to have to find where my wallet is, I just have my phone with me, I can do a PayPal pay or whatever it is. So that makes it a whole lot easier. And that convenience, I think, there’s impulse there or not, I think is such an important part of keeping those decisions in mind. So, yeah, that’s a great point. So over to, so you mentioned you had some experience designing systems here at stacks. I wanna kind of bring it back to like, a vertical SaaS company is thinking about embedding payments, when they’re designing for consistency, how would you kind of guide them in what should match their design system if they have that already or where, maybe they should stick with some more familiar payment patterns. So how would you kind of give them that advice on balancing that? Yeah. In an ideal world, everything would match. You would match whatever your system looks like and then your payments page would match everything. At a bare minimum, colors will will do wonders. Right? As long as the colors are matching across both platforms, as long as there is familiar logos there. As far as actually building out a payments page and those patterns, payments is being done by a lot a lot of different companies. Right? Like, we do it. We have a lot of other payment platforms in the industry that that are they’re doing it. And you really don’t need to reinvent the wheel for it. There’s there’s a lot of really good examples out there of how payments pages should be built with the totals at the top, filling out the information in a hierarchy order. We would want to layer on the digital wallets, obviously, first option, and then go into other payment methods and then getting into inputting in billing information. At the very end, you actually submit your payment. So it’s it’s a pretty it’s pretty consistent across everywhere of how the layout should be. And it’s it’s like that for a reason. Right? There’s been a lot of studies that have been done by by other companies, by researchers. So there’s really no need to try to reinvent the wheel too much. Like, obviously, it’s gonna vary from from business to business. There might be some special use cases of why you would tweak some things. But just checking out what other what other people are doing for their payments pages is is a really good idea to start with. But, yeah, for for sure, for branding, try try to keep your colors and your typography the same, and it it’ll do wonders. It’ll do wonders. It’ll all be nice and and matching, and your your clients should feel like everything is one even if you are using maybe a white labeled platform or you’re doing some sort of kind of half integration that maybe you can’t adjust the UI too much as long as those colors and the typography and you have a nice logo in there that matches your main logo, you should be good to go. That’s awesome. No need to reinvent the wheel. But those are some good things to kind of keep in mind. So you mentioned examples. I think you do have a couple of examples for us. Could you kind of go through maybe some examples of really good UX principles and just kind of just talk us through like what you’re seeing and what we can kind of take away and what our audience here today can take away from those specific examples. Yeah. So some really good payments pages, obviously stacks, right? We have a really good payments page, our payments links page. So we list out all the all the information there. We have, like I said before, a nice hierarchy of how users will kind of go through their different payment options. So we want the the top payment option is usually the one that we really want the users to to utilize. So, again, digital wallets, mainly because it’s it’s a quick and easy checkout for for the customers that they can just access their payments and get it, like, get it through. Then we start adding on more payment options through there, and then at the very end, we’ll show, like, hey. Like, give us your billing details if you are filling it out manually, and then big old payment button, submit your payment there. Again, we do do a big confirmation page letting them know that their payment went through and showing different invoices. So Saks has a great payments page that I think it follows a lot of the really good use cases. It’s just an industry standard. If we look at more of onboarding type of examples of how we should be onboarding merchants maybe into taking payments, A really good example of good onboarding would be I think TurboTax. It’s a little bit of like an abstract, but TurboTax is a good way of explaining, hey, this is a really complicated process. I don’t know if you’ve seen a tax form in real life, but it’s very scary to look at. So TurboTax has done a really good job of kind of basically onboarding in a way, walking the user through how to fill out these these really complicated fields and making it really easy for the end user to respond to those answers. That would be a really good example that I would look at is just really taking some complicated questions putting it in some really friendly terminology that just users would they wouldn’t have a hard time filling out. Yeah. Yeah. I agree with you a hundred percent, especially on the stack side. No no, you know, plug intended. But yeah, the TurboTax one is a great example too, because yeah, so I don’t even know what to do with a tax form. And now, when it’s like, okay, well, means, and then there’s like explainers on like, okay, what is this question actually asking and things like that. So it’s just like, oh, wow, in English, like this is what this thing means. And so, okay, I totally know what that is. So yeah, that’s a very, very helpful way to think through anything that’s a little bit more complicated. Yeah. All right, so my last question for you before we kind of turn it over to someone, we have some audience questions. What is the mistake you see in Payment UX that makes you cringe? You don’t have to name any names, so we don’t have to shame any of our competitors here, but what’s something that you see in payment user experience that makes you kind of cringe and how do we avoid that? Yeah. I think some things that I’ve seen in the past have been the actual payment button being really hard to get to, which I don’t understand why. Right? Like, that’s that’s exactly what you want your customer to do. You want them to fill out the information and click pay. So having just a really, really long form that just very long winded, asking a lot of questions, making you fill out all these things, and really hiding that payment button behind so many different clicks and steps, it’s all you’re doing is just adding more and more friction to to that customer’s journey. Right? So whether that customer is in that impulse mode or maybe they’re in that I I have to get this done type of mode. So if we’re thinking of maybe health care, I sent out an invoice and I need people to pay this. Like, you don’t want any friction for that. You just want your people to pay that invoice. You wanna get your money as a business. And the more friction there is, the less likely that customer is gonna sit down, fill out that very long form to get you your payment. So just really long payment flows that are just unnecessary that I think that’s the biggest mistake I’ve seen in the in the payment industry. Yeah. I I I you’re describing some of those things, was just, like, thinking about some nineteen nineties looking websites and just, like Oh my gosh. Like, is this even a real website? Like, I’m just so afraid to put anything in here right now. Yeah. Oh, yeah. And those long forms. Oh my goodness. Yeah. Alright. So we got a couple of questions that came in. I’ll just kinda fire away and you, you know, just answer as best as you can. If onboarding is faster and smoother, how does that help us win more accounts and make more money? Yeah. So if you really think about it, your onboarding flow is, at least for us, it’s our first touch point with with the merchants. Right? It’s the first impression. You always wanna make a good impression. Right? You always wanna make a good first impression. You never get a second first impression. So if it’s smooth, if it’s fast, you’re already mentally preparing that merchant for a good experience down the road. So they’re already going into the entire experience on a positive note. If the onboarding is a little bit clunky, it’s a little bit hard to use, they’re already going into this feeling like, ugh, is this how the rest of everything is gonna be with this platform? So you really want that onboarding to make a really good first impression for your merchants. Yeah. That first impression lasts a long time. Right? That old What numbers, what metrics will tell us onboarding is working? So I think this person’s asking like, is it first time to payment? Where do people drop off or how many support tickets are created because of our onboarding? Like what do you think from your experience is is maybe the right thing to look at or, you know, the most important kind of metrics to look at? Yeah. So we we actually track a couple of these. I think what’s most important to really measure your onboarding flow, right, your merchant onboarding into payments flow, is to see where they’re dropping off and to also check to see where they are filling out information incorrectly. So as an example, we sometimes see people in the title field. They will put mister, missus, miss, and what worry might be actually asking for is, like, your your business title. Are you the owner? Are you the CEO? Are you the CFO? Who who are you? So being really aware and conscious of where people are dropping off that could signal some frustration or just I don’t want to finish this. It’s too it’s too much. Or figuring out, hey. Like, they’re not understanding the questions that we’re asking them. So it could be a mix of questions that they’re answering incorrectly or just questions they’re not answering at all, that they’re just leaving blank altogether. So just being really aware of those and adjusting your onboarding flow to kind of help mitigate against that is stuff that we we track over here at Stacks. Awesome. And then the last question that I have here is how do we capture feedback while users are onboarding so we can spot pain points faster? Yeah. So we like to use a survey after the users finish their onboarding to ask them really simple question. How easy was this onboarding? And then let them let them rank it and allow them to to fill out a little note for us. Again, we don’t wanna cause more friction for them. So we we do it all in app because we find that that is that’s what works best for us. We have tried in the past to send out emails and reach out, but really those those pop ups that we put in our onboarding flow and just ask, hey. How how was it? Thumbs up? Thumbs down? It could be as simple as that. And reaching out to those to those users who maybe gave us some negative feedback, maybe weren’t too happy with the onboarding process and really dig into there. That’s how we that’s how we really get good feedback from our users. Yeah. Sometimes it is really that negative feedback. And so are you saying you’re gonna you’re gonna try to hop on a call with them, like if they gave negative feedback and try to ask questions there or how do you do that? Yeah. So we like to do a lot of user research. And when we do get someone who has negative feedback, we we reach out. We say, hey. We noticed you you had some some feedback on our onboarding flow. We would love to get in touch and really just ask them how how it was and really wanna have this open and candid conversation with them because that’s when we get the best feedback. Because it might be something that we weren’t able to see with our data and the metrics and all the stuff we were tracking. Maybe it’s something I don’t know. Maybe it was we thought it was mobile friendly on this section and it wasn’t or that they just weren’t understanding it because of the industry they’re in. We use the same terms differently. It could be a number of things, but we don’t know until we actually sit down and talk to the user. Got it. All right. Well, that’s all the time we have for today. So I hope this was incredible. So thank you, Bianca, for sharing a lot of best practices, a lot of your experience, end user experience, no pun intended. So thank you so much for sharing with us. Bianca, if our if if anybody has any kind of follow-up questions, what’s the best way to reach out to you? Yeah. They can either send me an email or reach out directly on LinkedIn. I’d be more than happy to answer anyone’s questions. Awesome. Well, thank you so much. Thanks for joining. And we hope you continued success, in your payments led growth journey. Thanks for joining us here today and hope you have a great day. Awesome. Thanks for having me.
