Real UX Project: From Data, Wireframes to UI Design Process

if you are designing or updating a design make sure you always leverage qualitative or quantitative data make sure you are data informed when you make design decisions hello beautiful people it's misco here now if you haven't realized yes i am freezing it is cold in sydney that's why i got a bit of a beanie on today now if you're wondering is that a microphone misco hell no that's not a microphone that's another camera why because we're doing something a little bit different today i'm going to be taking you behind the scenes and walking you through how i ideate how do i think about data and assess data how do i wireframe and also design now this is for a real project that i am actively working on so it will be pretty interesting for you to watch this from start all the way to finish because i'm going to take you through that entire process now if you haven't realized i am releasing multiple courses from freelancing to building your agency to ui and ux design so if you want to get access to all my courses make sure to check the link in the description drop your email in that's all you have to do and you'll be the first to know when these courses go live so without further ado let's get right into it alright guys now i want you to understand this is a real project okay this is something that is going to go live and i want to walk you through that entire process now to give you a bit of a context of the project that we're going to be talking about i want to understand the designer ship so the design ship is one of my personal projects that i'm currently building out it is an exclusive paid community to bring together designers from all around the world we've got 80 active members right now and they're all paying a small fee which will help contribute and to help building out this community now one example where i want to walk you through is taking a look at this page right this is the home page and the point of the home page is to really help educate people about what a product or service is about so this home page ultimately is trying to convince or educate a potential designer that wants to join this community what we're all about okay so you've got a bit of a title here you can see a bit of a preview of the actual platform as well you can see a few companies that featured us adobe and webflow you can find that on their website and then we have a testimonial here okay now i want you to have a think this is a bit of a pop quiz before we actually dive deep into the project so obviously you understand what the point of a testimonial is the point of a testimonial is to help people understand what an existing customer or existing member has to say about the product or service so in this ca so in this scenario the community now let me show you this i'm going to go into analytics this is for the designer ship this is real data right now we're going to go to acquisition so this is how much traffic like traffic coming into the website go into the overview section and you can see over here on the 26th of may that's when we launched the brand new site the site that you see right now over here right that's where we launched 2.0 the custom platform new platform integrated into the website and all that juicy stuff so on the 26th of may we're going to go here and make sure 26th of may to now you can see that there has been 22.7 uh that 2700 users visit the website okay so 2700 people have visited this website when i launched this brand new version of designer ship okay now out of the 2700 how many people do you think clicked on this thumbnail to watch this video of stefan's video testimonial give you three options a 132 b 187 c four have a quick think about it give you three seconds to ever think about was it a b or c how many people clicked on this video one all right so you probably thought it was 132 or 187 right why because i anchored you i used a marketing technique where i anchored you by stating that there was 2 700 people that visited high number and then i anchored you by having two high numbers that are comparable so you've probably thought probably it would be a high number because i anchored you towards that four people watched this video so we can actually take a look at this video and you can see five people sorry what probably would have been me so five four or five people right now that's a little thing that you can research on your own little trick that you can implement into your own pricing strategies or designs but five people watch this video when i realized this i realized that's a terrible click-through rate a testimonial a video testimonial is the most genuine like asset that you can have on a landing page to convince people about the value and educate people about what someone who's actually paying for it has to say so it's a very important thing and i want people to click on these testimonials because it's genuine it's real people actually value this community and if i don't put my best foot forward people won't understand why they want to pay or be part of the community so out of the 80 people quite a few of them actually a lot of them actually really appreciate it and they're all sending me video testimonials right now and you can and here are some words as well now what i'm doing from here is i want i wanted to go ahead and refactor a bit of this website to really make it more compelling and get more people clicking on on these video testimonials so they can actually understand the genuine value right so i'm going to flip over onto the other camera and help you understand what that process looks like in wireframe form alright so let me walk you through my very own sort of wireframing process to help you understand what that looks like so i'm on my ipad i'm going to open up procreate procreate is a great way for you to just to get sketches down get your ideas down and then shoot it over to your um to your computer or your desktop so obviously the first thing i want to do is just like replicate what i currently have so i'm going to draw a header um draw just sort of replicate whatever i have so logo i've got a couple of links at the top and then i have two ctas um you can actually sort of take my visual uh language that i use in wireframe to for your own process so links and labels are just a simple line images i scribble in and with buttons i also have like a rectangle with a line inside now from here i want to make sure that i have a bit of a hero i want to outline that hero section a bit wonky because i'm actually trying to get this aligned with the camera but obviously i've got a heading up here which is something which is great and i've got some text and then i actually have two buttons as well so join the community and then learn more right and then i have a bit of image now i want to maybe the image can maybe try go inside that hero section so this would be above the fold i'm hoping that this is all above the fold um so you can have the image in there perfect and then you probably have like a couple of circles over here which are the profile photos cool so that's just really wireframing for me isn't anything artistic it's really for me just to dump my ideas down so maybe this oh maybe this would actually go out um so this gets really messy and like i'm very i'm very okay with messy wireframes it's great because it means i'm not being precious about it i'm really just getting my ideas down that's the most important part of a wireframe it's not about how beautiful it is it's really just about getting your ideas down now after that i think we've got some logos right so i've got a bit of logo here and i'll call that in that's adobe that's webflow there's also another site that we're featured on which is um lovers magazine so i'm going to add that in as well in this update after that what i want to do is i actually want to include i think what was stefan's video testimonial it wasn't obvious that it was clickable and it didn't feel like a video so what i might do is actually i might have a title around here and then i might actually bring through a couple more um profiles so it brings more importance to it because remember like i want to make sure that this section feels important because i want people to recognize it i want people to click on it i want people to interact with it right so i want to make sure that it it there's weight in what we do and there may be a cta over here to say like view all members so this will probably be a member maybe it's maybe this is what i want to be doing so the name and the role name role name role name role and then we have a photo of the person and then potentially and then we have like a play button here cool yeah so these play buttons will spawn new video testimonials so now if you can now if you remember what we had before before it didn't really feel like a video testimonial um it didn't really feel like much of a component i felt like you would just scroll past it but hopefully now if we actually bring through these photos right it makes it more compelling it makes more it more clicky like you want to click it you want to interact with it because there's a play button like that's more obvious photos of people and we also have more elements on the page as well i think it just will help people understand that this is an important section of the website and it just doesn't feel too clean so let's go ahead and share this let's just do a png exporting this out bang send it to my computer all right so we're gonna head over to my desktop now all right so i've got the image and what we're gonna do is head over to figma and i'm actually gonna move this aside and i'm gonna bring my keyboard over and we're gonna start actually designing all right guys so hopefully you are ready so hopefully you understand what i did so i've already got this upward ready and i've got some photos i've pulled through from previously these are real members by the way and you can see that my beautiful picasso artwork is going to be amazing all right guys first let's just recap this could have been a lot more beautiful but obviously it's quite awkward you know like trying to like draw but also this k in this view and i don't know just got real weird we've got a header here we've got some ctas over here headline tagline ctas again image of the platform i've got some logos and then we want to design out this piece so let's take a look over here this is exactly what we've got so we're not going to sort of change anything on the header we're not going to change anything up here either now this is what's currently live on the website so if i actually show you let's just let me bring something across over here that's what's live now the one thing i don't like about this is it feels a bit it's too bangy there's too much color too much contrast and it doesn't feel nice to look at and there's too much detail like with these platforms like previews of the platform you want to give the user a sense of what it's about but you don't want to be detailed enough where they can read everything so that's why prior to this video i actually went ahead and simplified the actual design so you can see now if i copy this over let's just quickly put this on top all right just so you can help you understand you can see how it simplifies it right away so hide that that feels very cluttered and it's probably too much information for someone who's just browsing so i want to let them know that yes there are active people on our platform real people on our platform real people having real conversations on our platform but they don't need to read the specifics it adds too much clutter so you can see that this simplifies it right away so that's a nice little technique that i like to do i'll hide the one underneath it i've also got a nice little shadow there now i don't think it had shadow before yeah so that helps elevate it a little bit and obviously if you follow any of my videos you can learn you can add that over here and by the way i'm using the designer ship design system to design the designer ship mainly because it makes my life easier and if you want to get access to this design design system link is in the description and there's a juicy coupon code for you so you can get 10 bucks off and i'm going to move this to the side a little bit because it's like blocking my view um let's see if i can move this is that better is that better all right that's better guys that's better guys you can see me clearly all right perfect now here you can see we have the two logos but i wanted to grab this logo up here so what i want to do is i can right click on this and let's just inspect this so this is an svg so if you want to grab this svg you can go ahead and download a plugin for that but i'm a nerd so i like to do the nerdy way of things and correct open up my code editor save that out save it to my desktop so let's just go lovers magazine svg you can replace that over in my desktop head back over to figma and i can head over to my desktop and i'm just going to quickly grab that svg pop it in perfect so it's an svg now so if you notice if i hold down command and select this logo you can see i've actually selected that directly and it's inside a auto layout so i can actually paste that in and it's going to fix it now i don't quite like this gray on this light blue grayish color so what i'm going to do is i'm going to go ahead and actually press enter and that will give me a direct selection of the elements inside i can actually go ahead and grab this rectangle that's masking the color and i'm going to give it a nice blue color maybe 400 so perfect looks good so it sort of matches the color behind it and it just looks a little bit better it's more harmonious that's the term that people use and then let's click on this make that 400 as well so once again if you want access to this design system you can you can literally design beautiful designs by utilizing the design ship design system there we go so that's already looking beautiful and the great thing about auto layout is it manages all the spacing for you so i feel like this is already coming along quite nicely like once again this is very cluttered and busy this feels a little bit uh just ugly um we're bringing that out making it more harmonious i might actually change this color to a nice little blue as well maybe maybe let's see hmm what should we do there let me make that a little bit smaller let's see if it looks better over as a maybe as a p2 and what if it's 400 yeah that looks quite nice looks yeah it sort of adds a little bit more balance and sort of blends in a little bit more all right so this part we're revamping guys we're gonna high just let me collapse all this and what i want to do is i'm gonna click on this frame up here so selecting the whole frame i'm gonna hit ctrl g brings up the grid system so once again this is all populated because i'm utilizing the design system uh for designer ship so it's all automated now i want to bring these cards over so i want to design out this title this button and also these cards as well so let's just quickly make sure that i'm in the right section let's put down some text um what our members have to say that's going to be the title it's going to be a p2 this will be a h4 let's try h4 now it'll be h3 definitely h3 um oh sorry let's do h2 let's do a h2 this should be a h2 technically let's sort of break that down align that over to the left right and then we want to create these card elements with those photos inside so the way that i would do it is once again if you've watched any of my videos i would use a frame i would give this a background color of white give it a border radius of eight multiples by four makes my life a lot easier and then i might grab a photo of stefan so this is stefan one of our members great guy great bloke i might actually put that in here let's just round it up to 320 for now to see how that works um let's just see how that works actually won't go in the rectangle is it being masked it is b mask perfect that's exactly what i want and then we might go stefan um a sonya there we go these guys are going to be famous okay so these these are great people guys if you want to follow them they're definitely on the design ship you can find them or you can follow them on social media definitely follow them and then we can just say ux designer so that's what i want to do probably make that a p tag um let's go whoops a little bit too large let's go a little bit smaller it should make 14 actually and then make this a lighter gray so it gives it a little bit more hierarchy on this page there we go and i think the title needs a little bit needs to be a little bit bigger mainly because it feels like the same let's make this also a lighter gray as well there we go all right so we can align that to the left and perfect so if you want to hold down option you can sort of see the spacing if you want to make sure your pixel perfect um when i when we go into development the way that my team works is we flex everything and everything is responsive so i'm not too phased by spacing it's always going to be it's always going to be relative to the viewport width and height so everything is going to scale gracefully so i'm not too pedantic about the actual spacing of things in figma mainly because i understand that when it goes into development it's not the case they're not going to be using fixed pixels to code in the actual spacing all right so that's the first one so command uh control g will hide the grid you can see that it's all curved and it's looking beautiful now the one thing that we're missing is the actual play button so let's go ahead and create that play button i'm going to use a circle for this because it's going to be a little bit easier um let's use a color black and then stroke let's use a white maybe give it like two pixels what size is this 50 let's make it 60 just to round it up so it's divisible by four and we can center that let's grab the triangle and let's put in a little play button over here let's do it 16 by 16. once again divisible by 4 let's rotate it let's give it a quarter radius of 2 maybe 20 is a little bit better um cool that's looking good let's use white there i think we need a bit of opacity in this section um so i'll break that out from the design system actually it's just so i can leverage a little bit more control of the characteristics of the styles um that's looking good maybe there's a bit too much border radius for this yeah that's better all right so then i would probably group these two together quite just like play button for now i normally tidy up my layers at the end um it just makes my life easier i don't want to waste time managing layers while i'm designing so step in a sony all right so let's duplicate that and then command command d will automatically populate it so we've got four stefan assanges right now let's go ahead and let's populate that and let's see hmm that's good okay that's good let's put ludo so that's kev that's kefar and this is ludo and this is dummy and then we also have ed esmend over here so depending on what i want to do i'm looking at this design right now and i feel like these play buttons are covering everyone's faces so it might be better if we actually position them somewhere else maybe in the top right corner yeah i think that looks a little bit better it looks a little bit better maybe they should all have a drop down shadow as well okay hmm trying to think is it too dark right now i feel like it's a little bit too dark let's just take a look at how much we should drop this by 50 all right so we'll probably go something like this obviously i since i understand like development you can reposition this play button really quickly um in code so i wouldn't spend too much time on this either i feel like the play button is a little bit too big though let's just make this a little bit smaller 50 48. i just feel like the ratio like it's it's way too big in terms of like it's the same size as kefir's head so let's just remove that and maybe it's a little bit smaller cool and then if i double click click on this and i press place all right command v command v it will just place it in the same spot so that's the beauty of it um perfect so that's looking good and then what i want to do is i just want to grab this button the secondary button that i already have and you can see that we can actually go ahead and do this if we wanted to and you can see the power of our design system all right so we can go primary and do secondary let's just go should be ghost no let's just go primary um let's go to regular and no no and then we can just go ahead and change the colors of it so change this to a darker what shade was it again what shade was this this is gray 2 and gray 600 so go ahead and go gray 2 and gray 600 and then we can go view all members so really what this will do is what i'm imagining is when someone scrolls down to this section they can click on this and that will play the video spawn off a modal they can actually go ahead and like watch everyone's video and if if more members actually start sending through the testimonials which esmen is already doing right now i potentially might go ahead and make this scrollable so we'll make this carousel and people can watch everyone's testimonial and i think when you bring significance to the actual design to the page itself by bringing through people's real photos bringing through importance and hierarchy in this into this section once again i feel like people are more compelled to take a look at this this doesn't feel very compelling and what you making you want to click it um it just feels quite bland a bit of too much text so with this design i feel like it's going to intrigue people and it's going to make people want to click and that's what i want people to do i want them to understand what the value is not from myself not from me telling it but from the members who are actually paying for it right now so if i do that i potentially might add a next and a previous button up here but for now we'll just leave that out and if anyone clicks on view or members that will take them to the members page over here and then they can browse everyone that's currently part of the platform which is an exciting 80 people that you see in the bottom right corner so recap is 2.7 2 700 people visited this website five people watched this which is very terrible click-through rate and this is a very important asset that i want people to watch i want them to watch it because it's how people can understand the value of it yes i can talk about it here yes i can show people but unless you hear people actually talk about it it's going it's not it's going to make that that major difference so four five people out of two thousand seven hundred if you take a look at that conversion rate you can go five by two thousand seven hundred that's a zero point zero zero zero point zero zero one percent if you round it up zero point zero zero two percent of a percent that is so low so that is what has lev triggered me to think okay we need to reprioritize this design based on real data quantitative data sketched it out quickly based on just my thoughts what can we do the first thing we can do is make it more compelling make bring more prominence to the page as well don't make it look like a flat testimonial that's just filled with text make it visual bring through the faces bring through the people make it compelling make it so people actually want to interact with it that is the rationale behind that entire process and obviously this is just a very small portion of the entire project now if you find value in this video make sure to let me know in the comments below because i will plan to do more sort of like behind the scenes of like maybe other projects larger projects i need to understand if you find value in this one as well now a very quick summary for you guys if you are designing or updating a design make sure you always leverage qualitative or quantitative data make sure you are data informed when you make design decisions so for me yes i could have said i would just want to make it a little bit more beautiful but no i decided to refer to the data to make sure that i am informed about why i'm actually doing what i'm doing that's how you will become a better designer you become more strategic and it's not about your gut feeling and your bias perspectives it's about what the data has told you so from there then you make a better assessment about what you should do always start with wireframing always start with putting your ideas down on paper first because if you jump into figma oh misco is going to give you a bit of a back slap to the to the face mainly because that you are then making yourself work harder you're trying to solve the actual ux of it you're actually trying to solve the content of it you're trying to solve the visuals of it you're trying to solve too many things take things one step at a time focus on wireframing where it's not about the design of the visuals it's just about putting your ideas down on paper once you are confident once you are happy with it then take it into design so you are only focused around the visual aspect you're not trying to think about the layouts anymore you're just bringing it to life now hopefully this video gave you a lot of insights and you'll learn to think or two about it and one if you want access to the design system you can link is in the description use the coupon code to get 10 bucks off and two if you want to get access to all my upcoming courses which i am extremely excited about and lots of you guys have been messaging me and emailing me about make sure to check the link in the description as well because the very first part of my freelancing course about personal branding and your online presence is coming out very very soon oh and by the way if you are thinking about joining the designer ship feel free to either wait until we get the video testimonials out so you can actually learn about the community you can also reach out to some of our members and simply ask them yourselves about their experience or i'm going to quickly walk you through the community as well so you have a better understanding of what it's all about so you can sign up for for an account you can cancel anytime there are no locking contracts i'm not going to hold you to anything you want to cancel next month cancel next month and you're not locked in at all but if you do sign up what you do get is you'll get access to exclusive deals discounts on a few products our own products as well and many more products to come you will also get access to if you take a look over here the very own designership community so every day we have members meeting each other jumping on calls meeting each other which is great it's so nice and so refreshing especially during these times to be able to meet other designers from all around the world and have a community that actually thrives on it everyone loves this type of stuff people track their work for the week asking your ex questions um sharing sort of like journals and their processes showing their wins i i share my wins talk about ui design updates on google hangouts other people meeting other people it's a great place to be and i'm not forcing you into it if you feel like it's right for you give it a shot if you don't enjoy it you can always cancel as well so hopefully you enjoy this video guys and i really do hope to see you on the ship very soon you

Channel: Mizko

Views: 13,808

Keywords: ux design tutorial, lean ux, real ux case study, ux case study, full ux design tutorial, ux design beginners, ux design, ui design

Id: j0cR1Sf0I24

Length: 29min 45sec (1785 seconds)

Published: Thu Jun 10 2021