Write, Design & Publish a UX Case Study | UI/UX Portfolio | Maddy Beard | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Write, Design & Publish a UX Case Study | UI/UX Portfolio

teacher avatar Maddy Beard, Product Designer & Educator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.



    • 2.

      Project Overview


    • 3.

      Types of Case Studies


    • 4.

      Compile the Pieces


    • 5.

      Outline your Story Structure


    • 6.

      Write the Content


    • 7.

      Set Up your Xd File


    • 8.

      Define your Styles


    • 9.

      Get that Seamless Look


    • 10.

      Build that Case Study!


    • 11.

      Present Information Visually


    • 12.

      Create an Animated GIF


    • 13.

      Export & Upload


    • 14.

      Finish & Publish!


    • 15.



  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Whether you want to land a new job, grow your credibility as a designer, or just share your work with the creative community, keeping your portfolio up to date is incredibly important. It can be tempting to finish all the hard work on a project and then just move on… but it’s well worth it to take some time to craft a compelling case study for each project that you do, whether it be for a personal project, a project for a client, or as an in-house designer at a company.

In this class, I want to help you take all that awesome (sometimes messy) work from your recent project and shape it into something that tells a story and highlights your strengths. You’ll be able to use this process for past projects, and projects to come.

This class is meant for UX & Product designers at ANY level. Whether you’re looking to up-level a project from school, display your first client project, or you’ve been in UX for years and want to start laying out your case studies with a little more intention, the videos that follow will help you come out with something you’re proud to show off.

Here’s what you’ll need:

  • A project you’ve finished recently
  • Google docs, apple notes, or somewhere to write an outline
  • Access to Adobe Xd or a similar design tool
  • Some nice device mockups (I've linked some in the resource section)
  • An online portfolio such as Behance and/or your own website

Meet Your Teacher

Teacher Profile Image

Maddy Beard

Product Designer & Educator


I'm Maddy Beard, a product designer & content creator based in Denver, Colorado.

You can also find me on YouTube, Instagram, and my Newsletter. 

See full profile

Level: All Levels

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Trailer: You're scrolling through Behance and you see a case study that's beautifully designed and tells an engaging story, and you think, wow, I could never do that. Well, it's time to rethink that. I'm Maddy Beard. I'm a product designer and design content creator. I've worked for agencies, small businesses, big companies like Adobe and tech startups doing strategic design work. [MUSIC] Throughout my career, like most designers, I've come to understand the importance of crafting case studies. Whether you want to land a new job, grow your credibility as a designer, or just share your work with the community keeping your portfolio of today, is extremely important. Trust me, I get it, it can be tempting to finish all the hard work on a project, post a couple of pictures on Instagram or your website and then move on. But it's well worth it to take some time to craft a compelling case study for each project that you do, whether it be a personal project, a project for a freelance client or for the company you're working at. In this class, I want to help you take all that awesome, sometimes messy work from a recent project and shape it into something that tells a story and highlights your strengths as a designer. You'll be able to use this process for past projects and projects to come. This class is meant for UX and product designers at any level, whether you want to show a project from school, display one of your more recent client projects or maybe you've been in the industry for a while, and you just want a new way to lay out your case studies with a little more intention. The videos that follow will help you come out with something that you're really proud of. Here's what you'll need, a project you've finished recently, hopefully you have some notes or sketches or any type of process work, Google Docs, Apple notes, or somewhere to outline the content, access to Adobe XD, Figma or a similar design tool. Some nice device mockups which I can point you to some of my favorites and an online portfolio such as Behance or your personal site. I'm going to take you through these lessons using one main example, a case study I'm going to be crafting for one of my most recent projects and because obviously my style isn't the only style I'm going to be sharing tons of other examples along the way. Case studies are by far the number one thing I get asked about on my Instagram and YouTube, so I'm really excited to finally show you guys this full process that you can do yourselves. Let's dive right in. [MUSIC] 2. Project Overview: The project for this class is for you to create one strong case study from a project that you've already done. It doesn't matter if this is the 1st or 31st project you've ever done, you've probably never approached case studies exactly like this before. As you're going, feel free to put your own touches on it and go your own way with it if you have different ideas from what I show. My job is just to guide you through this process and show you what works for me to create a case study that's actually interesting to read and look at. First, we'll start by gathering up all the stuff from your project. Next, we'll outline and write the content. Then we'll actually design the case study in Adobe XD though, you can use whatever program you'd like. Along the way, I'll be sharing tips and tutorials for things you might want to include in this part. Last, we'll go through the best ways to upload and publish your case studies to Behance, if that's where you decide to showcase it. Of course, you can also showcase it on your personal portfolio site. I'll be sharing an action step at the end of every single lesson. I recommend following me throughout this process and posting your work down below in the discussion section for feedback and to ask questions. But of course, you know how you learn best, so feel free to move through the class at whatever pace you would like. Any new project can seem daunting, but I'm going to be taking you through simple, straightforward steps so that if you follow this class, you will have a completed case study by the end. [MUSIC] 3. Types of Case Studies: During my research for this class, I looked at dozens of case studies and came up with five different categories that yours might fit into. Let's take a look at each one and break them down so that you can determine what type of case study you're going to be crafting during this class. Number 1 improvement, a product already existed and your project goal was to improve it in some way, maybe through better user flows, new features or better organization. This case study by Amy Lima for cause is a great example of this because they've already been in business for over 30 years, but they wanted to pivot to sell their insurance policies direct to consumer. In order to do that, they needed to improve their user experience to make it simple enough for their target demographic, tech savvy millennials to use and trust. Number 2, re-imagine. You notice an opportunity to improve a problem space using new solutions that might not have been implemented right away. This TV guide project by Abdallah Salem does this really well. They notice that there are more choices than ever right now when it comes to what to watch and those choices are very fragmented and scattered around dozens of providers and platforms. Their solution included universal search, personalization, and smart recommendations. Number 3, ground up. Your project spans from conception to release of a new product. This is what my project at bubble falls into. I consider this case study eat explorer by Tony Jean to be ground up. It's a translation app for restaurant menus to help break the cultural barriers of food specifically designed for international students. Number 4, visionary. Your project is conceptual in nature and not necessarily tied to a business though they have futuristic ideas and opportunities for businesses. I would say that the three case studies I worked on at Adobe fall into this category. This project, good neighbor by Julie Sandusky is conceptual, but it has tons of opportunity in the real-world because it was based on real research and problems reducing food waste by facilitating food sharing within communities. Number 5, culmination. This is definitely less common as far as portfolios go, but definitely still valuable work. With this type, your project is more of a data set analysis, showing results from research that might help shape a project or help other designers learn about a specific area. This article by BMR details the current state of checkout and e-commerce experiences through eight common pitfalls and best-practices. Determining the category a project falls into will help you figure out the story you're going to be telling, which we'll get into much more detail in future lessons. But the only action item for this lesson is to give that some thought and see if any of these describe the project you're working with. Once you have that down, feel free to dive in deeper to any of the examples that I showed. I'm going to be leaving a link in the resource section to a small database where I've collected all of the really good examples of case studies that I found during my research. Feel free to check that out and I'll see you in the next lesson where we're going to start compiling all your project materials to get ready to crack this case study. 4. Compile the Pieces: Before we go any further, I want to give you an overview of what makes up a compelling case study. What are the must-haves, what are the nice to haves? What should you focus on, what shouldn't you focus on? Now remember, we're going to go into much more detail on all of these things in future lessons, so I won't spend too much time on them, but I do want to give you a quick overview so you can keep them in mind as you're gathering your materials. My must-haves are a problem or opportunity statement. What are the goals? What would success look like? Your role and who you worked with, not the specific people of course, but their roles and how the team came together. Why you made certain decisions? What drove your design direction and prioritization? Usually that's in the form of some research, formal or informal. Some process work, visuals of your final deliverables and results or success metrics. Some nice to haves might be an in-depth explanation of your research and findings, which could be quotes or data, a visual system or brand guidelines. More process artifacts such as empathy, maps, personas, sitemaps, user flows. Mockups that are interactive to highlight specific features. Maybe a future roadmap if somethings weren't able to be prioritized or maybe some initiatives got brought up that would be beneficial to do in the future. Lastly, challenges that you faced and how you overcame them. I want to stress that you don't have to and in fact, you shouldn't include all of these things. If you were just overwhelmed hearing my whole list, then imagine how overwhelmed someone would be looking at your case study that has every single possible thing included. The whole point of this class is to teach you how to tell a compelling story. A compelling story does not include tons and tons of monotonous details. Always keep in mind your reader. How much time do they actually have to read through this and understand it? It's all about keeping it concise. But it's important to get everything together first and then determine what is important and what isn't in telling your story. This lesson, we're going to be compiling everything, and later on we're going to sift out what we don't need. With that said, let's create a new folder on our desktop and label it our project name. For example, I'm going to name mine bubble case study, then create a few sub-folders. Here are the ones that I recommend research, this is where you can put things about competitive analysis, data, interview recordings or notes, recruiting materials, surveys, results, etc. Next folder is sketches. This could include scans of your analog sketches or screenshots from sketches on your iPad or wherever else you sketch. Next, XD files, maybe you have different files for your wireframes, different iteration, your final designs. Mockups. If you've already marked anything up or recorded any walkthroughs, you can put these in there. Also, you can stick the mockup template you want to use in there, my favorites are linked below in the resource section. Next is results, any data analytics or quotes that have to do with your actual solution and what you tested and validated. This is the success metrics results. Lastly, I have a folder called Behance, this is eventually war will export our final case study files to. Take everything you got from this project and dole it out into all the different folders. Don't worry if you don't have all of these things, that's totally fine, but also don't feel limited to all the examples I gave. You can go your own way with this depending on your project if you want. Again, just include everything later on, we'll figure out what's actually relevant. I'd also recommend reviewing this stuff as you go through and organize it into the folders. This will refresh your memory since potentially you haven't seen this project in a while. Once you've populated these folders with all your project stuff, we'll move on to the next lesson, which is outlining your case study using story structures. [MUSIC] 5. Outline your Story Structure: [MUSIC] Really quick before we jump into writing our outlines, I want to share with you the number one mistake that I see so many people making when I'm reviewing portfolios and it's about process work. Yes, you should focus on some of the process work that you did but that does not mean defining each step of the UX process. I think so many of the case studies I've read from junior designers, they outline a very generic idyllic UX process, just spurting definitions of different exercises. For example, something like next I created a user persona. A user persona is an archetypal we'll user whose goals and characteristics represent the needs of a larger group of users and then they include a snapshot of their user persona. This doesn't give any glimpse into how you actually got to where you did. Hiring managers and fellow designers already know what a persona is and potential clients that might be looking at your case study. Don't care about its exact definition. These people want to know why you determined that user personas were important to do as part of this project, how you came up with the information inside and most importantly, what it helped you discover or decide. Think what was the value in that step and if it isn't an important part of the story, just skip it. I keep getting brought back to this really important point of telling a story with your case study. Just like any story, no structure is going to be exactly the same but it might help you to think about it like this. The problem statement is your inciting incident, the final result is your resolution, and in between you'll have a climax of some kind which is the most important discovery or action that led to the final result and sprinkled in around that you'll have some other information that enriches the story and paints the picture. Now let's go through an example with the project I'm working on. For every story you first have to set the scene. For me, I think it's important to set the scene of who the team was and what our roles were. Now the inciting incident or the problem or opportunity for the rising action, I want to include my goals so, what would success look like, and then some wireframes, US styles, feature prioritization, user flows and design iterations. This all leads up to the climax which for this story is the launch of our MVP or minimum viable product to our beta users. Then, for the following action, I'll include data that was collected and insights gathered from the launch. For the resolution, I'm going to include the final success metrics. This is my story structure but remember there are different types of case studies. What if yours isn't a ground up project but one of the other four categories? Let's take a minute to illustrate potential story structures for the other four categories that we outlined in less than three, starting with improvement. An improvement case study might look something like this. We have the problem opportunity statement as the inciting incident,then we have some research leading us up to feature prioritization which is the inciting incident. Figuring out what we're gonna be working on. We might run into some challenges, so that would be something to outline next. As you're working through those challenges, you're probably working on designs and iterations leading up to the climax which is a feature launch. Launching what we think is going to improve the product and after that, as the conclusion, of course, we'll talk about whether it actually did improve the product. What were the results or success metrics from this project? Next is re-imagine. Again, we'll start with the problem or opportunity statement. Next, we might include content about analyzing the current solutions that are already out there because if we're re-imagining something, chances are there is some competitive analysis that we've done throughout this project. Next, you might outline the key drivers or based on the research that you did, what do you want the new solution to have? Leading up to this new solution, you might outline research, your strategy includes some wireframes and designs. The climax here of course, is the new proposed solution. Then you might want to show the reactions that people had to this new solution or test results you got from it. Lastly, since this is just re-imagining and it's only a proposed solution, you might wrap up with next steps, takeaways or a summary since this likely isn't the end of the road for this project. Next is visionary and again, you're probably sick of hearing this but we always start with the problem or opportunity. Next, since this is more of a conceptual project, you might want to state your hypothesis to talk about what benefits you imagine could come from a solution like this. Then, start getting into your research, different iterations, maybe some challenges that you face, all leading up to this potential solution. Next, much like the last one you may talk about some of the reactions that people had to this potential solution if you were able to show it to any potential users or businesses and wrap it up with whatever next steps could come from this. Lastly, combination. Here, you're going to start with a problem or a question. You might state your thesis or proposition and most of this case study is going to be evidence and examples. The climax here is what action the reader should take and after that to wrap up you can really just summarize these findings that you shared. Now it's your turn. Go ahead and sketch out a story structure based on everything that you've learned here. It can be one that I already shared or you might use something that's a bit different depending on your project and fill it in with these story points, thinking about how the story of your project unfolded. How did you get from the problem to the solution? Feel free to take a photo or a screenshot of this and share it below in the discussion section. I'd love to see it and I know other students would benefit from seeing a bunch of different examples. In the next lesson, we're going to use this little story structure sketch to create our outline and then actually start writing the copy that's going to make up your case study. [MUSIC] 6. Write the Content: Now, it's time to really get cracking on this case study. If you're anything like me, writing the content is by far the most daunting part. But don't worry, we're going to break this down into digestible chunks. Once you're done with this part, the rest of the process is going to unfold really naturally. I like to start by opening up a new Google Doc. Since I hate starting with a blank page, I'll create a bullet point outline based on the story structure we already created. Let's start typing that out. We're starting with some background info. Here will include the when, the who, and a little bit more information on my role. Next is the problem statement. Here I'll have the actual problem statement or opportunity. Then I think here I want to have some visuals of that opportunity, and this will make more sense as you get to know my project a bit, as we work on this. Next, I'm calling this section the road to MVP. Goals or what would success look like, feature prioritization, we'll include wireframes, UI styles, user flows, design iterations, and here I think I want to show each feature or flow. Put visuals. Next is the launch, so that climax. Talk about launching MVP to our Beta users. I might start to talk about marketing, so how we got the Beta users. After that initial launch, I'll talk about challenges and improvements, so some data collected and insights we gathered, more feature prioritization, and more iterations. Lastly, the resolution is going to be some success metrics, any takeaways, and learnings. Now that we have this skeleton to work with, we can take the next couple of hours, maybe a lot faster if you're a quick writer, and start to add some explanation to each of these bullet points. I'm going to do that now and come back and talk about how I approached it. I'll go through this at a high level, but of course, you can take a look at the actual live case study if you want to read every single word. First, let's go through the background info. I decided I wanted to include the timeline, the team members, and then a little bit more on my role since my role wasn't just in product design, but I actually did a lot of other things too. I wanted to make sure that that was clear. Then I took some time to write my problem statement. This actually took me a while. I will read this for you since this is one of the most important parts of the case study. So much of the juicy stuff on social happens in the comment section. Since social is moving more and more towards short-form video content, why shouldn't commenting follow suit? We notice this is actually already happening, but there aren't great tools or platforms out there that encourage it. This commentary content that could be so rich, funny, informative, or insightful, just feels amateur. So that the problem. I made a note here that I want to include a visual of the green screen effect on TikTok because that's an example of how this is already happening, but it looks and feels really amateur because there isn't a whole lot that helps people do this. That green screen effect is good, but it is super glitchy and just doesn't look very professional. Then we get into the opportunity. We took this opportunity to build Bubble; the social video commenting app that lets users grab any content from the web, record a short video comment over top of it, and get reactions from their friends. That whole thing is my problem and opportunity statement. Then I have this that sets the scene a little bit, but to be honest, I'm not totally sure if I'm going to use this or not. It might be overkill. Then if you notice here, I'm not naming these sections headlines of the UX process. I'm naming them something more specific to the project. This main heading is going to be called Road to MVP. I outline the goals, and because of those goals, what features we ended up wanting to prioritize. Anytime I have bullet points here in the outline, those are actually going to be bullet points in the case study. Not everything has to be written out in paragraph format. Bullet points are a really good way to get your point across without forcing someone to read so much. I have more notes here about what I want to include. After feature prioritization, I might want to show an animated flow for each of these features. Maybe wireframes or a journey map sketch for each one too, then UI iterations. I want to pick one of the screens and show how the UI evolved from the first iteration to the final one. Maybe sketch out some things that went into that process like, we didn't like this because of XYZ, this didn't perform well with users because of XYZ, and show how we got from A to Z. Next, I'm going to show a little bit about the design system. This is not 100 percent necessary, but like I said, I also did other things than just product design. I worked a lot on the branding as well, so I thought it would be nice to show that here. I want to outline some challenges and compromises we had to make. Because when it comes to an MVP, it is just that the minimum viable product. I just want to show some of the compromises we had to make. Then I'll talk about the Beta launch, launching the MVP, and how we got those Beta users, a little bit of marketing since I had some marketing design work that went into this project. After that, what insights and improvements came out of that? Data we collected, and specifically where I'm going to get that data, something like bug reports that we have, app feedback within the Bubble app. More feature prioritization, and notes here that you can read about what we want to improve after getting feedback. Lastly, the public launch. What were the results of that? We have all of these results that I have and any takeaways in learning. Maybe you don't have all this data, that's totally okay. You can just show maybe a quote of what someone said when they interacted with this that showed that it might be a good potential solution. Positive, negative quotes, things like that. You could also just share your takeaways and learnings from the project, especially if it's a school project or one of your first projects, or a project from bootcamp. Not everything is going to have all this data, and that is totally fine. For example, some of the more personal learnings that I wanted to share, I am including at the very end. Working quick and getting feedback early on was something that I really got out of this project. It's something I wasn't very good at before I started the project and I just learned how important it is and I got much better at it throughout this work. Now, I want to share some general tips for writing this type of content. First, lien on headings and subtitles. This will really help strike a balance between depth, and at a glance digestibility. Having a skimmable case study is really important, especially for hiring managers. Try to write as if you're telling a fellow designer friend about this project. You wouldn't get stuck in the weeds with the details, but you would highlight the most important or interesting things. Don't define the UX process, talk about what you actually did and tell that story. Keep it brief. I wouldn't have more than three sentences per paragraph. If a section is getting long, think about a, cutting out any unnecessary fluff or b, splitting it into two sections that each have one main point. Go back to the fourth lesson if you need a refresher on the must-haves versus the nice-to-haves. Lastly, don't write what you could show with visuals. As you're writing, just make a note of which visuals you're going to show where. Usually, I put these notes in italics in brackets so that they stand out against the written content. Lastly, feel free to check out the examples in my mini database if you get stuck. But also don't be paralyzed by the comparison trap. Everyone's project is so different, so try to go with your gun. The action step for this lesson is the toughest, but you can do it. Go write that content and I promise if you put some thought into it, the rest of this process will be smooth sailing. As always, feel free to ask questions down in the discussion section, and I would be happy to help out if I can. In the next lesson, we're going to open up Adobe XD or your design tool of choice, and get your file all ready to go. Come back and I'll see you in that lesson when you're ready for it. [MUSIC] 7. Set Up your Xd File: When it comes to setting up your file, you have two options. Now it's time to decide if you want to optimize your case study for Behance or your personal site. I'm going to show you quickly how to do both. But what are the pros and cons of each? In my opinion, you can't go wrong with Behance, especially if you're looking for new opportunities or you're interested in getting your work out there in front of other designers, Behance is a great place for that. Because I've been featured on Behance, I actually get lot of job inquiries in my Behance DMs. That said when it comes to Behance, there's definitely a lot less flexibility in terms of laying out your content, specifically your text. That's why I take the design approach that I do by laying out all of the text in Adobe XD and exporting them as PNGs. With this approach though, you can't optimize for other breakpoints, specifically mobile, so I usually try to keep the text rather large. That brings me to the pros of optimizing for your personal site, such as on Webflow, Squarespace, or wherever you host and build your website. If you go with that, you can treat this as more of an actual webpage design project because you actually have control over the exact layout and how it scales on different breakpoints. The other pro to this is having your own little space on the Internet usually makes you seem a bit more professional and you have complete control over what the user sees as they're viewing your case study. Those are the pros and cons in my opinion, but why can't you have the best of both worlds? There are actually a couple of ways to do that. Number 1, have your own personal website and in the work section, create thumbnails for each piece of work that link out to the corresponding Behance project. This is what I do now. Note that I have the Behance project open in a new tab so that users are never taken away from my site. Number 2, have your work optimized for Behance on Behance, but then also have a version on your personal portfolio. Depending on how many case studies you have and how in-depth they are, this could be really time-consuming. It's something I've personally wanted to do for a long time, but just haven't made the time for yet. The good news though, is if you decide to just start with Behance, you can always use the Behance design that you create and come back to it later to build it in Webflow or Squarespace. You don't have to design completely different layouts. With all that said, the only difference in how you would set up your art board for each approach is the height of your art boards. If you decide you want to optimize for Behance, you're going to want to create a vertical stack of art boards that are 1920 pixels wide by 1080 pixels high. Always keep the width the same, but you can vary the height a bit and it won't matter. Then off to the side, create another art board that's 808 by 632 pixels. This will be for your thumbnail. If you're mixing Behance altogether and you just want to use XD to design the layout for the page you're going to build in your website builder. You'll just design on a single 1920 pixel wide art board that will end up being as long as you want it to. Then I'd also recommend creating a long art board with a mobile-friendly width. I use 375 pixels since that's the smallest common phone width. Keep in mind that building a webpage in Webflow or Squarespace is not part of this class. [MUSIC] If you don't yet have experience doing that or you don't have a personal portfolio right now, then I'd recommend just sticking with Behance for the time being. That's about it for setup, easy enough. Next we'll populate your design assets panel and your XD file with all the styles that you're going to need for your case study. 8. Define your Styles: Now that we've got our XD file all set up, let's make things easy on ourselves and fill out our asset panel with all the styles we're going to need going forward. This is super easy because you'll likely want to use the same styles that you used in the project itself. This might be as simple as skimming through your XD libraries and pulling in the one that you use for your project. If you haven't done that or you're not familiar with how libraries work in XD, it's really simple. Let's go through that now. There are three things you keep an a library, colors, type styles, and components. For a case study like this, colors and type styles are definitely the most important. Within this project file I'm just going to direct your attention to the left where we have our asset panel. You can see we have colors, character styles, and components. Components are like symbols, but we're again just going to focus on colors and text styles. The way that you get these to populate here is super simple. Let's say that we delete this for now, this red, and it'll say I want to add it. I'm just selecting an element that's of that color, and I'm coming up here and clicking the plus button, and then we call this record red. You can also do the same thing for textiles. Maybe I want a style for this tag, I can just hit plus here. But what if I want to be able to access these assets from a different file like my case study file. You can really easily publish this as a library. We're going to come up to this share icon. It's going to tell me that this current file is ready to be published, so I'm just hitting Publish. Now if I switch over to my case study file, I can go here, hit View libraries, and I can find this library right here where I can pull all of these same styles in. If you don't even feel like dealing with that, you can just copy and paste some elements or screens in from your file and grab the colors and text styles and add them to a new library in this case study file. Of course you're not limited to anything here. I'm probably going to need to make a lot of these texts styles larger, because before I was designing for a mobile app, now I'm going to be designing for a Behance case study. You might also have to add more text styles, and you can even change things up and use a completely different font. You can use different colors if you want, it's totally up to you, but it's so much easier, in my opinion to just have this place to start off from. It's also important to note that you can toggle back and forth between your libraries and the document assets that you have, so these assets that are specific to this document versus pulling from a different library. At this point, you can also start to bring in some different icons, or logos, or illustrations, if any of that is relevant to your project. You can either keep them off to the side or you can hit command K and actually make them into components that are going to live down in this section to be pulled in whenever you need them, and we'll be getting way deeper into visuals in the future lesson, so if you don't have anything like that yet, don't worry. Once you've got some styles ready in your case study file, feel free to move on to the next lesson where am going to be answering one of the most common questions I get about my Behance case studies. [MUSIC] 9. Get that Seamless Look: [BACKGROUND] I want to answer one frequently asked question before we dive into building this case study, how do I make my case studies look like one smooth scrolling, seamless web page, even though they're made up of a bunch of separate different art boards and the answer is overlapping elements. Let me show you some examples. This is one of my old case studies and I want to show you just how many overlapping elements I use to achieve this look. First, we'll talk about the background elements. If we just move this iPhone out of the way for now, you can see that the background color of both of these art boards is this gray beige color. What I have over top is this white sort of wave shape. What I've done is I've actually duplicated it onto both of these art boards so if you see, if I delete that one, you can see there are actually two separate shapes. If I just hit "Command C" and then go on to this art board and hit "Command V" It's going to by default paste in place. But if I just scotch it up until it's perfectly in line like this and then I do "Command left bracket" until it goes to the very back. Then I have created this shape that continues onto two different art boards. That's just the background. I do this in a few different places. Here, I've used this wave shape that's green, instead of having this really sharp transition where it definitely looks like two separate art boards, I've come in with this green wave shape so that it sort of flows a little bit more smoothly into this content. I do that same thing here with this shape, and I do it with other elements too, for example, this iPhone mock-up, you can see it's actually two different images. I've duplicated it onto this art board and then just scoot it up again so that it lines up perfectly and it looks like a perfect continuation of the visual element. I've done that same thing with this image. Down here I've done it with this mock-up. People get tripped up with this because art boards act as masks. You can't just throw one element between two art boards and get the exact effect you want. Instead you have to manually copy, paste it and align it up. That it's duplicated on one art board and the other. It's super easy though just zoom all the way in and check that the continuation is a perfect match. It probably goes without saying that you have to have your art boards exactly lined up like butt up against each other in order for this to work. That's it. It's a simple tip, but it goes a long way in giving you the ability to make your Behance project smooth scrolling like a website and super flexible with how you want it to look. Try this out with a couple of different shapes or masks or photos and see if you can play around with how this works, then you'll be ready to apply the technique when we actually start building your case [BACKGROUND] [MUSIC] study in the next lesson [MUSIC]. 10. Build that Case Study!: Now that you have all the parts necessary to create this case study, it's really just time to start puzzling them together. Go ahead and open up everything you've got. You should have the empty design file that you just set up for your case study, any design files from your project itself, your written outline, and your folder full of project notes and work in progress and things like that. The first thing I like to do is create the header image that'll kick off my case study. This can be in any style you like. Along with the most important thing which is a strong visual in this header section, I also like to include the title of my project, a one-line description, and a little bit of background info for immediate context. Then I just start moving through the different sections of my outline and copying and pasting the copy into my case study file, laying it out on the art board, and all the while thinking about what I can show versus just tell. For example, in my problem statement you remember I referenced the green screen effect on Tiktok. I'm going to show an actual screenshot, maybe even a GIF of that. There's a visual paired with the verbal that really gets the point across of this is what's happening now and there's this opportunity for a better solution. [MUSIC] Once I've laid out two or three sections, I like to make sure they're flowing nicely together and have some visual variation. Sometimes I do this with background colors, sometimes with shapes, images, things like that. Once I do this I can repeat that pattern throughout the rest of the case study using consistent heading and body text styles. [MUSIC] Just like anything else in design, there's no exact formula to this process so the best thing I can do is just show you how I approach it and point you to some other great examples in that database that I mentioned in the resource section. But with all that said, I do want to walk through a bunch of different ways that you could present information visually. That's what we're going to do in the next lesson. 11. Present Information Visually: Throughout your case study, there are going to be several different opportunities for you to present information visually. This is going to help the case study be so much more digestible, less text-heavy. There are eight main ways that we're going to walk through; data, iconography, charts, highlights, bullet points, quotes, imagery, and mock-ups. As we go, I'm going to be showing you lots of examples from other case studies so if you want to look at these in their entirety, just check out the mini-database linked in the resource section. First, let's talk about data. Anytime you're talking about metrics or research, consider presenting it with a bar graph, a pie chart, or something else in visual that viewers can understand at a glance. Iconography, when you have a section with more than two or three different points, see if you can use a series of icons to introduce or represent each one. Charts. Visuals doesn't just have to mean imagery, shapes, or icons. The way that you lay out text can also really help make a section easier to read and understand. See if there are any sections of your case study where you can organize ideas and text visually. Highlights, just like using a larger text style for your headings, highlighting important points is another great way to make your case study more digestible and skimmable. Bullet points, try to avoid long paragraphs of texts because they're not easily scannable. Use bullet points whenever you can instead. Quotes, if you have a quote that was really informative during your research or one that shows the impact of your solution. You could amplify it by designing it to stand out in your case study. Imagery, I personally like to use imagery to keep my case study engaging. This type of visual really doesn't make or break your case study. In fact, if you use too much, it can actually distract from your main points, so make sure any imagery you use is relevant. I usually try to photograph imagery myself, but when I can't, I rely on Unsplash. They have a lot of really high-quality options that are royalty-free. Lastly, mockups. Mockups are a really important piece of most case studies, so make sure you're using or creating high-quality mockups. I've included some of my favorites in the resource section of this class. Feel free to keep them simple or really make them your own like this example. Some of these may not be relevant to your case study and that's totally okay. The worst thing you can do is include everything and overcrowd your case study making it really confusing and diluting your message. So when in doubt, keep it concise. Before moving on to the next lesson, here's your action step. Design out each section by following your written case study. This might sound intimidating, but all you're really doing is combining the written portion of your case study with any visual or visuals that make sense. You've already done all the hard work of telling the story. Feel free to leave blank or create placeholder shapes for any areas where you want to include animations. [MUSIC] We're going to tackle that in the next lesson. 12. Create an Animated GIF: Friends we're getting really close to finishing these case studies. In this lesson, I'm going to walk you through how to create an animated GIF to include in your case studies, no matter where you end up publishing. For my bubble case study, there actually isn't a whole lot of animation involved in the project. In order to show you guys this, I've hopped over to one of my previous projects and case studies called phase. That's what we're looking at here. If you scroll down, you can see I've designed this just like I have designed my bubbled case study. Vertical stacked artboards like this that all have the same width. I want to show you what I do when I decide that I want to have an animation inside one of these sections. For this section, I wanted to show what it would look like when someone dragged on this scale and selected a number. I've created an animation just by duplicating this artboard twice here and manipulating the design. Every single thing stays the same except for these few elements. [NOISE] This, I've just moved to the seven, and this line I've just dragged out to be long enough to reach that. Then I just duplicated this section over onto this next artboard and done the same thing, moved this selector over to the eight, and then I've wired it up in prototype mode. If we go into prototype mode, I've done a time trigger and put this on a loop. After 0.5 seconds, it will auto animate to this screen. I've done easing, ease and out, and then I've just done the same thing here after 0.7 seconds, and then after 0.7 more seconds, it's going to loop back to the beginning. If you aren't super familiar with animating and using auto animate in XD, I do have some tutorials on my YouTube channel that you can use as resources to catch up there. This is what this looks like here, this is what you're looking at here, it's basically just a looping animation that shows a little bit of movement here, that just makes it a little more visually interesting. Now, in order to capture this as a video, what we [NOISE] want to do is go back up to play this prototype and we're just going to hit record. I want to make sure that my mouse is completely out of the way, my cursor, and I'm going to let this play through the loop a couple of times to make sure that we have at least one really good full cycle of the animation in this video. Then, I'll stop recording and I'm going to save this MP4. We have this animation here, and I'm going to open it up in QuickTime Player so that we can trim this down to one full cycle. In QuickTime, I'm just going to hit Command T to trim, and I'm just going to find one [MUSIC] perfect loop. Right there, it looks good and then I'm going to do command S to save. [NOISE] I'm just going to call this trimmed, and we can get rid of that longer one there. Now, a really easy app that I have learned to use for turning an MP4 into a GIF is called gifski. You can find this in the App Store. It looks like this in the app store on Mac, there's also a tool called GifTuna that you can use if you're using a Windows PC, that I believe is the same thing. We're going to open that up, [NOISE] and it just looks like this, this cute little window when you open it up, and I'm just going to drag this MP4 right into that window. The only settings we want to change are the width, we're going to do 1920s, since that's the width of the rest of our artboards. We want to make sure loop forever is on. We have the quality all the way up and the estimated size is only 1.9 megabytes. This usually way overestimates the size, I'll show you what it actually ends up being. I will note if you have a much longer animation, you may have to downgrade the quality a bit, but in my experience, it's never made a huge, huge difference. It always looks really high-quality, which is why I really love this tool and it's free if I didn't already mentioned that. I'm going to hit convert. That took less than 20 seconds, so now we're just going to do Save As, and we'll save that to our desktop. Now, I'm just going to select on it and hit the Spacebar to preview what this is going to look like. As you can see, it's super high-quality, the speed is nice, it's not jumpy or laggy at all, all of the colors look super accurate. If you like how this looks, go ahead and repeat the process for any other animations that you want to include in your case study and put all of your GIF files into the Behance folder that you made at the beginning of the class. I usually name these files with numbers based on the order that the artboards will appear in, in your case study. You can mix this GIF in with all of your P, and Gs that you'll be exporting in the next lesson. You know your action step for this lesson, go ahead and create your gifs and place them in the folder organized however you would like. In the next lesson, we're going to be exporting the rest of your case study and actually uploading it to Behance. [MUSIC] 13. Export & Upload: [MUSIC] First of all, yes, you did it. Your case study is finally finished, congratulations. Now all you need to do is get it ready to publish. Depending on the approach you're taking, you're going to move forward in one of two directions. If you are actually building this case study on Squarespace or Webflow, then you aren't going to actually export these art boards. In this case, you're just going to want to export the individual visual assets, like your images, shapes, mockups. You can just save all those elements into a folder and then when you go to build your page, then you can just bring them in. However, I think most of you have optimized for Behance. If that's the case, you can actually drag through, select every single art board, hit "Command E" to export, and export these SPNGs into the Behance folder you created earlier. Again, if you want to stay organized, I usually like to name these art boards in ascending order, starting at the top, at one, then 2, 3, 4, etc. so that they can stay organized in your Behance folder. Next, hop into your Behance account and hit "Share your work". This will open up a new project. One note here, you're going to see prototype as an option to import from XD or Figma and you can absolutely feel free to do this. However, sometimes a prototype without any context doesn't really do much for your viewer. Remember the whole point of your case study is to tell the story of how you've solved this problem. Before you go adding a prototype, ask yourself where or if this prototype fits into your story. Next hit "Image", navigate to your Behance folder and select all of the PNGs and GIFs that you want to upload. Once these load, you'll notice there's some default spacing between them. To remove that hit "Styles" on the right-hand side and change it from 60 pixels to zero then hit "Save". Make sure your images are in the correct order. If you need to edit the order at all, hover over an image, click on that blue edit icon and select re-order project. From here you can change and save the new order. One thing to note, if you're using GIFs with background colors that aren't white, you may notice something a little funky. Because your GIF may be a different quality image than your PNGs, the color may have changed just a little bit in the process. If this is the case don't worry, it's a super easy fix. Go back into XD and select all of the static art boards that have that same background color. Go into the eye dropper tool and sample the exported GIF background color. In XD it will look like two different background colors, but once they're all in Behance, they'll be perfectly consistent. The action item for this lesson is simple. Just follow those steps that I did to upload everything into a Behance project and in the next lesson we'll add the finishing touches, like your thumbnail, project title, description, and any tags. See you soon. 14. Finish & Publish!: Here come the finishing touches. You've uploaded all of your images into your Behance project, and hopefully you've skimmed through to make sure there are no typos or weird, funky things going on. Now it's almost time to hit "Publish", go into settings and upload a project thumbnail. In the beginning of the class I had you set up an art board for this, but if you haven't designed that as of yet, no worries, I'm going to give you a couple of tips. Number 1, don't use too much text but do include a really short description so that someone knows what to expect when they click on this, feature relevant mockups so that viewers know what the actual output of the project was. Choose the most interesting screen to showcase on your mockup. Personally, I like to take my header design and just adapt it for this thumbnail so they end up looking super similar. Next, give your project a title. The title doesn't matter too much if you're just using this as a portfolio, but if you're trying to get tons of use on the platform, try naming it something people might search for. The two projects I got featured were called, Smart Diffuser App and Cycle Syncing App. But to be honest, my titles might not have had anything to do with getting featured. Who knows? Next, add some tags. This is another opportunity to think about relevant search terms for your project. I usually start with UI, UX, product design, and then get more specific, like future tech mobile app automation, app design and things like that, then fill out the tools you used in the categories that your project falls into. Lastly, you'll add the description I usually copy and paste one of the first sections of my case study for this paragraph that introduces the project nicely and that's it. Proofread everything one more time and then hit, "Publish". Getting featured on Behance should not be your goal because to be honest, you have very little control over that. However, you might want to know that your project only gets sent to the Behance curation team one time on your very first publish. So don't just upload half of your case study and then come back and finish it later, only publish once you're completely done. You know your action step here, fill out all of the fields for this Behance project and hit "Publish". Seriously, you guys should be really proud of yourself for coming this far. This is a lot of work. I really hope you'll share the link with me in the discussion section below. I would absolutely love to see what you guys created and I know that other students of the class would really benefit from seeing these as inspiration. [MUSIC] 15. Conclusion: First I want to say a huge congrats on finishing this class. You're one huge step closer to landing that next job, gaining more credibility as a designer, and inspiring the creative community. I honestly had so much fun taking you guys through the process of writing, designing, and publishing your in-depth case studies. Don't forget to upload your projects below in the class community section, I really want to see what you worked on. You can feel free to post the link to your project or upload a few of your favorite art boards or all of your art boards, it's totally up to you. If you liked this teaching style, feel free to check out my other class here on Skillshare. It's called Intro to UI UX for graphic designers as well as my YouTube channel and Instagram, where I also share design content all the time. Thanks for sticking with me throughout this, and I hope to see you guys in another class or video really soon. Bye. [MUSIC] My hands are so cold. [NOISE] Very generic idyllic, how do you say that? Idyllic. Idyllic. Come on buddy, you can do this.