Make Awesome UI / UX Case Studies

1. Class Intro: Case studies are presentations which helped to present yourself as a designer. Service you're providing on the product you are selling. This should tell a story from start to finish. And what are some steps that you took to get to that finish the result. Here, my name is Alex and welcome to this Skillshare class about to UI UX case studies. I am digital design products creator and so far I've created or 500 different products and also our course creator. And so far I hope created or returning different courses. In this class, we're going to talk about UI, UX case studies, why they're important and how you can create your own. We're going to mention what our case studies, which elements should you include in your case studies, creating a structure and how your overall structure should look like. Some awesome examples online to help you get inspired and to help you understand some of the elements that adopt designers use how to write content for your case studies to make it easier to consume and understand. And finally, presentation dips. How can you present your case study in the best way possible to achieve the result that you want, whether that's to sell your services or to sell the euro. Your class project for this class is to create your ideal case studies structure on a piece of paper is to simply use a pen and paper. And there is a dedicated video about your class project in this class. So make sure to take a look at it. I'm really excited to see your ideal structure for your case studies and make sure to include at least some details so that all of us know who are looking at it and what it is all about end to help us understand a little bit better. One good case study can really change your life and career for a pattern because it's really going to attract a better sort of clients to your work. And it's really going to help you get hired debt faster. And dandy prefab a key study or if you don't have a case study at all, I think all designers out there and not just UI UX designers, but graphic designers as well, 3D designers, all kinds of designers should have case studies, but those case studies are going to differ in length, amount of elements inside and England progress because different processes are required for different designers. But nevertheless, good key study is what's going to bring you more quality work. Some really look forward to seeing you inside, and let's create some more, some case studies. 2. What Is A Case Study: Case study is nothing more than a long for presentation of your work? No, your work can be your design work or it can be our product to create it. And we're going to touch on that part a little bit later in this class. But for all intents and purposes, it's just a presentation of your work. Now, why a long form and what's the difference between long form and short form? Well, short-form presentation is something that you see on Dribble every single day. And websites like dribble is just basically a screenshot of the part of your work so that it can be a header section of your website, for example, or a mock-up image of your app which is already completed. Well, the case study is a long-form presentation that you usually see on beacons. It's a case study because it helps your users and your viewers of that case study, study your process, study your steps and study how you achieve that end result, which is for example, product design or app design, web design or something like that. It's not limited strictly to UI UX design. It can also be a great in branding. It can be great in logo design is just the length of it. It's going to vary depending of the project in question. For example, if you are just designed, a logo is just going to be a bit shorter because there is not too many steps in designing a logo. While in UI UX design, if you are, for example, designing website which has 20 different pages, all of them are responsive and you have to create paper wireframes. Wireframes in your favorite software, of course, is going to vary and you're going to have many more steps than for example, in logo design. So basically that's a case study in a nutshell. And in the next few lessons in this class, we're going to explore what you should include in your case study. What are some steps that you should take and some great presentation examples to get you started with your case studies. 3. Elements To Include: There are many different elements that you can include in your case studies. And over my 15 plus years in this business, I found that some elements work better than others because some elements just really help to tell a story of how that design developed or process over the creation process and the process that you worked on this particular project and some others really distract your viewers from getting to the point. Because the whole point of a case study is to attract potential viewers that can turn into clients. Hopefully, if that's something that you're looking for, if you want to just show off to your peers and for them to understand your process and how you got to that end result. So in this video, we are going to discuss some major elements to include, in my opinion, because I see these elements popping in all the time in some great presentations I found online. So here we have in this quick little introduction and some major elements to include in your case study. Once again, it's going to vary depending on your industry, depending of the niche you are in. Because not all industries are going to need these elements. And not all case studies are going to need these elements. If the project is shorter, for example, then if the project is longer. So first thing what you need to do is include texts, describe what each section and element does. So don't overwhelm your viewers, but give enough information about the project. So for example, if you did our website design and don't go into too many details. For example, I woke up one morning and then client reached out to me. Nobody wants to hear that. Get to the point. Be short, concise, but be precise about the elements that you're trying to describe with your texts. Make the images tell the key story here. But text is there just to help cell the oral idea, the oral designed your oral presentation. So it's just there to help your images work for you. So speaking the language of your audience and don't be too technical. What I mean by this is, who is your target audience? Is your target audience designers? Then you can speak in terms like I used responsive resize in Adobe XD and I use different artboards sizes and stuff like that. But if you're trying to attract clients, then speak in the language they will understand because they probably don't know what Adobe XD is in the first place. So perhaps you shouldn't mention it that prominently in your project. Of course, you should mention it a few times throughout your case study, but make sure to stick to what your clients understand. So for example, if there is a beauty company, then make sure to talk about beauty products, about the process of getting to this particular design. Use the language they will understand if that's the target audience that you are targeting. Of course, if this is to be seen by art directors, they of course know about Adobe XD and all these tools, but don't be too technical either with the text you're trying to tell here. So once again, if you're in a beauty industry, make sure to keep that balance. So describe which tools you're using and also describe the niche you are in. Describe the process you are in, and use some technical jargons inside of that particular niche, but don't overdo it and don't over-complicate things. Once again, text is there just to aid your images, tell a better story. Next up we have images. So as I mentioned, use images to compliment your text. Images should be connected to the story you are telling. A news imager that helps your story, not just any image ID. And if you can't take them yourself, what I mean by that is, for example, if you're in a car business and you're talking about cars, then just show image of a mountain. Because what's the point of that image? It doesn't help to tell that story. It doesn't help to sell the idea of that particular design. So don't use it. Use images which are going to go well with your presentations and which are going to make sense as it says here, take any images if you can. Everybody has one of these, so you can simply use your font and snap a picture of your process about yourself working on this project about creating, for example, paper wireframes. Or you can take your phone and give it to somebody, you know, for example, your family member or your best friend or something like that. Or you can even do it yourself if you don't want anybody to help you, you can simply position your phone behind you, for example, and take a shot, something like this. So over the shoulder of you working on your computer, for example, or on this side. Or if you're taking a look at the preview of that design, you can simply show your form like this under an angle of you holding that phone and showing that design. It's really going to help tell a story because it's going to show to your target clients and your direct audience that you really care about this project, that you really put a lot of thought and effort into this project. And that you really pay attention to details for our directors, especially who are looking to hire designers. This is going to be crucial in their decisions because they can see straight away that you are the designer who's paying attention to those small details. And it's really going to pay off in the long run. So just make sure to pay attention to little details like this. But once again, don't overdo it. Don't just take pictures of yourself randomly and simply put them in your case study. It doesn't help to tell a story, but few images here and there aren't really going to help you sell the idea of that particular design. Next up we have style guide and design system. So show off your style guide or design system to show that you're organized and structured. Once again, for our directors, this is extremely crucial, but for our clients as well, because they can see all of these elements coming together in the finished design, present the most important elements you used, but don't overdo it. Place the gradient to cut off your image at the bottom if it is too long. This is especially important for really long projects and really long case studies because in your style guides in design systems, in many cases, you can have hundreds of different elements, but not all elements are important. For example, you can show colors, you used fonts, perhaps some buttons, maybe some forums elements because stuff like that. And then simply introduce our light gradient, which is simply going to feed that's designed system while your viewers scroll down to the bottom. So you're not overwhelming them because once again, style guide and design system is not the end result, is just a tool which is going to help you get to the end. Result, which is bent, of course, should be at the very bottom of your style guide. Both. We're going to talk about that a little bit later in this class. Finally, use the colors from your project and style guide in your presentation as well to the branding is on point. What I mean by this is, for example, if your main colors are blue and green, don't just simply go and use pink because pink is never shown in your design, never shown in your process. So why put them in your presentation? Make sure to use colors from your style guide and design system. If you have one, if you don't have style guide or design system, your project is too small, you simply worked on a landing page. Regardless, I really recommend that you start using style guides and design systems because they are extremely important for the future development of that particular product. But if you don't have them, make sure to use the colors that you have in your design, in your presentation. Because that way branding is going to be on point. You would be amazed at how many times I see this in online presentations, especially when I'm browsing for designers to hire to help me on my projects. So I see this all of the time. Make sure not to repeat that mistake because once again, for art directors, especially this shows that you pay attention to small details. Next up we have paper wireframes, so present them in a problem statement, challenge, and concept phases of your study. We're going to talk about phases a little bit later in this class. But basically what this means is you have to present your case study in stages. So start is right up here and the end is right down here. So users have to scroll all the way down to get to that end result. Basically, kind of a progress mattered. So users are progressing as they're scrolling down and they're starting from the very rough stages of that project for ideation, perhaps some texts on blank pages and paper wireframes because paper wireframes are all about your ideas. So show images of creation as well as scanned images with a printer or your phone. What I mean by this is what I explained previously when somebody else is taking a picture of you creating depth wireframe, you can do that yourself. You can simply use a pen and a paper and use a form like this and simply snap a picture of you creating that wireframe. Once again, don't overdo it, but make sure to include few of these here and there, just to help tell a better story and help sell your old concept to your, yours. Give enough details to complement the story you are telling, but don't overwhelm your audience. That's just what I said. And make sure to be moderate with all of these sections. So if we take a look at style guide and design system, what I mentioned by the gradient, I mean the same thing for paper wireframes. So for example, you can use one strip of images which is going to be horizontal, or you can switch it to the side just to show these paper wireframes enter, show your process. And of course you can dot a few images here and there about you creating these people wireframes. Next up we have wireframes, so show them in the concepts and testing parts of your case study. Once again, we're going to get to that a little bit later. And of course, you can always go back to these lessons and study them a little bit more. Present them as an image in perspective, in images and mock-ups. Once again, you can simply save your wireframe from Adobe XD. An image, you can put it in perspective, in 3D, for example. You can show it in images. So as I mentioned, you can show it somebody taking a picture of view, for example, from here or from the side or wireframe on your phone for example. So from this perspective, let's say you're using that wireframe in prototype mode of Adobe XD for example. And finally, in mockups, you can use mock-up off a desktop device, laptop device, phone device, no matter what you are doing and present a mock-up that way of your wireframe. If you can make some screens or part of your design clickable and embedded in your presentation. No matter which told you are using, you can do this. But because I'm using XD, it's native in XD, you can simply share the part of your prototype so you can share a single art board, for example, and then you can embed it into your website if you have that function or if not, you can simply do it in Behance because Behance integrates well with Adobe XD because it's part of Adobe family. It's Adobe product begins is, so you can simply use that link from your Adobe XD and then embed it into your Behance presentation. And then people can click on it and then navigate their way around it. Make sure it tells a story and it compliments your texts, images, paper, wireframes and other elements. So discos for everything I mentioned previously. So don't overwhelm your viewers by dozens of these wireframes because just remember, this is not the end result. This is just a part of your part to the end result. Finished UI design. There we go up. So make sure to show it in the testing and outcome stages of your case study. What I mean by this is you can show it being tested to your users. So if you have users in the room, for example, you can go ahead and take pictures of people using your design on phone or on a laptop or a desktop devices, whatever. And you can show it in the outcome stage, which is the last stage of your case study usually. So how it looks like at the end, how it looks like like a finished product, perhaps your app or website is launched already. Then you can give a link so people can see it. Throughout your case study, they're learning about how you created it, how you solve problems along the way. And now there is a live link so people can access it if you're working on a private project. So you're not planning to code it, you're not planning to make it live, then that's all fine. You can present it in clickable prototypes, 3D mock-ups and images like I mentioned previously for all of these other elements. And you can also record few videos of your screens in action and attach those to our case study. Once again, if you're using Adobe XD, you can simply record a prototype and you can upload that video to Behance presentation or to your website. So you can simply embed that video inside and people can click on it and you can then show them your, for example, navigation structure or navigation between two or three screens or something like that. This is the end result of your work. So make sure that your UI design stands out from your presentation. This is the selling point. This is the end point of your case study. So people scroll all the way down to see your finished UI design, to see the finished product. So make sure it stands out more then other parts of your case study. Because once again, this is the part that really sells you as a designer and that really sells the case study and your process as a designer. So make sure to make it stand out. Finally, we have other elements to consider. So depending of the niche, your independent of the project you're working on, these elements might work and might not work. So men should be careful with the oral styling of your product, with your world niche your client is in. So mockups duty in 3D in various stages. So what is 2D? What is 3D? Obviously 2D is this and this. 3d is this and this, for example. So you can use any kind of different angle of your mockups and off your designs as well. Adobe XD has this 3D features so you can use your art board and make it 3D. And you can save the image as a PNG like that and then upload it to your presentation if you want to have clickable prototypes. So I mentioned it if you're working in XD, simply embed the prototype Link video. So once again, you can do a walk-through style screen record of you holding a phone or behind the laptop. Some walkthrough style is what I mentioned. You can simply hit the record in XD if you're using it. And these other styles are, for example, somebody else can take their phone and simply position it like this over your shoulder, for example. Then here you are using your design on your device so you can fire up clickable prototype at the end of the project, and then you can simply use it on your phone and somebody else can record you. And of course you can do the same on your laptop or desktop device. Background elements. So this is what it says, BCCI elements just to keep it a little bit shorter, help with visual interests, as well as to guide through your case study. Of course, this is going to be dependent of your project. So if you have the leaves, for example, if you're working in a nature-based environment and company, you can use leaves as a background elements. You can use flowers, you can use different graphical elements and geometrical elements. For example, circles and squares and triangles and some different graphical elements, for example, like diamonds. And finally, you can use icons to correspond well with all of these background elements. Once again, don't do it. These are, they're just help keep that audience interests up and make them scroll a little bit further. Gradients and blurs if they fit the project style, but don't overdo it because a lot of the times I see gradiants throughout the entire case study in really does hurt your eyes. It really does bore you after a while and don't forget, a lot of the people are there, are visually impaired. So it's really going to be really difficult on their eyes to see these gradients. And basically to distinguish your gradients from your design, especially if they're colorblind and stuff like that. So just make sure to use gradients and blurs in couple of places just to spice your design up a little bit. We have stickers and emojis. So usage depends often Nietzsche and project of course solid say that you're working on a project for a bank. Obviously you're not going to include stickers or emojis. Or maybe the bank is for sort of a younger audience and that's what they're trying to target. So perhaps in those cases, stickers and emojis might make sense. So just use your common sense about what you're trying to create. So these are just some of the elements which I like to use in my case studies over the years. And these are the elements I found some of the major companies and designers out there use all of the time to complement their design presentation and to tell a better story. So you can use some of them, you can use all of them, but just whatever you're using, make sure it helps you tell a story and make sure that it works with your brand and your niche. Because otherwise, it is just sticking elements and making it harder for people to understand. And of course, if you're trying to get a job using your case study, it's going to simply push art directors and people from HR away because they are seeing hundreds of designers on daily basis and they can really tell who is good, who is not about these little changes. So just make sure to pay attention to those. 4. Creating Case Study Structure: In the last video, we spoke about which elements should you include in your case study, but how do you structure them for easier understanding and for easier consumption? This is what this video is all about. So we have creating structure for your case study, organising your case studies. So it's easier to consume and understand because there is really no point of just stuffing these elements to a page. They really have to have some coherent structure which makes sense and shows to your viewers that you really pay attention to this case study and to really pay attention to your design work over all. So project, intro and brief, in my experience and in my opinion, should really come first. And at the top of the page, perhaps in your presentation, you should have something like cover image, perhaps presenting the end result, the outcome of your project and of this case study. Perhaps if there's a mobile app, maybe you should position a nice 3D looking mockup with a title next to it, just to show and to tell the story of what this actually is. And perhaps one-liner about what the app or website actually does below that, in my opinion, and in my experience, issues jump straight into design brief. So describe what the project is about, but keep it short and concise. Don't give too many details away in case you are under NDA. So for example, what I mean by this is if you're working for a car company, don't just see the car company is founded in 1954, for example. And go about your way to describe the details about the founding story. Nobody cares about that. You can mention that detail. So for example, companies founded in 1954, let's see, they have 20000 employees. So you see what I mean? Just be short and concise and move the story along because nobody has the time to read all about that, they can simply go to the website in question that you worked on. For example, read all about their story. Or if it's a non company, they can simply go to Wikipedia if they're really interested about learning more about the company itself. Your project is not about the company itself. It's about the product they're selling, about the service they're offering, or about the good deeds they are doing if they're a non-profit or something like that. So once again, make sure to keep it brief in your design. Brief, just give the gist so your audience is informed and tell your story through your case study. So what I mean by this is what I mentioned in the previous video on compliment your texts with your images. And what I mean by NDA is don't mention personal details of employees. For example, john is the director here lives in this 32, this is his phone number. Obviously, this is idiotic. Don't do that as well. Don mentioned their personal details. So for example, you can mention founders if they agree with you, and usually they will because it's good. Br but don't mention other employees if they're not happy right at dawn to ever mentioned their personal details such as phone numbers, emails or dresses, Facebook pages, LinkedIn pages, don't do any of it. Those people want to do that. They will do it on their own website, but just don't make the same mistake as so many designers out there, which I've seen. Putting this in your case study, also mentioned any profits if they don't want it. Because this is really going to show to their competition how they are doing and it's really going to work against their advantage in this case. So for example, you can say something like they did 20 percent increase in the last quarter, but don't do it. For example, they make $20 thousand more last quarter than they did previously, because that's really going to show to their competition about this sensitive information. So just pay attention to stuff like this. Once again, be sure to be concise and get to the point. Next up we have problem you salt. What is the beam problem you faced in this project and how did you solve it? Designing the website is not the main problem. It's a problem and it's a job that you took and it's designed that you created. So you created this website design, but which problem does that website design salt, for example, if they have our product page, for example, and conversions are not all that. Well. That's the problem you are trying to solve. For example, if the image of the product is not too big and the potential buyers don't understand what the product is all about. Perhaps you increase the size of that image. He positioned the buttons here and there and then increase the conversion older, long run, for example, over the next six months by 20 percent. So that's the problem you solve. That should be the key point you're mentioning in your case study because once again, it shows to your future employers that you really are taking care of small, small things like this, which is actually going to turn into big problem if it's not solved in time. Don't say I had to create an app, but which problem your users faced and how your app solved it. This is just what I mentioned. So for example, if, let's say stick to the product page. If it doesn't work well on responsive, let's say that on Desktop, mobile, sorry, on desktop and on a laptop and doublets, Let's say Buy Now button works just fine, but on mobile it gets lost. So perhaps you increase the conversion by, let's say, 10% over the next three months by simply making that button sticky and making that, it's such a way then it just starts crawling when users start scrolling past a certain point. So that's the problem you solve and you increase the conversion by 10 percent. This is just one of the example. Of course, every single project out there is going to have different problems and that you need to solve as a designer. This is just one of them. Next up we have challenges you faced. So was there any particular challenge you faced when creating your design? Challenges can be short deadlines, user issues, new idea development, long testing, implementation and stuff like that. Be concise and let your case study tell a story but good enough background so viewers can understand what you're talking about. We don't give it away too many details. So let's say that after you created initial concepts, users have issue with navigating their way around the app. So for example, challenge you faced is you had to simplify the navigation. So you made it easier for users to understand and faster to get to where they need to go. So that's just one of the challenge, for example, new idea development in this case, let's say, Let's say that you're rarely created original concepts and users liked it. But founders, for example, had this new idea and they really think they needed at the moment. So you have to develop it really quickly and introduce it in existing design and existing concept that your users already liked. So this is just one of millions of different examples. So make sure to mention challenge your face. But once again, be concise. Don't all learn your viewers with in this part of your case study. Next up we have concepts you created. So concepts are not finished products, but ideas and versions of your design. So concepts can be paper wireframes, they can be wireframes. Once again, what I mentioned in a previous video, you can show them on your phone or if you're using them, you can show your users using them what I mentioned as well in the previous video. They can be paper wireframes, wireframes, UI concepts, but frightened concepts, as well as UI testing, user testing. So those are all the things that you can include in the concepts you're created and you can scatter these concepts throughout your case study. What I mentioned in a previous video and what we are going to touch on in the next few videos about the overall structure. Show them in an interesting manner, but don't do it. That's where the outcome chapter is for. Once again, concepts are not the finished products, they are just ideas that you've put into place. For example, paper wireframe is not the finished product, but the outcome is. So once again, make sure not to overdo it with the concepts and make sure to prominently show the outcome at the end. Because outcome is what matters at the end of the day and what all these weeks and months of designing, testing, working on it has led you to the outcome of this project. So make sure to make it prominent at the end of your case study, we have user testing, so right about your users testing and give your knowledge about what you found, how they manage with your concept. What answer did they give you? How was your user testing group divided? What age were there? What is their occupation, and so on. Show images of your concepts. Concept being tested next to the text to give better perspective to your viewers. What I mean by this is, for example, an a you can create or assaults of different graphics. So for example, you can show graphs of female users versus male users. How many hours did they spend testing? You'll find that option one was better than option two, for example. And you can show all of these things next to your text in the form of images, in the form of graphs and graphics, and in the form of icons. So you can combine all of these elements to really help to tell a story about user testing and Ababa about how you solve all these problems using your users, who helped you test your concepts to get to the outcome and to get to the finished idea. If you've never done user testing early recommended you start doing it to start learning it, because it's really going to help you improve the outcome of your possible solution for the AP website wherever you are doing. But user testing is just that. It's just testing when the app or website is live, that's when the real users are going to come in. So this testing really helps you understand before you launch about how your users are going to interact with your design. We have designed outcome, right? About how long it took, how many hours you spent iterations you went through and so on. This is where your unique texts, at least because design is going to do all the talking, but includes some major information and milestones from your project. What I mean by this is, for example, project took me six months to complete. In these six months we'd done, for example, 20 different user tests were done, 40 different wireframes. We have 100 different people wireframes. I drank, I don't know, 200 cups of coffee and stuff like that. So make sure to include all of these details because they are going to fell help you sell the story to a future employers and to a future users. You can include the testing hours and number of desks conducted, as I said, to get to this design as well as some closing Dodds and teammates will help you with this project if there were any. So if you had any teammate's working with you on this particular project, make sure to mention them. If they don't want to show their images. Once again, we're coming back to that NDA and whole privacy thing. Then simply mentioned their names and you can always leave their beacons profiles. You can leave the dribble profiles, LinkedIn profile, stuff like that. And if you are the key part of this team, for example, if you are a team founder, if you are the CEO of your own company, for example, then make sure to show yourself more prominent than all these other people. Because people who are hiring you as an agency, for example, are going to want to see who is the main guy or girl in this company. So they're going to want to see who is behind this operation. And if you put yourself sort of above this people not like here, I am like this and these people aren't like this known. But if those people are in this mixture to make yourself like this, or it's simply to position yourself above them just to show to your future employees. Yes, I'm the person who is running this show and you should contact me to, for example, talk about your future project. So this is just my structure. This is the structure I found worked over the years, not just for myself, but for a lot of the people in the industry, especially big brands and big designers. So once again, not all the elements of this structure are going to work all of the time on every single project. But majority of these elements are going to work just fine. So make sure to explore them and to use them wisely. Because once again, there are there just to help you tell a story and just to help you form the oral opinion of your project or your workflow and off yourself as a designer, can your case study when you have all of your elements structured in such a way that users can easily follow. 5. Awesome Case Study Examples: In this video, I'm going to show some awesome behance examples which are found online. There are thousands of different examples on weekends especially so you can browse them and you can also look at some other websites. You can look at personal websites of two creators you admire. To look for it. There are case studies and to understand how they are doing them and make sure to understand that not a single case study is the same as the other case studies, not even by the same designer. And because every single case study tells a different story, it tells a different part to that end project, and it really shows different design. Some, here are just some of the more recent ones I found. But of course you can jumped right here and search for, for example, UI UX case study. And it's going to spit out thousands of different case studies. And of course you can browse them and see how they are created. So what we have right here is this car-sharing app concept, and this is what I mentioned in the previous video. Make sure to include some kind of a cover image just for your users to understand well. And of course you can jump to here featured in your UX and then you're going to be shown the best work on Behance, which is taught by the Behance team. So once again, car-sharing app concept. You can see you are UX 2021, any paper at a time and who designed it and so on. So we're starting with the image of a car and I'm not going to go into too many details about all of these because this video is going to be three hours long. I'm just going to skip between them. But just make sure to pay attention to all of these elements that we mentioned previously in this class. So the project, what was the goal of the project? User flow? So how users are going to fall through your app, colors and fonts. So they don't have that design system which I mentioned. They have these colors and fonts, which is just fine as well. You are just showing to your potential employees Hub, you created it. We have prototyped screens, so they jumped straight into wireframes on device. What we have right here is a video of sorts. So we have a loading screen. This is what I mentioned. We have login screen, so the entire navigation right here. And you can see straight away that this really looks like a wireframe. And I think this is their finished product, but you can of course do this in wireframe stages as well. And we have finished product here, like you see. So this was the wireframe after all. So we have the finished product and we have these mockups in perspective what I mentioned, we have these dark mode mockups and we have tanks at the end. So you can link your Instagram Dribble on Telegram or whatever you want right here and your own personal website. And of course, give your appreciation to these designers once you scroll all the way down. And this is what I mentioned about yourself, your teammates, or whatever you want to include at the end. So you can do that on Behance, of course, on your own website as well. We have fork, so development of a healthy food application. And I can link all of these in the PDF and in fact I will. So you can check the PDF which is attached to this class, and you can simply click on these links to access these presentation so you don't have to browse them. You can see for yourself straight away and then you can simply jump to the profiles of these creators. And of course you can see there are many more on each of their profile. So just the one shortcut for you right there. So what we have once again is these mockups in perspective, what the project is about, what are the goals? So you can see scope of work. What exactly did this designer do? Finding the optimal solution? So research they've done to the competition. So we have our flow right here. So from idea to creation of hypothesis to research prototyping. So none of these steps are what matters to you as a designer because these steps are going to change from project to project. So sometimes you're going to have creation of hypothesis, sometimes you're not. Sometimes you're going to have to do research. Other times clients have done research for you, prototyping and research once again, design system. So all of these are what you need to include. Once again, they're going to vary from project to project prototyping for verification of hypotheses. So we have that right here. We have 3D mock-ups here. So just a spiced up here and there. What I mentioned previously, not oral value of yours. We have the finished product right here with all of these background elements, background images. So you can see the splash of milk and all of these plants right here in the forefront, we can see person holding the mockup. So all of these mentioned elements which I mentioned previously in previous lessons. We have these 3D mock-ups and all of these elements jumping outside to show that there are more elements on these pages, we have images corresponding well with the text. So you can see statistics and profile additional sales funnel. So you can see all of these details. Cash back up to 20 percent. So all of these small details is what helps sell a story to potential viewers. Once again, click appreciation because we really appreciate it. We have a studio. So web design and web development landing page. And you can see these two designers. So this is what I mentioned. If you're on a studio, you can have multiple owners on your Behance page. So website was built using tilda and code modification, competitor analysis. And we can see this nice structure. So introduction benefits, work services, work in progress. About Us. So all of these, we have typography right here. I'm going to scroll a little bit faster because you can see how long this website is. We have this awesome looking animation. And I would say about these mockups is they're really great idea because they don't. Age is just a basic screen. It's not showing specific part and this is what I see all of the time. You, designers are using iPhones, which are generations older. I did that as well for my products. And you're going to see that in a future video. But make sure if you're using these mockups to use mockups which are faceless, basically, you cannot tell which device this is, which size this is. And it's always going to stay on trend basically, because it's not going to show the elements of a certain device. If we scroll all the way down, you can see more examples. You can see how it looks like on a phone and on a desktop. English and Russian versions, we can see the grid right here, which is of course important scrolling animation, which is fantastic. You can see these elements jumping outside of the initial tablets showing the page as well. And thank you for watching. So here you have appreciation. We have current dealer website, which is shown in, featured in XD and future in UI UX. So once again, make sure to check that out and you can see multiple owners. So we have four people right here. So current deal website for Mercedes Benz Ukraine summary. So they wanted to create new, more efficient website to replace the old ones. So excellent brief and show the URL problem that they have. The previous website was based and official Benz template and resulting in low usability, poor conversion rates, and lack of necessary function. So this is the problem you salt straight away at the top. So this is why I say don't waste too much time, simply get to the point. Why to redesign the old website. So this is the problem they solved project goals. So you can go ahead and once again, I'm going to leave the links in the PDF so you can read all about these details. We can see nice imagery experience what it's like to sit behind the wheel. So these are the problems they solved. So when do we want to schedule a test drive, for example? Just walk or drive how easy it is to book it on your phone. Once again, imagery to compliment what you're talking about. Easy test drive setup so you can see their marketing tool, younger people in this case. So search filters how they solved that. And we can scroll down a little bit more Automatic Payments API along some loan directly to the customers. You can see this nice animation of all of these different screens. So from PDF catalog to online store, this is the problem as well because majority of these, especially legacy car manufacturers, so all car manufacturers, they're sending you a PDF catalogs and then you have to click the links in a PDF Kellogg's to get to the online store, which is a ridiculous in today's day and age. Simply launch an online store in the first place. But you'd be amazed at how many of these older companies are still doing this. So full control features and functions. You can see the grid right away. Details such as margins, gutters, columns, and so on, fonts and colors. We have this nice presentation right here, which is on brand, which is what I mentioned previously. You don't see yellow color here, for example, because yellow is nowhere to be seen in the original fonts and colors, for example. So don't use it here as well. Appreciate. And finally, we have this Medicare and it's featured in UI UX. So the largest integrator of digital solutions in Moscow. So we can see right here, colors. They used is a UK retailer which specialists in maternity in general products for children under eight. That's it. You don't have to go into too many details about what they do. If people really want to learn about what they do, they can click the link and access the company as well. So we have online shop, how it looks like across the global business, There are over a 100 store is known for the territory's which is great. So app and aluminum like the small snippets of text, design of the application is made in the light and modern style, which really shows, it shows to the project leaders and our director straight away. But somebody who is looking, who is probably in this niche, is not going to know what the modern and light style is that just like the overall look, but they don't know which style that is. And this really helps them if they contact you for a project like this, they can reference this text. For example, I really want you to create this app for me in a lightened modern style like you did for this brand. So it really helps to tell a story to your users and really helps with the conversation later. So we have icons here. Perhaps somebody is not going to know that these are not illustrations. These are icons in 3D. So it's really easy to read and understand. We have second screen web, a lot of air and a clear page structure. Once again, text helps to sell a story and these background elements like this color right here and these numbers right here really helped to tell a story as well. I really like these texts, snippets, I think to do a really nice job. So dark version with the dark background, with the dark mockups inside, you can see this spacing how well it does. So I think this is something like 300 pixels or something like that, maybe even a bit more in the spacing. And you can seek assistance spacing throughout all of these background details, pay attention to the colors or the colors they use are throughout the presentation. There is really no outsider colors. You can see this going outside of the mockup. Once again, this really compliments, well what you're talking about. A really like these colors. I really like how they tell a story and how the screens are connected. So perhaps we're starting from here, then we're going to hear, then we're going to hear from there, we are moving to here. So I really like this walkthrough style project team. This is what I mentioned. So you can have yourself as a project leader right here at the top of head of u and x. And then you can list all of your teammates down below you. If you are once again into key feature and key member of this team here to appreciate. And you can see the largest integrator of digital solutions, Moscow, which is great for our tagline, for your company. So once again, these are just some of my examples which are found just recently. But as I mentioned, there are millions of different examples on because especially, and once again, I really like be hands for case studies because it really helps you understand all of these details that we mentioned throughout this class. And hopefully you saw in these examples, once again, examples which are shown right here are going to be linked in the PDF. So you can simply click on these links in a PDF and access them easily and simply walked through once again with me with this video about what we mentioned in this class to really help you understand all of these elements that you need to include. Once again, make sure to understand. Once again, huge case study is different. Each project is different, so not all the projects, and I hope you saw in this video, these are all key studies, but all of them are completely different theories, different elements. There is different spacing to use, different basing these different colors and fonts and iconography and stuff like that. So once again, they all use kind of a same structure or the elements which have mentioned, but they don't all follow exactly the same structure. They go about it in different ways, but they help to tell a story which is the end goal right here, is to help your users and your viewers understand what was your role in this project and what are some steps you took to get to the end result. 6. Content Writing: When you're writing the text to include in your case studies, made sure to write in a language that your users are going to understand. Once again, we're coming back to what I said at the beginning of this class. Don't use the language which is too complicated, which doesn't speak with your target audience. Make sure to speak with them like with a friend. If that's the tone you want to go for. If that's a more corporate on more serious tone, that's fine. But if those are your users, if your users are going to understand what you are saying in the very basic language, whether that's really casual or professional doesn't really matter. What matters at the end is that they understand what you're trying to tell them. So if I take you back really quickly to this example which I mentioned in the previous video. So you can see this text. So setting up personalized recommendation to deliver the best product deals. As you can see, they don't mention right here. So for example, I use dx, dy to, I don't know, create two stacks to make sure that the right button is beggar and just go into too many complicated unnecessary details. What they said is setting up personal recommendation to deliver the best product deals. So when you're creating your text, men should pay attention to details like those. Made sure to be short, concise, get to the point and just make your design do the talking. That's the whole point of designers case study is to show off your design, not to show up your writing skills or to show up your presentation skills, which are going to come through the years of work. So you're not going to be able to create presentations as high level as these straight at the beginning, but a time over practice our projects, you're going to be better at it. And then you're going to get to the level of these presentations which I showed you previously, for example, an even higher levels. Once again, at the end of this video, make sure to keep it concise. Make sure to speak in a language your users and your reviewers are going to understand. So make sure to targeted and to speak to the viewers and users who are going to understand and who are your target audience because are you trying to get hired and you're trying to show off to your designer colleagues, who is your target audience and then speak in that language. 7. Presentation Tips: In this lesson, I'm going to give you some presentation tips depending of what you are presenting. So let's jump straight away. This is one of our products. It's called wireframes or flowcharts, and you can find it on the web donor dotnet. I'm going to leave the link in the PDF and you can access it. And of course you can get all my courses, all my digital products in my membership. I'm going to leave the link to that as well if you're interested. So you can click their joint and then get access to every single thing I created ever. So here we have wonderful for charts, which is just one of our products. And I'm wanted to show this because it's a bit different than your classic case study. This is the key study nevertheless, but it's a case study for a digital product. So it does the different story. It doesn't really show all of those details. So we have 200 screens to a 100 elements to papers, and we have light and dark versions. So you have a small snippets of text right here, but I'm trying to show right here, so like light and dark versions. And I'm showing this right here, so I'm just trying to sell the overall product as well. So if we scroll down here, you can see the Buy Now button right here, so you can purchase straight away. But I'm trying to sell the oral story of the product itself. So light and dark versions, if we scroll down, we have adaptive components. Components which are inter, interacting with each other and changing places, changing elements are what's included. I'm trying to show that there are 400 components in web and mobile in 3D file formats. So Photoshop, Sketch in XD, be so perfect components, super organized layers, free Google Fonts to paper layouts, video tutorial included to help you get started. So just this one alone helped us sell dozens of copies of this product because a lot of the beginning designers don't really know what this is for. Don't really know what to use it for the purchases. And when they watched the video tutorial, there just are blown away. I received many differently moves over the years about how video to those really help my buyers understand how to use my products. Improve your project UX. So this is why you are going to use these flowcharts. By creating flowcharts and planning ahead, you can save a lot of time the later stages of the project board for you and your clients, that reducing the time you would use for wireframes and liter for you. So it explains what the project, what's the product is for straight away. And it really helps sell story because you can see all of these different elements combined together, making these screens sort of so it really helps users understand how can they possibly use this product if the purchasing organized layer structures. So I'm sharing all of these screenshots right here. And if you don't see this properly, I can zoom in a lot closer. So you can see Photoshop, you can see sketch, and you can see XD right here. And you can see this organized file structure. So flowcharts of any complexity. So you can combine and connect all of these flowcharts in different ways. Ready for print. So I'm just showing a US letter size and A4 print ready so you can print these four charts if you need to show them in person to your clients or your teammates. Unlimited variations. So I'm just showing bunch of different variations right here, so you can combine them however you want. And then I'm showing this icon of a laptop and I'm showing Web Elements, light, which are these light elements to a 100 light elements for a website flowcharts. And I'm starting with the category of Heather's. So you can see how text is really helping cell the oral story and the product in this case, by combining it with images. So this is what I was saying. I'm not saying a web elements like so for example, I'm not saying here they all have white background to help your elements stand out from the crowd. Because it's going to help your visually impaired users understand them better. I'm not seeing any of it for web elements, like 200 light elements for a website flowchart. So users can understand this is not for a mobile, this is for our website, ok, and category four headers, you can see content, sliders, futures portfolio, so on, Solver. And if we scroll even more down, we have mobile elements like so. Users can then tell, okay, so this is for mobile as well. Awesome. So I have 200 here to a 100 darum, great. So we have categories of login walk-through and so on. And then when they scroll all the way down to here. As you can see, presentation is extremely long because there are dozens of different elements. Web Elements dark, so okay, so I can combine light and dark, or I can use light or dark straight away. Awesome. So I don't have to lose time creating these light or dark elements later. Which is what's the whole point of this presentation in the first place? It's a bit slower to load because it's huge. You can see how long pair my scrolling and this is what I was trying to tell you in the lessons prior. Print out your web flow charts and show them to your team or clients and work out the layout with them. And you can see this orange right here of two flowcharts. Printed notes are being taken. Collaboration is happening right here, or you can print out your mobile flowcharts and show them to a team or clients are worked out the layout with them. So here we have mobile phone, we have the same thing, we have the band, we have all of these details. And I went ahead and shut these images. First of all, I combined my flowcharts, I print them out. I took the time to make some of these changes, to make some of these sketches. And then I took the time to arrange all of these elements and to snap a picture because this really helps to tell a story to my users and potential buyers of this product. Because it really helps them understand a bit better as to how they can use these. So for zoom all the way in, you can see in GIS down, swipe up. You can see don't, so dont quote here. And you can see all of these elements in both of these flowcharts. And finally, at the end, what I wanted to show you is this. So scroll down just a bit here. May read Love by web donor to help you create sweet designs. So just a little tagline down at the bottom. And on my website, you can see that her multiple different products from the same category and can click see more products to check out all of these other products from the same category or different categories. But if I start my fast scroll, you can see how long this is going to take to get to the top. So it's extremely long and it doesn't load in real-time, but you can get the picture. I will leave the link in the PDF, as is said, to access this product, just to explore it, to see this presentation. But this is the case study. Nonetheless, case study can be to sell yourself as a designer, to sell your service, or to sell your product. This is the case study in this case, and of course I've done this for all of our products. So it's going to be a bit different from product to product depending on how big it is, what it does, what is its target audience and stuff like that. But the whole point of this video is to help you understand that the case study is really there to help you sell something. Whether that's yourself as a designer, for somebody else to hire you, whether that's a product like in this case, whether that's a service that you're providing such as website design, app design and stuff like that. Always make sure to speak to your users, to speak with your viewers, and to really help them understand what it is all about. So your case study, as I mentioned multiple times, can be about service, about product or yourself. So you're selling yourself as a designer who's bringing this package. So make sure to be about that. Make sure to tell a story and make sure to be as easy to understand as possible. Because not everybody, our designers, not everybody are experts and not all the clients are the same. Some clients are going to understand. Yes. Okay. I know what Adobe XD is, for example, what our stacks, water layers, but other clients are not going to know anything about it. Majority of wines out there don't even possess a computer, believe it or not. So they are doing all of their work on their phone or on their tablet. So desktop app, which is just available on desktop computer, is not going to sound familiar to them because they don't have a desktop computer at all. So just make sure to pay attention to all of these things in your case study are going to convert like crazy. 8. Class Project: Your class project for this class is to create a case study structure of a little like you to use just any piece of paper, any kind of pen or pencil, and simply create your own structure of your ideal project that you have in your head order that you're working on currently, this is going to help you in the long run because the more of these you do, the more you're going to understand the structure of the case study and the best possible way to help you tell a story of this particular product or service. So make sure to do that on a piece of paper and make sure to upload it to your class projects because it cannot wait to see what you guys can create and perhaps provide some feedback on your overall structure. So make sure to follow the class once again and make sure to use these tips here and there to come up with your own ideal case study structure. 9. Conclusion And Resources: So there we go. We have reached the end of this class. I really hope you found that helpful and I really hope you found it useful. And just remember, this is not some kind of a shortcut which is going to create a perfect case study structure. And you're going to be drowning in client offers and some tie that this is just to help you understand the basics of basically selling, selling yourself, selling your services, selling your products. And to help you tell us better story because case studies are nothing. If they are not all about stories, you're telling the story of the development of this project from the initial idea and that client had in their head to the end result and the outcome of this project, which is the finished UI design and in some cases, even published UI design. So it's live, whether that's a website or a mobile app. Remember there is a PDFs, you can download it and you can access all distinct which I mentioned in this class. Simply click on them and it's going to take you there directly so you don't have to lose time by browsing for all of these. And just remember, this is going to take time, so just practice it. If you don't have a project you're working on currently, or if you don't have your previous projects, then simply create your imaginary project. But follow these rules, follow these structures, follow this understanding of the case study itself. And it's going to help you dial down in your presentation style, in your narrative style, in your writing style, it's really going to help you when you practice by creating these case studies. So once again, that's it for this class. I really hope you enjoyed it. Make sure to check out my other classes. Thank you for watching and until next time. Take care.