Ultimate UX Designer Guide: Tools, Documentation and More #learnux #uxdesign

Hey there, hi, Anirudh here. Welcome to my YouTube channel. This is Roadmap to User Experience Design episode number 4, and today in this episode I'm going to share the complete roadmap and list of all the techniques and methods that a UX designer across the globe uses to solve a specific problem within all the product stages. So the main reason to share this is that as a UX designer, you can understand that there are so many methods and techniques to learn to improve your product and scale it to next level. So without any further ado, let's get started. So let's get started with the complete roadmap, all the design skills that you should eventually learn, not on the very first day, but eventually get to learn as you grow in your career. So I have bifurcated the complete roadmap into multiple sections, be it a UI section, UI, UX deliverables, law of UX, design processes, all the design tools and user validation processes. So So let's get into it and discuss one at a time. So first, let me talk about the non-design skills. So for a master designer, it's design skills and non-design skills. In non-design skills, we have soft skills, communication, presentation, collaboration, UX copywriting. Well, this is non-design skills, but eventually it will help you shape up your design career going forward. Second thing is marketing skills. Well, it's very important to market yourself in today's world because people can't see you online, they can't see your work if you don't market yourself properly. They would be very low visibility on your profiles on social media. So maybe social media marketing is something that you need to take up as a non-design skill. LinkedIn, Instagram, or Twitter— these are the 3 platforms that you can target yourself, post your content and all the UX that you do over here, and just present it out here. Moment marketing. So moment marketing is basically designing something around the elements that are trending right now. For example, there's something that is totally trending on Twitter, Instagram, or Facebook. Maybe you can create some artifacts or visuals around it and put it on Instagram, your LinkedIn LinkedIn profile and Twitter. So that is all about moment marketing. So let's just move into the design skill. Design skill is going to be one of the most crucial part of your career, and let's just try to understand from the very basics. So if you go ahead and talk about design skills, I have bifurcated into a very smaller section. For example, you have to, or you can get started with actual building blocks of a design, which is the design or the visual principles. For example, emphasis, balance, alignment, contrast, movements, negative spacing, proportion, repetition. These are the some basic design visual principles that you can Google yourself and just try to find the answer for it. So do study this thing going forward. The second thing is user interface. Talking about UI, that's a different section, but before actually getting started with UI, you need to understand the user interface elements. For example, the complete UI elements are bifurcated into 4 buckets: the input control, navigational component, informational component, and the containers. For example, input containers may have something like checkbox, radio button, dropdown, or anything that can be used to take some sort of data or input from the users. Similarly, navigation components might have search, breadcrumb, pagination, which will help user from moving from one part of the page to another part. Similarly, you can go ahead and read about all the 4 user interface elements. Let's just talk about the digital ecosystem, which is one of the most important thing that you need to kickstart your design career. So I have bifurcated the complete section into apps, websites, and wearable and home devices. So let's just talk about apps. So we have further bifurcations in app, which is native apps. So native apps are basically those application which you have in your device right now. You might be using an Android app, you might be using an Apple or you might be using a Windows Phone. So basically native apps are the application that can be installed in your app. Going forward, there's something called cross-platform apps, which is you can develop for one single, single platform that can be used across all the other apps. Unlike native app, for native app you will have to develop different coding for Android app, differently coded for iOS, and differently coded for Windows. But cross-platform apps are basically you can code once and use it on multiple platforms. So there are some of the UI frameworks, for example React Native, which is by Facebook, and Flutter, which is by Google. There's a lot of it, but these are the two most common and famous things into it. Then maybe you can try to understand something about the app languages also and its uses. You don't have to actually do it or understand the language, how does it function, but you can definitely have an understanding of the names. So like Java and Kotlin is something that is used for Android development. Swift and C# is something that is used for iOS development. Next, let's going forward to the website part of it. So once to understand the digital ecosystem for website, you need to understand the web sizes and its breakdown. For example, anything that you do or design for a web application, you'll have to make sure that you go ahead and do the mobile-first approach and draw the mobile screen of it. Then also think about how does the design will look on tablets and iPad, and how does the design will look on an HD devices. There's something called cross-browser compatibility issue. While you're designing for web app, you need to understand that whether your design and component will be having a same behavior on, say, Safari browser, Chrome browser, or Firefox browser or not. So you'll have to make, make sure that the complete cross-browser compatibility issues is also taken care and in consideration. Then web languages and uses. So basically anything that you see on website is either developed by HTML, CSS, or JavaScript. Or combination of each. Let's just talk about the UI skills. I have bifurcated the complete UI skills into 3 important buckets: the foundation skills, the website design skills, and the guidelines. So let's go and talk about something like typography, color, alignment, shadow, space, layout, and composition, which would be your building blocks for your UI design. Now that you already know the visual principle and UI elements, you need to design something, right? So to get started with that, you need to understand the complete building blocks of typography, colors, primary, secondary color, how to select a theme for your brand or your app, alignment, spacing issue. So about layout and composition, you need to understand how can you make the most of your complete space on your mobile device or in literally very HD web devices. Grid system, basically in order to make sure that your complete design is very consistent throughout your lifecycle, you'll have to know what this grid system is all about. 4-column grid system for your Android or any application, maybe 12-grid system for your website, you need to understand the grid system also. Then going forward, the more mature you become with your design skills and all, you can definitely go ahead and study about design system and component library. So design system and component library is more like a way to reduce the complete redundancy in your app. If your app has, say for example, more than 70, 80, or like 1,000 screens, you don't have to actually do it from scratch. You can make a component library and reuse the same component by just drag and drop throughout the app lifecycle. Let's just talk about website design. Well, yes, while you're designing a website, you need to understand the responsive web design guidelines. For example, you should have an understanding of how would my design that looks something like this on a website would look something different on my mobile device. So responsive web design is something that you need to look into it. Responsive assets, well, yes, if your design has something like, for example, 40 by 40 pixels on, uh, say mobile, how would it translate into a website or a larger HD devices? You need to make that also in consideration. Responsive screens breakdown, like I just saw the multiple breakdowns on the top of it, like mobile, tablets, and HD device. You need to have an understanding how will this size will translate into this, or how will this size will be translated into an HD size. So that is something that you need to keep in mind while you're doing it for website. Then there comes some guidelines. Well, definitely you now, you know all the basic principles, UI elements. You can now know you can do actual UI by understanding the foundation. So before getting started with that also, now to design the actual UI in some tool, you need to understand some guidelines. For example, accessibility issues that are already available on internet, maybe a cross, cross-browser compatibility issue, or maybe in contrast issue. You need to go ahead and see that also. Material Design— if you're designing for an Android app, you have to go and just study what are the guidelines laid off by the Google itself. Then Human Interface Guidelines for iOS— if you are doing any iOS app for Apple, you will have to study this and just follow the guidelines. There is no mental maths or scientific thing to follow, you just need to study it. Responsive Web Design Guidelines— there are multiple guidelines laid off by the internet itself, you can go ahead and try to read that and implement into it. The most important and most huge bucket, which is UX skills. So if I give a larger bucket overview, you would see that it is very huge, very huge. It has a lot of techniques, a lot of methods, a lot of other UX deliverables that you need to do as a UX designer. But irrespective of that, let's just dig into it and explore each and every section one at a time. So when you talk about UX skills, you need to first get started as an understanding of user experience field. So maybe you start with understanding what is customer experience. So customer experience itself is a very larger bucket that talks about all the touch points where user can get in touch or communicate with your brand. So customer experience says that you need to make sure that you have the same consistent experience throughout all the other platform wherever a user can get in touch with your brand. Then there is something called user experience Yes, it's— this is also a very broad bucket. User experience, to define it, I would say that, you know, you need to make sure to define a solution that would be so simple to use that user don't have to use any extra mental math or cognitive load to understand your solution. So that is all about user experience design. Going forward, there's some common roles in UX design field that you need to be aware of. You can go to LinkedIn and search for everything and try to understand analyze all the expectations that the people have from this role. For example, UX designer, UX/UI designer, UX researcher, product researcher, and there are a couple of very more, but these are the most common one. So the way I like to study these roles is go back to LinkedIn or some job profile or portfolio and try to search for opening jobs and go back to the requirement section and try to analyze what is the actual requirement for UX designer, what is the actual requirement of a UX researcher, and then you can do the reverse engineering and then try to learn all the skills that is mentioned on the job portal. Going forward, there are some generic UX deliverables that you need to understand. For example, research, wireframes, user journey, user flow, information architecture, persona. Your user research can be about anything— product research or your market research or your user research. Wireframing is basically just about, you know, sketching your early stage idea. User journey and user flow Flow is basically about mapping all the, all the touch points and the flow that a user would go through while he or she is using the product or before using the product. Information architecture is all about all the data that the application would have at different, different level. Maybe if you talk about information architecture of a profile, so my profile would have my basic detail, contact details, address, or my portfolio or my profile page. So that would define the complete data about about a specific section. Persona. So personas are basically a group of people that represent same set of problems and issue. So if I have 10,000 users and maybe 2,000 users are facing same issues among them, so I would just group these persons into one single name called Anirudh. So I would say persona number 1, Anirudh, are facing same sort of issues. Let's just solve for them because I'm not going to design 10,000 solution for 10,000 other users. So I would try to find out the main common patterns into it and maybe translate into 3 or 4 personas at max. Going forward, you definitely need to learn something called Law of UX. There's a beautiful website called lawofux.com. You need to go there and study all the laws from there because say for example, you understand how to do UI, you understand how to do wireframes, but basically while you're solutioning, you need to keep in consideration with some of the important laws that are basically there on internet or people that they are following all across the globe. So there's a beautiful website called Law of UX. You can definitely go and visit that website to study all this law. Let me explain you one or two and how will that impact your design thing. So say for example, aesthetic usability effect. So for example, there's a product A which is aesthetically appealing but less functional. There's a product B which is not aesthetically appealing but more functional. So over here, what happens is even though the product B is very functional but not looks not good in terms of aesthetics or looks, people will definitely go and opt for product 1, which is more aesthetically appealing. It's more like, you know, impression on your very first sight. So that's what, that is what the law talks about, where a user at any given point would choose something that is very good looking or aesthetically appealing over something that is more functional. Second, say for example, Jakob's Law. So Jakob's Law talks about, uh, that the users are spending more time on the other products than your own products. So if you want to design something that caters their need, you need to make sure that they design the solution in such a way that is more similar or in line to the existing products. So that's why you would see that a lot of OTT platforms or any dating platform or any cab booking platform, they go in the same direction. We have a, a photo editing platform, we have a heading, all the content. We have another heading, all the content. Same will go with Netflix Prime and all the other products. If you talk about any other car booking applications, they would have a map to and from. So we follow the same thing so that once the user comes from some other product to your own product, they have a very small learning curve, or maybe negligible. You don't have to put a good amount of learning curve on your products because if user want to spend, user has to spend a lot of time understanding your product, they would definitely switch to something else. Similarly, let's talk about some other principles: Gesell's Law and then Cognitive Bias. You can go ahead and try to understand each and every one in details. The website has explained everything in very detailed format, so you can go ahead and help yourself. Let's just talk about the design process. So design process is a place where, you know, once you follow your design process, you will understand that there are thousands of other design deliverables that you need to do in each and every stage of any design process that you choose. One design process where you have a lot of experience and you can choose your own design process to follow— there is UDC, which is human-centered design approach, there's design thinking, there's a double diamond. I would definitely make another video about, you know, talking on the design processes and how to follow a design process for your own problem statement. But going forward, you need to understand that two important point over here is for a design system or a design, uh, design process, that, uh, design process depends on what stage of your product you're working on right now. If it's, you know, from starting or it's just in an ideation state, the design process would differ. And if there's a product who's already launched or, you know, you need to do some sort of refine, the design process would definitely eventually differ. So I would recommend that never stick on to a design process like blindfoldedly, but understand the requirement and then decide which stage or which part I can get started with my design process. Going forward, there's something called documentation. Well, yes, it's a pretty common thing. You don't have to memorize or remember anything. Documentation is all about making sure that you document everything that you write. The documentation can be your project brief, your problem-solving approach. I personally write down everything, like step number 1, I would do something like that. Step number 2, I would talk to my stakeholders. Step number 3, I would do some initial initial research, step number 4, something like that. You can actually document your complete UX solution, which, which further can be used for your UX case study. You can note down all the user persona, user experience map, sketches, usability report, stakeholders questionnaires. So anything and everything that you think should be documented can be done as a UX documentation process. Let's talk about the design research part of it. So design research itself is a very broader umbrella, just like your UX or a customer experience, but mainly bifurcated into two important parts: the UX research, which is the user research, UXR, or the product and the market research. Basically, when we talk about user research, we just try to identify two important main factors, which is more like the attitude of the users and the behavior. In attitude, we would want to understand what is that the user has to say versus what is user actually doing in your app. So these are the two main bifurcation about the user research. And some methods to do this user research are three important research, I would say. There's quantitative research, there's qualitative research, and there is ethnographic research. Now qualitative research has to do something with a good amount of in-person research where you would want to understand a lot of details from a specific user. So So you would have, say for example, one-on-one interviews or a focus groups interview. Quantitative research is more about trying to understand data from huge amount of users, maybe from city tier 1 or tier 2. So you would try to send some online surveys to a lot of people and they would come back to you with online results. There's something called ethnographic research. Well, ethnographic research can be a part of quantitative, qualitative bucket as well, but ethnographic research means you need to actually go to a place to research about some specific person. Maybe if you're trying to make an application around farmers, you need to go ahead and live their life for a day or a week. So that's all ethnographic research is all about. In qualitative research, we have some important buckets over here, like user interviews, where you would have a one-on-one interview with your users. Card sorting— there's something called open card sorting, closed card sorting, which is most widely used for, you know, deciding an information architecture with the users. Empathy mapping, user diary, mood boards, focus group. You can definitely go out to Google and just try to search for individual buckets and get some understanding of it. You don't need to actually study everything in detail because eventually once you start to perform any of this method, you would learn about it. So going forward, we just understood that there's a user research bucket which talks about the attitude and behavior of your users. It can be qualitative, quantitative, or ethnographic. And each of this bucket would have a lot of other methods. It's not just restricted to this, but some other methods are also there. But this is to give a fair understanding of all things that you can do to do a successful user research. Once you talk about the product research and the market research, there's more important parts like understanding the actual benchmarking of the product or the market. So benchmarking can be a solo benchmarking where you just compare your product with the actual competitor. Or benchmarking can be a general product or a marketing benchmarking where you would try to do a competitive analysis and try to match all the features and benefits with all the other competitors that are in the market right now. Then we talk about gap analysis. So gap analysis is basically, uh, there's something that you need to achieve but you're not able to achieve right now with your existing product. So why are you not able to achieve that? Then we try to go ahead and do some sort of gap analysis. There is tech feasibility check also because say for example, there's a hypothetical solution where I want to travel from point A to point B and then you would say that let's just go by jet or let's just go by private plane. Well, if it's possible, you can go by walking or just using a public transport also. You need to understand the feasibility of finance over there. So similarly, when you propose a solution, you need to understand the tech feasibility also. Once you're done with your UX research and design bucket, let's just talk about the UX validation and the audit. So basically, in order to do some sort of solutioning, you would go ahead and do all the UX research as we discussed— can be user-based, can be product-based. But when you started designing your solution, there are two important factors over here. First, if your solution is already designed and developed, you will have to do some sort of UX audit onto it. And some example of it would be, say, A/B testing or heuristic evaluation, where you would go ahead and try to understand the actual issues that are there in our product. Or maybe you can go ahead and try to understand the data analysis by analytics also. And validation is all about, you know, before your product is actually going live into the market, you'll have to make sure that to validate the idea or the solution with actual target audience. So that would be usability testing or eye tracking, or maybe some sort of A/B testing can be a part of usability testing also, where you compare two solutions and try to to understand which one is doing best for the users. So that is something we need to understand in terms of UX audit and validation. Each of the study is definitely very huge in itself. For example, usability study personally takes it more than 3 to 4 weeks at any given organization. It's a very huge process, but the outcome and the actual results of a UX study, or say for example the benefits, are very huge. So definitely you need to perform that. Going forward to the wireframing things, so there is nothing more to learn about wireframing but just the concept. So there are multiple ways you can, you know, translate, translate your ideas into some solution, which can be more like some random sketches, rough sketches, low fidelity wireframe, higher fidelity wireframe, or medium fidelity wireframe. In wireframing, the only level of fidelity increases with the amount of specific details that you add to a wireframe. So maybe somewhere you are just drawing random boxes and maybe in middle, middle fidelity you would just put some random images. Into high fidelity, you would just want to pick up all the right set of data over here, maybe proceed to payment or cancel your order. So the amount of fidelity would go on increasing from sketch till high fidelity wireframes. Then we have something called prototyping. Again, there's— you, in prototyping, you have to make sure to design a complete solution which is interactive enough where we can, you know, explain the stakeholders or developer what is the complete product is all about. I have made another video on this, you can go and check out in the other episodes also. But prototypes are basically of two, two different variants, the static and the interactive. So static variants would be just more like to understand the flow from point A to point B or point C to point D. But interactive elements consider all the animations and micro-interactions that can be easily done in ProtoPie or Figma as such. So that is all about prototyping. Let's just talk about the final part of your UX bucket, which is UX measurement. So basically, let's just say you did all sort of wireframing, prototyping, UX validation, all sort of research, and you came up with a product which is live into the market right now. So right now you also need to understand that what are the actual return on investment on that product What are the behaviors of users that are using the product? What are the attitudes of users towards that product? What are they saying? What are they using? Or in what direction the product is going? So measure that return of investment of a product. We have something called KPIs and framework. So KPIs are basically key performance indicators. So this would tell you that your product is doing good or bad in terms of, say, attitude of our users, like whatever they're saying. And maybe in terms of behavior of the users, like how are they actually using the product. So when you talk about the behavior KPI, there is something called task success rate, task on time, search versus navigation, user error rates. So basically, these methods will determine a specific result or insights that would talk about how successfully user can perform their task, what is the actual time that they are taking to complete a specific task, how efficiently they are moving from search to some other pages or directly from navigation to navigation from one page to another. Similarly, you also want to understand the attitude of the users towards your product. So maybe if I'm using a product, you would see it very often that people ask for review. So asking for review is importantly known as attitudinal behavior towards your KPIs. So you can go ahead and talk about usability score of your product. You can talk about net promotion score. So NPS is very standard where you would go ahead and send a form to users and ask them to fill, which would have a rating of 1 to 10. So user will go ahead and place a rating of 5, 10, or maybe 7 or 8, depends on the attitude of the user, whatever they feel about it. So that is one of the method. Similarly, there's another framework which is given by Google itself, which is the HEART framework. And now HEART framework talks about 5 important factors: the happiness, Engagement, adoption, retention, and task successful. So happiness is all about how comfortable or desirable the app is for the users. It may talk about how comfortably he or she is using your product, how often are they coming, what is the reordering rate. Going forward, talking about engagement, what are the time that the user is spending on my application? Adoption, how easily can we acquire users into our app? Retention, what is the actual the time that users are spending and coming back onto the app. And it's not just installing within 1 or 5 days or say 1 month, but they're staying it for a very long time. Task success rate, similar to what we have discussed over here in the behavior. So the HEART framework is a combination of the attitude and behavior that we have just studied right now. And you can go ahead and Google search it. It's something given by the Google directly. So that was all about the UX framework. And more like that was all about the UX skills. I know it was pretty large amount of UX skills, but we still have some more skills to learn about. And let's just go to the final countdown, which is nothing but the design tools. I have already made a video on design tools in one of the episodes. You can go back and try to understand that. But giving a quick glance of the design tool, there's something called Figma, which is used for, you know, UX/UI design, interactive prototyping. There's something like Sketch as a tool. We can design and do static prototyping in Sketch also. There's Adobe XD, you can do designing, wireframing, sketching here also. There's something called Zeppelin. So Zeppelin is basically used for, you know, handing over all the assets to the developer. You can use any of the software, Figma, Sketch, or Adobe XD to design something, but there's something called Zeppelin in order to provide this design and the accessibility to the complete development team, you'll have to give it into something called Zeplin. So a lot of companies I have worked with uses Figma directly, because the inspect element that the developer wants to understand the height, width, or padding can be done by Sketch or Figma directly. Then going forward, there's a documentation tool talking about Notion and Google Docs. It's pretty simple tool. We talked about our UX documentation process over here. So all the documentation process that you see over here can be done directly by Notion or Google Docs. Similarly, there is Miro and FigJam. In order to do any kind of ideation, iteration, collaboration, in order to draw some user flow, product mind map, or user journeys, information architecture, you can use the complete tool known as Miro or FigJam. So this mind map I have completely made into the tool called Miro. This was the complete mind map for UX methods and techniques that product designer uses across the globe to solve their given problem. Now I understand, seeing so many methods and resources, it might be very intimidating for many of you, but you don't have to worry at all because you don't have to learn and understand everything on your very first day. When I actually started my first UX job, I hardly knew 10% of this, so that's perfectly fine. That's all I have for you today in this Roadmap to User Experience Design episode number 4. If you have any questions, please put them into the comments and I will revert back to you as soon as possible. This is me, Anirudh Palaskar, signing it off. See you in next episode where I'm going to talk about the complete UX portfolio from scratch. Till then, bye-bye.