The UX/UI Portfolio That Gets Me Hired

yo yo how's it going man uh you all right oh I get it how's the portfolio coming I'll tell you how it's going first I didn't know which platform I wanted to use so I learned Wick Squarespace web flow and framer then I didn't know which color I wanted so I spent the next three weeks deciding on a color picked one changed it changed it again and now I still don't know which color I want then I looked through 12 different portfolio inspiration websites okay well whoa whoa whoa whoa whoa whoa whoa whoa deep breaths let's just take a step back and we'll figure this thing out together all right anyway okay look design portfolios are tough and if it's the first one we're working on speaking from personal experience they can drive us downright insane yeah the start of the video is a lot closer to reality than I'd like to admit there are way too many Cho from what platform you want to use to design your portfolio to the colors you're going to use the branding if you should do animations the list doesn't stop and the funny thing about portfolios is they're never actually done so why do we spend so long trying to make the first one perfect I know that I certainly spent way too long trying to perfect my first portfolio when in reality portfolios should be a living breathing thing and evolve with us as we mature and develop as designers in any case it's always helpful to have a guideline or somebody else's portfolio to use as kind of a template or as a launching off point a portfolio that you know has gotten somebody else interviews and gotten somebody else hired one that works and that's all our first portfolio needs to do it just needs to work and by far the most important thing is that your portfolio is simple to navigate and that it does a good job of displaying the work that you've done up to that point so I thought I'd use today as an opportunity to show my portfolio and talk a little bit about how I made some stylistic choices and why I choose to display the way that I do and this portfolio has gotten me through dozens of interviews has gotten me a lot of different job offers and has basically landed me my last three full-time roles as a product designer in London so without further Ado let's jump in so right off the bat the platform that I used to build my portfolio is webflow in case it's not obvious by this huge tag in the bottom right hand corner webflow is probably one of the more advanced website Builders so if you're new to this whole thing and you don't have any previous experience with it I wouldn't necessarily recommend using webflow there are other good options out there you can use Wix you can use Squarespace and those are much more straightforward they're much more drag and drop if that makes sense and you can actually use pre-made websites as kind of a jumping off point and then put your own little stylistic twists on those templates and webflow sort of has that but it's just more complicated to work with it really tries to mimic how a developer would go about building a website and so it's a cool way to kind of step into a developer shoes but if you're just interested in building website as a designer it can be a bit overwhelming I definitely spent way too much time just learning webflow rather than building my portfolio website and designing it so do a little bit of exploring with all the different website Builders out there to see which one matches your skill set and which one feels more comfortable but if you're new to this I would recommend Wix or Squarespace as a starting point so looking at my hero section the top section here I wanted my portfolio to be pretty simple I didn't want it to be too complicated I don't have any like crazy fancy animations in here or anything like that I did want it to be attention in grabbing so I have this soft colorful moving gradient in the background and I think that does a nice job of keeping the users attention making them interested and kind of curious about this page and I think it looks kind of pretty so it's something that I've I've had in there for a while and then I just have my name really big in the middle because I want it to be obvious that this is my website and then a little kind of tagline and welcome where I talk about how I love finding Simple Solutions to complex problems and I think that does a pretty good job of exploring explaining how I go about all my design work and then there are three big buttons in the upper right hand corner here and this is important because you want your portfolio more than anything else to be easy to navigate you want someone to be able to find your work in your projects really quickly and so my work is the main CTA here which is why it's the Fillin white button and then the two secondary ctas are my about me page and then there's this connect form and that's pretty much it the other thing that is worth talking about here is this kind of animated down word Arrow I just wanted it to be really obvious that the user can actually scroll down this page because it's not immediately clear that there's more stuff below this hero section so as we scroll down here I included another Pleasant element here and this is just a quote about design that I really like and that resonates with me great design should aspire to feel obvious like there was never a better way to do it this is kind of how I try to go about all my design work obviously there's usually more than one right answer but if the design is truly great you won't think about all the other ways that somebody could have solved this problem and you can see as the user Scrolls down here the gradient changes um and I thought that was just a really nice way to sort of guide the user along this journey of scrolling down as they make their way to my work and then the work section the most important section by far in your portfolio this is where I have all my case studies so I wanted the work section again to be really simple really straightforward and so I have these big shots of what it was that I designed and I wanted the shots to make it obvious what the design was about so if it was a mobile app I want that to be clear if it's responsive so if it's mobile and desktop I want that to be clear and so there's an image of a desktop screen as well as a Mobile screen in the projects that are responsive if it's just desktop then there's just a desktop screen I also really wanted there to be a lot of contrast between the background and my work and I think I accomplished that here my work really stands out from the background it's really col colorful you have these gradient backgrounds and then the product shots against a black background so the work does really pop and and that's really what I was trying to go for here and then there's a little bit of an explainer so I always have the header of the project as the company that I did the work for and then there's a little tag just explaining what the work was so the fact that this was a mobile design is clear and I did the ux and the UI design for this so it wasn't just a ux or just a UI project it was the whole thing and then there's a quick explanation of what the project is so that's really it right it's really simple and this is just a list of all my projects and all the work that I've done and somebody can then click into one of these case studies to read through it and if you noticed I have my case studies open in a new tab and that's a setting that you can choose to set when somebody clicks on a link on your web page I just wanted it to be really easy for the user to open a case study in a new tab quickly go back to my work page and if they want to they can open multiple case studies at a time so they can quickly go through each one coming into the case study these took forever to build in webflow again I wouldn't recommend it if you're not familiar with webflow but there are other websites that actually have case study templates so I know framer is a really good example of that they have like a case study website template that you can use and then you can basically just drag and drop in your text and your elements and your images and that kind of thing so I made life a little bit difficult for myself here but anyway I think they came out pretty well so a couple of things I want to talk about in the case study and this is by far the most important page on your portfolio the work is the only reason that somebody is on your website they want to know if you understand product design if you know the process and they want to know how you approach solving problems so a couple of important things to take away from my case study page I wanted to make them really easy to scan so you'll see this header at the top and that header is actually stuck as the user Scrolls down the page and these are the chapters of the case study so this accomplishes two things the first is that it gives the user a snapshot of my design process some doesn't have to scroll through the entire case study to figure that out they can just look at this header and the other thing that this accomplishes is it's really easy to then jump to these chapters so these are clickable so if I just want to look at how I did user testing I can just click this button and that Scrolls me down to the testing chapter and that basically means that the user isn't forced to read through the entire case study from A to Z they can just flick through these chapters and get a snapshot of my project and my work and I did this because my case studies tend to be on the longer side some people will say that your case studies should be really short and they should be standable I don't necessarily agree with that I want to give the user the option to dive into the nitty-gritty details and really read about everything that I did over the course of this project but I also want to give them the option to not forcibly have to do that beyond that the case study is pretty straightforward it just tells the story of why I did this design in the first place that's an important thing to include in every case study justify why you even went about doing this design work and then I talk about all the user research that I did I talk about the problem that I identified I have these key takeaway sections in my case study that I think are another good way for the user to scan so if you just wanted to know what my research conclusions were you could just scroll to the end of the research chapter and you would get these key takeaways that make it really obvious what my research uncovered and how that fed into the rest of the work here and the and the designs that resulted from it I really think the key piece here is your case studies should tell a story and they should be easy to digest so a hiring manager who maybe has 10 minutes to look through your portfolio can come to your website quickly flick through things and get a really good idea of how you work how you solve problems and whether or not you understand the design process well enough to be a good consideration for the job something else that's really important here to keep in mind is that no two design processes are ever the same and it's important to talk about all the things that worked in your case study while you were doing your design work but it's more important to talk about the things that didn't work and why they didn't work so if you tried to conduct user interviews and the user interviews didn't really inform your research or maybe you weren't able to do user interviews and you had to leave them out of the process it's really important to talk about that stuff because it then shows a hiring manager if they hire you you're not just going to try to adapt the design process you learn in your boot camp to every single situation because in real life you just won't be able to do that you won't have time you'll have limited resources and so you really need to be able to adapt to different situations different teams and compan compes and places and projects so make sure that you include some kind of unique element in each of your case studies and talk about why a case study maybe doesn't fit perfectly into the Double Diamond design process end to end scrolling through this the rest is fairly straightforward I talk about how I did my research how I then defined the problem and then I talk about how I did my design work and then the final UI comes at the end so I think your work should really shine in these case studies and so I made my product shop here really big and they're against a white background and in these nice iPhone mockups so they look very real so while it's very important to tell the story of how you got there your work really needs to look Stellar I would just present my work in As Nice a way as I possibly can and that's going to be a lot more impressive and leave much more of an impression than if I just slapped some screens onto my K St and then probably the most important part of this is the next steps or the outcomes of your work so that could include things like how would you test this gather user feedback what kind of me tricks would you be paying attention to would it be downloads from the App Store how long people spend using the tool how would you know if you were successful or not and this is really important to talk about in every case study because it shows that you think from a business point of view if a company is going to hire you they care about the results of your designs almost more than the designs themselves so your design is only as good as the value that it adds whether that makes users happier or it reduces cost for the company or it makes the company more money basically how you determine how much much your designs impact the business and the user that's also important during design interviews you're going to be doing portfolio walkthroughs so while a hiring manager will probably look through your portfolio before you even get the interview they'll also want you to walk them through one or a couple of your projects so for this I wouldn't recommend scrolling through the case study on your website because it can just be kind of jarring for somebody to look through all the text and it can be hard to follow I would actually put a presentation together I would put some slides together and I would make them much more redacted than this and I would speak the story and show it through images and graphics and that kind of thing so I know this is kind of annoying you spend all this time putting a case study together on your website just to then also create a presentation to walk somebody through the reason I would put a presentation together is because presenting your work is actually a really big part of your day-to-day job as a product designer you're going to constantly be in a position where you have to present your work to the company to different teams you're going to have to justify why you're making certain decisions so during the interview hiring managers are going to want to know that you can speak to your process and to your work eloquently and in a concise manner put some slides together it's really going to help you out in the long run and it's going to leave a much better impression on the hiring manager that is part of that interview heading back now to my portfolio if we scroll past the work section here there is this little get in touch form to be honest I wouldn't worry about making one of these I've had this up for five years and I think I've gotten like five messages on it and most of them have been spam so the way that I would actually encourage people to reach out to you is if we scroll back up to the top here through a connect button as a call to action this connect button actually brings you straight to my LinkedIn profile and that is where every recruiter and hiring manager so on and so forth are going to be reaching out to you so I would strongly recommend that you link to some kind of social media profile LinkedIn is probably your best bet it's just the most professional one but you can also link to other social media platforms you can link to your Instagram you can link to a YouTube channel if you have one and that's also going to bring more of your personality into your portfolio and that's a really good way to stand out from the competition on the note of personality the only other page on my portfolio is this about me page and that's really just a picture of me I think I was at like a brewery or something here so here I wanted to just give the user a snapshot of who I am as a person but also who I want to be and who I am as a designer so I talk about how I'm really passionate about the environment and sustainability that is really the kind of work that I aim to get into and so I I think this is a good place to talk about anything that you want to share when it comes to things that you like things that you're passionate about the kind of work that you enjoy doing this is the place you want to put that and then the other thing that I would put here is any kind of links to your socials so if you post on medium or if you have a YouTube channel or you're really active on Instagram I would actually link to all of those things here I just have my LinkedIn and my medium I haven't added my YouTube yet but I definitely should so I should take my own medicine but this is really the place where you want to bring your personality into the equation and that's super key because your personality is your biggest differentiator so definitely don't be shy to link to other parts of your life here and that's really it your portfolio doesn't need to be anything crazy I certainly don't think my portfolio is anything to be extremely impressed by I think it's pretty straightforward it's it's pretty simple I just wanted to cleanly present my work and to give somebody a little bit of a flavor of who I am as a designer my style and also who I am as a person so this is what I would strive for or when when putting your portfolio together feel free to use as much of this as a source of inspiration as you want to like I said it's served me pretty well over the last 5 years it's gotten me my last three full-time roles and a lot more interviews than that so hopefully this was helpful let me know if you have any other questions about putting your portfolio together in the comments below I will do my best to get to those as soon as I can and like always best of luck with disguise and I will see you very soon

Channel: Leander Angst

Views: 53,319

Keywords:

Id: vibaS-sOZmc

Length: 15min 53sec (953 seconds)

Published: Thu May 16 2024