Hi everyone! Today's video is all about How to build your UX
design portfolio website. I'm Christine and I'm
a UX/product designer working in San Francisco. This video is a step-by-step tutorial on how you can create your
portfolio in less than an hour. This is the portfolio that I created right out of my UX design bootcamp and it's the same portfolio that helped me land my first full-time UX design job, after one month of finishing my bootcamp. For this tutorial, I'll be
using Wix to build my website and I also wanna thank them
for sponsoring today's video. I highly recommend that
you use a website builder and Wix also offers great templates, that you can just plug
in your text and images and publish your portfolio in a day. I also do not recommend
anyone who's starting out in UX design to code their own website. No, no, no. Do not waste your time doing that. I know some people offer that advice and maybe that's what
they're really interested in but unless you're becoming a developer and that's what you wanna do, do not waste your time
learning how to code because it is a whole other beast. I don't think it's really worth your time, it's gonna take away energy and focus from what's really important, which is that you improve your designs and iterate on the content
strategy of your case studies. I'm also not a fan of
having only PDF versions of your portfolio. If you're applying to work in tech, you should do what's industry standard and what's industry standard is that you have a portfolio website. With that said, go to wix.com/chunbuns to start your own portfolio website. So, UX boot camps won't teach you how to create your portfolio website. They'll give you project prompts so that you can create your mock-ups and come up with deliverables but they won't actually teach
you how to write case studies or how to use a website builder
to publish your website. I stalked a lot of designers on LinkedIn, looked at their portfolios,
read a lot of case studies to understand how to
structure my own case studies. Everything that I'll be
sharing with you today was something that I really
wish someone had told me or made content about back in the days. So, you're welcome. Things might've changed now. It's been four years already so let me know in the comments below if the bootcamp that you're taking is actually teaching
you any of these things. I also wanna make it clear that this video is not gonna cover how to
actually come up with the content of your portfolio. That's gonna be a separate video because I don't want this
video to be one hour long. So, I got you but not today. I also asked you on Instagram
to submit your questions. And so, I picked some of the
most voted, liked questions in the comments section. So, I'll be answering them
throughout this video. So, make sure to stick till the very end. Without further ado, let's get building. By the end of this video, we're gonna create something
that looks like this portfolio. This is my first UX design portfolio so there's a lot of things I
would have done differently, if I were to go back but I'm just gonna show
you what it looked like back in the day. This is a very basic layout of what a UX design portfolio looks like. There's nothing really fancy about this. It's a two-by-two grid with case studies. And I would recommend
that you have at least three to five case studies, at least two to three of
them being UX design related and the other ones can
be more visual design or graphic design related. The first case study
that you should have up is the project that you're proudest of and the one that you
would be interviewing with and talking more about in your onsite. So, we're gonna be building
out one of the case studies. This is my Levi's case study. What it really is is a
bunch of text and images just put on a page. There's really nothing super fancy about this case study either. It's really more about the content. And this video again is
not going to be about how to come up with the
content of the case study, I already drafted the
content of the case studies and what I would do is put
them in a Word doc in my notes. I have all the content written out here, just because it's easier
to move things around. It's easier to write and
edit my case study on this rather than having to change
everything on my website. And there's less back and forth, when you write out your case studies before you actually work on
building out your portfolio. So, let's start from the very beginning. You create a Wix account and
you go to Create a New Site at the top right. And what that's gonna do is
it's gonna walk you through how to set up your portfolio. So, I want a designer website. I wanna just choose a template because that's gonna
save me a lot of time. The template that I chose, there's a lot of templates. Like oh, this one's nice. I would go with this one. I think I've seen this one
being used by another designer. That one's pretty cool. But the one I used, why can't I seem to find it? Okay, I think it's because I'm
currently using that template so I can't use it anymore. Let's do this one. I'm a little bummed
because now my portfolio is gonna look a little bit
different but it's all right. Okay, yeah, this is a nice template. What I'm gonna do is I'm going to remove
some of these things. The first thing I like to
do is go to theme manager and change textiles. I actually like the textiles of this one so I'm just gonna keep it as is. Maybe the paragraph I wanna
change it to something else. I like Avenir Light but Georgia works. Okay, let's just go with
what is available here. So, I'm gonna add text,
titles, themed texts. I'm gonna put heading one and this is gonna be hello, I'm Christine. I'm gonna put an emoji there. And then, that is clearly not me so I'm gonna change image, upload media. What I'm gonna do is crop this to make it more center aligned, like so. Perfect, pop up. I'm gonna do chunbuns, chun,
chunbuns, chunbuns, buns. It's irrelevant, that
little text is irrelevant. I'm also gonna add a paragraph. And what's nice about it is
that you can customize each text by oh, customize. Yeah, customize the line spacing so that it doesn't look as tight. Yeah, I like that. Okay and I'm gonna move that a little bit. So, the grid is there to help
you stay within that space so that when someone is
looking at your portfolio on an iPad, all your content, all the important content
isn't out of that grid. So, they'll be able to see
everything in a nice view. I'm just gonna take that out. You can add social bar. Oh, what I like about the Wix editor is that you can shift, hold shift and click all the
content and just move it down. It's like working on Figma, it's awesome. And as we go down, we're
gonna use this space to put our case study. I'm actually gonna delete this whole row because I am going to put my work, whoops, my work. Okay and so, I'm gonna just
have a simple two by two grid. So, before we do that, I'm
gonna change the logo here. I'm gonna add my own logo. So, I'm gonna put image, my uploads. So, we're gonna add that to page. And voila, got myself a logo. Whoops, I drew this on procreate. I was bored and I was like, oh, I
might make myself a logo. Actually, I'm gonna hide
about us is gonna be work, about page. I'm gonna delete this. Okay and what this is is you
can put an anchor on this. You can add anchor to the site. So, once you add that,
this line basically, clicking on this will take
you to where the line starts. Oh, I'm gonna add a blog because I wanna show that I blog. I'm gonna create a new page and put blog and have that be my second line item. So, you see right here, work, blog, about. And for this logo, we're also
gonna link into the homepage. So, you go to page, home. Yes, done. So, if I'm on a different
page and I click on this logo, it's gonna take me back. So, in this bio section,
what's really important is that you make it super
clear what you do, who you are and why someone should hire you. My current portfolio says product designer but when I was transitioning
into UX at that time, I labeled myself as a UX designer because I wasn't really
part of a product team and I wasn't owning a product
from the initial ideation to the final rollout. I wasn't the product owner. You can write a short little blurb about what makes you special. But honestly, everyone's
bio is kind of the same for UX design. So, I wouldn't sweat too
much or spend too much time on this section. Let's go to the work section. In order to build out
that two by two grid, you're gonna go to Add and click on Box. Here we go. Here's my container box. And I'm gonna make this
size the same, 467. So, once you have this box, you're gonna add a hover interaction. We're gonna use a hover interaction later and then you're gonna add an image. I'm gonna click the Levi's. I added it. I'm gonna put this to
467, attach it to the box and I'm gonna go to hover and
I'm going to choose effects. Okay, so, I'm gonna make it grow. Oops, I'm gonna customize that. I'm gonna make it grow like
110%, ever so slightly. So, if we look at that, let's preview, it's gonna grow. I also want a little shadow. I see a little shadow there. Actually, the shadows too strong. So, when you hover, I also wanted to have like a dark overlay. So, I'm gonna go to container box, put this as the same dimension. I'm gonna use this so I have it aligned. And then I'm gonna make this opaque 50%. And then, I also wanna add text. So, I'm gonna add text that is a white and I'm gonna call it UX design. And then I'm going to add
another heading on top of it. It's white, center align it. Okay, so, let's preview this actually. So, every time I hover, it's
gonna say Levi's UX design. Okay and now, what I'm gonna do is I'm gonna Control or Command + C, paste and just paste this on the page. And then I'm just gonna switch
out the copy and the images. So, I'm gonna click this
image, change the image, change image, put this for Lineage which was a graphic
design work that I did, change image, put Tatcha. And there, we already have the grid. And I'm gonna go in and change
the title, graphic design. This is Tatcha marketing design and this is UX design. And I'm going to pull these
guys down a little bit. So, let's preview that. We have the Levi's,
Roomer, Lineage and Tatcha. Now, we're gonna build
out a first case study. So, I'm gonna go to pages and I'm gonna create a page called Levi's. Hide, yeah, there we go. Okay, so, the page still exists but it's now hidden from the menu. I'm going to start adding text. I'm gonna add my header. I always start off by writing
out my case study first and then I start adding
images to compliment what I'm writing in my case study. So, I already have a title. That way I'm not going back and forth. And I have a bunch of texts here. I'm just gonna copy and paste. So, add text, themed text. I'm gonna also put more line spacing so it's easier to read. And then I'm gonna add an image. I'm gonna book upload
all my case study images. This is the main image. Oh, what I also love about this Wix editor is that you can add
multiple images all at once. If I wanted to, I can just bulk select and add them to the page. I'm not gonna do that
cause that's gonna be a little chaotic. So, I'm just gonna add two
images, 820, I like 820, center align it, boom. I'm gonna then copy this title and copy, whoops, copy and paste the problem and process and oh, something changed, whoops. Oh also, you can Command + Z and it'll revert back to whatever it was. You know, back in the day, I felt like I had to put up post-its. I think if I were to
redo my portfolio now, if I had finished bootcamp now, I probably wouldn't put any post-its because that's something that
a lot of junior designers put. Unless you lead like a company wide or like a very big team initiative for a brainstorming session
at an actual company, I just think it's not as
valuable of an artifact to have on your case study. If you want to put it, you
can, you don't have to. I probably wouldn't, if I were to go back. So now, that we've created
the Levi's case study, we're gonna link that
to this thumbnail here. So, how we're gonna do that is we're gonna click on the container, go to hover because
you're gonna be clicking on the hover state. You're gonna add to hover a button. So, this is a hack that I found on Google because I couldn't figure
out how to link a page to this box. So, I'm gonna change the design, make the background
transparent, go to text and minimize the button text completely so that you don't see it. You're gonna link it to a page. We're gonna click Levi's. We're good to go. So, we're gonna preview it. Oh, there's a hover on the buttons. So, we're gonna keep that to zero opacity so the gray box doesn't show. Ta-da, it did. I'm gonna click on it. It's gonna pop up the case study but I don't want that weird transition. So, in order to get rid of the animation, we're going to go to page
transitions, click none. So, what that's gonna do is
let's go back to the homepage. You're gonna click on
the Levi's case study and it gets rid of that weird animation. We're done, we made it. When I asked you on Instagram
to submit your questions, a lot of you have asked me, how many details is too many details? Can you explain what should be documented and what shouldn't. I tried researching online. The answers I get are so vague. I'm not sure which parts of the process I should highlight or emphasize. So, before you build your website, spend a good chunk of time thinking about the UX of your portfolio and
getting clear on the messaging. And the best way to do this is to write out your case studies before you add any images to it. Each of your projects should
answer these three questions. Number one, what was the product? And what was the problem you
were trying to solve for? Number two, how did
you solve that problem? What did you do? Number three, what was
the outcome or results because you solved that
problem with your designs? Another person mentioned, I
keep hearing different things between focusing on visuals versus focusing on telling the story. Which one is it? You need to tell a story
with compelling visuals. That is my answer. So, the answer is really,
you should have both. I know that phrase telling
a story gets thrown around all the time in UX design. What that really means is, do people understand what
you're trying to say? Do people understand what you actually did to solve the problem? Was a problem an actual
business or user problem and not just a re-skinning
of an app that you like? And so, I would ask yourself
what details would matter for anyone who's reading my case study, to help them understand what
I did with this project? And my rule of thumb is, if a high schooler can
read your case study and they can understand
what you actually did, that's a good case study. Because anyone who has no
background of UX design or your project should
be able to understand what you were trying to
fix with your designs. And instead of showing
everything to be your default, you should see thoughtfully consider what are the interesting
parts of your projects that you really wanna highlight and how do you bring that up
to the top of your case study so that you grab people's attention and how do you naturally progress into sharing how you
define the problem space, what kind of solutions
you came up with at first, how did you validate your designs and what was the result of
the redesigns that you did. Another question was
hiring managers see/skim through so many portfolios. How do you stand out? Do you keep it super
simple or a lot of info? Clarity of message is really important. So, that is something that
you always wanna consider while you're working on your case study is do people understand
what I'm trying to say? If you're someone who's
starting out in UX design, the one thing that can
really make you stand out is having good visual
design in your case studies. I see so many bootcamp grads portfolios that only have very lo-fi wire frames. And they're really ugly. I'm gonna be honest. Some of them are really ugly and I'm like, you're a designer. You should know the
basics of visual design. I'm gonna get so much hate by saying that. I'm just gonna be real, okay? There's a way to make gray text boxes and gray boxes prettier than the average. I try to show 90% of the images that I show on my case study. 90% of them are high fidelity mock-ups. I rarely show wire frames. And you might be asking, well, Christine, I don't have background in visual design. I just don't have the eye for it. What do I do? You can develop an eye. And I really believe visual design is something you can improve on. I used to not be really
good at visual design and now like people tell me
I really like your aesthetic. One great way is to
study good visual design. And all of these sources are
out in the public for you so you can check out a lot of different design system libraries
of different companies. So, like Google material design and Airbnb also has their
design system out in public that you can see. And like you can see the
style of their buttons and their components. It's really important that
you familiarize yourself with the different UI
components that are being used in different apps. Download a bunch of different apps to see what kind of designs they're using and what kind of interactions
are using for different flows. And that way, as you study design and as you look at a lot of good design, that's how you can develop
what good visual design is. Well, at least that's how I did it and it seemed to have worked. I will be doing more
portfolio related videos. So, write in the comments below
what else you'd like to see in my future videos and I
will see you later, bye.
