How to create a UX portfolio and get Noticed

1. Intro : Welcome to create a UX portfolio and get noticed. I'm Jasmine. I'm a UX/UI designer living in Seattle, and I have experience at companies such as Starbucks and Microsoft. The thing that has been my entry point into getting interviews and even getting hired, has hands down been my portfolio. Not because it's the most beautifully crafted piece of work, but because it showcases myself and my UX process. Now, more than ever, companies need to see how you create a project from start to finish. In this course, we're going to go through step by step, all the key components you need in your portfolio; how to lay it out, publish it, and look at great examples. I'm also going to share design and publishing tips using Webflow and Squarespace. To make everything as simple as possible, I created a worksheet where you can input your own content to help you get started. Feel free to share your portfolio at any stage for feedback. 2. Personal Introduction: The first section of your portfolio is going to be your personal introduction. This is you introducing yourself to your potential employer. You want to talk a little bit about your skills, past experience, and a little bit on your personality. It's great to add a photograph. Keep in mind that companies are hiring people, so they want to get a sense of who you are and what you can do. One thing to keep in mind is what UX position you're interested in. You should tailor your portfolio for the people you want to work with in the industries you want to work in. If you want to be an interaction designer, you should tailor your portfolio to highlight those skills specifically, one great thing to do is to research a current job opening on LinkedIn. You can see what they're looking for specifically in terms of experience and skills, and make sure to mention those in your personal introduction. Your personal introduction is going to have two key components. The first one is your headline. Your headline is going to consist of your name, where you live, and your preferred UX role. This is where you want to do a lot of research on, what part of the UX process you want to be involved in. Do you want to be more on the research side or maybe the visual design side. I have a list of a lot of different options here in the worksheet to help you get started. Make sure you do research if you're not familiar with some of these terms. The second component of your personal introduction is your description. This is the main bulk of your personal introduction. This is where you're going to go into a little bit of detail about your skills, your experience, and your personality. One really key thing to know is that a lot of people that are looking at your portfolio are actually recruiters. The UX department is going to give a recruiter a list of requirements, usually list in skills of things that they're looking for. Then that recruiter is going to look at your portfolio to see if you match some of those skills. Make sure that you look at a list. The one that I have here in the worksheet is a good place to start on different general UX skills that you should think about. Take it back to your research and see what different companies and roles are looking for as well. Most of the time they match up for what the recruiter is looking for. In the worksheet. I have a template where you can input your own content to help you get started with a self-description. Basically you just input your own information into the blue highlighted fields. Feel free to change this template however you need. This is just to help you get started in case you have no idea what to write. Here is a great example of a personal introduction. This is Tom Petty's UX portfolio. It starts off with a great photo of Tom giving a talk, followed by Tom's headline, which is this interchanging sentence that explains what Tom does, such as design products, services, etc. Then it goes into a little bit of detail about what Tom has done, stuff that he likes to do, and a brief description on what you can find in his portfolio. This is a great example to help you get started. He also has a really clean and simple design. 3. Project Introduction: After your personal introduction, you want to have a list of all of the projects that you're going to do a case study on. This is going to be a list of about 3-5 projects total. You briefly just want to mention a little bit about the project and then have a link to the case study. Let's briefly go over a checklist of all of the things that you should include in your project introduction. First, you want to have a title of the project. This is most likely going to just be the title of the product itself. Then you want to have who you did this project for, either your employer or your client or maybe even yourself, then you want to have the duration it took you to complete the project. Then the most important thing is a description of the project. This should be about three sentences long where you briefly discuss what it is. Also, you want to have a link, right at the bottom, to the case study itself. All of this should go along with a photo. The photo should be high-quality. It could even be a video or a gif, but nothing too in-depth, just enough to catch our attention and make us want to click to learn more in the case study. These are some really great examples of a project introduction. Notice how they all have high-quality photos, a bold clear title, followed by a description, and a great CTA to view the case study itself. All of these are really great examples of a project introduction. I would highly recommend using these as an example for you. 4. Case Study: To begin your case study, we're going to re-list all of the things that you had in your project introduction. It's nice to paint a picture and give context to the behind the scenes of how this project came together. List, what was your role in this project? What company or client did you do this for? What project is this? Was it for iOS, android, was it a website? Re-list the duration of the project. Most importantly, who did you work with? How many designers, engineers, project managers, maybe you even worked with the CEO. Next, you want to list the goal of the project. What was the main challenge and how did you measure success? Did you have a certain idea or expectation for the project when you began? After that, you want to go into the process. This is where you're going to give a brief outline of all of the different phases that you thought of. Think about your projects into steps and list them out. Let us know what steps that we should look out for. Here's a list of different process methods that you can use in your outline. For example, how did this project begin? Did it start with a business meeting? Did it start with research? Think about where the project began, where the problem came from. How was the problem identified? Then you want to start thinking about where you went from research. Did you brainstorm with the designers? Did you just start testing right away? Again, use this process list as an example and think about all of the different phases. Ideally, you would have at least five different phases to talk through. But again, this is going to be subjective to your project itself. Here is an example of a brief outline of someone's project. He lists out research, interaction design, visual design, and front-end development. Those are all of the big steps that he's about to go into detail for his entire case study. Next is your breakdown. This is where you go into each individual step and explain what happened. This is the time to go into detail of the process you outlined. Try to include any visuals along the way. Do you have some early sketches that we can see? You can preview the final project at the top of the page, but you want to make sure to show relevant visuals along the way. By the end of the breakdown, these types of questions should be answered. Who is the target audience? What personas did you have to work from? Where they're compromises? What were the KPIs? Remember to highlight your individual contribution along the way. Now let's look at an example of a case study. This is my friend Wilian's portfolio and this is one of his projects. When you first land on the page, he has a big visual reference of the project itself. It's called vacaybug. It's really great at the very top of your case study to have a final mock-up of what the project is or some indication of what we're about to get into. After your visual reference, you want to break down the information that you had in your project introduction, such as your role, the context behind the projects, such as the duration, individual contribution as well as who you worked with, what type of project this is, and live links to the site itself. Here we can see where Wilian outlines the entire process of this project. We know that we're going to talk about research, interaction design, visual design, marketing, and product thinking. Automatically we can see what the different phases are for this case study. Then as we scroll down, we can see that Wilian broke each section, of all of the processes in a really big and bold way. Now we know that we're about to read everything about the research that was done for this project. As we scroll down, we can see that there's visual references to go along with the findings, the questions that were answered. Here we have different personas of who this project is for. Personas are a great way to paint the picture of who your target audience is, which is one of those questions you want to answer in your case study. Then eventually, after we see this competitive analysis, we should see the next phase, which is the interactions. It's really important to have low fidelity sketches and wireframes. Usually in a UX process, you're going to start with low fidelity sketches so it can paint the picture that you were involved in the entire process. Here, Wilian outlines all of the different sketches and what they led to. Then as we scroll, we can see we're in the third phase now, which is the execution. Here's where we're going to start to see final morkups. I'm also going to have a link to this case study so you can go through and really read through all of the detail. I just want to give a brief outline of the things that you should include in your case study. Notice how each visual reference has a lot of context as to what we're looking at. You don't want to just image dump all of your visual references. You want to make sure you're listing them out in your process just like this. It looks like we're about almost at the end of the project. I want to make a note of this section of the case study, which is measuring success. You want to make sure at the very beginning of the case study to mention what the goal of this project is, and then at the very end to see did you meet that goal? What could you have done differently? This is something that a lot of case studies miss, even ones that have phases and lots of visual references. They don't necessarily show whether or not the project was successful, which is really important. To get started with your case study, let's look at a checklist of some things that you should think about including. First you want to outline your project into steps. Replace these steps with actual phases of your project. For example, change step one to research, if that was the beginning step in your case study. Then you want to start thinking about answering some of these questions along the way. How did this project start? What problem are you trying to solve? Then you want to start thinking about who you were designing this project for. Did you brainstorm? If so, with who? Here's some visuals along the way that you should think about including, such as personas, screenshots, research, data sketches. I have an idea of different visuals that you should include from the beginning of your case study to the end, you can see the visuals here. Around step three, how did you test your ideas? How did you know which idea was correct? Do you have any wireframes or prototypes? Who did you work with to ship this product? How did it change along the way? Did you explore different UI options? If so, show that. Then by the end of your project, you want to show final mockups. You want to show us what the final outcome was. Did you solve the problem that you listed around step one? This is going to be a great way for you to start thinking about how you can collect your thoughts when looking at your case study. 5. Design and Publish with Squarespace: Now, let's look at designing and publishing your portfolio. I'm going to be using Webflow and Squarespace, because both of these tools make it really easy to design and manage your content. When you're ready to start designing your portfolio, you need to think about whether you want to create your portfolio from scratch, or use an existing template. Both are really great options for UX, it just depends how much creativity you want to use in your portfolio. Webflow is going to allow you to create your portfolio completely from scratch using code. While Squarespace is going to give you a really great template to work off of. The great thing about UX, is that the work should speak for itself. Meaning that you could use a template and be just as successful as someone who creates their portfolio from scratch. It really depends on your vision for your portfolio, and how much creativity you feel is necessary to communicate your projects. For example, Tom Petty's portfolio from the earlier course, had a very clean and simple design, something that you could very well achieve with a template. In his portfolio, his work spoke for itself, and his work could easily be showcased with mock-ups and photographs. But on the other hand, Williams portfolio from the case study example, created his portfolio from scratch because he wanted to have customed elements and animations to elevate his work. These animations and elements helped elevate our understanding of his project. Either way, both of these tools are going to be great options for you and your portfolio. Makes sure that you have all of the materials necessary when you start designing. You need to be able to plug in all of your visual references in your content that we've been working on so far. To get started with Squarespace, you need to decide what template you want to use. Here in the worksheet, I have the best options for UX portfolio. The first template is Jasper Jin. This is actually Squarespace template that they've created with UX in mind. The landing page is going to focus on your projects itself. One thing that you probably notice is that it doesn't have a space for your personal introduction. If you were to go with this template, you would need to edit right under where it says Jasper Jin and add a section for your personal introduction. The great thing about Squarespace is that it has a list of design options that you can drag and drop into any template. One of these is the paragraph option. Then from there, your project introduction is going to be on hover for each of your projects. This template doesn't show the in-depth descriptions that we've talked about for your project introduction, but there's enough room to have all of that information here. The best thing about this template is the actual case study page. It has this really great animation as you scroll down each of the different sections animated, which makes it really easy to read and puts a lot of emphasis on each phase of your case study. So if you're interested in having the scrolling animation, I would recommend going with Jasper Jin. Something to note for Squarespace is you can't customize animations. You should find a template that has the animations that you're looking for, or you can use Webflow and create your own custom animations. The next template is called York. This one is very similar to Jasper in that it has that scrolling animation for the case study page. The thing that is different in this one is that your project introductions can have different variations in sizes. The Jasper uses a grid where every project is going to have the same exact size. Whereas this one, if you have visuals where you feel like you need to take up the entire width of the website like this, for example, maybe you should use this one instead. Something to note is that both of these templates have simple navigations at the very top of the website, which is really important. Most likely your navigation is going to have a home button, which will house your projects and your personal introduction, as well as a link to each case study. Then an About page and potentially a Contact page. You can list a contact section on your homepage or under your About section, or it can have its own page. All are great options. If you feel like your contact section is not getting enough clicks, I would recommend having the contact section in the navigation itself. For your about page, I would go more into detail about your identified process as well as going more into your personality. The next template is called Stella. This is actually the template that I used for my portfolio. The thing that I liked about this template was the project introduction section. I liked how I could lay a text over a photograph really easily with the Learn More button. When I was looking at this template, I could easily see how my work could fit into these sections. I also liked the full color with backgrounds. I used this down here for my contact page, and I feel like it really helps that section stand out. One downside to this portfolio is that it didn't have any animation on any of these pages. The only animation that I was able to add to mine was Parallax scrolling, which was the only animation that I was interested in. Luckily, I was able to customize this template with that animation, but most animations have to come with the template itself. The transitional animation that we saw in the other two templates, as you scroll down the page, was not something that I could achieve with this one. So it's really important to envision how your work and presentation is going to fit into these templates. You want to pick one that most represents how you envision all of your work being laid out. 6. Design and publish with Webflow: Now let's take a look at Webflow. Webflow is a really awesome tool, because it allows you to design your portfolio from scratch, and publish it as soon as you're done within the same tool. As soon as you're done designing, you can hit ''publish'' and it instantly goes live. Webflow also comes with templates. I, myself haven't used any of Webflow' s templates because I feel like the whole point of using Webflow is design it yourself, but if you wanted to use a template, if you go on their main website, you can see options there. I'm not sure that they're as thought out as the templates created in Squarespace, but it may help you get started in case you're not very familiar with CSS or HTML. Now, you don't necessarily need to know code to use Webflow, but it is very useful. The way that Webflow works, is it gives you a design interface similar to a design tool-like sketch. When you drag and drop in different elements, like a Navigation Bar for example, it's not going to land on your canvas as fluidly as it would in a design software, and that's because it's using HTML as its framework. You need to understand how HTML and CSS organizes content, to help you figure out why things aren't working the way that they should be. This is Wilian's portfolio, and we're able to go into the design ourselves and see how he created some of these elements. You can see at the very beginning that he most likely use a Navigation Bar over in the left panel here. Here are all of your different options that you have to work with. You have sections, containers, grids, and columns. These are all based off with HTML. Div blocks, list items, paragraphs, again, all HTML. But they also have recognizable elements that you can drag and drop like a Nav Bar. One great thing about Webflow is that it tries to help you create elements that are responsive. With that Nav Bar that we created, we could go in at the very top of the screen and click on tablet mode, or phone mode to see how those are responsive, and it looks like a hamburger menu is how it'll be responsive. Now because this is a design tool, Webflow does have some planned out navigational things like that built into the software itself. If you wanted the navigation to work a different way, you definitely can do that. Let's go back to desktop mode. Your left panel is going to have all of your layout elements, as well as buttons where you're going to place in photographs. Then on the right is how you're going to style everything in terms of color, font selection, spacing. Here is Wilian's personal introduction. He has three columns, each with a photograph and description, a little bit about what he does as a UX designer. If you wanted to have something similar to this, you would go over here in the left section, and click ''columns.'' I'm going to place them in right here, and then it's going to give me the option to decide how many columns I would like to have. Let's do three. Now, I'm going to drag in a photograph. You can see that the photograph is going to automatically left align. That's because again, we're using HTML as our framework, and in HTML, everything auto aligns to the left. It's not as simple as using a template in the sense that we can drag anything, drag an element anywhere on the page. We're actually going to have to go in and work within the CSS to get its position the way that we want it to. But before I do that, I'm going to add some text, so there's a paragraph, and luckily with Webflow, you're able to edit other people's stuff without actually saving. So Wilian will have to give me a phone call asking what I did to his portfolio. It just allows Webflow to build a community in case you're interested in how other people design certain things. You can easily go to their website, open it up in Webflow and see for yourself. Now I have a photograph, and a paragraph element in each section. Now I want to center all of my photographs so that they're centered within each column. I'm going to go over here to the styling panel. There's a few different ways to do this. Right here, this is how you control the padding of how much is on each side of your element. Now, the thing about padding is that, you need to check how it looks responsively on a phone and on a tablet, because if you have a lot of padding, it's also going to translate over to your phone, and then the padding may push your image completely off the screen. This is how knowing a little bit about CSS is going to help you when you're using Webflow. It's better to use percentages, for example, in the padding section. Now let's reposition this image so that it's centered. If we scroll down, let's look at how Wilian, centered all of his items. It looks like, each column has its own padding. This green section here represents the padding. Now we have all of our images centered, and we have a very similar column styling that Wilian has. I just want to take note that, doing these things does take a little bit of time in comparison to using a template. Using a template, you would easily be able to add a spacer, for example, on Squarespace, which is just a drag and drop, and you can instantly center things. Of course, on Webflow wasn't terribly hard, but certain things are going to take a little bit longer in Webflow because you're creating it from scratch. If you have the time to fully flash out your portfolio, I would recommend at least giving it a try to see if it's for you. 7. Conclusion: Thank you so much for completing this course. Let me know if you have any questions regarding your UX portfolio and make sure to check out the worksheet. It's going to have links to all the resources, extra examples and tips and tricks. Finally, make sure you link your portfolio so that you can get feedback. Thank you.