Categories
Online Marketing

Web Payments (Chrome Dev Summit 2016)

But if you think registration forms are difficult, we should talk about. Checkout forms a lot more form fields, a lot more questions, but I think that you’re going to see a consistent theme emerging through, like our talks here today, which is this one of let the browser help you. There are certain advantages that we have as a browser, especially when it comes to reducing friction and making life easier for users, especially things around repetitive data steps, things that the users can store inside of the browser’s, but we’re trying to do our expose api’s and give You tools to reduce, friction and make things easier for your users.

We saw it in Koreans, while management and we’ll see a very similar theme with what we’re doing in payments, but first a little user activity just before we go off for lunch, which are some questions. Okay, great so first question just curious: how many people here actually enjoy the process of buying something on the web using their mobile device? Okay, good yeah and some people, but by large? No and whether we should come talk.

I’d love to hear like what is that you’d like about buying things on the mobile web and what it is that you don’t as much a second question, and I would be really impressed here how many people can remember all the details of their credit card. I’r talking full 60 digit number really CVC on expiration. Okay, it’s more than I expected. I got to be honest, like okay, we’re still like under 15 %, but okay cuz I’ve even payments out for like 18 months, and I think I have yet to remember a credit card number, that’s great and then okay final question: how many people enjoy the process Of handing over all their sensitive credit card information to a random third party server I’ll get one.

It’s almost like. I’r asking these questions to lead up to a particular point, and – and there was a points and the reality is that most users finds payment difficult. They find it insecure and scary and frightening and they find the process of doing it on the mobile web, particularly bad, and so we had this number. We talked about it at i/o as well, and it hasn’t really changed, which is that on average, we tend to see about 66 percent fewer conversions on mobile than on desktop and again we think there’s an answer to that, which is all around again high.

Friction the difficulty and issues around trustworthiness and security, and so we’ll talk about sort of how we’re addressing those today and how we’re trying to bring fast, simple and secure payments to the web platform. But this is a little I’m a p.M. It’s a little bit too PME for me actually, and so I have a much better mission for us inside of the chrome team, which is we’re trying to save the world from annoying check out forms.

So I’m trying to save the world from virtual keyboards and having to memorize and all of those terrible things. I actually started this joke of the better payments Bureau a couple of months ago, and now it’s become like a thing so anyway, but actually Chrome has been fighting the good fight against annoying check out forms for many years. Actually, we start with autofill back in the day, you guys are probably familiar with autofill.

This is my one slide on it. It’s not really the topic today, but consider this. My 10 second plea to say: if nothing else leave today and set autocomplete types on your check out forms. It helps us it helps. The users helps the browsers and it basically ensures a hundred percent accuracy on autofill. I’r not here to talk about that today. I’r really here to talk today about payment requests, which is this new API that we’re building for the web to really help solve a lot of the problems I’ve been talking about.

But before I talk about what payment requests is I want to talk about what payment request isn’t and that’s, because payment is complicated. There are a lot of players in this space and I just want to sort of set up fronts and sort of help alleviate any confusion. So the first thing payment request is not a new payment method, so we’re not trying to create Chrome pay or browser pay or yet another X pay button on your website.

That’s not fundamentally our goal. Our goal is to help users pay, that they went the way that they want to pay and do it quickly and efficiently. Secondly, we are not trying to become a gateway or a process or or some entity that literally moves money in the ecosystem. So it’s not we’re not trying to step on any toes here or like enter into this ecosystem. We think that the market has actually done an incredible job here.

Already players like stripe and Braintree and others have done a really stellar job over the last couple of years of taking the incredible complexity of accepting online payments and making it really simple. They’ve removed the burden of things like acquiring banks and all the couples of PCI, and they put it all into a easy-to-use API. And so our goal is to ensure that whatever we do plays really nicely with all these gateways and processors.

But that’s not fundamental goal to become one. The thing about all these great new services, though, is that they’ve really focused on developers, which is great they’ve made your lives easier and it made easier for you to accept payments, but the user experience has largely remained the same. You have to go from the state where you know nothing to a user to everything and formfields tend to be the way that we do this.

So payment request was fundamentally built for users. I mean we think it’s pretty good for developers too, and it’s pretty easy and we’ll sort of talk about code samples. But fundamentally, like my goal, I think about users and how I can help them and help them get through these burdensome flows on mobile, faster and more efficiently. So what exactly is payment request? Well, pay requests, like I said, is a new standards-based, API and standards-based.

I want to emphasize that we joined the web payments working group almost a couple years ago now and every major browser is a vendor. We have financial institutions from around the globe and we’re trying really hard to build something that everyone can integrate, that all forms of payment integrate with and all browsers can do so that users on a variety of devices and ecosystems can continue to leverage and have the Benefit of it, we’re just in the early stages of it and sort of will talk about where we’re at, but that’s sort of fundamentally our goal, and so when we started to think about what design this API looked like.

We had two high-level goals in mind and they sort of reference back to my original question set the first one is we to build a seamless, easy-to-use, checkout experience on mobile? In particular, we wanted to make sure that users like could minimize typing and minimize friction as much as possible, and the second thing is we really want to bring more secure payments into the web platform. In many ways like the web is one of the the last places where it’s very commonplace to exchange over all of your sensitive information to some unknown third party, and even though there’s an answer to this from the payments community.

With regards to tokenization, the web really didn’t have a great answer for that, which is why we’re really excited that we’ve brought Android pay into the web platform and again we’ll continue to expand that. But this brings tokenized forms of payment. So in the events of data breach or other problems, you as a users are protected, but also it also reduces the burden for for you, as developers and merchants, and so those are our two high-level goals that we had and again the idea here, just at a High level is that, if you think of your traditional checkout flow, it looks something like this.

It’s you know anywhere from like two to five pages, maybe one for single page things and you have somewhere between like 10 and 40 form fields where you’re asking a variety of questions. Things like what’s your name, what’s your shipping address, what’s remail, what’s your phone number? What’s yer credit card number, what’s your expiration and then you have users who are like you know trying to like do all this on their mobile device and at some point they’re, like man and I kind of give up, and maybe they go to desktop later or Most likely, they don’t – and you know and Aaron talked a lot about the growth of mobile right, and so we really think we need to fix this and make this easier and the way this happens with payment requests is you can imagine that the browser sort of Plays this role and and helps facilitate checkout across this, the the highest friction point.

So we take that common set of data, those common things that you request and sort of leverage our strengths to make it easier for users to to be successful. So before I could show you a demo, I want to talk about what types of data is actually supported by payment requests. So the first one is probably a little bit obvious, but it’s a form of payments. So, at the end of the day, you need a way to actually request money from the ecosystem, so it needs some sort of form of payments.

Right now in Chrome, we support we support credit cards and Android pay. I put etc on here, because the is to support more but we’ll talk about that a bit more later, and so you always have to request a form of payment. You can’t call payment requests and not want to form a payment that would just be weird and then would just be request: arbitrary user data API. So the other big thing that we allow you to request is shipping address and shipping options so for physical good purchases.

You can leverage the API to say, hey give me their shipping address and then there’s a dynamic mechanism for you to take that address and then populate shipping options that have updated pricing, etc. You can also request a phone number. You can request a an email address, of course, for like sending a receipt or even prompting sign up afterwards and coming soon, actually, but not quite there, but in a couple of months is payer name support, and these are all flexible.

You can request any of these or none of these, if you want the idea is to support a broad range of of use cases out there. So if you’re like a ride, pickup service, you probably don’t need you. If I don’t need everything, but you definitely need. Let’s say a location like an address and a name, let’s say or if you’re a physical good you may may or may not need their payor name because you’ll get that from the shipping address, so it’s flexible and you can sort of accommodate experiences as as fits Your the business, but the really important point here, is that all of these data points can be stored and returned by the by the browser, so users, by and large trust chrome to store this data.

They trust us to store their names, their emails and even their credit card data. And so the question is like: why put users through the burden of a form that they have to fill out manually and, like you saw like sabine slide about like fat, fingering and the difficulty of mobile keyboard typing and those problems were multiplied across all those form Fields, so if you can save them the burden of doing that, we think it’s worthwhile and sort of payment request is really designed to do that.

But let’s go ahead and just let’s just going to sort of see it in action switch over to a demo here see if we can see all right, excellent, I’m going to you open up, Chrome on stable and I’m actually going to use the exact same shop. Api, that’s, oh and you see it, it auto sign man, you have to love and a good demo goes right, and but otherwise it’s the exact same website, polymer shop demo, except I’m going to go a little bit further and actually just make a purchase.

So I hit the shop now button. You know, I definitely don’t have enough. Google hoodies so I’ll, just source wet shirt, so I’ll just buy it yet another one. So it standard shop. You see that there’s like size and quantity. I won’t affect those, but you see that there’s there’s two buttons at the bottom there’s a typical Add to Cart button, but there’s this also. This Buy Now button that Buy Now. Button is based on feature detection, so we’re checking to see if payment request exists and if it’s there great, let’s leverage it and if not it would.

You would just see an edit card, but I’m going to end use the rapid checkout approach, and so I tap on the Buy Now button and you see that this this payment sheet slides up from the bottom. This is a payment request in action, so you’re looking at sort of natively drawn UI, it’s controlled by us. We can through it, but it’s populated with data from the merchant. So you see that my total amount is there $ 22.

15. I defaults to my form of payment that I prefer, which is android pay. If it’s available only cuz, it’s faster and more secure. You see it they’re also requesting my email address for the purpose of sending a receipt, and the only thing I need to do here is select. The shipping address it’s very difficult to ship, a sweatshirt to someone. If you don’t know where it goes so I’ll tap on that you’ll see that the payment chief slides up to full screen – and it has my addresses, automatically populated for use.

These are our two Google offices here, so I’ll go ahead and shift to the one in San Francisco, where I work, you see that when I do that the shipping options are automatically populated there, and so we have a free shipping in California option or in Express Shipping, and if I change those it will dynamically change the price, so you can see here that express shipping changes, but of course, why would I pay more I’m going to go back to zero? That seems to make a whole lot more sense to me and now I’m ready to pay.

So we just have the pay button and then you’ll see the Android pay screen slide directly up we’re running the test app. So it says unrecognized ooh, you guys wouldn’t have that and because I’ve actually authenticated in the last couple of minutes. I don’t even have to do any extra authentication on Android pay I’ll literally just tap the continue button. A responses comes back and the transaction successful so pay with Android pay, no keyboard, no typing.

All I had to do was tap and select and confirm my shipping addresses so really great, really seamless, we’re really excited about it and just to show you that if you don’t have Android pay available no big deal, we can always change our form of payment and, If I didn’t have Android pay, I would just default back to my credit card, in this case, a Visa card that I have once again I’ll select my shipping address and options.

I hit the pay and the only thing the only keyboard we can’t get rid of is the CVC input everything else we have so I’m going to do one two three. I used to do like a live credit card on this and I discovered that what that didn’t work well for me, so I’ve switched to a demo card but either way the same. The same concept applies, we’ll talk about what’s happening behind the scenes, but this is all client-side basically, so it’s all happening super fast and pretty great they’re really excited about that.

And now maybe we can switch back to the slides and talk more about what it takes to make this actually happen. So how do you leverage payment requests? Well, it’s pretty simple. There are three parts to payment requests, two of which are that are required and one of which is completely optional, and so we’ll talk about them in order. The very first one are payment methods, so we need to know basically all the ways that you can get paid.

This could be a wide variety of things in the future, so it could be. I accept Visa and MasterCard and AMEX and Discover JCB UnionPay. It could be in the future, I accept Ally, pay or idea or PayPal, etc. As long as people are built into the ecosystem, like I said for now, Chrome we just launched so we’re, starting with credit card support, Android pay, and so it looks a little bit like this. So we basically pass in this thing called method.

Data and metadata is an array of objects and those objects. Each have a an array of supported payment methods. So you can see here that Mont. The first thing I support our credit cards. I support the standard for Visa Mastercard, Amex and discover. That’s it nothing else to do it, just as I accept this in the future coming out in a couple of months, we have added support for granularity for things like debit or credit or our prepaid, but for right now, essentially, when you say visa, we sort of Assume you can accept all visa and don’t make a strong differentiation there, but the second one is a little bit more interesting, and this is Android pay, there’s sort of an abbreviated version of this, but to support Android pay.

You see that there’s an additional key inside of that object, which is the data data, is sort of a generic object and it’s a payment method. Specific. The reality is that different payment methods out there have different dependencies different things that you’re going to pass in when you instantiate it by default, so for Android pay, for example, you always have to pass in like your merchant ID, you have to pass in what kind Of token you would like either network or gateway.

We don’t have a full example here, but and then what happens then is when a user chooses to pay with one of those forms of payment, we basically bundled it all up and pass it on to the payment. App so and then the payment app uses that data plus things like origin and assertions from chrome to basically verify that the payment app is the right one, and so the payment can can continue. So it’s pretty simple, but the idea here is that you throw everything you can at the browser for ways that you accept payment.

So if you can accept a like a hundred different ways of paying around the globe, tell us a hundred ifferent ways to pay, because what the browser does is we find that spot in the middle between the set of ways you can get paid and a way That a user can pay you and give a user an optimized experience about the ones that make the most sense for them. So you solve, for example, in the demo that Android pay and a Visa card were available, but let’s say that we had removed visa as an option, then visa just wouldn’t show up, because that doesn’t make any sense and so for, as you go across the globe There are wide variety of ways to pay, but we recommend giving us all to them and then we’ll find the best experience for the user to optimize around their preferences, their defaults and what? What is the best thing for them? The second bit of data is also quite important, so now that we know how I can pay you, we need to know how much money you wants to get paid, and this is what this looks like great.

So the first thing, the most important thing that’s required is this total attribute three parts basic. There are two parts really. The first ones are label, so we customize this. So if you tell us, total will display total, but you this could be like authorization donation. Whatever you want – and you have to, we have to know an amount and the amount is compose of a total amount of money and an underlying currency code.

So we know, for example, or the underlying payment app that we transferred to knows what currency to charge in we’re also to support display items. So, just like I showed you like when I tapped on the total those line items. I came down that basically told you how the total amount was reached this you can’t. We also support this. It’s a wholly optional. You can pass in. You can pass it if you want or ignore it.

We recommend it it’s nice to give a high-level overview to a user about the things that inform the total amount, things like the subtotal tax, shipping, cost, etc. Less of like a full itemized receipt and again in more of like a high-level overview, one important point payment request does not do math we’re not good at floating point math. So if you pass in, you know, you have two line items that sum to five and your total says four like we’re not going to throw anything so you’re totally in control of this thing.

So just keep that in mind and they’re by the way it might be some use cases where it makes sense for those not to a line, but by-and-large just want to point that out. The other point to note is that transaction details can also contain shipping options, and in this case, if you put them in there by default, we support default shipping options. We only recommend you use this if you’re highly confident that your shipping options will not change, then they’re not dynamic.

So if you support, for example, world wide free shipping and it never changes, no matter what the address is feel free to default populate this. But if your shipping is dependent upon a user address, then we recommend waiting until you’ve gotten a user, a user address event which we can talk about a little bit and then you can use that to dynamically query, against whatever service you use to calculate prices, and You can repopulate this and that’s the important point that basically the transaction details object can actually be updated and overwritten throughout the lifecycle of payment requests at certain events and points.

So if a user changes their shipping option, you saw like how, in my demo, when I changed my ship, the price change and the list items changed. That’s because when that event took place, we repopulated those set of transaction details, and so you have that flexibility in control on those events, and so that’s how we get sort of that dynamic pricing model that exists out there and so again don’t do default shipping options Unless you’re highly confident they aren’t going to change and the final piece is the extra information, the optional set of options, and that’s that things I talked about user address, shipping support, name, email and phone all entirely optional, but definitely useful.

I think there was like sort of this myth out there that the the only drop-off point in the funnel is the is the process of putting in your credit card, but really like the entire checkout. Funnel is well a funnel and so like wherever your users. Experience. Friction and there’s a step. Others are drop-off, so we highly recommend taking advantage of these these different pieces, and so there’s a few that we support, like I said, and it’s as simple as passing in just a bunch of boolean’s.

Basically, do I want shipping? Yes, do I want email, yes, etc, and you can again, these can be variable, so you can say I don’t want shipping, but I do want a name and phone number or you can say I just want an email address to send a receipt to. For example, it’s completely configurable and again. The idea here is to support a wide variety of use cases. Something funny that is minor that we have coming soon in the next couple of months is we’re adding support as well for a shipping type value.

It’s pretty simple, but the idea here is that let’s say you are buying a pizza, one does not ship a pizza right. That’s just weird like we deliver pizzas, and so it’s a very minor feature that allows you to actually specify shipping delivery or pickup. As like the address type, so we still call shipping address underlined in the system, but this way in the UI a user would see. Oh, I want my pizza delivered two three four five speed streets.

I don’t want it delivered or if you’re a ride-sharing service, for example, you can say pickup and it’s your pickup address where you’re currently at or located, and so that’s the value of that particular little thing again pretty minor but allows us to just have like a Better user experience underlining the whole system so now we just put it together basically, and we get that whole experience that we talked about, or I just showed you so.

The first thing we do is we instantiate payment requests and we pass in our method data way that we things that we support. We pass in the transaction details again how much money, what currency code, what line items do we once and then our optional options right? So in the case of our demo that I went through, that would be request, shipping, true and request email, true, but again that one’s completely optional um.

You see here. I’ve also added an event listener to my shipping address change and we support two events in the system: shipping address change and shipping option change. These are this: is that dynamic mechanism that allows you to receive the events parse out the new details? Let’s say so: if a user selects a shipping address that event fires, you can actually pull out that full shipping address.

We don’t do just the zip code because you can’t get fully accurate shipping information with just a zip code. So you get a full user address. You can use that at that time to call event update with this basically says: hey, you know browser, I’m thinking. I need to calculate this. You can call your back-end api’s and you can update resolve a promise with new transaction details. So again that updated transaction details object can now contain your updated set of shipping options, including the empty set of options and an error which says like opps.

Sorry, we don’t ship to you know wherever it is that you’re trying to ship to so that’s also supported and so and by instantiating payment request or not. There’s no UI. That shows it’s just instantiation when you want that actual payment sheet to slide up from the bottom. Oh, we called that show that show is actually our signal and we actually raised that payment sheet and put the user through the process.

That returns like a promise, and when that promise resolves you have a payment response and that payment response contains the entire set of data. It’s just a JSON object that contains the entire set of data that you requested so for a credit card. For example, you would know what the underlying network was so Visa, MasterCard, etc, and then you would see credit card number phone number, full, CBC, expiration, etc.

Think, like the same set of data, that a user would have typed out into your form, you’re now getting just from the browser as a JSON response, you can use that to basically send that response directly off to your gateway, your server or even let’s say in The case of like, like you know, scribe API is like directly to over to the API is for tokenization, it’s completely up to you, because it’s all plaintext these responses.

It’s important to note our our method specific. So if you selected Android pay as your form of payments, then when that response comes back, it’s going to look like an Android pay response. You’re going to be able to select this there’s a key and they’ll. Tell you that, oh there, the form of payment they chose was Android pay and then you’ll have to expect that the Android pay details object, looks different than a credit card, one which may look different than some other form of payment like an alley, pay, etc.

I mean in a good that’s because different payment methods have different requirements and are different systems and call things different things. The final step here is, we just need you to tell us to close the UI, because once you get this payment response back, we actually show us a little loading spinner and the little loading spinner is sort of waiting for you to come back and let us Know the the result of the transaction we highly encourage, but do not require that at the time that payment response comes back, you try to make the payment.

There are legitimate use cases where you can’t do this things like 3d 3ds flows, etc, but by and large, if you can submit, we recommend it, and so you call the complete you can call with success or failure, but you can also call it with nothing. This is basically an affordance for the browser to do like special UI considerations in the event of success. You know like a little animated check mark or something but yeah, it’s totally optional, but the important thing is that, when the UI closes will actually resolve that promise and that promise is your cue that the UI has been completely torn down.

So if you have animations or things that you’re trying to time with the close of that wait for that promise to resolve and then you’ll be guaranteed that any chrome UI has now been stripped from the page, and that’s it on with that. You basically have the hold experience, so in just a few lines of code, you basically get help user alleviate all that friction and difficulty I’ll type in all those annoying form fields, pretty simple, but also again, with Android pay and other future forms of tokenized payment.

You’re. Basically, getting easy tokenize forms a payment that reduced like the burden of CBC memorization, etc. So really excited about this, and this is all possible because the browser is sort of sitting as the middlemen. There proxying data back and forth between native apps on the device and and the underlying website and the developer. That’s requesting it. So my last few minutes here I want to talk about just a few UX considerations and forward-looking stuff.

So first one is my very bold. Hyperbolic statement to say, kill the cards, which is maybe a bit strong, but just sort of my way of saying if a user is coming to your site or you for a lot of users who come to your site on mobile, that only make a single purchase. Why put them through the burden of opening the page, adding it’s a card? Finding the cart page clicking the card page going to review page go to the checkout page, then.

Finally, starting the process there on mobile want to optimize their experiences. Payment requests allows you to do that quickly and immediately, so consider adding like Buy Now buttons directly to your product pages, especially on mobile, when it makes sense again. This moment won’t make sense for all businesses, but I would encourage you to go back and sort of check the numbers and see if, like this might be a powerful tool for you guys to leverage to help your users just a few other things really quickly that I’ve talked about – and you’ve heard mention here today – is thank progressive enhancement.

This is a new API. It won’t always be available, so you can’t necessarily completely depend on it, especially in a cross-browser way. Yet, although hopefully we’ll get there, so think what happens if it’s not available, you’ll still need a fallback flows etc. The second one, of course, is we encourage you to keep the set of list items high level, so don’t think of it like an itemized receipts. We don’t want the user to select this long scrolling list in the UI, if possible, try to keep it high level, subtotal tax things like that.

If it’s single item you can put it in there, but by and large we encourage high-level subtotals and things like that and then last one. Something to consider is that if you already have a user’s information – and you already have a credit card on file or some way to pay – I wouldn’t expect you to use. Don’t think you have to use payment requests like give the user the best experience they can and that means go ahead and just leveraging what you already have on file.

But if you don’t have anything and you don’t have the credit card or the credit cards expired, you need a new one, a consider payment request as a tool to help these users. You know we talked about. You know. We talked about sign up first right, but that might not always make sense for your business if you think about it, like maybe your your p0 or your most important thing is getting user through that checkout flow, then you can request an email address from payment requests And now all you need from them at the end of that funnel to sort of optimize.

The experience for next time is a password and so consider sort of leveraging this again. These are tools to help you be successful, so just a quick status update. So we are live in in Chrome as of m-53, so we’ve only been live for about, say, eight wait weeks now and it’s sort of a quiet launch. We had a great set of early launch partners that we worked very closely with and they integrated and tested and gave us a lot of great feedback again.

The API is still early. Chrome is the first browser to implements, and so we’re really thankful to all of these players for their great feedback and from it we’re actually making a lot of changes and improvements and enhancements to the underlining experience. And so I just want to talk a little bit about what you can expect to come soon, so the first one that we’re working really hard on is support for third-party payment apps.

As you go around the world. There are a lot of ways to pay in India. You know you have like paid TM and snapdeal, and all these other new emerging wallets and you go to Holland. You have ideal if you go into other countries, a whole new forms of payment that are not just credit cards and Android pay, and we want to be able to support all of this in a nice open way where we can support users from all over the Globe, no matter what, and so we’re really close to finalizing this and we hope to have support next year.

Secondly, we have a lot of spec and feature enhancements coming, so we have the shipping address types. I talked about you’ll, be able to call this within an iframe coming up soon, as well as much other small enhancements and improvements, and then we also have much of UX improvements, so we added a are scanning just recently, so you can now just like scan you. If you don’t have a credit card, you can just scan it directly into into the into the UI, so there’s things to make it faster, easier and fundamentally better onboarding flows and then just quick time lines here.

Just so you’re aware we’re sort of targeting in 56. That’s our January release as, like our next big major release. It’s going to have all these enhancements all these improvements and we’re really excited about it on you’ll, continue get updates along the way. This is all live in chrome, stable and we’d love to continue to work with you and get your feedback um everything I’ve talked about today is available online.

In a lot more detail, we have integration guides a bunch of examples in sample code where the phones come up, and then we also have a game start with Android pay. Android pay is really simple. With payment requests, it’s like less than ten lines. We do almost all the heavy lifting for you, so just a quick shout out there, but I’ll be around the rest the day I would love to chat with you learn about your challenges, things that you think you need from the browser ways that we can help.

You be successful, especially in checkouts, so thank you so much


 

Categories
Online Marketing

Payment Integration

This replaces the payment forms on a site with a much simpler experience on mobile devices. So let’s talk about paying for things on the web. This is a longer talk, so let me give you an idea of what’s coming up. First, we’ll talk about the user experience today and what could be better, we’ll look at the payment request, API twice.

First, to give you the big picture, then we’ll dive into the code. Finally, you’ll get the usual resources in lab. It’s no surprise, given the rise of mobile computing, that a majority of commercial traffic is coming from mobile devices, what is surprising is that 66 % of that mobile commerce is still happening on the web, even when people have native apps installed. Unfortunately, we also see a lot lower conversion rate on mobile web relative to desktop websites.

Mobile conversions are about one third of the desktop conversions. If you wonder why this is the answer is pretty simple. Checking out collecting payment from the user is still rather messy. People often give up while filling the checkout form some checkout forms have improved since the beginning of web Commerce. What hasn’t changed is you still have to manually input the same information credit card billing address and shipping address? Our first step to solving this problem is autofill, because autofill works on existing forms.

You don’t have to modify your site. Autofill just works to help users check out faster autofill alone increases conversion rates by 25 %. Autofill does a good job of identifying form fields, but it’s not perfect. If you want an even better experience, you can have the autocomplete attribute to your forms. In this example, we’ve annotated the credit card portion of a form using values such as CC name and CC.

Number autofill will know exactly where to place its information. If you want to learn more about autocomplete attributes search the web, using what WG autofill to find the specification, autofill gets rid of the manual nature of data entry and makes it much simpler for the user. The current checkout experience presents you with a form to fill out every time for users, though the ideal experience would be that, when it’s time to buy they just buy site should be able to focus on creating an amazing and engaging shopping experience without worrying about optimizing.

A long checkout form this is where the payment request API comes in, we’re going to look at it first from a user perspective and then look at the code. What if we could do away with the form using web payments when it’s time to pay the user? Just pays payment request is a simple JavaScript API that helps the browser collect payment information. Then it’s a simple one: tap checkout for the user and an easy way for a site to receive a payment.

With the payment request API, you can make the whole process much faster and simpler and since the browser is actually taking care of collecting payment information from the user, we go from end taps to one tap. Let’s take a quick look at the code flow here. First, the site initiates a payment request in this request. The website passes to the browser the parameters of the payment, for example, how much is being charged and the available forms of payment? Don’t worry about the details now we’ll come back in a few minutes and look at this in detail.

The browser then determines the intersection of payment methods from the site and what the user has. It then presents a selection UI where the user chooses their method of payment. You get the UI by calling show this displays a native UI over the browser within this UI, the user can change how to pay the delivery method and the delivery address. The payment method can be credit cards or one of the apps that’s installed on their device, such as Android pay and, finally, the user taps on pay.

Then the browser requests a response from the selected payment method. This might be an app on your device or going directly to a payment provider. The payment processor verifies the request by examining its details and then returns the response directly to the server and the website now has all the information it needs to process the payment. Is this safe? The API is more secure than forum based payments.

The new payments are based on modern cryptography. You don’t need to enter payment data that could be logged or observed at the point of entry. Autofill is safe from website access and is typically stored. An encrypted storage on the hard drive to prevent disclosure, even when the OS is compromised payment request, is not just a chrome only API. The API is currently under development in the w3c web payments working group.

The goal is to create a universal cross browser standard for any website to accept any form of payment so to review payment requests, eliminates manual and tedious entry by storing the user’s information securely in the browser. The browser passes, addresses and credit card details immediately and securely to the site, and since the browser is collecting payment information from the user, we go from end taps to one tap: you’ve seen how payment request works for the user.

Now, let’s go over the code in more detail. First, a quick review. The site initiates a payment request in this request. The website passes to the browser the parameters of the payment, including the price and the payment methods accepted. The browser determines the intersection of payment methods for the site and the user and presents a selection. Ui payment can be anything from a simple credit card payment to a payment application installed on the user’s device.

The browser requests a response from the selected payment method and returns the response directly to the merchant. There are multiple code samples for this on: Google, Chrome, github, dot, io. Let’s start writing some code. Step 1 is to tell payment requests. All the ways you can get paid. Step 2 is to define the details about the actual transaction cost items, currency, shipping options and so on.

Here’s an example of how you would define shipping options notice. The selected bit you can include this: if you have multiple options, the browser will tell you which one the user selects step 3 is to define what information you want. The API to collect. Take the three data structures you just created and pass them to the payment request. Constructor. You often do this when the user indicates they’re ready to pay, take the request and call it show method.

This returns a promise and opens the user interface. The UI shows the details of the purchase and collects payment information when the user approves the prom resolves with a payment response object. Next, you should check that the payment is valid. Send the information to your payment processor for processing the UI will show a spinner while the request takes place when a request comes back, call complete to close the UI.

The complete method tells the user agent that the user interaction is over. The payment response object contains everything needed to submit a payment for credit card payments. The response is standardized for non credit card payments such as Android pay. The response will be documented by the provider. There’s one loose end to tie up what happens if the user changes their shipping address or options.

This may change the total cost and in some cases, may change the shipping options. Payment requests can omit shipping address, change and shipping option change events. You should add event. Listeners for these and update the payment details. Accordingly, the sample code will show you how and that’s it. You can find a full set of resource links on this final slide. You may have noticed. I didn’t mention a lab, we’re just finishing it up at the time of filming, so check your lab notebook for a complete ecommerce example.


 

Categories
Online Marketing

UX Design: Top 5 tips from our designers

So what you’re going to see in this article is us asking some of our top designers what they use to level up their UX skills and what sort of things they would do if they were teaching someone who is junior? You know like what way could you level up your UX skills, so what sort of resources would you use or what sort of things would you do so hope you find this useful and do let us know in the comments what resources are, what tips you have For becoming better UX designer or what sort of questions you have for a design team here at ageyn, smart all right, let’s go hi, I’m Alma and I’m one of the UX researchers on the Sprint team, and I have two tips for you today to become a Better UX and product designer, so tip number one is to subscribe to an awesome newsletter called product habits by a guy called Heaton Shah.

This guy has designed and released the Q products that you’ve probably heard of like KISSmetrics and one more that I’m forgetting at the moment, but he’s a very smart guy and his newsletter is awesome. He pulls articles from the web about product design and stuff. That is always a really really good read. So that’s my first tip and my second tip is actually not so much related to one specific person, but more of a process that you can follow.

So the way that I actually find inspiration and my design work is that I go and look at apps that I really love and I think, are really well designed and then I look for the developer that make them and then see if they talk about their Design process and their thought process somewhere online, so it could be on Twitter, it could be a podcast, it could be a blog anything and so like for me. It’s following Marco Arment following Marc Edwards and Jared Sinclair, but you no longer post about these stuff, but regardless of the people that I follow, you should just go.

Look at the apps eula look at look for the people who make them and then see. If they talk about their thought process, because it’s really helpful to see how they arrived at the design decisions that they made – and I think that will make you a better designer by doing so so when I meet someone who’s trying to figure out how to just Get better at being a UX designer or a UI designer, and I guess my answer is kind of going to be a bit more boring and tactical than everyone else’s.

What I get them to do is look at the guidelines for some of the biggest platform, so, for example, iOS so for any Apple device like iPhones Apple, has their own human interface guidelines. In fact, there’s a whole webpage dedicated to all the different interactions. All the different animations, all of the different kind of rules for designing products on that platform and the cool thing is there, are really just two platforms right: there’s iOS and there’s Android, and both of these platforms have really excellent documentation.

Both iOS and Android. Google has material design and Google’s material design. Documentation is beautiful. It’s really amazing. It’s really clear, and I think that one really big problem that I see with a lot of designers, is that they’re sort of learning, UX design in an abstract way or they’re learning like UX and UI design from apps that are on the market or from dribble And these apps are already breaking the rules because they’re you know, the people who are designing these things are often so good at understanding the basics that they know how to break the rules, whereas I think it’s super important to know the basics and even some of The best designers, I still sometimes see them using like a you, know, modal pop-up, when it doesn’t make sense having a back button when it doesn’t make sense.

I think it’s important for a designer to know when, when you tap on something, how do you know whether it should come up over the screen, and how do you know when it should slide in from the right – and I think things like that are super important To understand and to understand those things, look at the guidelines for iOS, look at the guidelines, the material design guidelines and, honestly, I think, that’s like it really.

It seems like a really basic tip, but I checked the guidelines every so often when I’m when I’m stuck and I’m wondering Oh like, should this be an overlay or should should this be? Should I have the tab party and I think those sort of things are easily answered when you go and look at the systems and the design systems for in these larger platforms and the documentation is really really great. So that’s my advice.

Hi I’m Dee. I’m a product designer designed to infer Scylla, Teta and designs for an educator at AJ and smart and my top tip for progressing your UX product design. Career is a bit left field and it is volunteering at events, meetups conferences, volunteering to even just do really simple things like helping like run the event move chairs around get coffee all the things that seem like you have more important things to do.

Volunteering for stuff, like that, will just expose you to other really cool and probably more senior people in the industry who are running these kinds of events. You have probably very interesting careers because they’re choosing to run a conference or run an event of random eat up. So that they can share this knowledge and their passion for their industry to the rest of the world into the design community.

So exposing yourself to tons of senior people who really care about what they do and you’re, probably exposing yourself to a ton of information as well. You’re, probably getting a free ticket to the conference being able to meet all the people that come to the meetup and just exposing yourself to to more opportunities in your career and more passion excitement in your work, but there’s one caveat I have for this tip.

Is it will not work if you’re just using it as a little hack, and you don’t actually care and you’re not actually enthusiastic, but if you’re super enthusiastic to get into the industry and super enthusiastic about in your field about UX design or product design or whatever It is if you’re really excited about it. This will work for you. This is this work for me from the very beginning of my career, I’ve been doing this volunteering and also running events, and I love it, and it’s made a huge impact on my career.

I’ve met people who have offered me jobs, then from these kinds of things, so it will work as long as you’re excited about it. My name is Rob. I am a product design director here at AJ, smart and my top tip for becoming a better UX designer is to just be really aware of new products that are coming to market, and you can gain a lot of inspiration and you can also learn a lot From how like new UX problems have been solved, but also, why would I’d like to add to that point? Is that you don’t have to be kind of restricted to what’s been done, always questioned whether something can be made more streamlined, more intuitive or just more easier to use so use those as a benchmark and then feel free to kind of do anything to them? I try and do download an app a day and it’s just good to kind of really broaden your horizons with using your apps and there’s so many.

Obviously this needs so many apps. You can never keep up with them, but it’s just good to kind of keep your hand in that and there was becoming the benchmark for best practices within designing mobile interfaces. Hi. My name is Tim. I am the product design director at agent, smart and I’ve been in the design industry for over 10 years. Now I started off as a: u accent your eye designer for agencies, so one piece of advice that I would give is to find really really good mentors to learn from.

I really liked working with people who have a clear attitude or towards the work that they’re doing for clients and who didn’t just treat it as this kind of like random thing, allergic they’re, just kind of like doing their magic, and nobody really understood what the job Was so they had a very, very good like like a clarity to them, how they conducted themselves in their job, and they could also very clearly tell you why they were doing things in a specific way, and I would recommend everyone was starting out to look for People like that and ask them a lot of questions and working with people who already had like a long track record, definitely helped me because I think, especially in the beginning, you were feeling kind of lost, because it’s very overwhelming you know doing like working in your First job and some company and realizing that you were a little bit out of your death, so yeah.

I think if you just find one or two persons like that and you get to you, get them to share their experience with you and almost like. Take you under their wings and work with them. More often, it can really help, and I mean usually when you have a relationship to people like that they will also be the first one who approach you would ask you to work on something with them, because they know that you’re, a person who is actually really Interested in doing great work with them, and you really have to to show that you – you want to do these things and that’s super empty, but that’s my so.

I really hope you like reading this article and I hope, there’s a few things in there that you can take away. Do let us know in the comments, if you have any other questions or if you’ve any other tips for us and give this article a like. If you enjoyed it now, if you’re interested in learning more and more and more about product design, we do have a weekly podcast. Every Monday morning called the product Breakfast Club podcast also check that out ton of free stuff.

We’ve got some really great guests on the podcast, like Jason freeze like Kim’s, got lots and lots of other guests. So if you’re interested in the product, design or tech world definitely check that podcast out and have a great week bye bye because it makes us feel popular. Oh I’m sorry is us a Jane smart at office.


 

Categories
Online Marketing

Learn UX & UI Design for FREE (Our Favourite Courses – 2019)

That’s right! No money, no problems, because this is all for free, so this article is going to be really great if you’re, just starting out in the UX UI product industry, I’m going to actually take you into my laptop and show you around 10 to 15.

Amazing resources that you can use literally right now, you can start today to learn UX UI product design to get a little bit of inspiration. These are going to be some really nice resources that I’ll just kick you off in the right direction: they’re, all free! You can start them all right now and I’m not talking about you, know, articles and articles, I’m talking about like full-blown courses and really needy needy resources that will help you learn.

I have so many resources to share with you guys today, I’m going to stop talking and start showing, so, let’s dive into the first one. We have a free online course from Udacity. Now Udacity is a is a platform that has tons and tons of online courses, and actually a lot of them are for free to start, and the thing is, you can then move into the paid program if you’re really enjoying it or you find you’re getting a Lot from it, so this one is called product design, it’s actually instructed by people who work in product design at Google.

So you know that it’s you know legit. Basically, the whole idea is it’s about validation and UX through design sprints funny enough um here at age, 8. Smart. We do a lot of those, so it is free. It’ll. Take you about two months um, so it’s a pretty robust course, which is nice and the skill level is intermediate. So I think that this would be nice for someone who is actually, you know knows what UX is knows what product design is but needs to get a little bit more of those hands-on basics.

All you have to do is how you sign up you sign in to get started. It’s super easy, and actually it’s the you know the free courses, of course, leading into the nanodegree program. Your course leads here. Our crisp sadden and amir Chevette great names. Both of you guys and here’s the cool thing, you have these four kind of key lessons, so you’re learning, ideation and validation, you’re, learning, UX and UI here, so you’re, actually learning how things should look.

What’s kind of a standard in the industry, you’re learning about the design sprint, which you know we happen to know a lot about, so you could learn that on our blog as well, but they’ll go into kind of the basics behind that, as well as key metrics. So how to actually identify metrics for websites and apps relating to you know, traffic, customer satisfaction and engagement. So this is a really nice course that you can just get started and see how you like it, and then you can move on further from there.

Okay, let’s jump into the next tab. I have here this one is from envision. I really like this because it’s a it’s called design talks and it’s actually webinars and kind of online talks about product design, UX design, thinking all these kinds of things and they’re all coming from experts right. So you actually have people from you know this guy is from Airbnb Dan Howard, Dane Dane Howard from Airbnb and he’s actually running one of these talks about the future of UX design.

These are the kind of thing that you can really like get really needy needy. I really love that word today. You can get really great advice from these people they’re, actually working within the industry and, what’s really cool, is there’s tons of them that you can read. Look at all of these they’re all open, free and really just like you’re, going to get some really in-depth insights through these, and then you can sign up if you want to read them live as well.

So that would be our second resource from envision. Very, very great okay. Moving along this is one of my favorites that I found. Actually, this is a design better and it’s called the principles of product design. So this is a little bit more of the basics, but it’s super in-depth and I’m really like nice to look at easy to read. You’re actually talking about you know the core best practices that are going to help you build a design better, faster and more collaboratively.

So it’s you can download the whole thing, but then they also have it outlined and all and all these chapters so like I really liked this one. This chapter two is all about. Let me just go to chapter two here: it’s all about story, storytelling! Oh, that’s! Actually happened one time before, or maybe it’s a problem with the site? Okay, so this is chapter number two that is all about like storytelling and how to actually do that, and it’s not just like this very kind of you know ambiguous talk about how storytelling is important.

It’s actually going into super detailed of like how to actually use a narrative framework for your products super great, and then we also have this guy here, who is Kevin, Chang from incredible labs and he kind of walks you through how he uses storytelling in his daily Work so it’s really high, like really high production value, which I kind of appreciate. I like that, when I’m learning I like to be entertained as well, but, what’s really cool, is they talk about creating user journey max-width through storytelling? Also down here? There’s some really nice.

Visuals tons of nice articles, so the whole thing is really nicely laid out for you. It makes a lot of sense. You know what I mean like you can go through this whole sort of chapter and you really feel like just getting some really great insights. So it’s going to be really really helpful for you. There’s tons of nice little articles that pop up there’s even down here when we talk about personas, there’s, like kind of like a little worksheet that you can actually go through to help you.

You know just get that started if you’ve never done it before it might be something that is a little bit new to you, creating an actual user persona for this product that you’re making so really highly recommend this one it’s from InDesign better, which is actually from Envision as well so those envision guys they’re on it in terms of education right good, so the next one that I want to bring up is actually a Coursera.

So Coursera is obviously an online if you might already know about it, but it’s an online platform that has tons of courses on it and a lot of them have sort of a free start. Like a you know, free chunk at the beginning, and then you can upgrade if you, if you want to a lot of times with these online platforms, they’ll give you the the kind of mini course for free. They just won’t, provide you with this certificate.

So if you’re, just at that point where you’re curious about you know how UX works and you want to see if you’re really interested in it or you want to get that nice boost at the start of your career, these are some really great ways to do That so Coursera has introduction to user experience design. That would be a really great one to start with, it’s going to give you the basics. This focus of this course is to introduce the learner to use her experience, design pretty straightforward, just describing what actually UX is they go into some nice details as well? You can see here, there’s also tons of other, very similar courses.

So once you finish the intro, you can then move into talking about information design, maybe user experience, research and prototyping. That’s a really big one for us, especially the design principles. So you can even get into the nitty-gritty of like visual design as well so Coursera. I would highly recommend checking that out as well, not as visually nice to look at have to say, which is a bit of a downer in terms of you know, design courses, but oh well, okay, this is another one, so this one is called a future learn Future learn calm.

They have tons of courses as well. This one is a user experience course. So you’re going to learn about why user experience and UX is important. The research and design basics and the tools and testing techniques used in UX you’re getting a little bit more detail in this one, and what’s nice about this, is they kind of have laid out? You know your studies and how you should actually do it. So the course will last about three weeks and the the idea is that you would do about two hours per week.

So this is great if you have another job, that you’re doing full-time, because really committing two hours per week for a course is doable with a full-time job as long. So this one is really nice. You have these nice articles as well, so they go through what topics you’re going to actually cover by the week so week. One is why is user experience important so you’re learning the foundation and actually looking at what good usability really is week, two you’re going through user experience, basics, so the importance of user research super important user journeys, visual design, structuring your site, wireframes and interactive prototypes.

So in a lot of ways, they’re taught they are going to be focusing on web design. For this, but also super I mean when it comes to user research journeys and visual design, it will be very similar and then week three is tools and testing. So you’re going to talk about user testing, interaction, design and the importance of analyzing data, so actually a pretty robust course for just three weeks and is full free.

So right, how can you not love it? They also have other courses as well that you can check out tons and tons. You can look them all up here. Short courses, they’ve got in-depth programs and they have online degrees. So you can definitely start here and then take it from there. Okay, the next one that I really like. Actually there I have a couple of these kind of similar ones. Coming up, this one is called hack design and it is a design course, but actually really great for people who are maybe a little bit lazier like myself.

So this is actually you sign up with your email address and you get on a weekly basis. You get delivered the course, so it actually kind of eases you in to the the actual content and basically it’s you have all of these instructors as well. So these are people who are actually working in the industry, which is so important. I absolutely hate it when you’re learning from someone who used to work in design you know years ago, and they aren’t actually, they have no idea what’s going on in the current landscape.

So super important and a variety of opinions and an instructor’s which is also important to get out of your you UX design education. So you sign up with your email address. You get curated lessons every week and you’re learning at your own pace. You can, you know, have your other job and your life, which is important, so hack, design, highly recommend checking that one out, okay, the next one, is from envision.

It’s called principles of UX design and this is another one where actually you’ll sign up with your email address, and you will get one email chapter per week on the guiding principles of good UX design. Doesn’t that sound, lovely, so you’ll receive the following chapters? There’s nine chapters here: what is you user experience UX as a practice and the roles that make it up project planning and process? So this is really good.

Actually, if you are good planning on going into a company to work, so you’ll actually get a good idea of what it’s like working on a product team which you know before you actually go into your first job. There’s really not a lot of ways of finding all that out: what’s user research, what are the persona, what are personas and why they’re important information architecture, visual design, presenting and participating in UX reviews and then beyond UX, which who knows what that is right? I have no idea I like that they keep it in big ewis.

It’s really good. Okay, let’s move on to kind of one that you might actually already know about. It’s called lynda.Com, so this is from LinkedIn. You might already know it now. Actually, the Lynda courses are not for free, however, you can get a free, so it’s like you know you can have a free month trial. So why not make the most of it right sign up for a free month, trial and then just like enroll yourself and tons of courses? Maybe just do one or two just would make you actually make sure you actually do it.

But there’s really like look at this practical UX weekly. You have UX design for developers, that’s great sketch for UX design. This is really cool. Actually, so you can actually learn these hands-on tools. Let’s see what an experienced designer or someone who’s just getting into UX or product design sketch is an amazing tool. It has all the features you need to design for digital devices and screens, and it’s easy to use.

No matter your level of experience. Doesn’t she sound excited to teach you? I actually think this is really great, though, because not often do you get these like free courses that are about a tool, and you don’t have to flood through, like all of the YouTube blogs, to try to find someone who’s? Actually explaining it well, so that’s really nice and there’s tons of them. I mean. Let me just go back.

My computer’s failing me today, so become a UX re, become an easier experience, designer UF’s research Photoshop for UX design, figma for like its endless on Lynda. Actually, this is really really great, so if you can just try it for a month, see how you like it and then maybe you can even sign up for for a little while longer just to kind of improve your skills. I have so many nice courses and tools here, so the next one is very, very cool.

This is all about material design and now. Material design is, of course, Google’s design, guidelines and they’ve released this. To give you a really nice overview and deep dive on material design, how it should look, how it should feel you’re going to talk. Colors typography shapes interaction, it’s really a nice nice resource, so it also looks really nice. Thank you, google. So the next one I’m going to show you is Envato now Envato is a market place for a lot of different things.

You can find graphics, you can find themes you can find like basically anything for kind of media and design. So thanks so have a lot of really nice bite-sized courses, so you can actually look up in this category. You can click. I want you X courses. I’ve had already clicked a lot, but here is all of the UX kind of based courses, and, what’s really nice is they’re like 43 minutes long, you know 37 minutes long and they’re about all kinds of things so like this.

So why the secret of good UX design is saving users time everything you need to learn about. Customer journey mapping, um, there’s even one from our friend Dan ski about Adobe XD, Daniel white. It has a really nice YouTube blog check it out. We’ll put the link. Is below if you want to learn anything about like Photoshop, he is just a really nice visual designer so and vados. Definitely one to check out if you want just like little bite-sized pieces of content or little courses.

If you don’t want something, as like, vague and robust as what we looked at before so now, I’m actually going to show you something that is quite cool. This is just on medium. The UX collective is is basically a publication on medium, but this guy – I love this, so he calls it his ultimate Start Guide for beginner UX UI designers in 2019. He’s been collecting all of these things that have helped him in his career over the past 5 years and has put them all here for you, so this resource is going to be really great for someone who’s a true newbie write to the industry.

He talks about how to you know, get in touch with your community, how to like the actual basics, behind design and and some nice tools that he’s used throughout his career. So really it’s a nice easy and it’s just full of links. I love it when people just pump their articles full of links and that’s the reason why I actually showed this because I didn’t want to show just articles, but he shows so many nice nice articles.

He even talks about like design companies that he’s following, and you know their blogs and you can find all those here. So Bravo, sir, let’s see Johnny vino well done, sir. I really enjoyed this and I think that you guys will find it really helpful as well. Ok, the last two are actually just magazines that I think are really really great to stay in touch with design principles and to learn a little bit more about the industry in general.

The business behind design Smashing Magazine is really great, so I mean every day. Basically, there’s new articles about UX about product, about strategy, I mean these are things that even if you’re a dinner in this world, you need to know about the business behind the product and like what the strategy is behind the business in order to really contribute. In a real way, so I think that it’s really important to read, I mean yeah.

These are really great. Some are a little bit more intricate than others like design and lead gen landing page for mobile. That converts that’s a little bit like you know, pretty! That’s pretty detailed. We also have things about like UX privacy even have like sketch versus figma, Adobe, XD and other UI applications. So you can really get a good idea of what people are kind of thinking. What they’re saying what they’re talking about right now in the industry and that’s the same same goes with this mueslix magazine, which is also on medium measly, is really really great.

It publishes all kinds of articles for all kinds of different people, but all around you X, design – and you know, product design, so you’re going to have things from like things about typeface Helvetica. You know you could also have things about more kind of like strategy. Deep-Diving yeah like what I learned from trying to redesign the online craft market experience. This has really detailed stuff, but learning these kinds of things are going to be able to help you to talk about UX, more fluently and be able to actually like pull from different things that you’ve read and learned.

So I think it’s really important to always stay updated, so things from you know just simple design stuff to more like talking about. Let’s see here like a cake, like really nice case studies, Beasley is actually really great about it. Oh look. This is Johnny vino again he’s popping up again but yeah. He has some really nice case studies and everybody loves the case study that gives you a really nice look through the process of design from initial concept to actually delivering to the App Store, for instance.

So that is a whole bunch of free resources that you can use everything from actual, like thought-out, specific courses to little bite-sized pieces of content. If you just have a few minutes – and you want to learn something really fast. All of these things, though, that I’ve shown you are going to help you get a really nice overview of what UX is what design actually means. It’s going to show you some of the tools that are sort of standard in the industry, and then it’s also going to be able to show you.

You know some best practices behind how you know the industry is currently working, and that is a really really great start if you’re interested in learning a little bit more about UX design. Thank you guys so much for reading. I hope you enjoyed this article. If you did like it, I would love if you hit the little like button and if you haven’t subscribed already, you definitely should we have tons and tons of articles on our blog, as well as new articles coming out weekly about UX design, product design, product strategy, The business behind design, it’s really we’re working really hard to make some nice content for you guys they subscribe.

Also, if there are some resources that you’ve found that I didn’t mention, I would love if you mentioned them in the comments. That’ll be really really helpful for all of the viewers as well. So thank you very much for reading. If you want a little bit more from us and you’re, just like I’ve, readed everything on YouTube and a lot more, what you can do is follow us on Instagram. We have daily vlogs.

Is it a vlog, its own Instagram, daily stories? We have daily stories about? What’s going on in our agency, and we also are always sharing valuable stuff there. We have a Facebook group called innovation, hackers, it’s excellent, it’s a bunch of people who are sharing innovation, practices, UX design principles. It’s a really really nice group, that’s very, very active. We also have a podcast if you’re into podcasts and product design, then you should definitely be listening to our podcast.

It’s called the product Breakfast Club, it’s featuring Jake map, the author of sprint and Jonathan Courtney, our CEO, and they are talking all things products I’m so definitely tune into that one. Thanks again so much for reading. You guys we’ll see you in the next article have a great great day, alright guys, what’s up I’m Brittany from AJ and smart, it’s what’s up a little bit. Did you like it yeah, I don’t know.

What’s up is really on brand for me, but I’m going to try it it’s new love. It ok, irritating all right. You and your balance calendar you this yeah. That’s right! No money! No money! No problems! No money, then we’ll problems. What is the thing? It’s like? More money, more money, more money, more problems; well, you’re disturbing now,


 

Categories
Online Marketing

Design Systems with Brad Frost – The State of the Web

My guest is Brad, frost, web designer and author of atomic design and today we’re talking about Design Systems. Let’s get started so Brett thanks a lot for being here. Thanks for having me, I want to show off by asking you: has the metaphor of a web page exceeded its usefulness, yeah, it certainly has, as what designers we’ve been thinking about.

The web is in terms of pages for a long time right, it’s been with us since the web’s beginning right. We scope things out in terms of pages. If things don’t load in the browser says this web page hasn’t loaded and that’s had a really big impact on sort of how we structure our teams, how we scope our projects and how things are actually executed from from a web design and development standpoint. So, for instance, I work with a lot of large organizations and so they’ll have a team, that’s responsible for the home page and then they’ll have a team, that’s responsible for the product page and another team, that’s responsible for the checkout page and all of those teams Are doing things sort of independent of one another right, because they’re just focused on this notion of pages and as it happens, all of those pages are actually made of the same stuff right.

If we were to break things down, you have buttons, you have form fields. You have blocks and cards and heroes, and all these other things – and we end up with whenever you have these different teams working on different pages and thinking about things. In that way, you end up with you know one button looking similar but different than the next team, that’s working on the next page and so on and so forth, and you, you know, repeat that a number of times and span that out over a number of Years and you end up with a giant mess on your hands, it’s not to suggest that we should stop using the term.

It’s probably still useful for users. Yeah only see things as a flat page, but from a design and development perspective. It’s kind of updated yeah. Yeah, that’s right exactly it’s it’s! It still comes together as a cohesive whole and I think, that’s important, especially as people get into talking about design systems. A lot of people have a big misconception that oh design mean you just sort of isolate things at their component level and just designed the button and just design the sort of headings and just designed the card in isolation.

But that’s just not true. That’s you know. It’s important to sort of realize that yeah things do all of those components, do come together and form a cohesive page at the end of the day and that’s what the user sees and interacts with. So it’s important. It’s not an either-or thing, but we just have to be more considerate about how we make the parts of that page as the web and technology as a whole progresses forward.

How has that changed the way that web designers think about serving pages to users and the ways that the websites are accessed yeah? Well from like an access standpoint or from like a design and build process? The fact that a user could be I mean even these days like accessing the web from their refrigerator. You never know the form factor or anything about the user’s device. You can’t make any assumptions: yeah yeah, that’s right and again it’s gotten really complicated and that’s why I think design systems have become as popular as they’ve been because the devices haven’t slowed down right.

The device proliferation is still happening right. The number of contexts – and you know, screen sizes and form factors and, and you know, yeah native web embedded devices different screens. Different sort of you know. Mouse and keyboard touch inputs, and you know voice and, like all this. Other stuff is just the amount of things that users have or that that designers and developers have to consider as they’re, creating user interfaces and creating these experiences I’ve just sort of accelerated, and we can’t keep up right.

We can’t create bespoke pages, for you know: here’s our small screen view and here’s our tablet view and here’s our desktop view. It’s it’s so we’ve had to sort of pull back out a necessity just because we’re on the hook to deliver more features, more services to more users and more context using more devices in more ways than ever before, and it’s like unfortunate. Our budgets have been increased and our resources haven’t increased with that same sort of exponential curves.

So that’s what’s like sort of forced us to sort of step back and and reconsider how this all gets done, given that there are so many different viewport sizes and everything does that mean that the flat Photoshop file is no longer very useful as a means of Conveying the design, yeah, yeah and and still to this day, I’m working in if Photoshop might be a little long in the tooth when it comes to web design, but same thing happens in sketch in figma.

Just last week I got from the clients designers, you know a mobile version of the comp and a tablet version of a competent desktop version of a comp and and a lot of that’s just sort of wasted effort. Really because all three of those things in isolation are sort of one they’re already alive, because it’s a picture of a website not an actual website, but all those spaces in between is where things really fall down right.

You can sort of paint a picture, especially in a in a static design tool where there’s artboards and you could just sort of move things around in free space like that’s, not how things work in the actual browser right. There’s things like some order considerations and all that you can’t just sort of go on this side screen. I just want to move this from here to here, or this I’m just going to swap this around it’s it’s.

It’s really important to sort of make sure you’re. Considering the actual medium that this user interface is going to come alive and and do that much sooner in your process, I want to ask you about concept reviews before called design Det. What does that mean, and how do you avoid going design bankrupt? There’s no design debt and design bankruptcy. I’ve never actually heard design bankruptcy. Before I like that, I I think a lot of places could declare its design bankruptcy.

I think you know just when it comes to design debt. It’s you have. You know number of teams working on different things and just those we were saying you know working on different pages or different products right across a company and you sort of can can take a cross-section and sort of see a lot of discrepancies. Just in that. But that’s just one moment in time when you stretch out that process over time, especially products that have been around for a long time, the googles of the world or eBay or whatever it becomes like a little sort of Benjamin Button.

Like experience as you click through pages, you get further back in time in these older crustier user interfaces, you’re like how did I end up in 1999 and all of a sudden? So so I think that that’s sort of that sort of that visceral feeling of design debt where it’s like you have all of this sort of old stuff that was created. It’s you know once upon a time and that whenever that was launched, it was the new hotness and the new hotness becomes the old crusty experience.

You know pretty quickly these days right so so I think that the more sort of deliberate and the more sort of systematize you could sort of control and wrangle all of those those sort of user interfaces that are, you know out there in the wild. The better. Your chances are going to be as sort of like reducing that that sort of design debt and that’s again, I think, a big crux like that. The crux of design systems is to sort of help.

You know eliminate that debt to basically take those $ 19.99 designs and say: okay, we’re going to update them with a new design language, but we’re going to do it in a very sort of systematic way so that the next time we do a big redesign. We have actual hooks in there that we could actually sort of lift up the quality of in you know so to evolve that design language like flip the switch and roll that out to a bunch of places, sort of simultaneously or or in very short order.

Instead of like, oh, we have to do this big monolithic redesign, and we have to do that for each of our products again and again and again so the developer experience must be a lot better when you can have like a single source source of truth. For your design, but also the user experience as well, could you describe like what it might be like for a user to be on a site that has designed yet yeah? I mean it.

This happens all the time I mean so. The e-commerce example is a great one, just because I think that you know ecommerce sites, you know super sexy homepage or the super splashy super current right. It’s like it’s got the latest. You know shop fall trends, their shop Christmas like coming up or whatever. That’s like you look very campaign driven. So it’s often like a very modern experience. You sort of like click into like that.

Maybe a product detail page or a product category page that sort of feels modern ish. You know it’s like sort of a little bit more meat and potatoes like e-commerce stuff. So it’s like those templates sort of probably feel pretty good, but then, like you, might get to the shop card or if you like, actually log into your account, it’s like those things feel way different and and then you get to the checkout flow.

And then you know that might be sort of way long in the tooth or it might be sort of built by you know an external vendor or something because they’re processing, credit cards and stuff like that. So it might not actually be integrated with like the rest of the site at all. So what ends up happening for? Why that matters from a user experience standpoint? It’s not just about other things, look different like because who cares as long as that’s effective, then that consistency shouldn’t ever be like the number one goal of any of this, and I think that that’s when we talk about Design Systems, I think that’s another misconception as That, oh, we just want everything to look the same everywhere and that’s just really not true, because if your metrics are doing well and stuff – and you know the buttons look different on the checkout page then on the the product detail page, then that’s fine right! No harm no foul, but the problem is, is whenever you’re, a user and you encounter say a date picker or something – and this is a favorite one of mine just because those are hard to build so often times developers just sort of go and grab something.

You know a library they find on the internet somewhere and if you’re, you know say like at an airline or a hotel chain, and you have four different developers grabbing four different date – pickers across the site. Now, all of a sudden, every time the user needs to pick a date, they have to relearn that new library and that, even if it’s just fractions of a second or a second or two or the, where they’re like oh wait, I’m used to booking from the Homepage, but this is a different convention that slows down that process right and that has a negative hit on you know, certainly when you’re talking about you know booking flights or hotels or something that’s going to cause it dip.

So that’s sort of consistency from a user experience standpoint right that ability of like oh yeah. I’ve encountered this pattern before and I know how this works. So I could just sort of roll on and sort of fill things out a lot faster or interact with this thing faster like that’s. That’s what we’re after right, so that consistency for consistency sake not so much, but consistency from a you know, sort of mapping to what users are used to already like yeah.

That’s, that’s! That’s where it’s at one of the people, problems on a design and development team is not sharing the same vocabulary or calling the same components: yeah consistent yeah. So what are some of the problems of that? And how can designers and developers get on the same wavelength? Yeah, so that’s one of the biggest things that I encounter is as an one exercise that I like to do with design development teams whenever I’m working on design systems with them is right out of the gate, we conduct what I call an interface inventory, so we Basically go across their entire sort of suite of products, or you know, whatever user interfaces could be served by their design system and and sort of divvy things up is like okay, you go hunting for buttons, I’m going to go hunting for sort of.

You know input fields or whatever, and then we sort of do that as a group and then what we do is we get together and sort of present what we found to each other and that’s where it’s really fun, because, especially whenever you have designers in the Room developers in the room, QA engineers, business people in the room right like the product owners, like all these different disciplines and you actually sort of have to articulate what your UI is right.

So so somebody will get up and it’s like. Oh and here’s this admin bar and then somebody gets admin bar. We call that the utility bar right and then the developers are like. Oh, we we just mark that up as the gray bar right, and so it’s like. Okay, there we go right. You got everything out on the table right, these inconsistent names for the same thing, and of course that means you have to have again just like that sort of user experience you have to like slow down.

You have to have have a meeting to figure out what you’re going to call this thing like, and you know a lot – can get lost in translation in between design team or different disciplines, but also different teams in general right. If team one is calling it a certain name and team, two is calling it something else. That’s a big deal right, so so again, so bringing this all back to Design Systems. What that it, what a design system can do is sort of centralize your sort of UI patterns call them names right, give write guidelines around them, so that everyone is like, literally speaking, the same language right.

They know what you mean when you say utility bar, and you know how to use it where it’s useful, but also crucial. One of the other things that we found really valuable in in creating design systems for clients is here’s. What this thing is: here’s where it’s useful, but also maybe here’s some gotchas or here’s where it might not be useful, and maybe you want to use this other thing. Instead, what are some of the trade-offs of investing in a bespoke design system versus taking something off? The shelf, like a bootstrap yeah, that’s a big one and I’d say it’s tough, because tools like bootstrap and material design are already made.

They’re they’re, they’re well tested right, they’re in use by giant companies like this company called. Have you heard of Google before it’s like? It’s pretty big one. It sounds familiar yeah, so so a lot of these people right who are using tools like bootstrap and material design, they’re like oh, this has been tested by these. You know giant companies, so I could just sort of grab this and go and I don’t have to do all that work myself and that might be true and there are sort of instances of that um.

I think one of the big things that is important to sort of recognize and consider whenever you’re reaching for these tools is that it’s like you, don’t own it and it might be attractive from sort of you know, inefficiencies sake at first but as time goes on Right at the end of the day, your boss or your you know your product owners or your clients or whoever they are they’re going to say. Oh, we need to do this this way or we need to add this feature and all of a sudden, you’re you’re.

You have to learn and become sort of fluent in this other sort of system that you didn’t write, so so it can work and you can do things and extend things and customize things that works with the grain and these frameworks, but oftentimes. What I found is I work with clients that end up sort of working against the grain and they end up having to sort of undo a bunch of stuff and write a bunch of other custom stuff.

And then they end up in this sort of like weird messy middle ground, where it’s like. This is our sort of hacky stuff that we’ve done to sort of make things our own. But then also crucially, I’ll say that, from like a more of like a front-end architecture standpoint, I think that it’s sort of like safe, you know you got good bones to build upon, but like material design and boots actually offer a sort of anesthetic right.

They provide anesthetic and that could be helpful because again it’s like oh here’s, some good, looking buttons, here’s some good, looking form fields, here’s some good, looking components that I could use, but if Nike Adidas Puma, if you know Reebok whatever, they were all to use bootstrap For their redesigns, they would look frightening Lee similar right and that’s sort of not what they’re going for so there’s like there is this sort of branding aspect of it right this own ability that sort of gets lost whenever you’re sort of all using the same thing.

What are some of the challenges or unsolved problems of design of design? I mean I, I think, sort of specifically to design systems like a lot of there’s some things that are around sort of you know, tooling, and sort of figuring out how to keep design tools and tools, expanding quiff. You know what’s in code, that’s definitely one of the most. I feel like tangible sort of problems that but there’s a bunch of teams, doing a lot of work to try to solve that and startups and stuff that there are really exciting.

And so a lot of them look promising. And I don’t necessarily think that that’s you know far and away the biggest problem. That’s out there. I think so. Many of the problems with with design systems have to do with the sort of people have to do with communication and collaboration and sort of figuring out like how do we get this stuff adopted into our products right? How do we sort of communicate when things aren’t working as planned like? How do we sort of you know, establish solid processes for releasing new versions of the design system and letting everyone know like here’s one? You want to use the design system or here’s one.

It’s sort of safe to sort of you know, deviate from that system or build upon it or extend it, and how do you roll that back into the system? So a lot of that sort of coordinating a bunch of different people who are all suddenly relying on this, this design system product that stuff, I feel is – is still very tough to crack because it involves people and your you know the health of your your you Know design and development culture and like how well everyone sort of you know, collaborates together and like, of course, that’s that’s tricky right, so you could like you.

Could I could say things like here’s how I would create a governance plan for a design sister for a design system and here’s how I would you know, get these teams to work. You know and communicate more buts and you know easier said than done. Okay, so how much of a design systems success depends on the designers as opposed to the developers? What is their role in the success of it? I think, and – and this might be a little controversial design systems is sort of an unfortunate name because design systems are like.

Oh, this is about design, and it’s really not. The design system is, as I define a design system is, is how the official story of how an organization designs and builds tadaryl products and there’s a lot of ingredients to that story. And yes, like the design language, you know what what the brand colors are, and you know the the rounded corners or not of the buttons and stuff like that sure that that matters.

But that’s actually like a pretty tiny slice of what a design system entails, and so so when it comes to the success of a design system. So much hinges on that design system living in code and living as a thing that engineers and developers can sort of pull down into their application and sort of you know import a component and sort of see that design systems button or whatever show up on their Screen and then they’re able to sort of you know pipe in whatever sort of attributes and click handlers and whatever to sort of make it.

You know, breathe life into it, make it real, but you they sort of get that stuff for free right. If all you have is like a sketch library or some like Zeppelin file or some like like little, it’s a style guide thing where it’s like: here’s, our colors and here’s or whatever, like there’s so much that gets lost yeah if all the developers are doing is Like copying and pasting some hex codes in there, you know sort of crappy like development environments, and it’s just you end up with a bunch of spaghetti, even if they’re all using like the same color blue.

It’s not like systematize right. So what you want to get to is, you want to say like if we change our brand color blue – and this actually just happened on a project of ours – got a brand color blue and actually it wasn’t passing the accessibility level that we wanted, and so they Actually had to sort of you know: tweet the the color blue in order to make that sort of pass. You know because sort of cut the accessibility, mustard and with a design system like you literally, have you know a variables file or is these design tokens? You sort of tweak that value there and then that ripples out to the entire sort of design system right and then that gets packaged up in a new release of the design system in code.

And then you know next time the developers pull that down. Those sort of get and see those updates, so so, coming back to it’s like yeah, like the design language part of it, like the look in the feel of it that matters, I’m not going to say it doesn’t matter, but it’s almost just like you’ll, like do Your thing make it look good like I, you know. I trust you be systematic about it right. Thinking about motifs that are going to sort of like you know, translate well the different components, but, like so much hinges on like getting that stuff into a place where it’s consumable by the actual sort of you know, environments that users will be interacting with your products And that’s what we spend, probably the overwhelming majority of our time and effort on is actually like building out those libraries with components right, an HTML, CSS JavaScript.

You know bundling that stuff up and like sort of working with development teams to make sure that they have what they need in order to use the system successfully. So, to what extent should a design system anticipate the chaos of user-generated content like errors and long names? What is the actual like breaking point of a design system yeah? Well, I think that the breaking point of the design system has everything to do with how well you consider all of that stuff right.

So if, if it’s user-generated content that you need to account for and you’re in your UIs, then you have to you know, consider things like character limits and things like that. But you know there’s many other flavors of that as well. You know internationalization right, right-to-left languages or just you know, German will wrap onto multiple lines, and things like that – and this is where I think again – sort of designing and building components in isolation is a bad idea because you could sort of you surf fall into the Trap of saying like well, here’s this like perfect scenario where you know everything’s filled in and the card has this nice sort of you know image I found from unsplash and it’s like really nice.

Looking and you know, as it happens, the users name is Sarah Smith and Sarah doesn’t even have an H on it, so it just fits so nicely onto one line and of course, the reality of of our user interfaces is anything but that, and this sort of Also comes back to like the trap, was sort of relying on these sort of static design tools to sort of handle that they’re up until very very recently, there weren’t even conventions in place to sort of handle like dynamic data, so that’s sort of how we handle That this is where atomic design as a methodology – I think, really shines.

So what atomic design does is basically helps people consider the whole the pages, the actual product screens in various states and configurations, as well as the sort of parts of that hole right. So the underlying components that build up those screens and at the page level of atomic design, what we’re able to do is articulate here’s. What our homepage looks like with this. You know the fall campaign with the leaves – and you know this tagline and this call to action button that takes people to this and and whatever, but then you’re also able to say, okay and then here’s what this that same page looks like in German or here’s.

What that that same page looks like with you know the Christmas campaign and oh that’s, sort of image that we’re using that has a bunch of Christmas ornaments that actually is sort of you know, impacting the the readability of the text. That’s sitting over that image or something like that right, so you could start seeing where the UI starts falling down and then what you’re able to do is is sort of take that and learn from that and sort of go back to that hero component.

At a more atomic level and sort of say, okay, we’re going to maybe add a variation of the hero component that adds like a little gradient overlay so that the the legibility of the text always sort of you know pops over the the image a bit more. So how we sort of do things like in our own workflow, with that we sort of will create sort of you know, try to represent the whole bell curve. So it’s like what does a card? Look like what does sort of like a kitchen sink card? Look like with like the maximum character count that you might be able to sort of upload as a user or something or what happens if the user uploads the profile picture, what if they don’t right, and so all those various states and sort of you know, mutations Of the other component, so to get that sort of commonly used case down.

Of course, as like a starting point but like you really do have to represent like here’s, the extreme and here’s the empty and sort of everything in between as well and the only real way to test. If that actually works is by sort of plugging in real products and Aereo’s into your user interfaces and by sort of having that best sort of atomic design system wired up where, like the pages, informs and influences the underlying components, you’re able to sort of make changes To those components with which, then, you know, inform and influence that the actual page design, so it’s sort of like a virtuous cycle between like the design system and the pages and screens that that system builds.

Finally, what resources would you recommend for people eager to learn? More about design, Cisco there’s a lot I feel like. I have a hard time, keeping up with them anymore. There’s a there’s a number of really great resources, one that I help maintain is a resource called style guides i/o, which is a collection of, I think, we’re over like 200 50 examples of public design systems and style guides that are out there in the wild as Well, as sort of talks and books and resources and tools around a design system, so that’s just like an open source resource repository that people contribute to and sort of, submit poor requests to.

There is design dot systems which is maintained by Gina Ann who’s done so much work for the design systems community. She has a clarity conference, which is a conference dedicated to design systems. We have a podcast, which is a little bit in hiatus, but where we interview people that work at different organizations who have spun up their design systems and what they’ve learned and sort of you know struggled with as they’ve as they’ve done it.

Stu Robson has a really fantastic design systems newsletter. That’s part of the design, dot systems, sort of universe there and then there’s also a slack group all about design systems as well. So I’d save it like that sort of has me covered for sure and again there’s like a lot of activity there and new stuffs happening every day and people are learning from things you know from each other and plugging them in at their organisations and sharing what They’ve learned and like that’s really for me, the most exciting part of all of this is just sort of you know.

Here’s some concepts here are some things that we’ve found useful share. Those people take them, learn from them validate or invalidate them and sort of share. What they’ve learned and then everyone benefits from it, so your book is also available for free to read online right where it is yeah yeah, so you could read it at atomic design. Brad Frost, calm great breath. This has been great. Thank you so much for pyrite.

Thanks so much for having me, you can check out the links to everything we talked about in the description below thanks for reading, we’ll see you next time.