if you want to become a ux designer or a product designer you need a good portfolio website and
when I started up my career I wasted tons of time trying different website Builders and because I
wasted so much time on the technical part of things I didn't focus on the most important
side of things the UI design the banners that sells my design and also the stories behind each
of the case study in today's video I will teach you how to build a ux or product design portfolio
through just Figma and Notion let's start with the most important page the website homepage please
open up a new figma file and let's build this homepage wireframe together we're going to use
this structure and you are going to choose three to four projects that you've finished usually we
use chronological order but make sure the top left one is the best one the most recent one
and hopefully it's a real world project for these cards please use a dimension of 1280 times 720 and
for each project put in the project name and use some rectangles to draw out the visualization of
the banners these Banners are the banners that will get you a job for app projects usually we
go with two or three mobile screens for responsive website you can put in both a desktop screen and a
Mobile screen like this one and then if you worked for an internship in a well-known company or if
you worked for a company that has a good logo you can also design a little spot that puts in your
logo and feel free to move things around to make sure they look good with each other now that you
have a wireframe bring in the High Fidelity design into this figma file and let's see if that still
looks good if you think the projects you did from the past no longer reflect your current UI or ux
design skill which means if you think your past projects are too ugly you need to update those UI
especially for these banners so that you form a really good first impression for recruiters and
hiring managers the next step is to polish up these banners by adding colors and more details
for background colors I like to start with one of the color that's already in the design and
then work from there for example green for this one and then blue for the final one
you can also add device more cups to these banners just go to figma Community page and then look up
for the device you want then copy one of their screen to your screen resize the component to
fit your banner and then replace the screen with your design for this component to work you might
need to detach instances just like this using device markups might work for some projects but
it might not work for the others for example if you build a very complex desktop website it could
be better to just use a simple shadow here I'm creating a rectangle beneath this layer that's
in the color of a transparent black and I'm giving it a layer blur effect this is similar to adding a
shadow but it gives the device more of a floating look and I'll do the same for the other banners
whenever you feel happy about how these banners turn out export all of them with high resolution
now that we have a design for our home page we are going to bring this into our actual website and
we're going to use notion I chose notion because it's a tool that can fulfill every single step
of this portfolio building Journey not just the final web presentation part but also the entire
drafting part for example the most recent notion AI feature it allows you to turn bullet points
into a paragraph or help you to clean up your grammar or turn things into a more professional
tone you can also use notion for free and for things like oh what font am I going to use for
my website what am I going to use for header 1 or header 2 notion already did it for you and
you don't need to change anything so I want to thank notion for sponsoring today's video and
please get started using notion by clicking the link in the description click the link it means a
lot to me so now let me show you how to turn this into this this is what you will see after you sign
up with notion go to the left sidebar and then click templates then search for design portfolio
and then click get template to get a unique URL for this page please go to settings and
members on the top left then go to settings and then type down your name in The Domain
section if you want the simplest form of the URL like Aliana thai.notion.site you will have
to click public homepage and then upgrade to plus from here but for now it's fine to just
click update and then use the free version now go to share on the top right and then toggle
on share to web then copy the URL if you are using the free version then this will be the
URL for your ux portfolio and then here I'm just showing you the example of inserting this URL to
your resume as a link here we go if you click on the link then here we're going to the portfolio
now let's go back to the notion edit page and customize our portfolio hover over the
top banner and then select change cover here I'm just going to click remove to
remove the banner then select the icon on the top and then select custom here I will upload
my profile photo here if you don't have a good profile photo or profile shot don't upload one
and I'm going to replace the header with hi I'm Ariana then hit return and type in a paragraph
that introduce yourself it doesn't have to be super creative notion will automatically set your
paragraph to body found but you can always select and then click Text to change it to other font
like heading 2. now we can remove the following two sections by selecting them and then hit delete
then is the most important part in these cards so select the first one and then let's replace
the content with the one that we just did select everything on this page and then delete because
we don't need this as a template click the sixth dot to delete the leftover components then select
the top emoji either replace with another Emoji or just delete the Emoji and then replace the
title with your project title replace tags with the tags that represent your project
if there's no additional link to the project feel free to just delete the property link
and then dragging the banner that we just designed from the previous step to here
now if you click outside this card you'll see that on the home page the banner is updated
the title and the tags are all updated so now let's do the same for the rest of the projects
as a recap you need to replace the Emoji the project title the tags and then put in
the banner image for each project your homepage should look something like this once it's done
and for the footer you can either edit everything by hover overing these components or you can just
delete everything like what I usually do and then put in your contact information like your linking
your Gmail your phone number and if there's anything wrapping in a weird way it means there's
an additional empty element on the right side so please delete that and everything will go back to
normal on the bottom line you can add in copyright your name the year and the All rights reserved
in order to type in the copyright symbol please use option G that's option G
and if you want to insert link just select the element and then click link
and then we are done with the home page now if you go to your url you'll see that this page
is already updated and then it will also update based on your device setting for example here it's
already dark mode and everything is responsive by Design now that we have a working home page
we also need really good case studies especially the first one because usually in the interview you
are only going to present one project so it's okay if you only have one great project and the other
three are just okay and I'm going to show you how I write case studies for my projects let's go back
to notion and on this home page we need to do one extra setting you'll see how each card opens in a
small window here we can adjust that setting by clicking the three dots then go to layout
and then click open pages in and then change it to full page now if we click on any of the
card it will opens up in a full sized window and for each case study let's drop down three
points problem solution and process all the content will belong to any of the three points
let's start with problem and solution for problem I suggest you to use a combination of business
problem statement and design problem statement you can refer to the user story you had when you
were designing a project the example here is more towards a business problem statement and don't
worry if you think it's not perfect just drop anything down and we can always use notion AI
to help us to make our language more professional just click ask Ai and then click fix spelling and
grammar here we go for the solution statement you'll need to include a summary of your product
and the summary of your impact and because you're at such an upper part of this page I also like to
add three visuals that just sells your design so here I'm adding three points to further
explain the solution and these three points are simply three features that I had in this app
I'm also dropping down an explanation for each of this point and don't worry if you don't think you
can write a great paragraph you can always ask notion AI to make it sound more confident just
select the paragraph click ask AI change tone and then select confident now that we have the
content with these three points let's go to figma and turn this into varilizations
please use the same Banner size as the thumbnail which is 1280 times 720. please also prepare the
assets you'll need for these three visualizations based on the three features or the three points
you choose and here I'm just going to move things around and then pasting the text for
each point if you don't know which font size to choose feel free to just use 60 for the header
and then 24 for the body paragraph here's the example of the first visualization I'm going to
do the rest of the two visualizations if your product is more complex you can also discover
some other layouts or use some annotations and whenever you're happy with your visualizations
export all of them with high resolutions and then let's import them into notion
so here we can delete the content that we wrote up and then replace them with the
images that we just made by figma you can also add some space in between by dragging an empty
line in between these visualizations and we are almost done with the upper part of our case study
now let's go back to the top and let's adjust the style of these components for example problem can
be turned into heading 1 and you can also call out certain part in your paragraph just by turning
them into call out you can also change the color into red for problem and then blue for solution
and plus you can change the Emoji to something that represents the problem
and once you've done the same for solution it's also optional to adding a summary paragraph in
the beginning and I often call it at a glance and here I often added a separation line between
solution and process to do that just press dash dash dash and then you will see a separation line
now for the process let's first go back to our figma file and review the file again to recall
what we did for this project if you feel like there's certain step you need to make over you can
totally redo it now and based on the assets you have for each step name a few sections here I have
user research sketches wireframes and prototypes and usability study because these are Under
process you can either use a heading 2 or heading 3. now drag the asset you have for each step under
the headings here I have Persona and user Journey for research sketches for sketches and a wireframe
screenshot for wireframes and prototypes and I have a card sort for usability study
now that you have all the visual assets here please write a few sentences for each section
it doesn't have to be perfect because you can always use notion AI to help you to fix grammar
or just help you to make things more professional but the key is to explain why you are doing this
and what is the result of doing them for example you shall never create a Persona out of thin air
Persona is always based on user research and you shall explain it here I'll also teach you
a notion trick to make things easy to find for recruiters select the first heading then click
the three dot then click copy link to block then typing the heading name on the top user
research and use Dash and greater sign to create an arrow then just hit command+V (or control+V)
by doing this you just created a clickable section for recruiters to jump to any of the
section so here I'm doing the same for the rest of the headings and I will also add a call out
and now if I click sketches I'll jump to the sketches section patience patience patience
we are not done yet as you know iteration is the most important part of design thinking or design
process so here I recommend you to put in the section that explains your major design iterations
and how you made these design decisions so I figured out three main iterations that I made for
this design and I'm calling them out here using a header then let's go to figma and then create
an illustration to illustrate the before versus after for each of this major design iteration
as a reference we can use the same Banner size as before (1280*720) and then we can use
an illustration that's similar to this once you export everything just insert these images back
here and let's also add an explanation paragraph for each of this and as a kind reminder it's very
normal if this is taking you hours and let's add another section that illustrates our final
success I like to create another visualization with figma to show a lot of screens and also I
like to put in a prototype link here you can simply just paste in the figma Prototype link
and figma will embed it here for you finally you can also add in some descriptive sentences about
your product success and what you've learned it's important to highlight your impact on the project
now you are pretty much done with your case study if you like you can also adding a 1500 times 600
pixel Banner on top and adjust these labels to better reflect what you did in the project
here I decided to show my role the timeline of the project some tags my tools and then
the team that I worked with now if you go to your portfolio website link you will see
a fully updated portfolio that reflects your case study and has a good home page here we go
now that we have both home page and case studies are you finally done well you can definitely
start using these portfolios to apply to jobs or getting more opportunities or level up your career
however I don't think you can ever be done with your portfolio website because your skill will
evolve over time so it's very normal if three days later you look back to your portfolio that
you built today and you'll feel like oh my God what did I do it's horrible I feel that all the
time but it's okay please don't let perfect be in the way of good my best suggestion is
to fend it with three of your friends and then ask feedback directly from them instead of just
from yourself because you build this thing you're already so biased you don't have a fresh point of
view anymore and I also appreciate if you share your portfolio website in the comment section
below and you can also check out other people's portfolio and then provide them some feedback
I hope this video was helpful and if you enjoyed this video you probably will also like this video
that's coming up next so I will see you in this video I'm Aliena I will see you in this video