How to design a SMASHING UX portfolio case study that will get you hired.

So there's a dead simple 3-step framework that I use in writing case studies for my design portfolio. This framework has helped me land interviews almost every time. In this video, I'll share the framework with you, and to make this even more practical, I'll also show you how I have improved one of my own old case studies using this framework. The first step of the framework is the attention step, where you grab your audience's attention by creating a curiosity gap. In this case, your audience is a design recruiter, a design manager, or if you're a freelancer, a prospective client. So you need to be clear on who your target audience is. To grab your audience's attention, you need to create a curiosity gap with your title. And I first learned about this from a designer called Daniel Reed. He has a podcast called Dive where he interviews highly experienced designers. You can find a link to the podcast in the description of this video. Now, I've been doing this with my own case studies for a while, but I didn't even know that I had been doing it until I saw how Daniel coined a perfect name for it. And it made total sense. To create a curiosity gap, you need to create a portfolio title that makes your audience curious and include a strong visual or mockup that teases your solution. This title should create a feeling of curiosity for your audience, a feeling of wanting more. They're basically asking questions. Okay, what's this about? I want to learn more about this. And it's the same concept that bestseller authors and blockbuster movie producers use for their books and movies. Your case study is your story and creating a curiosity gap with your title makes it interesting. From the get-go. The second step of the framework is the retention step where you aim to retain the attention that you grabbed in step 1 by providing a clear overview of your project. You don't want to jump straight into dumping a ton of information on your audience. You should assume that no matter how interesting your title is, the recruiter has just 45 seconds to 1 minute to skim through one of your case studies. And you want to provide a reason for them to spend just a little bit more time by using your overview to say, hey, This might actually be worth your time. Again, referencing movies because they are the best examples of great storytelling that we see every day.

You strike me as a particularly icy and remorseless man, Mr. Dufresne. It chills my blood just to look at you. By the power vested in me by the state of Maine, I hereby order you to serve 2 life sentences back to back, one for each of your victims. Stop it!

That's from the opening scene of The Shawshank Redemption, one of my favorite movies of all time. If you're watching this movie for the very first time, at the end of that scene, you start to wonder what happens next. Is this movie about proving innocence or showing us why he committed the crime? You probably won't even think or know it's about an escape from prison. And that's exactly what a good overview does, or Also think about it like the kind of description that you have on a Netflix movie that shows what the movie is about. That's what gets you interested in the movie. A good overview gives your audience a clue of what your project is about in the shortest possible time, but it also makes them more interested in digging deeper. So to provide a good overview, write about what you did, why you did it, and the outcomes, learnings, or impact in the fewest words possible. Now let's see how I applied this and the first step on my own old case study. All right, so here's the projects that I want to improve, the case study I want to improve. It's a project that enables cryptocurrency adopters or cryptocurrency investors to track the performance of their cryptocurrency wallets or their exchanges in one place. So I believe that this case study is actually an okay case study, but it can be way better if we see new ways to sort of apply this framework, especially steps 1 and 2 that I've spoken about. If you look at this, for example, if you look at the title here, how can cryptocurrency adopters track their net worth in crypto? I think it's good, but it can be better. It can be improved such that this title is a lot more catchy. Also, this visual is also good, but we can also improve this visual to make sure that it is catchy as well. When I scroll down at the bottom here, I have an overview already. So I'm already applying some of the things I'm talking about in this framework, but this overview can also be a lot more better than this. The content that I have in this overview basically just spoke about how this is a personal project, but it spiraled from a personal project to something that we actually built. But the way I spoke about it here makes it look like it is some kind of project that, you know, it's just a side project that I was working on. So I need to write that better. So what I have done is to create a clone of the project in Framer. Framer is a tool that enables you to build websites and publish it. It's like a Figma board for websites. You can just easily publish your website. Website is live. But this video is not about a Framer tutorial, so I won't be going deep into that. So what I've done here now is to bring the title and change the title to Tracking Your Wealth in Crypto, right? I think this is a much more catchy title. This is a much more interesting title, something that would make someone to say, hey, I'm interested in this, especially because it has wealth in it. And then I've also updated the overview to be more about the problem that I'm actually trying to solve in this space and why I'm actually trying to solve that problem. Just something that could make the reader a lot more interested. And then on this side here, I have the role, I have the team, and then I have the year. And if you look at using movie references again, it is just like the beginning credits that show when you are watching a movie. When you're watching a movie at the beginning, while they are trying to grab your attention and show you the first few scenes of the movie, they would be showing you some credits like executive producers and the key people that worked on the movie. And this is the same thing here. At your overview level, you should be able to show that you work with a couple of people on this and you give your credit at that level. And then when it actually goes into the image as well, I use the same image that I used in the previous one, but rather than just have this here, I introduced some more assets to make it look a lot more interesting. If you look at that on the actual website, this is what it looks like. So this is what the overview looks like right now. I won't be going to the other parts of the portfolio because I want to get to that when I get to that side in the other side of the video as well. But yeah, right now instead of having this as the overview where you just have like, how can cryptocurrency adopters track their net worth in crypto? And then also have this, it has been improved to this, tracking your wealth in crypto, and also has like a lot more engaging visual to show what the solution is and the fact that some motion was also introduced as well. The 3rd step of the framework is the information step where you go deeper into your design process. If your audience makes it to this point of your case study, chances are your first 2 tactics have worked and now you have their full attention. They are already considering you for that interview. So this is your time to shine. Literally. Britney, your time to shine, baby. Now you want to really talk about the problem you solved and how you solved it. You've probably introduced the problem you're solving in the overview, but now you should properly highlight that problem before going into your design approach and the solutions that you explored. But be careful here about overloading your audience with too much information. The way you can avoid information overload is to: number 1, use bold headings to break down information. Number 2, show way more than you tell. This means that if you can visually represent anything with sketches, prototypes, or flow diagrams, then do so and avoid writing. And it's even better if you can introduce animated prototypes. It makes your case studies 10 times more engaging if you can introduce some kind of Anything that has motion in, in your case study just makes it look more interesting. So try to introduce some motion. And then number 3, ensure that every sentence that you write deserves its place in the case study. If you read a sentence that you don't feel like that sentence is necessary, remove it. Lastly, always wrap up your case study with impact, learnings, or reflection depending on the type of project that you've worked on. Again, let's see how I apply this in improving my own old case study. So yeah, this is the second part of the case study. And from what you can see, this starts with user research on this side, shows the problem statement as well on this side, and then it comes down as well and also shows like ideation. But the problem with this is that there's so much text and not enough visuals to actually show exactly what I'm talking about. Yeah, whoever is reading this would be too bored to just start going through like, you know, all of this text. So there should be better ways to sort of optimize this. Again, Before you start seeing like imagery or visuals, you must have scrolled down all the way, which is where I then start to talk about like solutions. And then I also have like the visuals of the prototype here, which are on this side. They look okay, but they're not as engaging. It's just static. And that's the same thing here as well. Again, I think it's an okay case study. It probably gets the job done, but it can be way better. It can be more engaging than it currently looks right now. We can reduce the blocks of text that we have everywhere and find ways like break the text and also introduce headings. Instead of having user research, I could have an heading on this side now that summarizes everything that I'm trying to talk about here. And I can do the same thing for this as well. Instead of saying ideation, I can summarize everything that I'm saying here with a bold heading. Again, if you go into Framer to see how this was done, and I'm going to scroll down right now. So at this point, this is exactly what I was trying to say in the user research. So I just introduced that with, with with a heading that describes everything that I'm talking about there. And then I also introduced a visual that shows everything about what my user research is. And then I go into another heading. So it's easier for anybody to read through this and quickly skim through to understand that, okay, this is what this person is talking about and this is what this person has worked on. And then I also then introduced the prototypes as well, but these prototypes are actually video prototypes and I will show you what that looks like. So when you actually look at this in the actual website, you have— at this point we have the headings here, we have the description of what I was talking about in that heading, which is about user research, we have an image that shows what I did in user research, and then we come into the solutions, right? You don't keep your solutions away. You want to try to introduce it as early as you can because that's where the interesting stuff is. And I also change those prototypes to moving prototypes so that it is more engaging because now somebody wants to look at this and say, okay, what's happening here? What's, what's happening here? And the psychology here is that the more time that a design recruiter or design manager spends on your portfolio, the higher the probability of them considering you for an interview. So that's basically what I've done here. I've introduced headings here as well, and then I've also introduced, um, I've also written about um, the solution that I am preferring, and I've showed that with the visual. So instead of writing long blocks of text, use the headings to, um, create a summary of what you're trying to talk about. So even if they don't read the details, they can read through the headings, and then you show the visuals. It's always better to use a moving prototype if you can. You can put like a static one, but if you can create a moving prototype, that's the best way to go. And that's basically what I did here. And then at the end of it all, it also has what my learnings were. But I didn't say learnings or summary or impact or outcome. Again, I summarized that as some kind of heading that can show exactly what happened and what I learned from it. And then I wrote about that as well. So this is what the entire website looks like. So if we go back and try to compare, this is what the initial case study looks like. Um, and I'm gonna just scroll through. This is what initial case study looks like. And then if you go back to what the improved one looks like, this is what the improved case study looks like. The title has been changed. There's now an overview. There's a lot more engaging, um, mockup at the very beginning to draw the audience in. Um, all the sections have been broken down into subheadings and then text. And Little text, a lot of imagery, subheading text, more imagery that's actually moving, subheading text, more imagery, and then like that. Finally, it's important to understand that this is just a framework and it shouldn't be followed exactly how I have illustrated in this video. Every project is different and this framework should only act as a guide to grab your audience's attention, retain that attention, and provide the information that can convince them that you're the right person. For the job. If you got any value from this video, then you should also watch another video I made on 5 design portfolio mistakes that ruin your chances of landing a job. If you haven't already, hit the like button on this video, share with your friends, and subscribe to my channel for more videos like this. And yeah, I'll see you in the next one.