User Onboarding Flow – Design Crash Course

hey everyone it's javi here and in this video i'm going to walk you through some common practices and questions that you can ask yourself when it comes to designing a user onboarding experience that you can apply to your own projects and designs if you happen to be new to my channel welcome my name is hobby and i make weekly videos about product design skills principles and practices to help you build digital products and bring your ideas to life if that sounds like something that you're interested in don't forget to hit subscribe for those of you who've been around for longer hi it's been a while i'm back to action now with lots of good content planned for the next few months so stay tuned now user onboarding for those of you who may be unfamiliar with the term is the process or the area within your product that is going to be in charge mainly of converting guests or visitors into registered users now before we move into figma and start moving some pixels around together i want you to take a step back and think about what do you want your users to get out of your onboarding experience what do you want them to feel what do you want them to know and what do you want them to do there's going to be a relatively obvious answer to that which is to have a registered account within your product but there may be other outcomes worth considering some of which we're going to see in this video through a real life example that we're going to work on together let's go ahead now and switch gears i'm going to move us into the realm of figma and if you've watched me before you know i love to embrace serendipity when it comes to actually looking at concepts and principles product principles actually being hands-on with a project so as you can see here i am in this figma file i've got a lot of tailwind based textiles and color styles loaded up here which you can find also in the figma community i'll drop a link in the description below uh so you can start off a file that is similar to the setup um and as you can see it's gonna be a mobile based project that we're gonna work on so i'm leveraging some community assets here as well in particular this status bar for the iphone x we are working on top of a uh i think iphone x frame 375 by 812 so i've got here my iphone x status bar and i also have the home indicator so having these elements is going to be very helpful for us because then we can design uh you know for a real screen uh with these elements already in place now if you're wondering where i got these from these are from a fantastic community resource that is designed and maintained by a designer at twitter whose name is joy banks and as you can see this is a fantastic resource that's got everything you need to build uh sort of like native ios apps and mobile apps in general so if you ever need to grab like a keyboard or a status bar which we're actually going to use through our onboarding experience here in this video you can simply drag and drop them from this amazing amazing resource so i'll drop a link to this in the description below as well so if you want to start using it in your own designs and projects you can do so just by duplicating the file through the community so uh the other thing that you see here is a very simple logo that i i made for the purpose of this project it's literally the simplest thing you can imagine it's uh like three circles here uh actually yeah three circles uh this this big one here and then two two that are nested in as you can see in the in the layer panel and we're going to be using it also throughout the onboarding experience too now if we are dealing with a user onboarding experience within a mobile app which is going to be the case in this video the first thing that we have to think about is typically going to be a splash screen splash screen is that screen that appears on the app while other things are being loaded up in the background typically some kind of sign-in or signup form so we're going to be designing a like the simplest splash screen in the in the universe of design and it's going to be literally a duplicate of this logo have a look at what i'm doing here if you're unfamiliar with the shortcut i'm holding here the layer i'm pressing my option key on the keyboard here and while i'm pressing it i'm just dragging it wherever i want and without letting go of the key i just let go of the mouse or the touchpad whatever you may have at home and you see that it creates a duplicate of a logo so you can do that pretty much for any layer i do it all the time just with like actual frames yeah very useful very useful shortcut what i'm going to do is i'm going to just place this somewhere around here i think that looks pretty good for our splash screen i'm going to just actually call this splash and the next thing we're going to do is you know duplicate this frame so i'm going to do command c command v and that's going to you know very nicely place a frame uh right next to the one we're working on with the 40 pixel difference between them and in this case what i want to do is i'm going to bring the logo up so you know because i want to fill in some content here i'm going to reduce the size of this to 32 pixels and by the way if you see me moving my head to the side it's because i have a copy of this file on a separate on a separate screen and it's just handy to have a look at the measurements and so on oop i duplicated that by mistake so we have here we're going to have a 30 to a 32 pixel sized logo here and i'm just going to hold on to my 8 pixel 8 pixel grid or 4 pixel grid and just keep on using these multiples of four in order for us to build a consistent spacing between the elements of our ui so as you can as you can tell 32 is going to be a a multiple four and also as i am adjusting the spacing between this the the top the status bar and the logo it's also going to be a multiple of 4 in this case 12. as you can see my constraints are looking good center top that's exactly how i want it now that we got ourselves some space on the screen the next thing that we have to think about is well first of all we're going to rename this frame from splash to welcome okay so this is going to be our welcome screen and and within this area we're going to be designing for two different types of users typically that's going to be the case for for any any application that you're designing either for for mobile desktop doesn't matter there's always going to be two types of users and that is a user that already has a registered account within your product and two it's going to be a visitor or a guest that does not have a registered account within your product so within this screen we have to cater to both of these people right so what i'm going to do is i'm going to you know decide that the focus of the screen is going to be for people that don't have an account and are therefore likely to be more unfamiliar with the product so we need to serve them with a bit more attention uh to hook them into the product and get them to have a registered account which is going to be the you know the primary focus of our user onboarding experience so what i'm going to do is i'm going to press my t key to start a text layer here i'm going to put it somewhere around here and i'm going to say you know this is going to be the screen where i want to communicate the main value of my app to the users that are maybe thinking about joining and i need to tell them basically what they're going to get out of it if they do sign up so in this case the purpose of this app is going to be organize and compete in beach volley tournaments that is going to be the value prop of this app okay so now that we have that in place i'm going to head over here to my text styles because this might be a little bit too small and i'm going to go for something like let's say text to excel so we have base here lg 2xl there we go and i want this to be font bold so i think that's going to be just fine let's also increase the leading a bit so i have two variants here one with leading seven and one with leading eight leading is just another word uh for for for line height you know between the lines of your of your text so i'm going to stick here to font bold 24 32 that looks pretty good but now it's not going to fit into the screen so what i'll do is i'm going to drag the left side here a little bit until i get to that multiple 4 and i'm going to do the same here from the right side so i'm just going to squeeze in here one two three four five and that's going to be pretty good let's for now just center it in the screen with my shortcuts here for alignment and i'm going to automatically also take care of the constraints make it left and right and top so typically this is not going to be much needed within this project because we're going to stick to the same you know screen in the same dimensions but if you ever want to then say okay i'm going to build a a a you know horizontal view of the app when when dealing with mobile maybe mobile web or i'm going to design a tablet version that is going to require me to adjust to the responsiveness and width then those the work that you're doing now in terms of the constraints is going to come in quite handy because as you can see it's going to adapt accordingly so why not do it now okay so just to be picky i'm going to hold on to my styles here and just say this will be black and now i need a pretty decent call to action here to to get the user to go through the process of onboarding and in order to do that i'm going to use a vibrant button that's going to have the same color as my logo here so if i head into assets i already have as part of this tailwind package a button otherwise you can also easily create one yourself or have a look at the sigma community for lots of lots and lots of assets that people have already built with sort of just common ui elements such as buttons and just drop one here yourself so that should be fairly straightforward i want this to be big and shiny and i'm also going to make it circular by having a 9999 uh quarter radius that sounded like i was saying no in german a lot and i'm going to hit enter just because i want that roundedness of the logo to also appear across some of the elements of the ui for that sort of nice visual feel i think that looks pretty good now what we want to do is extend both sides of the button all the way to that 20 pixel spacing on the sides just for that visual consistency and there we go that's exactly what i want maybe i'm going to change the text here to create a count you can also do something like get started something like that i'm just going to be very precise in terms of what the copy is going to be here and i'm going to hold on to my multiples of 4 as usual and as you can see i'm going to move this down to 32 so that's pretty good let's change our constraints here to left and right so we hold on to that you know a nice responsiveness and now instead of this color i'm going to come over here and remind myself of what this is this is orange 500 i believe that's the one i may be using no i'm using the slightly darker tone orange 600 so this by the way is a very common uh you know layout of styles that you can find in most ui kits they'll typically give you um you know a wide color palette with different shades uh of different colors so orange 600 just means that i am inside the orange palette and 50 being the lightest 900 being the darkest i'm going to be somewhere in between moving towards darker tones just so i get that nice contrast in this case with the white background so i have here my create account now that i have these two elements side by side maybe i want to uh hold on to both of them and what i did there is i already had this layer selected i i held my shift key and the keyboard to select both of them and what i do is i'm going to just drag it to the top here until it's centered horizontally and have a look at my spacing looks pretty good we can move forward so i think i've dedicated enough space already and attention to the unregistered users now what we have to do in order to finish the screen is think about the already you know the people that already have an account so for those people what i'm gonna do is uh drop a question at the bottom of the screen that says already a member and then make sure to have a login link within it so for this to work this might be um almost i don't know you can keep it a tech space that's fine i'm going to go down to 14 sort of my base font size and i'm going to keep it at font medium 1420 so that is looking pretty good and now what i want to do is drag it down maybe instead of aligning it with respect to the to the bar here i'm going to do it with respect to the screen to have that 64 pixel difference again a multiple of four and i'm going to change the whole thing first to uh black and then what i want to do or maybe not black maybe something a little bit you know dimmer 700 gray 700 that looks pretty fine uh and i'm going to change the login here so i'm going to select the text here inside my text layer and i'm going to change this to orange 600 which is if you'll recall the same accent color that we use for the button for the logo so that looks pretty good that should give the user plenty of attention in terms of knowing that if they already have an account they can skip you know the onboarding experience which they already done before and just go straight to their account so that's going to be fine okay now i'm going to make this center bottom and yeah that should work the difference between why i made this left and right and this is center is that in the case of this uh layer what you're seeing is that it's going to extend until it reaches the you know the sides of the screen uh so you kind of do get a benefit from you know the the width of the text layer itself being responsive but in this case because we have such a tiny text you know if you actually did left and right you might have scenarios where okay that might make some sense hold on here what did i do wrong okay we have to also change the the text alignment within the layer itself right so if if you're doing uh left and right so yeah this might make more this might make sense um but notice that if you do go down lower than 375 here's what's going to happen to your text so it might be a little awkward so what i do instead usually with these tiny let's put this back into center alignment uh with respect to the text what i like to do here as well is just you know keep it centered rather than left and right so i know that you know this is still going to hold if i'm in a larger screen uh responsiveness or screen width uh but if i'm going down i'm not going to suffer uh the issue of the text being like this like vertically uh you know you know narrowed down to a point where it just becomes unreadable you could do more work here such as like you know framing these two elements and having some kind of auto layout so that the button positioning is also going to adapt to the text that's up to you in this project we're just going to focus uh on this particular screen width okay so now that we have done the welcome screen let's go ahead and think through the process of what it means to go into a user onboarding within this particular project first thing that i want to do and you know this might be like one of the outcomes i'm actually going to bring this back into the center okay one of the outcomes of of a user onboarding could be not only to just register the user but to also verify that their identity is real and that they're not they're not just going to be some bot or malicious actor that wants to benefit uh from having like a very quick and frictionless onboarding so they can go and sneak into your platform and do bad things so typically you may want to include some friction in the process in the form of a verification so that you can keep bad people away from entering your product and that is what we're going to do here so in the case of mobile we have the benefit of like the actual device being a a a channel of verification uh for user accounts let's go ahead and duplicate this frame once again i'm gonna do my command c here command v same 40 pixel distance which is phenomenal and instead of welcome i'm going to drop in a question here to remind us of what we want to get out of the screen which is going to be what's your phone number okay so now we're here we're going to hold on to this logo here that's going to be fine but on the left side of it i'm going to include a an icon button and by icon button i mean i'm going to literally grab an icon so uh i'm going to be using uh hero icons here that are built in uh into into this into this resource uh you can leverage any other library of icons that you want and just import them into your project what i'm interested in is this left chevron which is going to be generally used in the case of of helping the user navigate an application so i'm going to come back here i'm going to remove these just so we don't think or we know we're in the right screen and i'm just going to copy paste it in you see that what i did is i clicked on the frame itself so that when i'm pasting the layer it knows where it has to be nested in so that is how this became automatically added there and yeah that is looking pretty good now what i want to do is i'm going to change the the color here because i don't want it i don't want the the the focus to be as intense as with like other text layers uh this is more of a secondary action that i'm i'm less likely wanting people to do at this stage i want them to actually go through uh so i'm gonna i'm gonna dim it down to gray 500 and in the case of mobile you want to keep the the touch area of your elements relatively uh bigger so that it can it can fit into a human thumb and the measure that i use typically is just around like 32 pixels minimum so uh what i'll do to get that working is i'm not just going to stretch this to 32 because there might be scenarios where maybe i want to actually have some padding around the icon for other purposes so instead i'm going to do shift a and what that will do is it's going to do two things first thing is that as you can see in my layer panel it took the the icon frame and it nested it inside another frame called frame one i'm going to change this right off to icon button and and yeah so now we have that and but we have it it's still a little bit bigger um than what i wanted it to be it's 40 pixel sizing right now i want it to be go down to 32 so how would i do that well this is an auto layout frame which means that we have our auto layout properties here and as you can see there is this section here called padding around items and right now that's set to 8. so if i were to change this to 6 you see that it takes away 2 pixels from each side if it goes down to 5 it's 34 and if we bring it down to 4 now it's 32 which is exactly what i wanted we don't really need a spacing between items because we don't have another item here in case you're unfamiliar with auto layout what this means is that if there if there were to be another another layer inside uh this frame this auto layout frame this is what this means right this is this 10 pixel spacing uh so no need for this uh we're just going to keep it here i'm going to just bring it down to zero for the record and you know for future interactions maybe i'll want to have like a six uh pixel corner radius so that you know in case you want to ever do like some kind of um you know uh interaction with some kind of like tap state on mobile you can you know leverage that padding with a nice border radius so now we have this in place what i want to do now is i'm going to bring it to the top i'm going to align it with the logo and this is nice because both of these elements are actually the same the same size and i'm going to bring it into my uh 20 pixel spacing with respect to the screen from the left so that's pretty good now what i can do is i can hold my shift key grab this element as well and i'm going to do command option g this is probably the most useful shortcut i'll ever use in figma all it does is it takes anything that you selected and it puts it into a single frame so i'm going to call this let's see i'm going to call this [Music] top nav or let's say nav since there's no other navigation for now and i'm gonna holding my command key because you know as you can see if you weren't holding your command key it's as if the elements are reacting to its constraints so this element right here has a center constraint so as you as you drag it it wants to stay centered with respect to its original position but i wanted to actually stay there as i'm resizing so something that i typically do to resolve that is i hold the command key on the keyboard and now if i resize then all the elements will be held in place so that is super useful i always keep getting 15 here for some reason two three four five i guess it's because there's some layer here that's uh yeah getting me to try to align things that i do not want so okay left and right that's pretty good now let's actually get into the copy of the screen and by the way we're going to be reusing this top area quite a bit as you'll see through the process so i'm glad we got that over with because we're going to use it later so first thing we want to do is well this is a phone number form so let's actually go into the ui kit uh that joey very kindly prepared for us here and i already have it selected here i'm gonna hold on to my my light theme here uh to keep things bright in this video i'm gonna command c this this layer i'm going to come back here to my file and i'm just going to copy paste it into view and as you can see the the this element itself already has a a a home indicator so i can remove this one i can go here to my constraints left and right bottom and then when it comes to the alignment i want this to be a line bottom so as you can see the shortcut would be option s and if not you can also come up here to your alignment options and get that done so okay now uh you know people can can use your thumbs to put in the number uh but we what we want to actually do right now is also just like the actual form of the screen so for that i need a title we're going to call that simply phone number and in order for this to be stopped properly i'm gonna head over to my text styles uh maybe in this case i don't want to have like that 2xl maybe something smaller uh excel will do just fine gonna keep leading 7 and we're going to go over to semi bold so that looks pretty fine and i'm going to change this to grain 900 so okay now you know i always do the same stuff here align horizontal center uh constrain center top and let me just double check here uh yeah i have a 72 pixel distance with respect to the navigation here now that we have this in place and one haircut later as you can see we can move on to our next text layer here and by the way i also tried to make myself a little bit smaller in the screen because i noticed that i was quite i was quite uh you know quite out there uh it's my first time recording uh with the setup so hopefully i'm a little bit more proportional uh to what you want to see so as you can see i duplicated the text layer here because we want to have a little subtitle where we explain to the user why we want to gather their phone number in the first place so building up a little bit of trust with with this user i'm not going to want to have this be a text large let's apply some some visual hierarchy here i'm going to go down to let's say in this case text base right and i'm gonna keep it at leading six and we're gonna use a normal uh you know font normal tone and you know going on with this hierarchy maybe instead of using the gray 900 color that we're reserving for a sort of primary typography we can revert down to gray 500 which we're using for our secondaries and at this point in time i can also just you know resize a layer uh to be you know sitting accordingly within the screen so there we go we can change the constraint now to the left and right and here we can explain you know uh the reason why we're you know we're asking for the phone number in the first place so i would change this to something like um your phone number is essential to identify yourself and register for tournaments right so the moment that the user realizes that this is a you know an essential piece of information that they need in order to be registered within the platform or within the app then they would be more inclined to to give the number rather than just like asking for it without any form of like um you know explanation as to why that is now moving on to the next element of our ui it's going to be the input where the user is going to be able to see their phone number being inserted as a type things down so for that purpose i'm going to head over to my expiration file here where i already have everything layered out i'm just going to copy paste this component from the tailwind ui kit if you're using a ui kit again from the figma community most likely there's going to be some form of you know input field component you can use otherwise it's pretty simple uh since it is just going to be a frame and it's going to have white background gray 300 for the you know border around it and in this case this being a phone number we want to mock the idea that let's say you know for the convenience of our user uh they would be able to tap on the left area here which by the way has a shadow that we do not need and they would be able to select the country that you know defines the prefix number of their phone number value in this case i'm going to stick to spain and that would be the plus 34 prefix so okay so we have that in place and we're good to go so as you can see i'm i'm staying true to my uh you know 4 pixel grid 8 pixel grid principle here so we have 24 top to bottom and 20 on the sides that's looking pretty good and now when it comes to phone numbers you typically add like a very small i'd say disclaimer of sorts uh and that would be uh maybe let's say something at around like 16 here for the spacing and we don't need it to be like this large since it's just like a small piece of info for the user uh so we can go with font normal 1216 here and even make it a bit less noticeable since it's far less important information just to mention that standard message calls and data rates may apply so any time that you're having to deal with or or interfere engage with you know a career service a phone uh you know channel where you might have to make use of like sms messages to to validate uh you know uh user user ids and so on uh you're gonna wanna display this just to uh let the user up front that you know this is gonna be the case uh as it is expected so yeah we have this in place now and then what i can do is i can just simply uh add an extra button here i'm gonna just duplicate as i did with the other uh elements uh this button here gonna center it 20 20 on the sides and i'm going to give this a little bit more spacing so it's a bit more differentiated from the rest of the content here and we're going to call this send verification code so the way this will work as i'm sure you're familiar with whenever you're validating your account through a phone number is you would allow the user to input their phone number they're going to get a code generally via sms uh and and this is what we're going to tap into right now right so uh the thing here is that we would expect the phone number to be visible until the user can actually uh send the code so what i'm going to do is this is also a nice shortcut uh to set up uh you know make this button look as if it was disabled until there is a valid phone number that is in the input uh what you would do is uh you know you could do multiple things actually uh some people might come here to the color uh to the fill and reduce the opacity of the fill itself which is one way to go about it not the biggest fan uh because what that's doing is it's just adjusting the color itself but what you want to do is take the entire element and and make it disabled right so if you had other elements right so if you were just doing the color then the text is still it has the same tone and that is not quite correct so what you want to do instead is deal with the opacity of the entire layer so you can see here it's 100 what i want to do is bring this down to let's see what was it here 5 50 so i can come here and insert 50 and now the entire layer has an opacity of fifty percent however if i do command z to go back one step right i have my hundred percent here's a trick for you uh all you gotta do is grab a thumb uh or a finger in this case and hit the five key on your keyboard and that will get you opacity of 50 if you do four you get 40 3 2 1 and then 0 is set for a hundred i think if you double press zero you get opacity of zero uh i'm gonna go back to five for fifty percent uh it's a very nice trick that you can use to adjust opacity very quickly so yeah now we have our our sort of like disabled button and that should that should help us uh move on to the next screen uh which is going to be uh what happens after the user will you know insert their phone number and tap on send verification code so at that point we can let's just duplicate this screen command c command v and i'm going to call this verify phone number right so at this stage we can move rather quicker with the interface itself because we have all the elements that we generally need for an onboarding which is going to be in this case just like our top nav title area subtitle some kind of input field and buttons and keyboard components like this one so here all i have to do is change this to verify your number and then when it comes to the subtitle area here i'm going to remove this copy and put something appropriate like please introduce the four digit code yeah so we can be quite precise here to to help the user actually find you know this code among maybe like other codes that might have in their in their sms app so please introduce the four digit code that has been sent to and then here we can we can leverage this our position here to double check that uh or to let the user double check that what the the phone number they inserted was correct uh so if you don't have sort of a verifier here like maybe you have like two input fields which might be a little odd like to get the user to like repeat the phone number maybe you can you can uh you know take advantage of this situation to put something like you know the actual phone number uh that was inserted in the previous you know in the previous step so and what you can do to make this even more obvious is let's say you could come in here and change this to let's see what was this this was a gray 700 so a little bit darker and you can even if you want make this uh font medium so increase the weight of the typography of like this particular text uh just a little bit so that it is much more uh noticeable in the screen so if the user realizes like oh wait that's not actually my phone number then they have the back arrow to go back uh reinsert the appropriate phone number again and then they would be back to this screen so that is a pretty good touch and just like before what i'm going to do is i'm in this case i'm going to remove i'm going to use an input field that does not have that initial drop down and then let's see if i can get myself to a proper input component here i think that's good enough and now that we have this in place i can come in here into the copy remove this prefix and we can leverage the placeholder text to put something here like introduce code so you know you don't generally do this a lot especially if you have a screen or a page where you have like multiple fields because you are relying on the user knowing what that input should be about so typically you would put a little label on the top of the input field uh but since we're in an onboarding uh process where uh you know per screen you have like one specific input that has a lot of context around it in terms of this text here um it's not going to be that big of a problem i know it's also going to save us some space so that's that's sort of like the logic for how we're dealing with this right now and in this case of course you're not going to need this particular message here but what you may want to have is a way for the user to resend uh the four digit code uh in case for whatever reason it doesn't get sent uh so i'm going to change this back to uh text base leading six font medium and we're going to name this resan code okay so that's pretty good and maybe i want to put this in our uh you know common orange 600 at this point so that looks that looks just fine maybe give it a little bit more spacing here uh since it should it's a sort of a different uh action or user flow than just like going through normal onboarding and when it comes to the button i think this spacing is fine we can change the copy here to next i'm going to leave it disabled since at this point uh you know we are still relying on an input being needed for the user to proceed with the onboarding so there we go now we have this screen okay so let's assume that the phone number gets verified there is an input that's being inserted let's forward it to code now we can advance into uh you know defining uh other essential information of the onboarding in this case uh now we can we can verify the user by them by us knowing like what their phone number is maybe we can add one more element here that is going to be uh the user password right so the user has to create a password so that they can get into the app so they can input first of all their phone number and second of all the password uh and by the way like i'm using phone number here uh because um i first of all it's it's good to have so you can you can verify like the id in that way um but also i i i do conceive the phone number as a a more appropriate choice like default choice for users to find each other uh within the app since this should be like an experience for this particular app between friends that already know their each other's phone numbers and they can find each other in that way but alternatively if you're working on a different kind of app with different kinds of needs then you may want to use email instead right so instead of asking for phone number first you ask for email verify via email it's the same process you're just using a different channel of verification but the password part remains the same so i'm going to change this to create a password right so same process as before um i'm not sure if at this point we would need this arrow here since going back wouldn't make a lot of sense um i'm i'm i'm divided on this right because uh if i were to actually close the app and come back i would expect the user to probably land already in the create a password page if possible but i don't have strong feelings about it so let's just leave it as it is maybe just change this to create your password and then again leverage whatever styles or text layer you have if you do have one in this case where you're asking for sensitive information um you know why why tell the user why you need this info in the first place so and and in the case of the password actually even better make sure that there is enough strength in the passwords that it's like fairly secure so just as a little recommendation we could say make sure it's got at least eight characters and a number for example that would be good enough we can see we're in font medium because it's embracing uh it's inheriting the the last style here we don't want that so i'm gonna change this back to font normal keep it 24 here on top for the padding and in this case we want to have a version of our input field where there is going to be an icon on the right side because we're going to want to let the user in this case tap to view that the password they inserted is the one that they wanted so you can go about this two or three ways you can either have two inputs one where you insert the password and then you ask to reinsert the password just to make sure that the user inputted the right text in place or you can have this version where you just have one input and then you have let's see this would be called um i icon yeah there we go and i have to come in here and play a bit with the styles that are not that properly configured there we go or you can have this and this way you know let's say you had like some some some text here it would be by default hidden or encrypted as a password but if the user taps into the eye then they would be able to see the password uh that's in place might be a little bit less secure because you know there might be people around and and if you were looking at the password then like everybody could look at it but you know just small things to keep in mind when designing these kinds of things but for for my purpose for the purpose of this app i'm feeling pretty good about this password should be fine as our placeholder text we don't need this layer here and we do need to change actually the keyboard so no longer numerical i'm going to go here to my uh sigma ui kit um for ios 15 and i'm going to pick let's say this one right here and this is red by the way because there is a layout grid that is on top it's not that the keys are actually red it's that um the default here sort of is showing me this layout grid so copy paste this head over to my app click on the frame command v and let's see cookie points if you remember what the shortcut uh for for the bottom is if i'll recall correctly it's option s there we go and for center that's going to be option h so option s option h and then head over to my constraints here bottom left and right all right that looks pretty good so let's see uh the next thing that we need here is well first of all i'm going to bring this to uh you know be on uh 24 pixels padding with or spacing with respect to the input and we do need a one more thing here you can put this either on top or below of the next button and that is going to be a confirmation for the user that they agree that they have read and agree with your terms of service and privacy policy this is standard practice uh for for onboarding users into a a sort of like online digital application so you need to have those documents in place and you need to whenever whenever you get to the step where after whatever the user does then there is a count an account that's being created so after this step officially you have the registered user then you want to make sure that you are asking this before that happens so we're going to do it here right so i'm going to put it below the button just so it's obvious that you know there needs to be like a confirmation uh done before that they can move forward so it sort of serves as like a friction here um and i'm just going to grab it from here since it's this very simple component uh i'm going to copy paste it here and then show you what i did so this is going to be i think i kept it at 24. yeah that looks pretty good um and all this is is an auto layout frame uh right so you have two inner frames so if we're looking at our layer structure here there is one text layer here with terms of service and privacy policy a little bit uh with a little bit more weight in the same way that we did for the phone number and we're still using our orange 600 and you can see that on the left side we have a check box component that was available through the ui kit that i have and what i did is i wrapped it inside a a frame here called checkbox now why did i do that uh and why why this right so i did it because have a look um this text layer if you look at the the text itself uh this has a leading of 20 right so if i remove the style here and i look at the the line height it says 20. and what i wanted to do is i wanted to make sure that the checkbox would be aligned with the first line of text now that wouldn't be possible let's say if i remove the frame which i can do with a shortcut command shift g as you can see because we have auto layout in place if i take a step back you can see that because we have this alignment of top left you can see that you know it is not being aligned because the checkbox is only 16 pixels uh height so what i did in order to fix this is i going a few steps back i did or we can just actually do it now i can do command option g to wrap this into a frame and that gives us more flexibility in terms of defining that 20 pixel height and then centering this with respect to that frame so that's what's going to give us that effect and those extra 2 pixels on the top that's going to get us our perfect alignment so that is exactly how we got to this point and at this stage we have everything we need for our create password screen pretty good so so so far we got the user to verify themselves with the phone number so we avoid any malicious actors and we also get them to like actually finalize their account creation by uh you know setting up a password that has some minimum level of strength for security purposes uh we let them check that the password they inserted is the correct one and we get them also to read and agree to the app's terms of service and privacy policy which is an essential need for a user onboarding so beyond this stage you could say that you've reached your goal of you know getting the user to create an account for your product so beyond this there's going to be a new account in your user database that shows like hey there's a new member that joined at this point in time this is their phone number um and that's it right because you wouldn't like actually know their password but you know that they did it because uh you know there's a count there's an account that got created so that is pretty good so at this stage everything else you do is a complimentary outcome that you want to get from your onboarding in this case what i want is to get them a little bit more engaged in the in the app profile uh fill out right i want them to uh you know add a little bit more character ask for some very small things that can go a very long way in terms of like making them feel at home in the app and what i'm going to do for that purpose is ask for three things and then we're going to do one more thing at the end but those three things are going to be first of all tell me what your name is which is going to be a nice piece of information that's going to play well with how the app will work in the future second thing is add a profile picture since we're going to rely on that as a visual cue to identify people within the platform once they in this case you know play some matches join tournaments uh maybe they want to follow their friends to see what kind of matches they're playing and against what people and the third thing is to make the matching of matches like more specific and more appropriate we're going to ask them in this case if it's just going to be in this case a service for [Music] spaniards as sort of like my initial go to market i will ask them uh for like what province they live in right like what location are they based in so i can recommend them so the app can recommend them uh appropriate tournaments and things that they can attend you could use the native location functionality that apple has uh through the phone but i think if we just have a drop down with the provinces that would be enough and also it's it's a bit less personal than having to actually ask for a permission to access location information through the device so i'm going to stick to that uh you know simplicity for for this video so okay we have all the elements we need right as i mentioned so uh what we would need here is and we can move through this rather quicker uh so what's your name right and at this point i can i can definitely get rid of this left arrow here since now i definitely do not expect the user to go back and if they were to close the app and come back and i would recognize there's an already there's already an account in place they can log in with and they would come into this screen so instead of create your password we can say what's your name and then uh you know i can actually just start grabbing a few things from here to make the process a bit easier for us in this video so again using the text layer here to add a little bit more info so include your full name to make it easier to recognize you in tournaments so we are using the layer itself and this screen to explain to the user why providing us with their name is going to be a good idea it's going to be helpful to identify them within the dynamic of the app and how the app works so we're going to do that and now i'm going to keep the input very simple no need for an icon and i can even get rid of the placeholder text so just change that to empty since it would be quite obvious and i'm going to move the button i don't need this anymore and i think yeah the button is going to be 80 pixels uh down here so that's gonna be fine i can even i could leave it where it was honestly uh in case uh you know we want to have that consistency uh but if you do get the buttons a bit lower in the screen they might be also more accessible uh via the thumb right so always keep that in mind you have this sort of area here that goes from here to there sort of as a curve that is going to be the available and easy access easy reach of a thumb so if i put this here it might be a little bit easier to reach and move forward with if the user is holding the phone with with one hand so that is pretty good uh now we can move on to the next screen which is as i mentioned asking for uh location we can say uh where do you live and here i could bring back the arrow in case they for some reason want to change their name or you know put the wrong thing and here we can change the text and here i'm just going to grab the copy again so please specify the province that you live in to recommend you nearby tournaments and in this case i'm using a different component here so as you can see it's not a uh and a normal input it's going to be actually a select component so this typically in ui kits is a different kind of component it may look like an input field because it has the same form in shape but how it behaves differently is that this would open up a list a drop down with a bunch of options and what you need to differentiate this from an input is to have some kind of icon that would you know make it obvious that there's going to be a list that's going to appear when you click on this right so that's going to be the case for for this component right here and we don't need the keyboard anymore so that's done uh so in this case i'm going to bring back this normal home indicator i'm going to click on the frame paste so now that's pretty good and in this case we will have a default for the drop-down which in this case i would just put like alicante that's a province in spain uh so this doesn't have to be disabled anymore uh because that might just be the option that users select and i'm going to have the button all the way down to make it as easy as possible to be to be interacted with and i'm just going to change the constraint to bottom so that's looking pretty good so yeah now we have this in place we have our location ask and then the last thing that i'm going to encourage users to do is going to be to pick a profile picture to upload a profile picture uh to their profile so that they are more recognizable when they play tournaments or they play with their friends uh so on and so forth so i'm just going to duplicate the frame here uh with my command c command v shortcut and i'm going to say uh pick a profile picture maybe at this point uh well i'm going to leave this here why not and then for the copy this is what i wrote so give your profile some character and upload a photo to recognize you better so that is that's the reason why i'm asking for for profile pictures i'm going to remove this uh and then here i can just show you what i did this is actually the avatar component in tailwind ui uh in most ui kits again you will have an avatar component you can leverage so i'm gonna copy paste this and then how do you actually and then let's see let me double check yeah this is the right placement how do you actually get the user to you know upload the picture uh you may just have this and expect that they might tap into the avatar knowing that this is how you upload a picture sometimes you'll have like a little overlay with the camera icon uh which is fine but then once the picture gets uploaded it's still in the way so i i do like like this style where there is also an add button that is going to be and by the way we can change this to profile picture yeah this is going to be sort of overlaying but on the bottom right so it won't be like in between the user and the picture that gets uploaded which is kind of nice uh it's it has its you know orange accent which makes it very visible and then the choice of color and border here is relatively smart because first of all it differentiates the button from the rest of the interface but then in case the profile picture has a white background then you're still going to have this gray 300 i think it is rate 200 um you know stroke for for the for this component here that's going to help differentiate the picture from the button element so that is why that's the logic for how this is going to work and in the case of the action here whenever you are going to be involving the user and doing like a little bit more effort than usual so it's not just like inputting but you may be asking them for like a picture which they might have to take in the moment or browse through their picture library they may not have the picture they want they may want to upload it later it's always a good idea to have a secondary action that is something like i'll do it later right so it gives the user a choice of because this is not essential information for the profile to move forward uh then you can always provide this option uh to speed up the onboarding if that's what what the user wants they want the fast onboarding then you can you can have them uh tap on i'll do it later otherwise uh maybe i would just dim this one uh and just you know let them upload the picture and then uh they'll be good to go so uh for the next screen i'm just gonna copy paste this one because it does require a bit more work uh and i'll show you again what i did so what i did here is i grabbed the dart mode version of the top nav and the home indicator here so that's one thing then this the frame itself has a black background and here are just simply two text layers one is a little it's font medium to make it a bit more um you know out there compared to the other text which is cancel uh so i'm encouraging more that once you upload the picture you actually apply the changes which in this case would be the cropping so how did i actually make this cropping work well there are actually two images here so not just one but two and if i grab the background this is just going to be that normal image that has again using my my keyboard shortcut here for 5 a layer opacity of 50 and and right on top of that there is another layer that is that image cropped and it has this white stroke of two so if you combine these two uh in the in the uh in this view right here that is sort of the result you get it mimics like the idea of a user sort of playing around with the size of a picture to get it within the cropped area for their profile picture so that is a quite a nice touch if you're if you want to if you want to be prototyping this and then once you have once you have this in place theoretically you would go back to this profile picture screen with the avatar replaced for the image so let's assume that's that's going to happen and then the user would tap on next either that or you can just assume that the user would hit apply and then move on to the next step so if we now take a step back and think about all the outcomes that we wanted so far for our onboarding experience there are sort of like two right or three first of all we wanted them to know what the app is about so we told them like hey you're going to be joining this app so you can organize and compete in beach volley tournaments we get them to create their account and we do that by first of all getting a verifiable account channel which in this case is going to be the user's phone number we're leveraging the device that the user is in right now to verify their account and then in order for the account to be created we are asking them for a password that's going to be associated to the authentication process of that account and this includes the the process of agreeing and reading terms of service and privacy policy then we're getting to our our next outcome which is to get them a bit more involved in the app dynamics and give some character to their profile uh so asking for small things but nevertheless important things like asking for their name asking them where they live with a simple you know drop down here a select component where they can pick from from a list of provinces where they live and then at the end uh optionally asking for a profile picture uh which they can crop uh to get to the right to the right sizing so that is it and there is just one more outcome that i'm just gonna show you right here and that is uh it's a it's a common one for onboarding processes and that is to ask the user whether they want to enable notifications because remember this is not a default you need to ask for permissions to the user's device to the user to get notifications enabled so typically you will see some apps that have this as part of the onboarding process to make it uh you know get that permission in as soon as possible and so all i did here is i reused the logo i reused the text styles uh to to get this in place uh and it's as simple as well here i use like the again like the text layer to specify why they may want to turn on notifications uh and and here you can see it's like keep up with relevant activity from your tournaments and matches this is like the primary value prop of enabling your notifications uh and you can see at the very bottom you know very sort of touch friendly uh placement enable notifications you would expect that after tapping on this button there would be that sort of native model in the middle that's you know is asking the user like do you want to move forward with like enabling permission like notifications for this app but because this is optional again in the same way as the profile picture then that is why we also need a secondary action that is going to be uh i'll do it later right so this is basically saying like no but i may be open to it later once i realize there is value in enabling notifications and this will typically be somewhere in the user settings of the app right so they can always uh turn that on and off as needed or as desired and in this case the button can be enabled because we don't rely on any input and these by the way are also it's the same button right so it's not just a text layer it's actually the same button but i changed the background color to white and also the text to orange 600 so that is pretty much it i hope that this video was useful to you and you learned a couple of skills principles or practices to help you design and build an onboarding experience for your users if you enjoyed this video don't forget to give it a big thumbs up down below and if you want to stay tuned to more videos please subscribe to my channel because there's a lot more to come we're going to be looking at a lot more product areas that are involved in terms of building designing digital products so yeah really looking forward to that and i hope to see you again in another video i hope you're well and i'll catch you in the next one

Channel: Javier Alaves

Views: 586

Keywords: user, onboarding, user onboarding, design, flow, figma, crash course, ux, examples, best practices, user onboarding guide, user onboarding flow, mobile design, design process, design course

Id: KcHp4RiGIos

Length: 66min 49sec (4009 seconds)

Published: Thu Oct 07 2021