 Hi, everyone, and welcome to our newest Hackathon on Air. Usually, we talk a lot about web performance, but this hour, we decided that we want to dedicate purely to design and UX. And as we promised in previous episodes, we try really hard to get experts in the room that you usually won't see. So this time, we invited Claire and Emily to UX specialists from Mountain View who are joining us, and they prepared a deck. And they will talk you through common design practices and how you can improve UX on various pages and through all verticals. And yeah, I would like to give over to Dennis, who's sitting in Dublin. Hey, everybody. Hi, from Dublin. Thanks, Dong, for the intro. Yeah, just very briefly, as always, if you have questions, please let us know in the live chat. That's what it's there for. Also, please let us know if the audience is all right, if you can hear us. And as said before, if you have questions after the stream, feel free to add us on Twitter and ask questions there as well. And now, without further ado, let's hand it over to San Francisco to Emily and Claire. Hey, everyone. My name is Emily Ferdinand. I am a mobile specialist. I specialize in finance clients. And my name is Claire Elmer. I'm a mobile UX specialist. And I work with our top growth segment across all different verticals. So really the whole spectrum. Thanks for having us today. Thanks for joining. Yeah, should we just jump into the content? Yeah, great. So what we want to walk you through today is a brand new type of event that we've been running. We've done four of them so far. And they're called Mobile UX Design Sprint Workshops. So the purpose of our presentation today is to share with you a lot of the best practices that we share at these workshops. And then also give you some more information on if you wanted to run a mobile design sprint workshop within your own company. So that's the goal of today. Sounds good. And so I wanted to start off before we get into the actual processes and the content, just talking about why we specifically focus on mobile as well as Mobile UX. And the number I really want to call out here is about 62% of people say if they have a negative interaction with your brand on mobile, they're actually much less likely to purchase from you in the future. And especially because mobile is really a lot more upper funnel. People do a lot of research on mobile. They may not be familiar with your brand. So this is your brand's chance to really win them over and by making sure that your mobile UX is really streamlined and helps the user complete the action, find the information that they want, that'll really help making sure that people move across device as well as are able to convert. And just a reminder that we really urge you to not think only about your competitor set. So the company is within your own industry or even within your market. But think about every single brand experience that your brand is being compared to. So when you think about the UX of Airbnb or Spotify, even Amazon, Google, these are the services and the companies that your potential customers use every day. And these are the interactions that they're comparing your brand and your mobile site to. And so briefly, I want to talk about the Design Sprint methodology and how you can use this in your company. So the Design Sprint framework, there's a lot of different companies that do Design Sprints. But the Sprint framework that we use was started at Google Ventures. And what is a Design Sprint is basically it's just a framework for answering critical business questions and mostly product challenges or product launches through design, prototyping, and testing ideas with users really rapidly. So a lot of the time in Design Sprint when you think about your product road map, usually maybe you have a long term road map of six months a year. But a Design Sprint is actually a much shorter time span. So it typically ranges three to five days and really condenses a lot of the work that's done to really solve challenges quickly and really iterate, learn, ideate, and then go through that process again to get to a final result that you can test. And so the Design Sprint, if you're not familiar, is really centered on this divergent and convergent thinking. So you can kind of see this in the triangles that we laid out. But these are really the different days or the different phases that you would go through if you're going through a Design Sprint. So really what you want to do is go through throwing all of the information out there and then deciding on what's important. Then throwing all of the ideas out there and quickly deciding on which ones you want to work on. Then prototyping as much as you can in testing really quickly. So you can kind of see this divergent and convergent thinking that really gets you to an end result in a five day period. So I'm briefly gonna talk about the five phases and how you would use each of these phases in a Design Sprint, even though we're not going to go through all five phases in the hour today. We wanna get an understanding of how each phase works. So typically if we divided this into a five day sprint, the first day is understand. And this is where you have basically throughout all the information related to the problem you're trying to solve. So you wanna gain a deeper understanding. A lot of times this involves looking through analytics, inviting folks who are really familiar with the problem or different aspects of the problem to give lightning talks. And you might do some exercises like affinity mapping to understand how can we group some of these solutions or problems or pain points that we're seeing. So this is the day where you get all of the information out on the table. The second day is where you sketch. So this is thinking about your user journey and the potential solutions based on all of the things you uncovered in the day before. So this is really brainstorming. We always say, no idea is a bad idea. You just wanna get everything out on paper. And we really do recommend doing this on paper as much as possible. This is the fastest and easiest way to make sure everyone is involved. The third day is decide. So basically sharing out all of your ideas and going through prioritization exercises. So probably in the sketch day, you've come up with a lot of different solutions, a lot of potential ideas. And this day you wanna actually narrow down to what the couple maybe one, two, three ideas you really wanna focus on, testing with the end users at the end of this process. Day four is prototyping. So this is why you really wanna make sure your design team is involved, as well as probably folks from engineering and marketing to really sign off of whether the things that you're working on prototyping are feasible in real life. But the end goal of this day is basically to generate a prototype, maybe a clickable prototype. It could even be a prototype on paper, something in InDesign or another kind of prototyping service and incorporate those technologies and best practices. And then the fifth day, which we don't do in our workshops, but is the most important part is really getting feedback and testing with your users. So you wanna make sure that you are testing every single thing that comes out of the design sprint process. And basically what happens is you wanna make sure what you're building and what you're launching actually works for your users. So this takes this really long product development or maybe product change process and brings it down to three to five days where you go through all of this and come out with something at the end that you can at least really test some hypotheses against the problem you're trying to solve. And so typically when we run these workshops, especially because we focus on mobile design, we also focus on the conversion experience because we see that this is where a lot of the advertisers and companies that we work with have a lot of trouble of helping their users convert on mobile. So we typically go in and we talk to our advertisers and the companies we work with about improving the conversion experience for mobile users. That's the problem statement and the goal. And then the outcome is to generate a prototype with this improved conversion flow incorporating all of the technologies and best practices and try to test and validate that within the next 30 days. And so this is a sample agenda from the sprint. You can see that we start with introductions, getting everyone in the team just to start talking. It's always nice to do an icebreaker, especially if in your sprint you have folks from different teams who might not interact all the time, like someone from marketing, someone from engineering, someone from design. Great to get the creative juices flowing. You always want to make sure that you really center on your problem statement. So we talk through that. Then we get into the lightning talks, which is that understand part of the design sprint. And so today we're actually gonna be going through the lightning talks that we frequently give on conversion principles, form optimization, sign in and payments, and then a quick one on speed. And then the rest of the day morning, typically in our workshops, is for some of those exercises that help with the understand and decide. So we do an exercise called how-mightly. We do affinity mapping, which is grouping a lot of the lightning talks and potential solutions. And we do user journey mapping and then vote on what the team thinks is the most important things to tackle during the day. In the afternoon, we sketch and we prototype. And then at the end of the day, we go through a sharing and feedback session. So even though this is only one day versus a three or a five day full sprint, you can see that we basically get through a couple top aspects of most of the days and sections, ready for you guys to go back and finish that fifth section, which is test and validate. And we'll share more at the end about resources, but we have a YouTube channel where we walk through all of these activities that Claire has mentioned and show you what you need, how to do it, so that you could potentially run these within your own companies. Yeah. And with that, I'm going to hand it over to Emily to start off our lightning talks. Great. All right. So we wanted to begin with conversion principles, which is the idea of getting someone into your conversion flow. So once they land on your mobile site, how do you get them to take that first action and begin the conversion process? I have six best practices that I wanted to share with you. As we go through, feel free to pull out your phone, take a look at your own site, see which of these you're doing and which ones you could potentially put on a testing roadmap. The first, and I would say foremost, and the easiest is to have a clear call to action above the fold. So I've tried to include some examples here of sites that we think do a really good job of each of these principles. In here, we're just showing they have a clear, bright, very obvious call to action all above the fold no matter what device you're on. So this is something that I think every company should do hands down no matter who you are. If you wanted to take that a step further, what we're seeing as a new and I think very successful best practice is using descriptive CTAs. We've had a lot of the next submit, just kind of very mechanical call to actions and people are getting sick of that. They want a little bit more of a personal feel. So using a descriptive CTA to tell your customers what they're doing next, just adds a little bit of personality to your site and a little bit more guidance for the user. So for guide code sample, you can see this says get a quote, then you start your quote and then you continue to purchase. So you get a little bit more flair, I would say, than just next, next, next. Additionally, when it comes to mobile specifically, it's very important to give your users choice. That means not just giving them one call to action and forcing them down that particular path, but also giving subsequent calls to action that you mark as there, but a little bit less important. So for these examples, you can see the primary call to action is blue and it's bigger, you can add to cart or you can get a quote. But both of these examples also give you other routes if that's not what you wanna do at that particular moment. So you can find a store, add to wish list, call progressive, find an agent. We often see on mobile that folks will send someone to, let's say a lead form and then get rid of the menu, get rid of the link back to the homepage through the logo icon. And that forces users just to leave if that's not the path they wanna take. So instead of forcing users down one path or making them quit altogether, you wanna make sure you give them options so they can find the path that's right for them at that particular moment. Cross device is something that we see more and more users wanting to do on mobile. Perhaps it's starting a large process and you're in the research phase and you're not ready to commit yet or you just have a short amount of time and you wanna get started. So to do that, there's a few great ways to do that. The first is to email yourself the information that you've started with. The second is to always have a call button. There's nothing more frustrating to users than when they want to call you, they're on their phone and they can't find the phone number or the phone number's not clickable. So making it easy for them to just pick up the phone they're already holding and give you a call is something that's very, very helpful to users and usually converts better from what we see on the back end. Do you wanna show the example about Zoomy's? Yeah, I think Zoomy's is a great example of someone who does this really well thinking specifically about their core user. So I don't know how many folks are familiar with Zoomy's but it's basically a teen or tween kind of skate streetwear store. And so their key audience is basically folks who are around the age of maybe nine to 15. And so they noticed that a lot of their, they were getting a lot of traffic on mobile. They were having a lot of people add to cart and then no one was checking out. And they thought, maybe it's because kids wanna come and store but then they realized what was happening was that all of the kids had cell phones but none of them actually had credit cards. So they could shop all they wanted and then they were basically sending their parents all of the things that they wanted for their parents to buy online instead of having to go into a store. So they actually added this email in my bag so that kids who had phones could easily shop, put together their cart and then email it to their parents to then buy. So this is a really great example of how they're thinking really critically about how their users are moving cross divides even between members. And so it's a really great use case of how to think about this critically. Another easy opportunity that we've seen a lot of folks decide to test in the mobile design support workshops that we've run is just adding the value props at every stage of the funnel. So giving users a reason to continue on in the process not just in the beginning at the end but throughout the entire experience. So here are a few examples from credible of their homepage, their product detail page their conversion funnel, all of these lists different value props that they have it's a great place for them to promote what makes them special and unique and also just gives the reassurance to the user of why they should keep going and why this is a great choice for them to make. So this is an easy when I'd say for a lot of folks to test you already know why your company is fantastic. So this is just a good opportunity for you to share that with your users. One thing too is I really liked that they think a lot about mobile formatting. So having bullets, not having a big value prop paragraph but just knowing that people skin and read headlines. And then last but not least another great one to test really quickly is using urgency and social proof to help narrow down decisions. One thing that really stops users from moving forward with purchasing we find is just an overwhelming amount of options. So this is a really nice way to narrow it down for your customers to help them choose. So this is a little bit twofold. The first one on the left is the sense of urgency. Perhaps you've booked with sites like booking.com in the past, something like that where they just have this huge sense of urgency that you feel like if you don't book this room right now it's going to be gone forever. And that's probably very effective. So there's a few examples going on here to call out. They have the in high demand, they have red, they have exclamation points, they have only two left. They have a deal going. There's a lot happening that you could test from here to just kind of let users know that this is a valuable commodity that they need to move quickly. When it comes to narrowing it down, it can be as simple as just highlighting staff picks or something that's new, favorite, most commonly purchased, whatever that may be. And that just helps users say, like, okay, I know that other people like this product maybe I'll just choose that one too. And that can make the shopping process a lot easier. So with that, I will turn it back over to Claire to talk about sign in and payments. Awesome. So now that the person has explored your site, they understand your value propositions, they're ready to take whatever action that you've described to them and made super clear. A lot of times, especially across industries, the companies we work with have either some type of sign in or payments process that goes into that conversion flow. So either you need to get some personal information, you need to pay. And this can be a huge area of friction for users. So the reason for abandonment during checkout, the number one thing is the site wanted me to create an account, only second to too long and complicated checkout process. But creating an account is a really frustrating process to go through, especially if you only plan on buying from someone one time, maybe you don't know if you're bought in for that second purchase. And it's a really big pain point especially on mobile. And I'm sure a lot of you have gotten to a screen and thought through these things, which is like, can I skip this? What is my password? Typing is really hard. I have super fat fingers. The most common password in the world is one, two, three, four, five, six. If anyone knows the second most common password, it is password. And so we're really bad at this, right? And a lot of times we forget, which is technical overhead for you all. So the first thing I always talk to retailers about, especially, is allowing for checkout as guest. Most people will abandon a checkout if this is actually not an option. Just because especially on mobile, you're time constrained, you're resource constrained, folks don't wanna go through the process. Patagonia does this really well. They actually by default have everyone check out as guest and this is in their cart. You can see you are checking out of this guest if you really do wanna sign in and maybe get some saved information or sign up if you can. But they really default to that guest checkout process. Michael Kors additionally has kind of the more common one that we see, which is I think the overview of all of the processes, but I like that they do a good job of keeping all of it above the fold. So you can get a clear overview that guest checkout is an option. The other thing that people frequently forget if you are going to make someone sign up for an account, even if you're not, is add a value prop around why someone should create an account. Are you able to save articles? Does it get you a rewards program or ability to manage wish lists, save personal information? Those are some of the really common ones. And what I like that Petco does in the middle as well is that even if you do check out a guest as guest, it says account is not required to complete your purchase. However, you can enter a password on the final checkout page and complete your registration. So basically making it really easy if you want to create an account after all that process, but they don't make you do it upfront. Signing up with social accounts is a really easy way to remove friction in the conversion process. So you'll frequently see either these buttons or maybe smaller buttons on a sign in or a sign up page that allows you to link to an existing social account and create a tokenized password where you can log in. The other thing that is really frustrating when signing in is if you probably have a couple of different passwords that you use, one that has a lowercase, one that has an uppercase, one that has a weird character in it. So actually tell the user what they need to put in. So if it's an uppercase letter, a lowercase letter and a number and it has to be eight, that's a lot of things for the user to guess at unless you prompt them and tell them what they need. So make sure you're using password hints. And this is usually in the sign up process, but I also think it's something you can do in the sign, or it's in the sign up process, but you can also do it in the sign in process. So even if someone has an account telling them, hey, user password with one uppercase letter and a number and they're more likely to remember and get less frustrated when they're actually signing into their account. The other thing that is super frustrating on mobile, I typed in my email, why do I need to type in my email a second time? I know my email, I can see it right there. So don't make users confirm account info. Don't make them duplicate things as much as you don't have to. Usually they know what they're doing, even with password, just making it possible for the user to see their password is an option instead of having to type it in twice. And there's some really cool things that folks at Google have been working on to really ease this process. So one tap sign up and auto sign in for the mobile web just launched recently and you can kind of see this gif over on the right from wego, which is one of the first partners to implement it. But you can see at the bottom this little drawer pops up and it says, hey, are you Leslie? You just tap and say, yeah, I am. And it continues to the site logged in. And so how does this work for new users? As long as there has been a cookie from a Google platform in the last 24 hours. So that's Gmail, YouTube, Chrome, any of our products that have over a billion users. If you have been on any of those platforms and been signed in in the last hour, you have a cookie, we know it's you. Basically that's what triggers this drawer and you tap and it auto creates an account for you. So if you've never had an account, you can create one really easily kind of the same way you would with the sign in with Google button, but just making it even easier. And the nice thing for returning users is that it actually auto signs you in across device. So this is great if you have a longer purchase cycle, you have a longer conversion flow. If someone creates an account on mobile or maybe gets through the first step adding to cart and they go back on desktop, they'll actually auto be signed into your site as long as they have been on a Google platform on that device in the last 24 hours. So really cool in that most advertisers and folks that we work with actually see more cross device activity because they have more people logged in as well as it removes that friction of creating an account. And so we actually saw 10x account creations after enabling this and Hotel Tonight saw 23 higher purchase conversion rate for users who were signed in. So some really good initial findings from this. And if you're interested in learning more, I would just say go to search at Google for one tap sign in on Google developers. Now sign in is frustrating, but payments is the last step. This is usually right before you're finished with this process. We also want to make this as easy as possible. And there are over 2 billion mobile e-commerce transactions a year and this is growing at a pretty rapid rate. So checkout is really the last opportunity where you can make a really good impression, make sure someone doesn't have that bad experience. And so a couple of easy tips, make sure you show the security of your site. This could be as easy as a lock icon and saying 100% secure and authorized. There's a lot of site seals out there, especially in the finance realm. Folks talk a lot about encryption and how secure your data is. So think about your user and what they might care about, but make sure that you're talking about security somewhere on your site. Claire, one question that I feel like, oh, I think you're gonna get there next where we get a lot is which is the most trusted, I would say seal on a common website. Yeah, so especially in the e-commerce space, there was some research done that asked, which is the most trusted seal? I think Norton is the most common and Google consumer surveys being the next one. I think this might be the US, but these are some great seals, some are free, some are not. But something to think about, especially in the e-commerce space as gaining that user's sense of trust. The other thing that you can do instead of having people choose their credit card number if you are using credit card, is that you can auto detect card type via the number. So all visas start with 4147. Why do I need to select visa if you actually already know my credit card type when I start typing it in? So that's a really easy way to get rid of one step or a couple of clicks when you're starting that credit card process. The other thing that you can implement is Google Pay. This was just relaunched across all platforms. So as long as you have paid for something with Google or you have saved card or payment information to your Google account, when you click, this is the new kind of UX. You used to be kicked out into an app if you had Android Pay. This is now cross platform and cross device. So if you click in, you basically get access to all of the personal information you have saved with Google. So you can see visa, account information, as well as shipping address. And it's just a couple clicks to enter in that information. So the really cool things about Google Pay, there are hundreds of millions of cards on file saved to Google accounts. And it also allows for access across all of Google's platforms, including the Assistant. So the Google Pay API is the way that we are bringing payments to new platforms, new devices, in-store, Assistant, desktop and mobile. And so it's basically one API that you need to integrate and then can be enabled across all of these platforms. It's very little in terms of lines of code. It's available globally. So just check with your processor to make sure that it works with Google Pay. And there are no fees. So it's a free platform that just is basically the interface by which to get the information. You still have to use a processor and a gateway the same you would any other way when you're taking payments. So this is just an API that sits on top. And so the folks who have implemented this had just launched maybe a month or two ago are starting to see really good results. So Spot Hero was able to actually get this launched fully in one week. I know Shopify actually just enabled their integration where you can check a checkbox to turn it on if you have Shopify. And I know other CMSs are working on that. Hotel Tonight saw that folks who paid with Google Pay saw it were 64, 65% more likely to complete their booking flow. And at B&H, 68% of Google Pay transactions were from new users. And 24% of those chose to create an account afterwards. So they're getting more account creation as well as higher conversion rates. And with that, I'm gonna hand it over back. All right, I hope that this GIF translates internationally. But we usually start talking about form optimization and we talk about it in the frame of removing friction. There's a lot of friction, especially when it comes to mobile experiences. So how can we make that a smooth and easy process for users? And one way to visualize that is with a slip and slide. So a slip and slide, if you haven't used one in years perhaps, is you set it up on the grass, you run the water and then you get a full running start and you hope to slide down the slip and slide and have tons of fun. But hopefully this works across the GVC. But the reality is that sometimes it doesn't go the way that you want. You take that full running start and then you absolutely just get stopped and end up with your feet over your head. So we're trying to make this a much smoother process and avoid this slip and slide experience. It's a pretty good form analogy. And this is really important because a lot of times when things are too difficult, there's too much friction, they're too long, we just leave. You're leaving users that you've paid to get there that have gone through this shopping process and then you're losing them at the last second. So we wanna help you avoid that as much as possible with a few of these recommendations. So the three things that we'll talk about in terms of removing friction is typing, which has always been, will likely continue to be hard on a mobile phone. So how can we remove it as much as possible? Making sure forms aren't unnecessarily complex and then no personalization, which we talked about earlier, how can we personalize the experience and make it fun if fun is possible for a form? Okay, so removing typing. This is the best way to remove friction in my opinion is just to remove it altogether to take the questions out. So step one is remove any question you don't need. For example, we see things like salutation. Do you really, really use and need salutation or can you just delete that field? For any field that you must have, try to use auto-fill that allows the user to just tap on the information they've already selected and pre-filled, they don't have to type it in again. Or there's additional ways. So for example, in the US you can use zip code, enter your zip code and that automatically can fill in your city and your state. So for us in San Francisco, that's a lot of typing that you save by entering in your zip code information. Another way to do that for address is using the Google Places API. So this will start auto-filling your address as you're typing and hopefully cut down on some of the typing that you need to do and also make sure that you enter it correctly. This is another one similar to called action of the fold that has no excuses. Using the correct keypads. This is something that everyone should do. From what I understand it takes maybe five to 10 minutes to implement and it's becoming just a pain point for users that is very easy to avoid. It also just shows the users that you care, that you've put this effort into your mobile site to make it easy for them. So I know that zip code might not be available for everyone to use the numeric keypad internationally, but things like phone number, credit card, social security number, birthday, month and date, those are always going to be numbers. So show the number keypad. Similarly, there's an email keypad for when you're asking for email as well. So you're not going back and forth between the ad and the letters and the dot and the letters again. I think another thing that they do really well in this example from Geico for birthday. So there's a lot of ways you can put your birthday in so that they have placeholders in each of the fields exactly how they want you to input it. So you know that I need to put month first, then date, then year, which has to be four characters. So that makes it really easy instead of having those like dropdowns where you're scrolling for however long to find your birthday. That is the worst. I get this question a lot and I would say in my opinion, the best way to do birthday is prompt the numeric keypad with this layout and then use auto advance. So as soon as they type in 12, it auto advances them to the day. So they literally just have to type in these eight numbers. Completely agree. So making forms clear and simple. Sometimes we make things harder on ourselves than it really needs to be. So to do this, we talked about removing optional fields. You can consider having full name instead of first and last if that works with your backend system. You can have billing the same as shipping checked by default so that they don't have to enter their address twice. And don't ask for the same things multiple times. Claire mentioned that already and asked for email twice and password twice. So in general, we see it's a best practice to have about six to eight fields. So just keep that in mind. A couple other things I wanted to call out in this example. We see a lot more folks doing the field name inside the field itself versus above. That just makes it more condensed. The best practice here I believe is to type that in and is when you start typing to move the field name up to the top left corner or the top right corner I suppose. So users can remember what they are typing in but you're not having it just static above the field. That allows you to have the call to action again, always above the fold so that the user knows they're not gonna go on forever with this form. They can always see that the end is in sight. Oh, so here's an example of not what not to do really. So we have an optional field at the top. We have both outside and inside the field. So this looks like it's twice as long as it really is because they have first name twice, last name twice, et cetera. And then you don't see any next sort of button so you don't know how long this form is actually gonna be. Yeah, and if you're gonna do it this way I would definitely recommend not duplicating and putting the input text. Put something like John Smith or something that's different so it doesn't look like it's just repeating what you have there. Pagination is really important if you have a long process. I mentioned I work with finance clients. Some of these forms that they ask folks to fill out are 16 pages, something like crazy like that. It's okay to have multiple pages but make sure that you let the user know that they're making progress. A couple things to note here is never start at zero. So when you are going through this process I believe Best Western starts you after you pick your hotel you show up here and you're already on step two or three and then makes you feel like oh, I've accomplished something I'm almost done. So show users where they are in the path and make sure that you're starting them off on at least step two so they don't feel like they're starting over from nothing when they've already done research to get to this point. A couple last quick wins real time validation there's nothing more frustrating to me than when you go through an entire form and press submit and a few things happen either you just can't press submit and you don't know why or just kicks you back to the top and you have to go through and try and figure out what you did wrong. The worst worst is when it deletes everything that you've already done to that point makes you start over. So avoid all of those with real time validation. So if you start to type in your phone number and only get four digits or six digits and go to the next one it tells you immediately oh, you missed a number so you can fix it right away. Last but not least is personalization and this is just kind of creating the idea that forms can be fun at least more fun. So here's a couple of really great examples I think the first one on the left from Lemonade prompt student says hi I'm Maya I'll get you an awesome price in seconds ready to go versus really this kind of mechanical and personal language like submit a form to get a quote. So here they have let's do this as the call to action. On the right we have ladder life insurance and they kind of turned this into what I think of as a bad lips. So you can fill out I am a man or woman and I am X years old. So you don't really feel like you're filling out a form you feel like you're just telling someone about yourself in kind of a fun game way. So yeah, last but not least I will go quickly through speed which I know is a big focus area for a lot of the previous hackathons on air. So we'll just touch on a few of why we think speed is a visual designers problem as well. Yeah. And I want to focus on really the visual designer part of it. A lot of times I think as designers maybe some of you guys are engineers or even do both but we design these beautiful designs and then we don't really think too much about how it impacts how the engineers do their jobs how the page loads and we want to think really critically about that. So 53% of people will abandon a site if it takes more than three seconds to load. I don't know about the 47% that are sticking around. I don't think I have that much patience anymore but we have a couple of studies that really show why this kind of three second mark especially this is actually on a slower 3G network. You can imagine it's even faster if you have higher 4G or LTE coverage in your country but we see speed directly correlate to conversion rate and bounce rate. So the willingness people have to stay on your site to move between pages and to convert. And what I always like to point out here is going from something like 10 seconds to six seconds is great. You do see a little bit of uplift but where you get these really large incremental gains is when you go from maybe five to six seconds to this two to three second mark and then again this is on 3G and you see this conversion rate really, really escalate an increase and this is with no changes to design. Just a note too. We think though that everything to the left not to say that instant isn't better but this was just done on 3G and there seem to be a really high rate of 404 pages. So as now for that. Oh, you don't want to be the crying emoji. This is really what we want to focus on. Oh, so this is a bit off sides but really when we're thinking about UX and the hierarchy of what users want and what they need on mobile speed is by far the most important thing. So we surveyed and said which of the following things are important to you and 75% said that the speed it takes to load a page is the most important thing. 66% said how easy it is to find what I'm looking for which I think goes more to design, how we design navigation, help users find the answers to their questions and the last one towards the bottom only 24% said that the most important thing was how attractive a site looks. And so this was done internally using Google consumer surveys but I think really shows that you can have the most beautiful site in the world and if someone can't get to it it's not going to matter. So I want to talk through three steps to ensure that your designs are speedy. The first one being creating a shared performance budget with your engineering teams to really focus on what matters most when it comes to performance. The second you can design for mobile technologies that are built with speed in mind. So we'll touch briefly on AMP which helps pages load in under a second and check easy tools before and after launch. You as a designer there's lots of tools even for marketers and non-dev folks to use to basically check and kind of keep your team in check on where your page stacks up either versus competitors or versus best practices. So we talked to a lot of companies about a shared performance budget. And a lot of times what this means is just looking at the metrics that your team consistently looks at and everyone being geared towards those metrics. So the three that we really focus on a lot of the time and I think give us best practices are speed index. So that's a measure from webpagetest.org it's an external testing tool that looks at the load of the above the fold content. And the reason that we focus on above the fold is because it's what really correlates to the user's perception of the site being loaded. So there can be stuff loading below the fold there can be JavaScript executing in the background and it's not gonna really affect what the user sees and feels as the site being loaded. First can temple paint is one we talk about a lot so trying to have it less than two seconds on 4G this means that something is showing up on the screen ideally something like a hero image, text, a CTA button something that the user can actually see and interact with. And I don't know about you my most frustrating thing on mobile is when I just stare at a blank screen for five or six seconds and I have no idea if something is loading or not. So that's what this metric really gets at is how fast can you get something on screen to show the user that there's content that's going to load. And this is one that the designers can have a lot of impact on which is page weight. So setting a target one megabyte is plenty for mobile but if you were putting a one megabyte image you have used up all of your performance budget on that one image instead of all the CSS and JavaScript and fonts and other things that are on the page. So if you set a limit and everyone has to follow that limit then you have to be really conscious of what you need to cut out or compress or resize to make sure that you're staying within that performance budget. So the three biggest problems that we see when sticking to a performance budget the first one is images. Who knows how big this image was when I downloaded it from Google Images. So this is a 4.5 megabyte image. You can see it's pretty high def and if you were trying to load this on mobile the same size that is on desktop would take about 15 to 20 seconds for the whole thing to load in. So be really careful about the images that you're using and making sure that they're compressed. We recommend 50 to 100 kilobytes of max for that's like a hero image. If you have thumbnail images and retail 20 is really plenty large and there's ways to do this really well like using responsive image techniques loading different images for different devices as well as lazy loading. So focusing on loading images above the fold and then lazy loading any images that are below the folder that the user might not see. The second one is fonts. Fonts, designers love fonts. You can have really beautiful pretty custom fonts and you're using an italic, an underline, a bold, a semi-bold and it makes your site look great. But I think designers frequently forget that each of those fonts is a different file that has to be loaded. And if you use one icon from a font you're typically downloading the whole font file not just the one icon. So think really critically about why you're using fonts. If you're using a font I've worked with a lot of folks that have like one line in the footer that's using a different font and it takes about three seconds to load and is render blocking. So this is a really easy fix not only on the inch side but also from the designer's perspective. The last one is CSS. I think that we get really used to just adding CSS in and maybe not taking it out so much. So there's a really helpful tool in Chrome DevTools. It's called the coverage report. And what it does is it actually looks at the CSS and JavaScript that's being used on a page and it shows you how much of it is actually not being used. So this sample that I took out so you can't see who it is but you can see that 99.3% of that top CSS file is not being used on this page. So that's a pretty good indication that you can probably go back in and clean out some of that old unused CSS. You do want to make sure it's not used on other pages but the code coverage tool makes it really easy to just do a double check and see how much of this is being used and devote some engineering resources and time to going through and cleaning this out. The other thing that you can do is consider designing an AMP and building an AMP. AMP stands for Accelerated Mobile Pages and is an open source project that was started at Google to help everyone create better pages for the mobile web. And so it uses certain AMP HTML as well as AMP components instead of JavaScript to basically create pages. And the really key benefit is that you can serve those pages from the Google page. So especially from search and ads, we will actually pre-cache and pre-render the pages when the search results are loaded. And so if someone types or clicks on your listing or your ad, the page loads in about, on average, 0.4 seconds. So it's lightning fast, super easy to implement. We've worked with a lot of teens on this and they're able to get it launched in maybe one sprint, two to four weeks, get a page up to test. So I would recommend checking out ampproject.org. There's lots of case studies and resources if you're interested in building AMP pages or maybe transitioning your current site over to AMP. Last but not least, this is my favorite new tool. It was launched at Mobile World Congress. And what it does, this is the Mobile Sport Card and Impact Calculator. It's on Think With Google and it takes Chrome user data or user anonymized, but it takes the Chrome sessions and basically looks at, you know, how the users experience them in real time. So you can type in your domain as well as other domains, competitor domains, any domain you want and see how fast your page loads for real users. So you can do some calculations on what working on speed would have in terms of impact on conversion rate and your bottom line. So just to summarize it up, I know that we've covered a ton of best practices today. Hopefully you've been able to take away one or two that you'll be able to test on your own mobile site. We suggest AB testing everything to make sure that it does indeed improve performance, but hopefully you have a couple ideas that you can take back and get testing in just a couple of weeks. In terms of next steps, as I mentioned in the beginning, we just created a new YouTube channel that goes through all of the activities that we mentioned in the beginning of the session. So if you go to YouTube and search for Google Mobile Specialist, that's our channel name, and it goes through each part of the sprint, the five parts that Claire went through, one by one, so that you should have all the resources that you need to run your own sprint. Otherwise, we really suggest auditing your own site for some of these opportunities that you could implement, whether it's testing payments or just getting the correct keypads across the board. We really encourage everyone to run a mobile design sprint. It's a lot of fun. We've had very, very great success for the first four that we've run. And then test and validate, see what works, see how much you can actually move the needle on that mobile conversion rate that we're trying to improve. And last but not least, we would love to hear about your successes or your questions or anything that we don't get to with the Q and A of this Hangout. So if you would like to reach Claire and I and our team, feel free to email mobiledesignsprint at google.com and we'd love to talk to you. So with that, we have seven minutes left for Q and A if there's any questions. Cool, thank you very much for this nice overview. Let me just check, I think we had a few questions, but we would start out with a, I'd say fairly easy one. Jenna is asking, would you always recommend using all numbers for birth date instead of the written out month? Is there a go-to recommendation here or with a case-by-case decision? I think numbers is pretty standard just because it's the easiest way to input. You can imagine like putting in O3 versus typing out March is gonna be a lot faster. You just really wanna give the user expectation of what they should be typing. So that's what I talked to when I said the input fields, if you put MM that says, you know, you should type in two numbers, if you write out March, then they should put the date. But I think just because of ease of use, that's why numbers are more standard. And same with the scrolling, I think that can be frustrating to scroll and try and find the right month if it's pre-selected that way. So always test, but we've seen numbers performed with us. My favorite is when there's a date dropdown and it starts at 1900. Would really like to know what 110-year-olds are on their phones. Good luck. Cool, yeah, maybe one question for me would be, so let's say I'm a client and like I have my own business, I wanna try this out in my own company. Is there a certain size? Because I'm guessing we have like very large companies tuning in onto like, I don't know, 10 people companies. Is there any scope or size you have to have or can like anybody start out with their first design sprint like maybe no? So we recommend, so we based a lot of this off of the book sprint and they have a reference there to Oceans 11 where you wanna have a representative from a different kind of expertise area all in the same room. So you definitely don't need to bring your entire design team or your entire engineering team or your entire marketing team. You really just wanna have one to two, I would say representatives from all across the folks that you need buy in from. So usually in our sprints, we have groups of five from each company and we recommend one to two UX designers, one developer to do, to test for technical feasibility, someone from marketing, perhaps a product manager or product owner, but essentially you just want a representative from each group that you'll need their buy in to move forward. I think the other thing that we also focus on, so the is really the problem that you're trying to solve and is it a problem that is adequate for a sprint where you need a lot of brainstorming and maybe with problem solving and prioritization or is it something that's small enough where you can maybe tackle it in a smaller group. So for example, if you're rethinking your conversion process, that is great for a sprint. And so there's lots of best practices, there's lots of data that you can dig through. If you're just doing form optimization and you're only focusing on that, that might not warrant a full multi-day sprint or even day workshop or it might just be a day workshop to like knock that out. So you wanna make sure that you're really solving a problem that needs everyone's input and that has multiple potential solutions that you wanna brainstorm and act around. Cool, sounds good. One more question from a chat maybe, I think we have a few minutes left. I think this is quite interesting. Adriana says, this was great. Do you have any insights, a similar workshop for user in app experience, maybe also tying through like, can a lot of these best practices like translate to apps or is this like a totally different field? I think a lot of this translates to apps, especially the best practices. A lot of them are pretty common sense. I think a lot of these actually come from the app space and have moved to mobile as more people find more value on the mobile web. I think in apps you could do something similar in terms of your conversion flow, there might be more native elements that you can integrate or look at material design, but a lot of the same principles and kind of heuristics apply. And same for the sprint methodology, that would be the same as well. One thing we like to say is that everyone on this call is a mobile expert, we all have phones that were on probably five hours a day. So sometimes it's just a matter of going through the flow in your own experience and highlighting where you think there's the biggest opportunities. And from there, the sprint methodology and as Claire said, a lot of these best practices translate as well. We focus on conversion rate for our sprints, but you could do the account creation process, a user journey for like your top 5% of users who use your app the most. I think it's really exactly like a shopping flow of finding a product. It's really just, you know, where are you seeing any problems and what are you trying to solve for? Okay, I think we might have time for one last question. This might be a tricky one. Any best practices for mobile menus for navigating 60K products. So a wide product portfolio, how to tackle this on mobile. Yeah, so I have a couple of thoughts and I'm sure Claire does too. The first thing that comes to mind to me is site search. When you have that many products, you wanna make sure that site search is available, that it's easy to find and that your results that you're sending back are very relevant. So that would be my number one. I would also just say sub menu categories. We, I forget the best practice in terms of menu items. I think it's five to seven perhaps per menu. So you don't wanna drop down and have 20 different menu options off the bat. You want users to be able to kind of guide them through the process of the high level categories and then drill down from there to find what they're looking for. Yeah, I think that those two are two of the things that we touch on the most. Site search is super important and you wanna be using things like auto fell or auto suggestions for products and categories, making the menu really easy to navigate from category to sub category to even one more level. And I think the only thing that it would be in addition is using the filter and sort is especially if you have that many products frequently overlooked and is really important to help you find what you're looking for on mobile, especially when we're time constrained. So I would say definitely look at some of the leading e-commerce partners. You know, if you look at Amazon, they have tons and tons of like different filters per category, but just making sure that the top line filters are there that your users care about and that they're really easy to use. So like drawers and UI elements like that. Cool. Yeah, I think with that we're pretty much over time already. Thank you very much for this great presentation. Again, I think we will also link the other videos in our comments. So you have an easy access to the following videos. I think they're also a bit smaller. So like you can have a step-by-step guide which is really nice and a sneak preview there. But yeah, thank you so much. Have a good day. To you too, Dom, maybe you have another question before we like close up the stream. Thanks for having us. We're getting kicked out of our room. Okay. If you have any questions, please feel free to email us. Yeah, definitely. Or Twitter us, exactly. Okay. Bye. All right.