UX/UI Portfolio: Designing Amazing Case Studies

1. Trailer: Oftentimes I get that question, how do I find clients? Or even better, how do they find me? My answer is, create a great UX portfolio showcasing your work and make sure that the case study really stands out. Hi. My name is Patricia Reiners. I am a UX/UI designer based in Berlin. I'm working as a freelance UX/UI designer, creating interactive experiences for the future, for online, but also for mobile apps. I've been able to work with many companies, like Google or Adobe. But also with start-ups, agencies, and corporate businesses around the world. My work is in constant search for new ways to explore, design, and also to solve problems for the future. I love to share knowledge through talks, workshops about the future of experience design. I'm also doing interviews for my podcast called Future of UX. What really pushed me forward in my career was creating great UX case studies that really stand for itself and attract the clients that I want to work with. I got featured on Behance several times, which really helped me to promote my work. I am 100 percent comfortable that you can do exactly the same. This is what you will learn in this class. How to design stunning case studies that attract the clients you want to work with. I will guide you through all the steps of creating a stunning UX case study, which will be ready to upload on your website, or Behance, or any other social networks. As a bonus material, I will share tips on where to promote your work and how to promote your work on social networks, and how to get seen. I'm also going to share some secrets about how to get clients. This class is ideal for UX/UI designers who are building their portfolio and want to get clients or get a job in user experience. This course comes with a digital e-book, which is an interactive PDF, or you can print out and which guides you through the course and through the different tasks. There are also templates for you which help you to create your UX case study. This course comes also with two mockups which are ready to get used for your case study. I'm really excited you are joining this class. Let's get started. 2. What Do You Need ?: Hello and welcome to this course: how to create stunning UX case studies. I'm super glad that you sign up for this course. Before we're getting started, I would like to share a few information which will be really helpful for you. First of things, what you actually need to have to create those case studies, and the second thing is what you actually get. So all the resources I already prepared for you to follow all the steps along. I integrated different task in the course so it will be easy for you to follow along and also create your case studies on the site of this course. The first thing you need is some kind of a design program with which you can design the different steps of your UX case study. Use whatever program you like. I can recommend you Photoshop, Illustrator or it'll be XD. I also created a template in Adobe XD which you can download for free and use. This will help you to get started. The second thing you're going to need is a project to showcase and asset as well, which you are going to integrate in the case study. I prepared a worksheet, a case study workbook for you, so it will be easy for you to follow the steps. It's also a digital eBook, so you don't really need to print it out. Of course, feel free to print it out if you want but you don't have to. You can just use the interactive version because all the input fields are interactive. Use that as an eBook. Download everything you need; the software or the resources you are getting from my side and then you are ready to start this course. 3. Outline: What are we going to do in this course? Let me share a few things before we get started. First, we are going to talk about UX case studies. What are UX case studies? What's important and how to integrate storytelling in your case studies? Then we're going to talk about the outline. How we can actually create outlines and sought of all the things that we have done in a UX project. After that, we will talk very in-depth about the single steps and how to present them in your portfolio in your case studies. In the end, we are going to talk about the layout. How to actually arrange that, how to create visuals, how to come up with mockups, could be still so a PNG or also some animated mockups and animations and videos, so we are going to talk about that as well. In the very end, I'm going to share some bonus information about actually how to provide or how to integrate social media in your UX case studies. How to create content for social media, how to get your work out there, how to connect network, and how to get clients. 4. Introduction: Oftentimes, we think that grade work stands for itself. But from my experience showing the process you went through, showcasing your unique skills, and creating a compelling case study really makes the difference of getting successful and working with the clients you are dreaming of right now. Having a portfolio got from a nice-to-have to a must-have in the last couple of years. Your online portfolio can be seen as your personal brand. Clients will find you through your online work and it shows your style, your successes, and can help you to get the work you want to do now. All you really need for this class is a project you finished, because we are going to use this project to create a case study. Step-by-step, I will guide you through the different stages and at the end of this class, it will be ready to put in your portfolio. If you don't have a project you finished right now at the moment, don't worry. This class will still be very beneficial for you, because by learning how to build a case study, you will know how to build in the future and it will be easier for you to document it right from the beginning and gather the right infos early on when you're doing your next project. I also prepared a worksheet for you, which will guide you through the class and help you with the exercises I created in this class. What are case studies? They are generally very essential to getting you hired, because case studies are a window to your professional practice, and by showing how you think, adapt, cooperate, and ultimately solve challenges. A UX case study has to tell a story about you. Like all good stories, case studies benefit greatly from a solid structure that guides the reader through your thinking and your experiences, and your problems and things like that. In this class, we will explore how to craft the perfect structure for a UX case study. This class is generally for anybody, beginner to advanced, everyone who wants to learn how to create case studies that really stand out of the crowd and help you to get clients. This class is especially designed for UX/UI designers, but UX researchers or graphic designers will still find it very beneficial as well. Putting some effort in your portfolio right now will make a very huge difference throughout your career. Here are a few quotes I found on the Nielsen Norman Group website from recruiters from both large and small companies. Let's see real quick what they're saying, because that's really interesting. The first quote is from Melissa Perri. She's a Product Manager and UX Designer at Produx Labs. "I want to see how you think strategically, how you connected the dots to land at the right solution. What does your process look like? What steps did you take to learn more about your users?" The second quote is from Rebecca Levi. She's a UX/UI Product Designer, Recruiting Manager at Joanne Weaver Group. ''Storytelling is important. The interviewer wants to understand your process, your contribution to the team, and how your mind works." I really love this third quote from Tom Cotterill. He's a UX Recruiter at Source FL. "Having a strong portfolio where you can talk through your whole process, not just showing research, user flows, wireframes, etc, but turning it into a story, for example, why you moved onto each part of the process so a hiring manager can really get inside your thought process." There are definitely some patterns here. Recruiters from both large and small companies are super interested in the same thing; your thinking and your personal process. They want you to tell a story about how you tackled previous UX challenges and problems and how you actually came up with the whole solution. UX case studies in your portfolio are your first opportunity to tell recruiters your stories and explain how you think and solve problems. These stories have to be tangible so that recruiters will want to learn more about your work and you as well. The second really important thing is the medium. I can generally recommend a website, so people can find you online. In whatever situation you are, you'll always have it with you and it's really easy for people to find that. You can use a common website called yourself or ask a developer. You can also upload that on social networks like Behance, use Adobe Portfolio, for example, and then we have some other providers like Squarespace or Wixx, for example, and not to forget Wordpress where you have some templates to use. We're going to talk a little bit more about that at the end of this class. Generally, portfolios are very different, depends on what kind of designer you are, what your strengths are, and most importantly, what your goals are. That's really important to keep in mind. Before we are getting started, we should be 100 percent sure about our goals and what our portfolio actually should accomplish. My recommendation is, check the current job descriptions you want to get. What do they want? What kind of requirements do they have? You can find them really easily on LinkedIn. Make sure that you know what to include in your portfolio, so that it's easier for you to create those case studies. It's the same whether you're looking for a full-time job or looking for work as a freelancer on UX/UI designer. Here comes the task. Before we are starting with the case study, try to answer these questions. What is your ideal job? What type of jobs would get you the experience you want? What can you bring to a company? What kind of requirements do they actually have at the moment? Let's get started. 5. What Is a Case Study?: What is a case study? Generally, a portfolio consists of several projects and you show those projects worked on through case studies, where you explain a little bit more about the whole process you went through. A case study can be seen as some kind of a project or some kind of a story of that project. It shows the details of your project from point A, which is usually the start, to point B, which is actually the final result. Especially for UX projects, the process is super, super important. A case study gives you the opportunity to show the process, the requirements you have, the goals, the challenges, but also the research you did. Why do you all need that? If you want to get a job, it could be a full-time position or even work as a freelance UX designer, hiring managers expect you to have a portfolio of case studies. So for clients or hiring managers, it's really important to understand how you solve problems, how you think, how you solve challenges, and those kinds of things. Especially nowadays, it's really important to stand out as a designer because there's so many designers out there on all the social networks, on so many websites. Case studies are also really helpful for job interviews. When you need to talk about projects you did a few years ago, you don't have to remember all the other tiny details but you have everything already structured in a case study, so you can guide them just through your case study and explain a little bit. What do you need for a case study now? First, you need a project, and second, you need assets. Check what kind of resources you already have. That might be sketches or images or wireframes, everything, also photos, anything that will help us to showcase the process you went through. Of course, this will vary from the project you did; the different steps you went through. Generally, case studies come in many format, portfolio come in many format and many sizes. That's could be a PDF, that's could be a web page or a website or other social networks. So it's really helpful to have an idea about the format upfront. It's really different if you create that as a PDF or a website, so make sure that you already think about how you want to showcase those case studies upfront. Let's sum this up really briefly what is important to highlight in a UX case study. First, think about what recruiters actually want. They need support for a team for a specific problem, and so they are looking for someone who is able to solve problems and will be able to support the team. Then think about the experience you have. You'll need to tell a story about your own experiences, your own professional career, and where you are right now in your career as well. Very important point is solving problems. Showcase that you are able to solve the problems for the team. We're going to talk a little bit more in-depth about how to do that in the next videos. But that's a very, very important point to keep in mind. Another thing that I can actually really recommend is that you think about the other social networks as well, or creating visuals for other social networks as well. This is what we are going to do in this class as well. We are going to create visuals for other social networks, so you are able to spread the word on different social channels and be able to link them all to your portfolio. 6. Choosing Work to Showcase: My recommendation is to only show the work you're really proud of, so don't put everything in your portfolio. If you want to do more of a specific style, make sure to really highlight that style there. It's really important to keep in mind that clients or recruiters will judge your skills based on the work you are showing in your case that is in your portfolio. I really love that quote by Anton and Irene, "Don't put crap in your portfolio, otherwise clients will hire you for crap." That's 100 percent true, also from my experience. Now when you are choosing a project, you want to build your case study, choose the one which is closest to your dream clients or which you are really proud of. In the end, having around five projects is a really right amount, so better have a few great projects than a dozen of just okay or mediocre projects. Make sure that you're only putting your best work in your portfolio. One really important question; what can you do if you don't have a project right now? Here are a few recommendations. First you can redesign an existing app or web service. It could be Spotify, it could be a food delivering app, whatever app you are having at the moment, so just redesign something. You could create a new product, a new project of a problem you are having everyday for example, and think a little bit about the future, so solving a problem for the future. You could also use a school project. If you are right out of school or university, just use the project you design there or you could design something for free for a non-profit for example and support them with your design skills. 7. Examples: Let's have a look at a few examples. I think it's super, super helpful to check out portfolios you like and get some inspiration. There are a few sites I can recommend you to check out. First, Best folios, then Awwwards with three Ws, and Behance. Let's have a look really briefly about what they're offering. Let's have Best folios, and they're having a lot of different portfolios. You can even look for specific areas. We're going to look for UX UI and different portfolios, and check them out where they indicated, maybe even how they came up with visuals as well. What you can see here is that people are sharing a lot of information. A lot of insights about the research they did about the different stages and wireframes, even some early sketches which is interesting, and also some animations in between. Also, a little bit of text where they're explaining things little bit more in depth, so it's easier for the user to understand what's going on. Also, some videos as well with some early wireframes, I would say. As you can see, there are some takeaways in the end, so really nice case study, although the focus is not so much on the visual area outside. Let's have a quick look on Behance. This is really cool side for all kind of projects. You find awesome inspiration there. You can just scroll through the website or go to Discover, and then look for your XI case studies. At the very top, you can look for specific areas. Adobe XD, for example, or we are going to look for interaction because there you can find all mobile projects, and this area are already the promoted areas. Some people get featured there, some projects get featured there. The better your project is on Behance, you're case studies, the higher are your chance to get featured. What you can see on Behance is that all those case studies are usually designed very visually with a lot of details, and it's super appealing for the eye to just look at that. You can see that this person integrated all of the single steps of the process, but all of the text, it's very, very visual which is helpful. You can see that there are also some animations, videos integrated in-between the case study, or here in the end to see the final product. You can see the interaction, and the socials are linked here as well. There at the bottom, you can see the other projects as well. Let's have a look at another project. Here, you can see that it's structured super well about the responsibilities or the role of this person really had, the design component, the design process. Very, very visual and super well structured about the market research and the roadmap and wireframes. Other different steps, also design systems and interface experiences as well. A lot of mock apps. Can you see here a lot of text which is super nice and interesting. Both of those project got featured there. The great thing is when you get featured there, you have a really high possibility that clients will find you, and you get a lot of [inaudible] That's the good thing in Behance case study. It's easier for clients to find you. Another thing is the Awwwards website. That's really cool that you can find awesome websites to get some inspiration, but also a few portfolio websites. I've really liked to check that out from time to time. Usually, you find super fancy portfolios there. But we are going to focus a little bit more on the case study, so not so much on all the cool JavaScript animations you're seeing there, but really on the different projects, and there they are. Let's start with the first one. You can see super nice. They're starting with really big visual, explaining everything, having a really nice introduction area there. More visuals, sharing the brief as well, and also integrating different visuals, and keeping it super, super concise which I think is really awesome as well. Then in the end, you see the outcome, the business results. Here's another case study, it's very similar. You can see here we pick images which is nice. Some videos as well to support the interactions. It's really nice to see that as well. Some hint on the challenge and more visuals as well. Some mix between text and video. We have also check that out. I can recommend you to just go online, check out a few portfolios, websites made from people you like, and get some inspiration before we get started. 8. Power of Storytelling: The power of storytelling. You may wonder what's so interesting about storytelling, and what is it actually about, the UX case study. But the interesting thing about storytelling that, if you look back in our history of our species, stories have always played a really important role in our society. Pick anytime and any populated place on the planet and do some research into that culture during that era, will bear this out as a fact. The interesting thing is that people understand and remember information much better if it's organized in some kind of a story. This is something our great, great ancestors actually did. They were sitting around a fire, they told stories to remember certain facts or to tell stories kind of. So for us, through storytelling, we pass on information and lessons from generation to generation. Some of those stories are fictional, others are some kind of true events. We don't only use stories just to learn, they are also to exercise in speculation and the exploration of possibilities. They are a great way to ask you what if question life and find possible answers to these. In fact, if we look on some UX methods, we have user stories or storyboarding, which is well-known and also is some kind of storytelling methods. Let's look real quick how stories are structured generally. Most stories are structured like this. They have some kind of an introduction. Then actually, the problem occurs. You have a rising action. You have some kind of a climax and then you have the resolution. So the solution really comes following action and then the end. We can integrate this kind of pattern, actually, in our UX case studies as well, or in almost everything we are doing for clients or where we want to integrate stories as well. I think what's really important to understand of the story is, that they always have some kind of a beginning, they have a middle part, and they also have some kind of an ending. Generally speaking, stories have the ability to provoke strong emotional responses. They are an immersively powerful tool that can connect people to one another and also explain certain things about methods, about the way you think, about problem-solving, and those kind of things. If you're looking for a UX job in the near future, let's take a look at who is going to be hiring you probably. Probably a company or a client, and both have a very specific and immediate need in mind. To find a new member to join their UX team, they're looking for someone smart, someone who brings an inspiration and talent, and who's able to work hard and will be a great fit into the team, and will help the team to produce better work. What's really important for them is especially everything around problem-solving. Quite simply, by going through applicants' portfolios, recruiters are subconsciously asking themselves some kind of a question. What if this person would join the team? How would it be to work with this team? Will it really help the team? For you, telling a great story about your own experience as a UX professional gives them some kind of belief or highlights having something that helps them to really understand the way you think and if you would be a great fit into this UX team. It also helps them to see the way you work through your eyes, so the process. They will hopefully recognize someone who was really smart and able to fight difficult challenges and be able to integrate really well on the team. So a really great designer who's able to solve wicked problems. That's really important to show that in your portfolio and highlight that throughout the story you're telling with your UX case studies. 9. Turn Into a Story: Now, we've talked about storytelling and what's so interesting to integrate that in your case studies. The question now is actually, how can we turn our UX case studies into some story? There, it gets really interesting. I found this really awesome quote by Orson Scott Card. He's an American science-fiction writer. "Idea stories are about the process of seeking and discovering new information through the eyes of characters who are driven to make the discoveries. The structure is very simple. The idea story begins by rising a question; it ends when the question is answered." Let's keep that as an inspiration and look on the structure of a storytelling. We already talked about that structure so how can we integrate that now in a UX case study? By starting with a beginning, a process, and an end. In the beginning, we are going to talk a little bit about the context, the goals, and those things and the middle part would be about the process, the different methods, sketches, wireframes for everything. What we needed to get to the end, and we're going to talk about the final product and lessons learned in our results as well. Generally, now we are trying to combine those things, the storytelling in the UX case study and UX case study [inaudible]. We also have a beginning of a UX case study which explains the context, and what's going on, and all the basic information. All the things that a recruiter basically wants to know which is like the goals, and visions, and challenges from the very beginning and also maybe some background information. Then we also have to process, it's been the main part of the UX case study. The process part explains the steps you took to arrive from the questions from the beginning to the solution in the end. It highlights all the activities that you took and it illustrates those activities, proof of all the assets you have. It could be sketches, could be photographs, could be diagrams or any other design artifacts or deliver rules that you produced. Keep in mind to really show the process. Because that's what really makes the difference and will really help you to stand out. Because a lot of designers are not really doing bad well. Emphasize on interactions, and the challenges, and the alternatives, and the iterations, and the decision point and maybe some conflicts you maybe have. You should always start with some, of course, do the research that [inaudible] a problem, for example. A really good point actually to start is, you could show persona and use a journey map here to illustrate, things like that, and that you find out there. Of course, all those steps depend very much on the project you did and the part you took and the role you took. We're going to talk in depth about all the different steps and how to explain that. What should you integrate and also how to explain that in a very condensed way. But I think what's really helpful for recruiters is also to highlight and make sure that you highlight the lessons you learned on your experience, some takeaways, which is something I personally find super helpful as well. In the end, a UX case study is some account of event that led you to the discovery of some new knowledge so the answer to UX problem. Keep in mind that the recruiters need to answer their "what if" question. What if this person put you on the team? Would it be helpful? What would this person actually bring to our team? Generally, structure your UX case study. You shave off some beginning, the idea, and then expand the process and then in the end. Don't forget to remember that it's important for the recruiter to see the process through your eyes and that you really underline your unique skills and what you know and what really makes you unique as a designer. Your case study shows how you solve problems, how we think, it's a demonstrator of the process and critical reflection rather than only showing the end product and perfect visuals, for example. We are going to talk really briefly about what content is actually appropriate for each part and how you can structure that in the next week or so. It will be easy for you to produce the content yourself on the site. Let's sum this up really briefly. Keep in mind that recruiters need to answer their "what if" question. What if this person would join the team? How would it be to work with this person? Those are the questions that recruiters or people who are hiring you actually have in mind. Point number 2 is the structuring. Make sure that the focus is really on the idea so it's easy for recruiters to really understand the way how you think and see the world through your eyes. Then the problem-solving. UX is so much about problem-solving. Your case study should show how you solve problems, how you think. You can demonstrate that by showing your process and how you actually came up with your solution. Then the structure. There are three parts of every case study. It's the beginning the process, and the conclusion, and the end. It's really important to know what things to integrate there and we are going to talk very much in depth about that in the next videos. Make notes, write down all the things for your case study, and use a worksheet that I prepared for you. 10. Outline: Creating an outline is a really important first step, which will help you to structure the case study and to build it up strategically without too much stress because you know exactly what you want to integrate and what do you actually need. Then the animal acts like a north star creating those case studies. In the end, it will take a lot of work, so sometimes it's really important to take a step back and make sure that you're not lost in details, but you know actually what you want to create. A pretty basic outline looks like this. First, you start with the beginning, so the intro, the brief. You state the project brief, what was it that you actually worked on. You include some information about the role you play and also the problem statement. What actually was the problem you try to solve there and what was it that you actually tried to accomplish. What's really important there to integrate as well is the challenge so what was challenging, what was a very nice problem or challenge that you were facing. Some background information as well; it could be the scope or the target group. Then you always start with the process part, which is the most important part. There you can think what kind of things have you done. It could be first, research, so talk about the research you did, which methods, what were the main results. Also about the concepts or include some early sketches, some low fidelity wireframes, some high fidelity wireframes, and also other concepts you did there. Also some design iterations you did, the testing. Include your testing there, maybe even multiple rounds of testing, and of course, the outcomes or the final product. The task for you now is to take some Post-its and write down all the elements you want to integrate in your case study, and also order them already and that we have some story. Then the next video, I'm going to show you how I am structuring an outline for one of my projects so you can watch and see how I structured that and that's probably helpful for you. After that, we will talk about the single steps really in depth so it will be easy for you to understand what actually to integrate there and to come up with the right input on each of those areas. 11. Outline: Watch Me Work: I was asked to design an app for a co-living place in Finland. I was involved in several stages of the process; in the research phase concept and also the design phase. I'm going to show you how I did the outline for this process, for the process of this UX case study which I upload on the hands and on my website as well. Usually when I'm designing my outline, I take post-its, different colors, one color for the headline. We already talked about the outline. This is the introduction. So starting with the first thing, outline and all the different steps. Of course, the project brief, my role, timeline, and clients and also the challenges. All the things you generally need to integrate in the introduction. Then the second point will be all the background information which will be interesting for people to understand the topic and other things I found out throughout the research I did. Yeah. Some interesting things like the Maslow's need pyramid, which is a really important thing to consider about that whole project. Now the process, of course, I divided this in the four parts. I started with research than concept, design and at the end testing. What you can see here is that I chose the same colors again, so it's a little bit easier to get an overview. So the research, I did user interviews, so I want to show that. Also, the questions I have prepared for that interview sessions and the insights after the research. For the concept phase, I want to show the information architecture I came up with. I want to show my first sketches. Really the process, especially about the event area. I also want to share my wire-frames because I started with wire-frames and did some testing achieve of the wire-frames in the early stage. So design-wise, I would like, of course, to show the branding, so color, topography, imagery and those things. Also show some things for the app design as well, especially the event area. So app design things, the community, and maybe also the message area. For the testing in the end, I want to show how the testing went quite of the testing and about the results. In the end, I also want to share insights about the outcome, what actually happened after that and lessons learned. For the outcome, I want to integrate my final product. We will get the final mockups, how they look like, how they're interactive, how they are functioning, and then emphasize actually the different points about the designs I came up with. The next things are of course the learnings from the testing and the lessons learned after I finished the project. The next steps maybe, and also really important, the ideas which are beyond that. So another recommendation and tip is to get all the post-its, put them on the wall, so you have some overview. We are going use that in the further process. You have an overview and know what you actually want to integrate what texts you need to write, and what images and mock-ups and things like that you need to prepare. 12. Introduction: I hope you all created an outline with the different phases of the UX project we went through. After we finished the outline, now is a really good time to talk about the different phases how to actually design them for your case studies. What will be really helpful is actually to use your worksheet I prepared for you which will guide you through the different phases and you can write down the text and the single steps in your worksheets to start really with the text. After we created the text for all of the different phases and what we want to put in there, we're going to talk about the visuals and the layout as well. Let's get started with the very first step. We already talked about the different phases of the UX case study and the process to beginning. That is really important to integrate the introduction. Start with your title, your role, and also the brief you got and the problem statement. Here's one example introduction. I was working for a coliving space in Finland and here is the example introduction for the project. You can find the whole project on [inaudible] , you can check that out. The introduction, I integrated the title which is the community app for a coliving space, my role was research and UX/UI design. The time was from September until November 2019. The client, here you would integrate the client name as well. The brief of the problem statement was. During my time as a creative resident at Adobe, I was asked redesigning an app for the community at a Coliving space in Finland, which informs the people at that space about all the information you need, events, the renting rooms, meeting people. The community is one of the most important things in a Coliving space, so we set out to design an experience that helps the people to connect with each other and still would be super user-friendly. If you were a part of a larger UX team, you should also state your role in the project for example you write something like, "My role in this project was to undertake as a research and evaluation of prototypes." Or, "My role was to design the user-interface and the prototyping." Those kind of things. Also make sure point number 2 is define the problem, so articulating the problem well will help in telling the story of the case study. Make sure that you really state the problem and identify the project goals. What did the project aim to achieve? Be as detailed as you can. A few examples, especially business goals are gaining specific e-mail subscriber, could be gain 5,000 e-mail subscribers or increase conversion by 10 percent for a specific thing or decrease withdrawals by 50 percent, things like that. This is really interesting, especially for people who are hiring you and for the people. Here are a few examples which will be interesting to look on really briefly. The first example is from Bluewave case study. What's really good here is the project goals are lined out really well. Get users to write more reviews and get users to see the value in their contributions with a really short text, so it's easy to understand. You can see the exploration and the narrowing focus concept and testing as well as some design solutions like creating a systematic card system, as well as final deliverers results, and also some learnings. In this second example, the problem is defined super well as well. You see our approach as well as the combination of a lot of visuals and a lot of focus on the content strategy combined with the wireframes, and additional information about the interactivity and as well you can see a lot of information about the scope, so many background infos. 13. Information: The introduction is a really great place to share all the things you already know when you start the project. This might be the scope, or the target audience, and also some background research you probably did. You can share more about the target audience when you already know more, who are they? How does the problem really affect them? What key insights do you have about them? Those kind of information, as well as the scope and answering the questions about what should the project actually achieve for the business? What the deadline was? What kind of sub-projects do you need me to design? What content will be used for the project? Maybe some analysis about similar products as well. Here, you see an example about a project I did for the Coliving space where I started actually with a lot of background information about what is it actually about, what's so interesting about that? I had to really understand a little bit about the goal of Coliving spaces, the problems. Many things were some kind of psychological reasons. That was really interesting to integrate in the very beginning. 14. Process: Let's talk about the process. It's actually the most important part of your case study. After we explain the background information, the goals, the challenges and all the things that we knew before we started the project, we are going to share all the steps we went through throughout our process which is, like I already said, the most important part. Make sure that you really emphasize the skills and all the learnings you had. We are going to identify the different steps you took on the project, why you did them and of course, the value of those actions, and the outcomes of the project. Let's look really quick at the human-centered design process. Usually it starts with some empathy thing, which is usually research. You define that by synthesizing the research, you ideate, come up with a concept and a design, you prototype that and then you test that. From my experience it's really helpful, especially for clients and recruiters to understand your process, if you use all those steps, integrating them in your UX case study. A research phase going to concept, design, and then testing. Of course, this depends very much on the project you did, what methods you used and when you were actually involved in the process as well. Here it's really important that you show your fantastic UX skills and the goal is to show you a specific approach and contribution. Additionally, share some of the decisions you've made, the trade-offs or ideas, which is really important. Each project is very different of course, so describing the process you took as best as you can but of course this will look very different from project to project. Some things that you might include are listed here on the side, review the research, different user research methods, some ideation methods of course, then bio frames, mockups, prototypes. Of course, user testing the X writing, maybe, UI design, also different kind of testing and prototyping. Then go through those different steps and explain actually why you did that, what you learned and also share a lot of visuals. If you have visuals for any of those steps, share them, that's really important. Also share some tiny text where you talk super concise about the learning and the things that you actually got out of this specific step. The process section is as also really great place to mention any collaborations you may have done as well. Showing that you can collaborate with a team is really important for hiring managers, so state your role and what others did as well. If someone else was responsible for the research, that's not a problem at all, just mention that. You can of course show that because it belongs to the whole project, but just state that someone else did it. Perhaps you have done work as a copywriter, again, how did you collaborate? How did you handle the handoff to developers, to crossovers, the testing and those kind of things, which is really important. What we are going to do now is we are going to go through different steps of the process and talk a little bit about how to showcase that, how to integrate and then it's easier for you to integrate that in your portfolio as well. 15. User Research: The first thing you're probably going to start with is some kind of further research if you did research. My personal recommendation is, of course, share the different methods you did there, could be A/B testing or user journey mapping or interview techniques, could be quantitatively user research. Techniques like surveys or analytics or market research are also qualitative user research methods which are more about the quality. So about the why, it could be interviews or focus groups or career research or whatever you did. Share them, share your key learnings as well. Really good to understand that in the very beginning. Then also share a tiny bit of text where you talk about the learnings and the things that you actually got out of the interviews or the user surveys, all those kind of insights and what you actually started to do after that. Make sure that you keep it concise, that you show photos as well if you are allowed to, and don't share too many details. If you have, make sure to integrate some early sketches or in notes you took at the research session, for example. Of course, only if you're allowed to share that. Make sure that you are always summing up the learnings. Here's an example. We analyzed the events people attended of 40 people living at a colicin space ages between 18-40 for a period of two weeks and discovered that about 30 percent of their event are started because of recommendations from friends. From this analysis, we made four user personas and defined their experiences in the mapping to-do lists with a user journey map. Another example here, I left some parts out. It's maybe helpful for you to just fill it out. To kick off the project, we started with a client stakeholder workshop. We wanted to make sure that x. As a second step, we conducted interviews with, and learned that. We started to use this information to build an empathy map or something else and better than. We got those kind of insights. Structuring like that is usually very helpful. One tool I can recommend, especially if the things you did earlier don't look that great, and if you need to design a little bit better, you can use the whiteboard plug-in for Adobe XD. This is something which is super-helpful. They have a lot of really cool presets you can use for different methods you have, they have mock-ups for different things, affinity mappings, or whatever kind of things you want to integrate. They have some kind of layout which you can reuse. The whole thing is for free, so I can absolutely recommend that. You can integrate postage, you can change the colors to your brand colors or corporate colors and adjust the whole thing to your needs so it looks really nice when you are posting that in your portfolio as well. I can see you have other presets here on the side, so just choose whatever you want or go to the Elements sections and choose the single elements, and build up yourself. That saves a lot of time and you're 100 percent sure that it will look really great in the end. With that, a few other tools I can recommend, of course, I already talked about Adobe XD, which is free, the whiteboard plugin, which is free and easy for you to download. Another tool which is super nice is Miro, they have a lot of really cool assets as well which you can use for your case studies. Could be any user flows or any kind of design elements that you want to integrate as well. Here's an example for the user research I did for the colicin space, you can see a lot of images, pictures are from the sessions and also from the synthesis phase. You can get some insights about the interviews, the questions I ask, and also the personas or the people I got interviewed, and the main problems or the insights I actually got from the research I did there. Here are some general tips, and in the end, make sure to keep it concise. Don't show too much, only the most important information,, and in the learnings you have, integrate some graphics and images as well to keep this really nice and a little appealing, and don't share too many details. Make sure what you're actually allowed to share on case studies, so please be aware of any things as well. 16. Concept: Rounds of iterations, you started preview for concept phase, and it's really important that you structure that really well. Of course, start with some insights you got and after a few rounds of interactions, you probably started with AB testing, you started with wireframes, so make sure that you really show that their are visuals and room for tiny text and all the learnings you had. Also, things like out of the final round of user testing, we learned that, for example, users have problems finding the event function in our app, or that you needed to redesign these areas and for example, it turned out that the event area is most useful for people. Could be something, and this is an example I did for the Coliving space. You can talk about the different round of iterations, for example, you can talk about the feedback you've got, and it's also really great place to talk or to show the mock-ups you did, some early sketches from low-fidelity to high-fidelity, more detailed, and share the challenges you had, the learnings you had, and also make sure that you integrate some text with visuals as well. What's also interesting for people is, if you share challenges already in the concept phase, because this will help clients and hiring managers that, you are able to deal with difficult situations. If you didn't have any difficult situations, that's great. That's really awesome. But another thing that you can integrate there as well is also some learnings to had, so progression share, a notable challenge you faced, share some key learnings as well, and how actually you came up with the ideas and the concept. Fill out all those things in the worksheet, and look for the wireframes and mock-ups you have, and other ways how you can integrate it in your concept phase. 17. Design: Now we can talk about the design. Especially if you were integrated in the design area or in the design interface, then it's important that you also show a lot in your case study and lay down all the different elements that really belong to a design. This could be, for example, the topography, the colors you chose, also explaining why you chose such a specific topography, maybe you also have two, the different colors you chose, the primary, secondary, and maybe even other colors, the icon set you designed to specific elements. That could be a specific element for a card, for a pop-up, specific elements which you design and also the ideas behind that. If there were any reasons behind designing those elements, that's really helpful to already write that down and think about the different elements which you want to show there. Get your worksheet, right on all the different things that you want to integrate, already think about visuals which you can integrate there as well. Especially for digital design, it's really helpful to create mock-ups or animations where you can integrate your interface design and show that in a very appealing and visual and nice way. How you can do that is something we will talk about in the next video. Stay tuned for that. Now, start with a different design element as well. I'm going to show you an example which I think was really well-done, especially from the design side. What I really love about this case study from Netguru for ResumeLab is they integrated all those visual elements in the whole case study. It looks really beautiful. But they also put a huge focus on the style guide and the handover truly documentation, which is super interesting, especially for clients because this is an area where most problems actually occur. They also showed the responsiveness. The different elements to all the different sizes, for the laptop, smartphone, and iPad, which is really cool. Another thing which I think is really awesome on those case studies is how they presented the illustrations. They really showed the process of the illustrations coming together. Here, for example, with the design software and how they integrated all the different elements, which is super awesome. What you can see here are the things which you can integrate. Only a few, so first, of course, integrate all things which belong to some branding additional interface. Besides topography and all the different design elements you integrated, this could be a cart view, or a tab bar, or specific elements you came up with also; icons, etc. You can also integrate colors and the different interactions. In animated, because interface elements. 18. Testing: Testing is the last step of the human-centered design process or the design thinking process, although it's an iterative process and you start from the beginning again with the lessons we learned. It's really important to put a lot of focus on the testing phase in your UX case study. Testing is often undertaken concurrently with prototyping and performed well, it can provide many learning opportunities to help you learn more about the user and opportunities to refine your prototype and even the problem statement. It's really important that you share the learnings you had during the testing. Here are a few tips. First, in your UX case study, explain the process. Where did you do the testing? How did it went? Those things could be in a lab and in office, also explained the methods. Then also what did you test? Did you test one specific area? One specific use case scenario? What kind of task did you actually give the user? What did you learn in the end? Make sure to talk about the methods because that's really important. Here are a few methods which you probably use. Could be guerilla testing, lab usability testing. Could be also some unmoderated remote usability testing through Zoom, for example. Could do contextual inquiry, phone interview, some card sorting, session recording, or also A/B testing. There are more UX testing methods as well. But those are the basics, almost common. So make sure that you really share that, and share the learnings as far you had doing that. 19. Outcome: So we already arrived at the last step of the process of the outline which is the outcome or what actually happen after you finish the project. That's super interesting for clients or stakeholders to really understand what you achieved reference or project with your designs, what kind of goals you had and how you actually reach them or if you actually reach some. This is a really great time to also share a little bit about of course the goals you reach, but also about the lessons you learned that's super, super, super important and so if you didn't face any difficult problems, challenges or something like that, lessons learned are a really good thing to integrate in the end of every UX case study. One example about a possible outcome could be something like that. We found that 15 percent of the events people attended started because someone else on the call leaving group invited them to join. We didn't have the budget or time to address the challenge of personalized invitations, but in the future we could revisit the project and focus it. Let's sum this up really briefly. What are the deliverables and what's the outcome? Did you hit, miss or surpass the goal? That's really important to point out here, what outcome did this project actually have. Can you share any other business results, some kind of business insights you got throughout the process? Did you decrease withdrawal rates by 50 percent or customer service complaints by 30 percent if this was your goal in the very beginning? The same with the conversion rate, if you had a goal about the conversion rate, digital learning pitch, get to that fantastic conversion rate you were aiming for, or maybe did you improve the lifetime value of customers or things like that? This goes back to the goals you set in the very beginning. What are some takeaways about designing an outline, creating an outline, and designing the single steps. Generally, make sure that you always include visuals and document the whole process throughout the case studies, tell stories what actually happen so it's easier for people to understand, respect the NDAs you've signed, so make sure that you only show the things that you are allowed to, if you are a hundred percent sure, make sure to ask your client and don't forget to treat the case study and the job application process like any other UX design challenge, so really sort of sketches, think about the concept and inquiry, integrate visuals as well. 20. Visuals: One of the most important things in every UX case study are definitely the visual part. Even if you are just a UX designer or UX researcher, make sure to always integrate visuals. That's super important to really guide the view of the person who sees your portfolio, could be a recruiter or a client, so make sure to always integrate visuals. We started by writing down the text for the different stages of the process. What you can do now is thinking about all the visuals you already have to support the things you're saying in the text in the different stages. You wrote them down in your worksheet. What you can do now is integrate the text or the visuals you are already having or you want to create, because we are going to create visuals in the next videos as well. Go through the different steps of the process, and write down the visuals you want to integrate. What's really helpful is to already gather all the visuals we're having. This could be photographs, or wireframes, or maybe mockup you already created for the client or for your work, then put them all on one folder, so it will be easier for you to find them. Then it's a really good time to also make a list of the mockups you still want to create, the visuals you still want to create. What's really, really helpful for me is to write down all the visuals I want to integrate on Post-its, different colors for different type of visuals. Blue are for any graphics, pink are for any images or visuals, and the really neon pink is for animated mockups. Then after I wrote them all down, all the visuals I want to integrate, I pin them right next to the Post-its. We wrote down and creating our outlines. Next to the topic, I am pinning the Post-it, so I know what kind of visuals I still want to integrate. Then they end, it look like something like this. Seeing other visuals, I still need to create the different types, and then make a list, and prepare everything I need for that before I'm really getting started. But you can also use your book, the e-book. Sometimes I'm doing both starting with the Post-its, and then writing all the things down starting with the text, so it depends very much on how you really like to prepare that, and what kind of person you are, and how you actually do [inaudible] Now, let's go one step back, talk generally about what kind of visuals we can integrate, and also, about a few examples. I want to show you a few case studies with really beautiful visuals, where the visuals are integrated super, super well. What kind of visuals can you actually create there? We already talked about sketches, could be also some photographs you took throughout the process, the research process or workshops, for example. But there are also images you can integrate, create your own mockups for example, or create them in your case study in some way. There are two sides which I can recommend which is Pexels, and the second is Unsplash. They provide free to use high-quality photographs. If you want to integrate some mockups, what I can recommend are a few mockup sites, although I'm usually just associate on Google with form specific mockup. I am looking for it. This might be really helpful for the beginning. Now, let's have a look at a few examples which are really beautiful. The first is shown Alice Lee. She designed the illustrations for Slack. What you can see here is how she integrated her visuals with the text. It looks super, super visual and very beautiful, especially seeing the process and the different possibilities how to use that. What she does super well is she combines the text for her visuals, although her focus is more on illustration and less about the UX process. But she puts a lot of effort and emphasize on the different steps where she guides the user through. It's super appealing and interesting to watch. There are few things which we can get inspired even as a UX/UI designs with the really big headlines with the big visuals, with the texts on the sides and presenting the different design elements step-by-step. The second example is from Moment Brew, it's an augmented reality app. What you can see here is the whole process. Again, a lot of illustrations and designs are created for this case study, especially all of the different user flows and the different visuals are created for this presentation. What I really like here is that he also integrated Post-its and presenting the process, or how he actually went from the first sketches, the first wireframes to the final cardboard, and especially the huge emphasis on the prototyping is super important here and interesting to watch as well. Integrating animations and videos are usually really helpful for different stages to understand a little bit better of how things are working in interaction. Like you can see here, especially the research is presented really, really well. Let's have a look at example number 3, which is from Good Club, where the designer actually put a huge, huge focus on the visuals as well. He integrated a lot of photos, which is integrated on the website as well. A lot of really beautiful mockups and a really good fit design layout as well. I hope those examples will help you to get some inspiration because now, it's a really good time to integrate all the visuals in your outline as well. So get your worksheet, and write down all the visuals you want to integrate because you already have them, or I want to integrate them, and then make a list of all the visuals you want to integrate in the next lessons together. 21. Layout: Let's talk about the layout really briefly. Your X case study or your X portfolio as some design piece as well, so make sure to really think about the layout and how you organize all the different kind of information we gathered in the last videos. It's really important to create a great layout which really supports your process. Maybe you're not a 100 percent flexible because you're already using some kind of templates if you're using Squarespace or WordPress, for example. But generally, they are always some basic layouts which you can integrate there as well. My recommendation is to start by designing or by viaframing your outline. You can just get a pencil and some paper sheets and write it down. Imagine that this would be something like a Viaframe where you integrate all the different kind of information you just gathered, and then sort them visually and integrate the visuals we gathered, the text we have, and then sort that out before you go really into your design program. Then the next step, you can move all that in a digital platform, this could be Adobe XD, and you can use the templates I created for you so it's easier for you to get started. But yeah, feel free to watch me doing my layout of the next video. This is probably helpful for you to get started with your layout. 22. Layout: Watch Me Work: Before we are getting started creating by framing our layout, let's have a quick look at our outline we can approve. Here's a photo of the Post-its we did with our outlines and the different visuals for the single steps. I think it's really important to keep that in mind to have that somewhere near you, could also be in your workbook because you need to use those single steps and all the elements you have there to create some layout. What do you need for that are actually some paper sheets, the bigger the better. I use a A3 and a Sharp piece of black pencil. Let's get started. You saw my outline, I want to start with some big mockup, big image of the final product to avoid to show, what was our final product. This will be probably really helpful already. After that, I'm going to write down everything that belongs to the introduction from my row, my task, of course the client as well and the timeline as well. Then the project brief with some image. Then I'm realizing that I want to integrate one more image in the outline so I'm going to put that in the Post-it outline, writing down the single steps on those sheets and then putting them on the side. The next step will be the background information there. I want to integrate different things. What is coloring, the Maslow's you need pyramid, typograph, also the target group and the sculpts, so I'm thinking about how to actually arrange that. What you can see here is, I'm doing this more or less like you would do for normal via frames. For me, it's just important that I have in mind actually where to place those things, where there's some wide space and those kind of things. You can do exactly the same. Now I'm starting with the process, with the user research first thing, I want to emphasize the user interviews I did with some images or especially one images about the interview, the process. Then share the most important information, the style iteration, the interviews, the questions. Then share the insights which are clear three insight I thought. Put that on the side. The next thing is the concept part. Everything around the concept there, I went through different stages, I went to search of the information architecture and show some big graph there. Next thing are some sketches I did early on, for little text and a little explanation as well. I also want to show the wireframes because I designed wireframes for the whole app and did some first testing. I want to share a little texts about the testing and the result as well, somewhere below the wireframes as well. Without any withdrawals because I actually haven't created any withdrawals for testing. Then the design. Of course, I want to share other things which are important for the branding, the colors, primary, secondary colors with little text. Typography led to kind of typography I integrated, also the imagery and with a little texts as well. Then I want to show some interactive elements in animated mockups. That's really important to integrate here. Then I want to highlight the design parts as well. For the testing, I want to show the results, mostly text-based so I just think about how to arrange that. The outcome that will give you more visual as well. I want to show the final mockup under the text about the things that I learned there, I want to integrate some interactive elements. The final event area, the unmade of mockup, and also the final apartment setup, onboarding mockup. Also the lessons learned from the business perspective are also the next steps which will be unfortunate to integrate here as well. In the end, of course, also the things that I learned from testing some more ideas I'm having beyond the screen, which are abolished and nails together etc. After you've finished the outline on the paper, you can start to learning that in your tool. Here is the Adobe XD templates, which you can use and adjust everything to your needs. You don't have to do that now, you can do that even after you created the visuals. But what I really like is to just get the art boards, sort them already, integrate the text which I wrote throughout creating the outline, then think where visuals are missing, and whether I should need to create some visuals as well, and how everything looks like. I can already insert all the things that I know that I want to integrate, maybe the typography that I want to integrate, the visuals I want to integrate, and especially all the texts. I can also integrate my own art boards. By just copy and paste that and integrate my own typography there if I don't want to integrate any visuals here. Just everything exactly to my needs here. 23. Images: Check what photos you took throughout the process. This can be images you took doing a workshop or an ideation session or something else. It's super great actually to integrate that in your case study, so make sure to really check out all the images you took. This image you're seeing here is an image doing research or testing session with a visit of us testing. Those visuals and images really help to understand how you work and that you were actually involved in the process, it shows all the details that are interesting for clients. If you don't have any images or you're not allowed to show them, one pro tip is actually to use some stock material and integrate that in your case study. Of course, do not reflect workshop slots or research sessions, but if you want to show something around a specific topic, this is an example I created for the cool living space where I sadly wasn't allowed to show a lot of the spaces there. I found very similar spaces actually online and integrated them in my case studies as some dividers between different sections. This already supported the whole project and gave an impression about how things actually look there. There are two sites which I can recommend you to check out, one is Pexels and the other one is Unsplash. I really prefer Unsplash, they have a lot of awesome images for all cases you can imagine, you can download and use them for free and you can use them for almost every situation you can imagine. You can also create your own mockups or use them for social media and adjust them and really great results. Definitely check that out and make sure that you are integrating images in your case study. 24. Icons: Using icons in your UX case study really help to, yeah, make especially the written part more visual. If we look on the layout that we created on our paper sheets, it's really helpful to already think about the different kind of texts areas you want to integrate and think if icons would support your point there. This is what I did here. Actually throughout the process, I came up with, yeah, three insights, and I want to support those three insights with three icons which I need to create afterwards. I haven't really created them for the project or something like that, so I am only going to design them for the case study. In the end, you can see the final result, and I think it's really worth it to put some efforts in designing icons. Because imagine that scenario without the icons, it would look completely different. Here here, especially the combination between the texts, so choosing a highlight color for the icons, really makes the whole thing much more visual and much more interesting to see and to read actually. If you don't want to design the icons yourself, here are a few sites which I can recommend you. Although my favorite are definitely Material Design and Font Awesome, but also plug-ins which you can download for a Sketch, or Figma, or Adobe XD, whatever software you are using, and then integrate them right from the plug-in into your software into your design tool. Definitely make sure to integrate some icons in your UX case study. 25. Typography: The first thing to do is actually that you save the name. Actually the address for the website. For me, I actually used patriciareiners.de or.net. I used my first and my last name because my idea was actually that if clients Google me, they find me. What I can recommend to you is do exactly the same. This really makes sense, if people want to find you they will find you. So just use your first and last name. Depends little bit if you have an arches or some other names where you're known for, or if you are building up an agency, then use that name. But consider that really well in the beginning before you decide actually where you want to host that. Where to host your UX case studies and your whole design portfolio? That's a really good question. I think for that, it's really important that you answered your goal. What do you actually want to achieve with your case studies, with your portfolio? Do you actually want to get client as a freelance UX/UI designer or do you want to present yourself online to get workshop slots or to be invited as a speaker, or are you maybe even planning to do a shop or to sell your own services online? Consider that in the very beginning, because if you want to focus on getting clients and get seen online, I can recommend some social networks like Behance for example, which is completely free and helps you to get seen by clients. If you're planning to integrate different things like different elements like a shop or things like that, the best thing would probably be to choose something where you can integrate a shop from the beginning or even if you have the option like WordPress for example. We are going to talk about the different options in this video, and also about the pricing, and what I can recommend. So you will find the right tool for you. Let's start with the first one, which is WordPress. WordPress is a function that creates the whole website for you, so you don't really need how to code. Although if you know how to code, you can adjust everything. Because it comes in themes, so yeah, you can adjust those different themes. You can also download plugins and different applications. What's really cool and helpful is that you can download specific templates and use those to only upload your content. I designed my own website back in the days, I think like six years ago with WordPress. It's pretty easy, and super nice because you can adjust everything and get all the add-ons by downloading plugins. You also have a pretty good overview from analytics to all the different sites and it's super easy to adjust that. This is actually how my website looks in the back-end. When I want to adjust or do some design changes, it actually looks like this. Super easily actually for me to change things, or adjust my portfolio, or upload your UX case studies. The templates are usually pretty cheap. I paid, I think around 50 bucks for mine, and already six years old, quite some time now. But I think it still looks really nice and you can adjust everything. One provider which solves really nice programs is Envato. So you can definitely check that out. Good thing with WordPress is that you can also integrate different function like a shop for example, and you can adjust the whole design and personalize almost everything. Another really good option is actually Squarespace, squarespace.com, where you can just choose different templates, different designs for your case study, for your portfolio. They have a lot of templates on their website. You can even start by finding the perfect design or the perfect template for whatever you want to show. They have a lot of really cool design area. It's super easy for you to find that. Just check out the website. What's super helpful, I think, is that you have a survey, so you can really check what is your site about, what are your goals, what do you want to do, and those things? It's super helpful for you to find the right templates for you. Their design is super nice. Then in the end, after you chose a template, you can adjust the whole thing from colors, to photographs, to text, to almost everything. The good thing with all the Squarespace templates, is they already look super beautiful. From the UX perspectives, they are super well done, which I think is helpful because you don't need a lot of time and effort to come up with any coding or design that themselves. The only negative point is that it's pretty expensive, depends on what plan you want to get monthly, yearly, or whatever option you want. It's around 10 bucks per month, which you need to consider before you get that because it's a monthly payment. It's a payment which returns every month. Another very similar option is the Wix. There are more actually than Squarespace and Wix, but those are actually the big ones. Wix is more or less like Squarespace. The design is a little bit different and it's of course, a little bit cheaper. You have different payment options, which you can see here. Just make sure one of the payment options actually with ads for Wix. From my recommendation, I can only say don't integrate any ads for something else than your work. This looks very unprofessional, so you either take the combo, or the unlimited option if you want to work with Wix here. Another really good option is Behance, behance.com. It's a social network for creatives, all sort of creatives. Photographs, animators, videographers, almost everyone also UI/UX on graphic design. It's a really big platform which works as a social network as well. It's pretty easy to connect with each other and to get seen as a creative. Besides that, it's completely for free, so keep that in mind. What's really nice is that it's easy for you to find inspiration as well. They have stories as well, like Instagram stories of different hashtags where you can link your work. They have different live streams. If you want to learn something, you can integrate your own profile there where you can upload your UX case studies and then it looks something like this. You upload your case studies over there, and you can integrate the different elements that we designed in our layout. What's really good here is that you have this discover option where you of course can discover other work. But here in the area in the top, during the interaction group, you can find all the work which got featured in the interaction section. A lot of eyes actually get to see the work which got featured there. For you, being a creative, being featured on Behance is like the best thing that can happen to you, because a lot of clients, will find you. A lot of clients also from bigger companies are looking through Behance to find creators for their work. Behance is the regrade option, especially if you want to focus on your work, want to get clients, want to get seen, want to get known for specific styles, and maybe even don't want to put a lot of focus or work on creating your own website, but getting started with some things. Behance is a really good option not only for the beginning, but something which is ongoing, and even besides your website. Like you can see, I have a Behance profile, but I also have my website, and I honestly started with Behance, uploading my work there to just have something out there, and guide all the people through my Behance page, which is for free. I also made a lot of connection through Behance. So definitely check that out. Another really good option, especially if you have the Adobe Creative Cloud membership, is Adobe Portfolio. It's completely for free and you can super easily link your Behance case study, and so your whole Behance portfolio are a different PDFs or even upload your own UX case studies there completely for free. You have different templates, you have different design options to adjust everything. So this is a really good option as well. You can see here I had automatically integrated all my work on Behance. I can now adjust what I actually want to show there. For example, if I want to present something for a specific job, and I only want to show three different case studies, I can do that here with a specialized link as well, so this works really well. I can do all the adjustments on the side from design options, to spacing, to different navigation elements, to some templates, which you can see here as well. Like you can see many different templates or you can just choose what really fits best to you and especially take to your specialty. Could be UI/UX. Like you can see, there are one million options out there where you can host your portfolio. It depends very much on your goals and what you actually want to achieve with that. My recommendation is to really ask around, ask different other creatives, or friends, or colleagues where they are hosting their portfolio, their UX case studies, and also ask for why? Maybe you get some interesting insights about specific reasons. If you are able to code you are free to code your own website and really personalize everything. But make sure that this is a lot of time, and especially if you are not the pro coder, it's a lot of time and effort actually to adjust case studies. Because from my experience, I am adjusting my case studies from time to time a little bit, or I want to add something, or even if I want to upload a new case study, it's much easier if you have some host, could be WordPress, or Squarespace, or even Behance. Another thing to consider is that if you use one of those tools I just recommended, you always have some templates. You are not 100 percent free to do the design you actually want. If you have something very special in mind and if you don't want to use any templates, the only option for you is probably to just code it yourself or pay someone to code it. Although this is definitely more expensive and not so practical in the daily use. We are going to talk about how to upload your Behance case studies in the next video. 26. Mockups: Let's talk really briefly about Mock-ups. What's really helpful is if you are using mock-ups for your visuals or to actually present the screens, your designs, or the animations, or the interactions you came up with in real mock-ups. The good thing is that there are one million free resources out there online, which you can just download, choose, and integrate your design and then upload her tried to your ex case study. A mock-up really hopes to show your design in action. This could be an image of the device you design for, or someone holding a phone and navigating through your app for example. What you can do is you can design two, so PNG mock-ups, but also animated mock-up. We're going to talk about that in the next video. I actually integrated two kind of mock-ups in this course so you can download them for free. They're coming with the course. One is for Photoshop where you can just integrate your design, your screens you designed, it's an iPhone mock-up. Feel free to just download that and let me show you how I actually integrated my design's mock-up. Where can you find good mock-ups? I usually just Google the mock-up type I'm looking for. This is a really, really helpful site. A lot of free mock-ups where you can look for specific areas. Now we selected the iPhone. We can see all the mock-ups which are available for some iPhone background. Second site, even more so a lot of different things, so you can just choose whatever you want. Most of them are actually free, so you can just download them and don't need to pay anything. Even the one who are paid versions are not really expensive. From my experiences is that it's really worth it to pay some amount of money because we'll look way nice in the end. Just make sure that you are downloading a PSD file, and not a JPEG, because in the PSD file that will be really easy to integrate for design. Let's get started with the mock-up I designed for you, which really comes with the course. I will guide you through this single steps to create your own mock up with your own design. The first step is actually that you open up your design software, whatever you are using, and you are going to export the screen which will be placed in your mock-up. Super easy. You're just going to select the output, click on Export and then export the screen. Then you switch to Photoshop, you open up the mock-up file. Then you can see the different layouts used, the lighting and then below you have the different screens. Here you're going to place your design, the frame, the shadows, they're all placed on a single layer. You can adjust that, or we are going to do that after we placed our design. Double-click on the Smart object, and here you can place your design. Just insert your design we just exported from the design software. And you do that with drag-and-drop. Just choose the file and place it there and then adjust the size so it really fits to the frame. Then what's really important is safe. Command S to save that smart objects really important, place that on the right place. You can delete the other files there as well. Make sure to save it. Then go back to your original mock-up PSD. Here you can see that it was placed on the screen file. Now we're going to do some adjustment here. You can see the background and you can choose the background collage just double click on it and then change the color to whatever color you want. Sometimes what I really like is choosing a color which really fits to the design and presenting in the screen. Here, I'm playing a little around looking for different colors which would be a good fit, looking for something orangey but not too much. You can just play around, check that out. What do you can also do is change the color of the frame, the iPhone frame, double-click on that, you get all the settings and then you have the color to option here and just change that to whatever color you prefer. Could be black, could be silver, could be something colored if you really want to promote the colors there as well. Use some orange red color type as well, which can look actually really, really cool. Just play around a little bit and choose the perfect color for your design. This looks good. Another thing which I think is really helpful or good to know is that you can just copy. Copy the design here. Just copy and paste. Then command T and move that to the side. Then you can place their different screens. You will have already two screens. Just make sure that you rename the smart object. If it's the same object, then you're going to have the same image, there as well. But if you rename that, you can just change the design here as well. Let's go back to our other weeks design or design file, exporting on the screen could be this one. After that, we are going to employ TS1. Like I said, I usually do that proof drag-and-drop. Just place it here. Exactly, and then save. It's already there. You can do that with as many screens as you want. Just copy and paste the whole iPhone folder. You have different options now to adjust the design. For example, you can remove the background, save it on your computer. You already saved that as a PNG. That's really helpful, especially if you don't have a background. After that, you can go back to your Adobe XD file or whatever design you are having. I presented all these templates for you. You can just place your design of the PNG you just created in those single layout steps. Adjusting the size a little bit. I want a little bit bigger. Then it's already finished. Let's sum this up pretty briefly. What are the takeaways by creating student mock-ups or PNGs? First, export your designs in PNG so the screen you designed, open the mock-up in Photoshop. Place your design on the smart object with the name placed sign here, save the smart object, and then do other adjustments you want. Remove the background, change the background colors, or do any adjustments you want. Then export the mock-up as a PNG and insert it in your layout, which you can export them and integrate in your website. 27. Animations: In this video, we are going to talk about animation, so how to create stunning animations for your UX case study which are ready to upload on your Behance case study or even on your website. Here are a few examples and a few ways how you can actually do that by using the template I created for you. This is the template, I hope you've downloaded that because we are going to use that for the different GIFs and the videos we're going to create now. We are going to start with the GIF and so create an animated mockup. First things first, create a video out of your animation. Go to the preview mode in your design tool Adobe XD for example, record that, play your animation, it could be a small or long one, it doesn't really matter, end the recording and then save that wherever you want. Perfect. Now, we are going to switch to our templates. Open up the template I created for you. Here we can see all the folders, all the different files which are integrated and also the composition which is called place your design here, open that up and then place your video inside. You can adjust the size either by Command S and adjust the scale, or do that by hand, by clicking on the little pickers on the edges. Make sure that it's aligned perfectly to the edges. Perfect, this looks good. Then go back to your composition, and what you can see here is that it's automatically placed in the right perspective on that area. If you click the "Space Bar", the animation plays, so you can see the whole animation. But another thing you need to adjust the composition length. By using that little picker at the top, move that to the perfect length that you only export the size you need. Perfect. We have around five seconds for our animation, which is perfect. In the next step, we are going to export that. We can also do some adjustments, for example, remove the background, change the background at specific graphic elements. Now we're going to click "Export" and then click on the encoder renderer. I really like to use the Encoder Renderer, it comes of your Adobe Suite. If you don't have that, don't worry, you can just render that with your normal After Effects render system. That really matter for that system. But the cool thing is with the encoder that you can move that to MP4, so that's really helpful. Now, we need to wait a couple of seconds until it's added to the line here to the render cue and then we can just render up by clicking on the green button on the top left side. There it is. Now we can click on "Render" and then it renders automatically. So we have a video out of this composition, we created an After Effects. This looks good. Just make sure that we have H264 in our settings here, and then we can just start by rendering. You can see at the bottom that it's rendering, It's actually pretty, pretty fast and the quality is good, so this is working well. It saves on the place which you showed in the very beginning. Yeah. Almost finished then we are going to export that to After Effects as well. We're going to take that animation when the rendering is finished and put that to Photoshop. Let's open up Photoshop again and place the video in there. You can see there is a timeline at the bottom, which is really great. The next step is actually that we are using that to [inaudible] a GIF because you can do that in Photoshop, but not in After Effects or Premier. So you need to use Photoshop as well. You can find the GIF export function and at the top we're going to do that in a second. Just make sure that your GIF is not too long, everything less than six seconds is great. You can click on "Export" and then you can find it here, just click on that. You can also use the shortcut if you want, whatever you prefer. It's a little bit hidden actually to export the GIF function. But if you know how to, then it's actually pretty easy. So click on that, and after that, you can also adjust the size. Ours is really big because I started with a really big size. So we are going to make that a little bit smaller like 800-800 and make sure that it's repeated. Now, make sure where you want to save that, the name, and then click on "Save", and then it will be saved automatically on the place where you put it actually, so pretty easy. Then at the end it will look like this. So you click and see it's repeated the whole time. The second GIF is an animated artboard from your design platform. It could be something like that in the Behance case study, where you see animated areas. If you move that to your desktop, you will see that it's a GIF, in the perfect size of the layout. You adjust it, you can upload that on your website, but also on Behance. Looks really cool, right? I'm going to show you how you can do that in the perfect size. So go back to Adobe XD or whatever design platform you're using. For Adobe XD, you can click on the artboard and click on "Export", and then you can export that to After Effects right away. So that's actually really cool thing. It opens up in After Effects. Don't worry, it looks like it just exported the blue rectangle, but it actually it exported everything. So what you can do now is create a solid background a white one, and export that here. Now you're going to integrate the design we did before. You can just place that to the area you want. You can also remove the blue rectangle. This was just some placeholder. Feel free to remove that. You can adjust the text on the side, do whatever you want, it's still in the vector, so you cannot adjust whatever you want. Make sure that you adjust the time of the compositions, so around five seconds and then we will do exactly the same again. We're going to render that in the media encoder and create a video first. After that, we are going to put that in After Effect as well. Perfect. It's done now, we can click on it and then just put that in After Effects like the last time. There it is, perfect, looks great. Now we are going to export that exactly like the last time, like the last GIF export that folder and then create a GIF as well. Here is the final GIF exactly ready to upload on your Behance case study. If you have longer videos, then check out the next videos because there we are going to talk about how you can create longer videos, how you can upload them and how you can integrate them in your UX case study. 28. Videos: Where can you actually integrate videos in your UX case study and where does it really make sense? I am going to show you one example out of my UX case study, where I integrate a super short video within the case study. This video is about some kind of a user flow, some kind of a user conversation like an Alexa conversation, smart assistant with the system. Because it's longer than a few seconds and voice is integrated, I couldn't just upload a GIF because a GIF's voice is not integrated, so I needed to form a video, actually animated that in After Effects and then put that on Vimeo, like you can see here and then embedded that on my UX case study. Like you can see here, it's hosted on Vimeo and embedded super easily. This is the case study which I really like, I think it's super beautiful, actually put together like a whole storytelling. I especially love the videos which are integrated here. Especially this video where you can see the user flow, so everything which is already animated, which is already integrated in your design, was just filmed, put in a mock-up, plays with really nice background and then uploaded to your case study. This is actually hosted on YouTube, but in the end, it's absolutely your decision where you host your work and where you upload that. I think that's super helpful for clients to see how things are really interacting with each other, how the transitions are working. It's much more visual than just showing the user flow. Especially on Behance or on all your case studies, everything which is animated and really make sense, so it provides some value, is helpful for the client to understand that, especially like in interaction design. Here you can see some case film. Someone designed a beautiful case from explaining the whole product. This is a little bit more complicated, not only filming the interaction, but animating things in After Effects. If you are an After Effects pro, that's probably a good thing, but it's not really needed, it's more nice add-on. Like you can see here, they added with some drift and there's where the difference between those two. Videos are for longer designs, longer videos. Now, I'm going to show you how I am designing my videos for my case studies with After Effects and Adobe XD. Longer animations or recordings are perfectly for videos and I'm going to guide you through that step-by-step. The first thing is actually a project, so you open up the project you want to record and where you actually want to show the prototype. Could be almost every software, I'm using Adobe XD and here you can see in the prototype mode that I connected different things, so it's interactive. When I am selecting one artboard and clicking on the little play icon here, I get this preview window which I can record. Actually, the recording works by clicking on that and it automatically record. So now everything I am clicking on gets recorded. What I want to do now is to click through the app and show the basic onboarding flow. My appointment, okay. Then let's go back to the home view, I can scroll a little bit and then select just one of those links here. I think I'll go back to the home screen. Perfect, this looks good. I will call that user flow coliving and save that on my desktop. I can close that now and then go to my videos software tool. I really like After Effect, so I'm doing almost everything with After Effects. You can also use Premiere or what other kind of video editing tool you prefer. Like I said, I really like After Effects but you can use whatever you want. Now, create a new composition with the 1920, 1080 and around 33 seconds. Click on "Okay," here it is. That looks good. Then the next thing is actually integrating all the assets that I need. I already prepared the video, but that's not enough. I also want to design a really nice background. This is what I have already prepared. I came up with an artboard, make sure that it's exactly like the same size or I switch back to the design mode, make sure that it's exactly the design size you need. Then you can just export that, you name that and then export, select it and then you can export that. So we have a nice background for the mock-up. In the next step, I am going to insert all the things that we need and then we can start with the design. This looks good and then I am going to insert the mock-up. You have the mock-up in your folder as well, so you can just use that if you want. I'm going to change the size a little bit so that it's exactly how I want it to look in the end. Then let me see. Here is the video, I need to adjust the size as well. That looks good already. Another thing that I really like to do is, here, I have the mockup, so it's actually above. Here, you have the little ice symbol so you can just make it invisible, and this is what I am going to do now really quick because I want to have some rounded edges, and therefore that we just need to mask that. Make sure that on the top you have the mockup, then you have the video, and then you have the background. We are going through that step-by-step. What I'm going to do is I'm going to make the mockup visible, and then select the video, you just insert it. I am going to choose a rounded rectangle tool, and going to place that above the video. Then with the little arrows you have on your keyboard, the up and down arrows, you can adjust the angles a little bit. Now, it gets bigger. Perfect. We know we mask that. If we see now the mockup above, we see that it fits perfectly in that frame. That looks good. Perfect. Another thing, so if we play here, we are going to see that the whole thing is interactive, and that the whole animation is actually shown there. Looks pretty nice. Another thing what I want to integrate here is I want to integrate some shadows. It looks like the mockup is little bit floating. I am going to select the user flow living MP4, and then I'm going to go click on shadow, and then we have the drop shadow. Here, you have the effect and presets panel. If you don't have that, then click on "Window", and add Effect panel, and you can use the drop shadow, place that on the [inaudible] video. Then on this side, you get all those adjustments, and there you can play a little bit around how you like that. This is already a lot, so this is the distance I just changed. Then I also want to change the softness a bit, and then we have the opacity. I've acknowledged rendering. This looks good. Perfect. First frame. Nice. What we can do now is we have actually the hallway is already finished, so we can click on File, Export, and then export to Adobe Media Encoder Query. You can also go to the render query, but I really like the encoder software. That's actually included in your Adobe Creative Suite, so you can just use that. It's super great. Actually, if you want to exploit something for your social networks, etc. I can highly recommend actually checking that out. There it is. They can already see our animation. We can just check. We need to make sure that it's H264, and there it is. After the video is rendered, you can just upload it on Vimeo or on YouTube, whatever you prefer. I honestly prefer Vimeo, so it's super easy to upload it, just click on the new video item here and it gets uploaded automatically and then you can do some adjustments after it's uploaded. First, you can change the title. We're going to use that user flow co-living. Perfect. Then we can add a description, we can add some another printscreen, and have some other settings here as well. I'm going to save that. Perfect. This takes some time until everything is ready. If we want to embedded that now in our Behance story, we are in Hance queries, we are going to click on the "Share Mode" here. It's actually in German, but usually no. Now, we are going to click on "Share", copy embedded mode, and now let's go back to Behance. Here, we click on and "Embed Media". We are going to paste the copied code there. Click on "Embed". Then that will add it automatically to our case study. Here, you have the video. Here are all the takeaways. Make sure that you upload your videos on another video platform as could be YouTube or Vimeo. Make sure that you have enough space depends on what kind of settings you actually have or what kind of profile you have. For the free profile, you are able to upload 500MB per week. That's absolutely enough in one case study, may be even for you too. Make sure that you are selecting the right size, which is 1,920x1,080. Open it and press "Share", select fixed size and type 1920x1080. Select auto play and loop. Deselect all intro check boxes, portraits, etc. It will hide all elements from video thumbnail. In your case, that's pretty helpful. If you want to embed it in your Behance case-study, copy the embedded code, and paste it using Embed Media on Behance, and you're all good to go. 29. Where to host your case study: The first thing to do is actually that you save your domain name, so actually be address for the website. For me, I actually used patriciarainas.de or.net. I used my first and my last name because my idea was actually that if clients Google me, they find me. What I can recommend to you is do exactly the same. This really makes sense. If people want to find you they will find you, so just use your first and last name. Depend as a little bit if you have some kind of an arches or some other names where you're known for it or if you are building up an agency, then use that name but consider that will evolve in the beginning before you decide actually where you want to host that. Where to host your UX case studies and your whole design portfolio? That's a really good question. I think for that, it's really important that you answered your goals. What do you actually want to achieve with your case studies, with your portfolio? Do you actually want to get client as a freelance UX UI designer or do you want to present yourself online to get workshop slots or to be invited as a speaker, or maybe even planning to do a shop or to sell your on services online. Consider that in the very beginning, because if you want to focus on getting clients and get seen online, I can recommend some social network like Behance for example, which is completely free and helps you to get seen by clients. If you're planning to integrate different things like different elements like a shop or if things like that, the best thing would probably be to choose something where you can integrate a shop from the beginning or even if you have the option like WordPress for example. We're going to talk about the different options in this video and also about the pricing and what I can recommend, so you will find the right tool for you. Let's start with the first language which is WordPress. WordPress is some function that creates the whole website for you. You don't really need how to code. Although if you know how to code, you can adjust everything because it comes in themes. You can adjust those different themes. You can also download plugins and different applications. What's really cool and helpful is that you can download specific templates and use those to only upload your content. I designed my own website back in the days, I think like six years ago with WordPress. It's pretty easy and super nice because you can adjust everything and get all the add-ons by downloading plugins. You also have a pretty good overview from analytics to all the different sites and it's super easy to adjust that. This is actually how my website looks in the back-end. When I want to adjust or do some design changes, it actually looks like this. Super easily actually for me to change things or just my portfolio or upload your UX case studies. The templates are usually pretty cheap. I paid, I think around 50 bucks for mine. They're already six years old quite some time now, but I think it still looks really nice and you can adjust everything. One provider which sells really nice programs is Envato, so you can definitely check that out. Good thing with WordPress is that you can also integrate different function like a shop for example, and you can adjust the whole design and personalize almost everything. Another really good option is actually Squarespace, Squarespace.com, where you can just choose different templates, different designs for your case study, for your portfolio that a lot of templates on their website. You can even start by finding the perfect design or the perfect template for whatever you want to show. They have a lot of really cool design area. It's super easy for you to find that. Just check out the website. What's super helpful, I think is that you have some survey. You can recheck what is your side about, what are your goals, what do you want to do and those things. Super helpful for you to find the right templates for you. Their design is super nice, and then in the end, after you chose a template, you can adjust the whole thing. From colors to photographs to text, to almost everything. The good thing with all the Squarespace templates, is they all already look super beautiful. From the UX perspective they're super well done, which I think is helpful because you don't need a lot of time and effort to really come up with any coding or design but themselves. The only negative point is that it's pretty expensive, depends on what plan you want to get monthly, yearly, or whatever option you want. It's round like 10 bucks per month, which you need to consider before you get that because it's a monthly payment. It's a payment which returns every month. Another very similar options is the Wix. There are more actually than Squarespace and Wix, but those are actually the big ones. Wix is more or less like Squarespace. The design is a little bit different and it's of course, a little bit cheaper. You have different payment options, which you can see here. Just make sure one of the payment options actually with ads for weeks. From my recommendation, I can only say don't integrate any ads for something else than your work. This looks very unprofessional. Either takes a combo or unlimited option if you want to work with Wix here. Another good option is Behance, Behance.com. It's a social networks for all creatives. Photographs, animators, videographers, almost everyone also UI UX on graphic design. It's a really big platform which works as a social network as well. It's really easy to connect with each other and to get seen as a creative. Besides that, it's completely for free. Keep that in mind. What's really nice is that it's easy for you to find inspiration as well. They have stories as well. Like Instagram stories of different hashtags where you can link your work. They have different livestreams. If you want to learn something, you can integrate your own profile there where you can upload your UX case studies and then it looks something like this. You upload your case studies over there and you can integrate the different elements that we designed in our layout. What's really good here is that you have this discover option where you of course can discover other work. But here in the area in the top, during the interaction group, you can find all the work which got featured in the interaction section. A lot of eyes actually get to see the work which got featured there. For you, being a creative, being featured on Behance is like the best thing, what can happen to you. Because a lot of clients really find you. A lot of clients also from bigger companies are looking through Behance to find creators for their work. Behance is a really great option, especially if you want to focus on your work, want to get clients, want to get seen, one to get known for specific styles, and maybe even don't want to put a lot of focus or work on creating your own website, but getting started with something. Behance is a really good option not only for the beginning, but something which is ongoing, and even besides your website. Like you can see, I have a Behance profile, but I also have my website and I honestly started with Behance uploading my work there to just have something out there and guide all the people through my Behance page, which is for free. I also made a lot of connection through Behance. Definitely check that out. Another really good option, especially if you have the Adobe Creative Cloud membership is AdobePortfolio. It's completely for free and you can super easily link your Behance case study. Your whole Behance portfolio or different PDFs or even upload your own UX case studies there completely for free. You have different templates, you have different design options to adjust everything. This is a really good option as well. You can see here it automatically integrated all my work on Behance, so I can now adjust what I actually wanted to show there. For example, if I want to present something for a specific job and I only want to show three different case studies, I can do that here, but for specialized link as well. This works really well. I can do all the adjustments on the side from design options to spacing, to different navigation elements, to some templates which you can see here as well. You can see many different templates or you can just choose what really fits best to you and especially take to your specialty, could be like UI/UX [inaudible]. Like you can see there are one million options out there where you can host your portfolio. It depends very much on your goals and what you actually want to achieve with that. My recommendation is to really ask around, ask different other creatives or friends or colleagues where they are hosting their portfolio, their UX case studies and also ask for why maybe you get some interesting insights about specific reasons. If you are able to code you are free to code your own website and really personalize everything. But make sure that this is a lot of time. Especially if you are not the pro coder, it's a lot of time and effort actually to adjust case studies. Because from my experience, I'm adjusting my case studies from time to time a little bit, or I want to add something, or even if I want to upload a new case study, it's much easier if you have some host, would be WordPress or Squarespace or even Behance. Another thing to consider is that if you use one of those tools I just recommended, you always have some templates. You are not 100 percent free to do the design you actually want. If you have something very special in mind and if you don't want to use any templates, the only option for you is probably to just code it yourself or pay someone to code it. Although this is definitely more expensive and not so practical in the daily use. We're going to talk about how to upload your Behance case studies in the next video. 30. Behance: I already talked about Behance, which is a really great platform for creatives to upload their work and get seen by clients. The good thing to always consider if you upload on some kind of a social network like Behance is that you would get seen by many, many people; not only creatives, but also clients or people who might recruit you for a full-time position. What's important, if you upload your work on Behance, all these social networks for creatives, is that you share your work in a specific way. The best thing what can actually happen to you if you are uploading your work on Behance is get featured. You can get featured in different categories, could be Interaction or Adobe XD, if you're using Adobe XD as your design platform. I will talk you through what is really important if you want to get featured because there are some tips and tricks to get featured a little bit more easily, and this gives you a lot of use and helps you to get your work seen by many, many creators. My very first tip is actually not uploading one similar PNG with all the different steps of the design process, but uploading different steps, or different PNGs, or different animations. What works really well generally is actually a combination of animation, so GIFs and visuals as well, and put a few animation. Visuals could be GIFs or something which is animated at interactions between the other slides. This really helps you to get featured and get seen by more people. Here's an example and what you can see here is that I uploaded several single artboards. Some are animated, so GIFs, especially for the typography or tiny animations and others are still with just information. I also integrated a few videos for longer animations. From my personal experience, that's actually the best you can do to get featured as well. We talked about the different mediums. Make sure you always mix between animation and stills and integrate that where you are in your structure. Have a look on the structure as well. This is actually how I designed that. I actually made that in Adobe XD, and what you can see here is so many single artboards. I designed them all on single artboards and uploaded them separately. Of course, I animated all the GIFs, all the animations in After Effects or Premiere, and then uploaded them through Vimeo, or normal GIFs. How can you integrate videos now? It's actually pretty simple. After you upload them on Vimeo, click on this little embed sign here, then you click on "Copy." You copy the whole code and then go back to Behance. When you're creating your Behance case studies, you can click on embedded media, and then just paste the things you copied, save that. Then that, it's uploaded automatically to your case study. If you click on the play button, you can see the video we just created with After Effects and Adobe XD. This works pretty well, has the perfect size already, and is integrated in your case study already. A few other things which are important to know, you also need a cover image which really stands out. You can upload it here really easily. If you upload all the single steps, click on "Cover," and then you see what cover kind of you can upload. Here are few examples, which you can see they're really colorful. They're really trying to get the attention, and they look really different. Many look like some mock up where you can see what the product is about. Some are a little bit more simple. Make sure that those cover images are really popping because otherwise you wouldn't stand out. Here are a few more examples, so please check that out as well. You can also find an example artboard for the cover image, or you can just use that with already the perfect size. Then, create a design, upload it on your Behance case study. The next very important thing are the settings. Make sure that you select the area. For me, it's UX/UI. Interaction could be also virtual reality, so make sure that you select the right one, it's really important. Select a software. If you choose Adobe XD here, you have the possibility to get featured twice: Interaction and Adobe XD. Make sure to integrate a really good text that's really optimized for that. Integrate hashtags so it's easier for people to find your work as well. What are the takeaways here? If you want to create a Behance [inaudible] , here are my tips. First, choose the perfect size though that it looks really crisp, but it's not too big and doesn't need ages to load. Perfect is 1,400, and then the size is, of course, what you need. Then, divide it in different artboard. Make sure that you are dividing the artboard in different smaller artboards and upload them separately. Then, my tip number three is integrate a lot of animations, smaller animations as a GIFs and longer animation as videos through Vimeo. Also, integrate hashtags and a really, really good description for the project, this helps to be found. Also, make sure that you name the Adobe tools you use because this will help you to get featured on the tool platform as well, so for UX, for example, not only Interaction, but also on the Adobe XD platform as well. 31. About: The about area is something which you should include in every portfolio or on your website as well. This helps you to talk a little bit about yourself and what makes you unique as a designer. There you can see my about area where I'm talking super briefly about my personality and what make me unique and there you can see my social channels and a little bit about press and media. What's really important is show what makes you unique and show your personality, don't be afraid to really show who you are. Also talk about hobbies or any stories or something that really keeps in mind. Also don't forget to integrate your social networks, but only if they're professional, so not your personal ones, that's really important. What should you integrate? First, write the text in your style, this helps to create sympathy and trust and attract the clients that you are looking for. Second, include a call to action. If your customers want to know more about you, they would actually really want to work with you, then could be a call to action like please call me, or please write me an email, or let me know if you need support with that, so definitely integrate a call to action if you know what this call to action is. Explain to your customers why you are interesting to them. Keep your customer's perspective and do not write down any un-informant facts. Keep in mind the about me page is designed so that your customers can get to know you better and develop a relationship with you, this creates trust and hopefully some cooperation. In your worksheet, you can find an area with some useful information about what to integrate and what's actually helpful. Of course, your name and a photograph if you feel comfortable with that, your role and also the schools you are having and below you can see some in the example. But make sure that this is very unique and don't copy something from other designers, that's the reason why I don't show any examples here. Make sure that you really show your personality and make it very unique text about that. 32. Social Media: We're living in a world where everything happens online. Most of us are already represented on social networks like Dribbble or Behance or Instagram or Twitter. What's really helpful is to think very strategically about the way how you present yourself on social networks. If you're posting something on one social networks or uploading a new case study, the only thing what's really important to consider is that you spread the word on different social channels and guide everyone through your new UX case-study, it could be everywhere. Make sure that you create content for all the social networks as well to really spread the word about your UX case study. We are going to talk in this video about how to actually do that. We are going to go through the different social networks, and talk a little bit about my lessons learned or things which I can recommend for you. Let's get started with the first one which is Dribbble. Dribbble is a platform for work and process designs, so you can upload there specific parts of your UX case study, could be a mock-up, could be visual, or things like that. What is important to know here? You can see that here's a huge focus on the visual part. If you are a visual designer, visual interface designer, this is the right platform for you. Like you can see here, most of the designs are actually animated. You upload them as a GIF and you really present the animation, the interaction which you came up with. That's really important to understand before you actually publish your design there. Here is also a search bar in the top part. You can just look for specific elements. This could be website at one page or whatever you are looking for, and then you see all those designs. It's a really good platform for inspiration by a lot of designers. They're constantly especially doing work of things from inspiration for a specific design elements. It's likely that you will be find your designs there as well, and by checking those lines out and get guided through your whole case study. Here's actually my side, like you can see I uploaded many designs for different UX case studies. This is one I added a design. What you can see here is I included the link to my Behance Case Studies there at the bottom. People can just check that out and get guided through that area. You can also upload your M designs really easily through Dribbble. What's really important to get in mind is that you need a specific ratio which is three to four. The best thing is to upload that as a GIF. Because that is animated, you get much more views. Actually if you animate that and upload that as a GIF. If you have a pro account you can also upload videos, so MP4s and higher qualities but from my experience you don't really need that. How can we create content from our UX case study for Dribbble? The best thing you can do is to reuse the things you already created for your case study for social networks, especially everything which is animated and in movement. If we look on the videos we created for the UX case study, and we can use those things for social networks as well. Let's have a look on the video we created. We are going to create one for Dribbble now. We're just going to click here on this little sign to add a new composition. The width should be 1,600 and the height is 1,200, perfect for Dribbble. Frame rate in 25 is fine and then 32, perfect. Now we are going to rename that called Dribbble_userflow. Now we are going to insert the video user flow in the new composition for Dribbble. But you can see here that it doesn't really fit perfectly but that not a problem, we are going to adjust that a tiny bit so that it fits. How does it look? Nice. The only thing we just need to keep in mind is that we are going to create a GIF and this should be longer than six seconds. The best thing where we can do is really focus on one area and only show this one into action. What I think is really interesting is especially this part where we are on the home screen, and then click on the little event area and then we can see the [inaudible] into action. I think this is really cool. With this little thing of this frame thing I'm going to select these things which will be rendered. This will be the last part here and like you can see, it's a little bit too much, so like that. Now I'm going to click on File Export and then add to Media Encoder Queue. We are going to export that now. Here it is, and then we're just going to drag and drop this into Photoshop and open it in Photoshop, perfectly. This looks good and we see that the timeline here appeared which is really good. Now we can click on File Export and then Save for Web. This is what we will need. We need to save that for web as a GIF. This is actually the only possibility to save GIFs from aftereffects, so you always need to go through Photoshop. A little bit complicated, that's true but if you know how that works then it's actually not a big of a deal. Sometimes it takes some time and there it is. The size looks good, forever perfect we are going to click on Save. Now it gets uploaded on Dribbble, like you can see here. You can adjust the description could be like app coliving and then you can also add adjustments, oops, app. What really fits could be also minimal design, app concept, whatever you can add description and what I can really recommend is to always include the link. Check out the case study on Behance. This is what I usually do and then I'm going to publish it here. There you go. Descriptions, let's go to Instagram. It's a really good platform for people because a lot of designers are out there. They want to learn, they want some inspiration. It's a really good place actually to post your designs there as well, especially case studies. A super interesting for people if you present the process. This is several times of a few of my project I design for clients but also for some personal projects and I will show you how I actually did that. This is the coliving project I started with a quote and then I went through the whole concept really quick with all the different stage in the processes. I also integrated some videos as well and also a call to action move. Please checkout the whole case study at Behance, which is really important to guide the people the artist, the culture actually check the whole case study out on Behance. I did this for another project as well, very similar, sketches and wireframes a little bit about the testing. But like you can see, it's not so much in depth. It's very much about explaining the stages I went through but not in depth. In depth is definitely everything we can find on Behance. What you can do always is to check out and guide the people through Behance page, proof your stories. For example, how you can actually upload or slide a post that's super easy. Just make single elements, export them. Then you can click on that tiny thing there on the top and select all the elements you want to integrate. You can see the numbers 1, 2, 3 and that's actually the order. Like you can see, I'm selecting all the different elements I want to integrate in my post here. I can upload more until 10 and here you can already slide through, you can do some changes, and now upload that. Make sure to add good description and make sure to add a few really good outstanding hashtags a few bigger one, a few smaller ones, maybe UX. This was about mobility. Things like case-study, UX and those specific areas depends very much on your project. Make sure to check that out, and can also add persons for example. If you upload that on Behance, and yeah, and that's really helpful I think as well. One pro tip is to write a medium article about the topic. Usually for every case study I'm doing, I'm also writing a short medium article that's super important for clients especially if you put a lot of forms on the visual part. You did a lot of research and had actually some really interesting insights. You will have some problems actually showing that in a case study because people don't read a lot of text. But putting that in a case study is super helpful for people to really understand that you are thinking a lot about that, that you had a lot of lessons learnt. Make sure to link your case study there below so that people can check out the case study below your medium article. Doesn't need to be long, the whole article but, yeah. There's is a symbol for LinkedIn because a lot of your clients are going to be on LinkedIn. LinkedIn is a really good platform for networking. Make sure to integrate your work in the very top part of your profile and you can see mine. What I did is I integrated all the most important things about me, some videos I'm doing, some UX case studies I was working on some articles in the very top part of my LinkedIn profile. You can just integrate it there, buff the add-in sign and embedded with the link. Also make sure to write a tiny post about that, share what it's all about and to guide the people from LinkedIn through your Behance case study or to your website as well. I think that's really important to do so as many people see that and are able to share that, because there are other people on LinkedIn mostly clients who will probably go to hire you. Twitter is a little bit different. From my experience what works well is presenting a really cool into action, something a little bit more about tech, put also some testing learning, something which is a little bit controversial will get retweeted and gets a lot of eyes on that. Make sure to link the Behance case study as well. Could be almost everything just make sure that it's a little bit controversial and interesting for people to check out to see and that it starts some cool conversations about the topic. I hope this was helpful. 33. Finding clients: We are almost at the end of this class. But here are a few last tips and tricks for me, which helped me actually to get so many clients and to get seen by so many people. My number 1 tip and recommendation is, besides actually presenting yourself on social networks, is to do networking. Real-life networking where you meet people in real life. Build valuable relationships between you, different peoples, and clients. Because what will help you in the end is if people really recommend you for jobs or know what you're doing and get you when they need help and support in your team. How can you do that now? My recommendation is check out meetups and events in your city. There's a really great website called meetup.com. There you can find all the meetups. I am based in Berlin, and in Berlin we usually have around like one or two design meetups everyday. You can go there, you can ask questions, you can talk to people, talk about what you're doing, what you are looking for, what you're searching, and then we re-start to build relationships because those people are going to get back to you if they need your help, if they need of your support. Always make sure to add those people on LinkedIn and follow up with some kind of a nice message or follow-up conversation, it could be also a question. The second thing is, if you are interested about something, a specific area, a specific point of view where you want to learn more, don't be afraid to reach out to people who are already very professional or who are better in those areas. Don't be afraid to just send them a message and ask them if there would be happy to hop on a call or you can invite them for coffee or something like that and ask them some questions. I did this several times, especially when I started my career. Although in the beginning it was scary, it helped me a lot to really build valuable relationships and start conversations about specific topics I'm interested in and I wanted to get better. Guys, I am super, super happy that you like finish this course. Absolutely awesome, really great work. I can't wait to see your x case studies. Feel free to publish them in this class or even send them to me. I am super happy to see them. Really looking forward to see your results there, and you can be super proud of yourself that you went through this course. Learn all those things and feel free to use resources I send to you and you have questions, feel free to reach out to me. Thank you so much.