How to Build a Standout UX Design Portfolio in 2024

Summary

This video script offers advice on structuring a compelling design portfolio, highlighting the need to go beyond showcasing work and focusing on the thought process and results. The speaker shares personal experiences, including attracting attention from companies like Meta, and emphasizes the importance of continuous portfolio development even when employed. Tips on case study creation, design principles in Figma, and the value of user testing with friends are provided to help designers create a strong portfolio that can lead to job opportunities.

Takeaways

• 📈 **Portfolio Structure**: The speaker emphasizes the importance of structuring a portfolio to showcase more than just designs; it should demonstrate the thought process and results.
• 💼 **UI/UX Gap**: There's a noted gap between UI and UX, and the speaker aims to bridge this by teaching how to create a comprehensive portfolio.
• 📩 **Industry Recognition**: The speaker has received outreach from companies like Meta due to their portfolio, highlighting its effectiveness.
• 🔍 **Content is Key**: The portfolio should contain more than just visuals; it should articulate the thought process and outcomes of projects.
• 📊 **Results Matter**: Including results in the portfolio is crucial as it backs up the work with tangible data.
• 🚀 **Growth Opportunities**: The speaker's intention is to help designers grow by learning how to structure their portfolios effectively.
• 💡 **Continuous Improvement**: Even when employed, it's essential to keep updating and building one's portfolio to be ready for future opportunities.
• 🛠️ **Design Tools**: Tools like Figma and plugins like Mockup Studio are recommended for designing and exporting portfolio case studies.
• 👥 **User Testing**: Engaging friends or potential users in testing designs can simulate real-life user feedback for case studies.
• 📝 **Documentation**: Every element of the portfolio, including case studies, should be well-documented and designed, not just screenshots.
• 💪 **Honesty is Best**: The speaker advises against fabricating project experiences, as it can lead to failure in the probation period when the truth is revealed.

Q & A

What is a common misconception about design portfolios?

A common misconception is that portfolios are just for showcasing beautiful designs or completed work. However, portfolios should focus on showcasing the designer's thought process, challenges faced, and how solutions were developed.

Why is it important to keep your portfolio updated even while employed?

Keeping your portfolio updated while employed is crucial because job uncertainty can arise at any time, and having a strong, up-to-date portfolio allows for a smooth transition back into the job market.

What key content should be highlighted in a design case study?

A design case study should highlight the thought process, unique solutions, how the designer's ideas influenced the design, user feedback, and the overall impact of the project.

How does the speaker suggest approaching case studies for those who haven’t worked on real-life projects?

For designers without real-life project experience, the speaker suggests creating mock projects, using templates, and involving friends as test users. They should treat these projects as real by addressing problems and providing solutions.

Why is breaking down design files in Figma important when building a portfolio?

Breaking down design files in Figma is important to prevent the software from slowing down, especially when working on large files. It also helps in organizing and presenting work in a more readable and structured way.

What is the importance of including usability tests in a portfolio?

Including usability tests in a portfolio is important as it demonstrates the designer's ability to gather real feedback, identify problems in the design, and iterate based on user input. This shows an understanding of user-centered design.

How does the speaker recommend handling design projects that can't be publicly shared due to client restrictions?

The speaker recommends creating new projects using templates or mock projects when real projects can't be shared publicly. Designers can simulate the design process and use friends for testing to mimic a real project environment.

Why is being honest about project experience important during job applications?

Being honest about project experience is crucial because any dishonesty can be exposed once hired. If a designer lacks real project experience, they might struggle during probation periods, leading to job loss.

What advice does the speaker give for presenting case studies effectively?

The speaker advises keeping case studies concise, highlighting key points without overwhelming hiring managers who are reviewing multiple portfolios. It’s important to clearly articulate the thought process and design rationale.

What tools does the speaker recommend for building a portfolio?

The speaker recommends using Figma for designing portfolios and creating case studies. They also suggest using the 'Mockup Studio' plugin for displaying design mockups in a polished and professional way.

Outlines

00:00

📝 Structuring Your UX/UI Portfolio Effectively

The speaker emphasizes the importance of properly structuring a portfolio for UX/UI designers, highlighting a gap in understanding between UX and UI. Many people think portfolios are just a showcase of work, but the speaker stresses that there's more to it. It's important to demonstrate what hiring managers are looking for. By sharing personal experience and the impact of their own portfolio, the speaker illustrates how a well-structured portfolio can attract attention from major companies like Meta. The speaker offers to guide viewers on how to create portfolios that not only display design skills but also help them stand out in the job market, even providing proof of success through personal experiences.

05:01

📂 Common Portfolio Mistakes and How to Avoid Them

The speaker discusses common mistakes designers make in portfolio creation, like simply uploading design work without context or strategy. Instead, the speaker advises creating compelling case studies that highlight the designer's thought process, problem-solving abilities, and the reasons behind design decisions. By using tools such as the 'Mockup Studio' plugin for Figma, the speaker explains how to structure a case study with proper formatting and dimensions for clarity. Details like text size, spacing, and export tips are shared to ensure portfolios are accessible and visually appealing, especially when using tools like Figma to build them.

10:03

🔄 Building Case Studies Without Real-life Projects

The speaker provides a solution for designers who haven't worked on real-life projects by suggesting that they test their designs with friends and use their feedback to create a 'before and after' case study. This method mimics real-world usability testing, allowing designers to showcase their ability to identify and solve design problems even without professional experience. The speaker encourages designers to create up to six 'before and after' usability studies using their own ideas and templates, and to be honest about these being self-initiated projects, as this demonstrates initiative and creativity to potential employers.

Keywords

💡Portfolio Structure

A structured way of organizing a designer's work and showcasing their skills and experiences. The speaker emphasizes that a portfolio should be more than just a collection of beautiful designs—it should demonstrate the thought process, project journey, and results achieved. This structure makes the portfolio more appealing to hiring managers, as seen when companies like Meta reached out to the speaker due to their well-structured portfolio.

💡Case Study

A detailed analysis of a project, highlighting the problem-solving approach, design decisions, and results. The speaker explains the importance of having multiple case studies that showcase different aspects of design expertise. They recommend keeping case studies concise and focused, as hiring managers might not have the time to read through lengthy ones.

💡User Experience (UX)

The overall experience a user has while interacting with a product or service. The speaker suggests that UX design goes beyond aesthetics and involves understanding user needs and solving problems through design. This is why including detailed UX case studies in a portfolio is critical for attracting attention from hiring managers.

💡Mockup Studio

A design tool used to create realistic mockups and visual representations of digital products. The speaker mentions using Mockup Studio to create professional-looking designs for their portfolio, which enhances the presentation of their projects and makes them visually appealing to potential employers.

💡Project Brief

A document or description that outlines the goals, target audience, and deliverables for a design project. The speaker advises new designers to create their own project briefs when they lack real-world experience. By doing this, they can simulate real projects and create compelling case studies for their portfolios.

💡Usability Testing

A technique used to evaluate a product by testing it with real users. The speaker highlights the importance of usability testing even for hypothetical projects, suggesting that designers use friends or peers as test subjects. This feedback can be used to refine the design and demonstrate the designer’s ability to incorporate user feedback into their process.

💡Hiring Managers

Individuals responsible for assessing candidates’ skills and suitability for a role during the hiring process. The speaker frequently mentions hiring managers as the primary audience for a portfolio. A well-structured portfolio, with clear case studies and thought processes, can impress hiring managers and increase the chances of getting job offers.

💡Figma

A popular collaborative design tool used for creating user interfaces, wireframes, and prototypes. The speaker uses Figma extensively to build their portfolio projects, design case studies, and create mockups. They recommend using specific settings in Figma, such as text sizes and layout dimensions, to ensure a polished and professional presentation.

💡Self-Initiated Projects

Projects created by designers on their own initiative, often to fill gaps in their portfolio or explore new skills. The speaker encourages designers to work on self-initiated projects if they do not have real-world experience. By documenting these projects in their portfolio, designers can demonstrate their creativity, problem-solving abilities, and dedication.

💡LinkedIn Presence

The impact of a designer’s activity and content shared on LinkedIn, which can attract attention from companies and hiring managers. The speaker mentions that sharing their work and insights on LinkedIn led to companies like Meta reaching out. This highlights the importance of building a strong professional presence on platforms like LinkedIn to enhance visibility and credibility.

Highlights

Understanding the gap between UI and UX in portfolio structuring.

A portfolio is more than showcasing work or beautiful designs.

Hiring managers are looking for more than just work samples in portfolios.

Showcase thought processes and design decisions in case studies.

Success in portfolio structure can lead to messages from top companies like Meta.

Always keep your portfolio updated, even when employed.

Use a template to guide portfolio structure for easier design management.

Highlight key points in your case studies; hiring managers often don't have time to read long portfolios.

Four case studies are recommended for an optimal portfolio.

Mockup Studio is a helpful tool for creating portfolio presentations.

Ensure text readability in case studies by setting appropriate width and font sizes.

If you lack real-life projects, create hypothetical ones and test them with friends.

Focus on before-and-after usability studies to demonstrate design improvements.

Be honest about non-live projects in interviews; highlight the testing process and lessons learned.

Avoid cutting corners in your portfolio; authenticity ensures long-term success in design roles.

Transcripts

so I'm going to be showing you how you

can actually structure your portfolio

because I noticed that there is this gap

between UI and ux and a lot of people

don't actually know how to structure

their portfolio and before now you might

be thinking that portfolio is just when

you showcase

your um work the work you've done or

probably uh all the beautiful designs

you've made and that actually works as

something that you can have in your

portfolio but far from that that is not

what should be on your portfolio right I

will show you what these guys are

actually looking out for because have in

the past I've gotten a lot of messages

based on the kind of portfolio that I

have and I'm going to show you some of

the messages that I've done I've gotten

over the years about from different

companies Pro even meta reached out to

me at some point uh I can't even tell

maybe because of the way I structured my

portfolio because of the contents that

I've been sharing on LinkedIn but at

some point they reached out to me the

hiring team actually reached out to me

on LinkedIn and were like hey um are you

open to work I think that was when I was

with my former company right so I'm

going to show you how you can actually

do this and I'm going to show you this

with results because some of the things

things that I've done I have results to

back it out so it's not based on it's

not it's not a theory or something that

I just read up somewhere just going to

make a read up and say okay I'm just

doing this because I want to grow my

channel now it's far from that I'm just

showing you this because I want you to

grow as a designer I want to see so many

good designers out there um I want to

see people make beautiful designs that's

the why I'm actually taking my time to

make this video because I've just been

trying to um I've tried so much to find

time to make this kind of video to show

um young designers how to structure

their portfolio probably maybe not just

for your designers but if you're also

working with a company this is also this

video will be very helpful for you

because because of uncertainty anything

can happen at any time so if you fall by

back to the job market you won't

struggle to get yourself into the next

company because most people when they

get a job they will forget to you know

build or they will just throw that aside

hey I'm no longer going to invest on

building portfolios or updating my

portfolios no that's one mistakes people

make the best time to actually start

building your portfolios when you

already in a job right because most time

times yeah we know that some clients

will not allow you to put their product

out there but you can actually work on

something and you know look at a

template that I'm going to show you then

use it as a guide to make yours and I'm

going to show you how you can do this

even even if you've not worked on a real

life project the portfolio itself

putting it up together takes me up to a

month but they hope process takes like

some took like almost two years because

there's a project that I actually worked

on for two years so I have to you

imagine when you compile your two years

journey into just one single case study

and that's like it's going to be long

but you just have to try as much as

possible to make it short because most

of the uh case studies that I have now

so many hiring managers might not have

the time to read because they already

going through tons of portfolios and all

that but you should actually find a way

to hit the points I went into details

almost all the things that I did on that

project I F I just found a way to

actually highlight that in my case study

so that is just what I did I actually

have four case studies on my portfolio

my behance portfolio so I'm going to

show you guys how I did this in figma

than how I actually um uploaded it on

beh hands I would advise you to have

your portfolio on be hands if you want

to do yours uh host yours as um a

private website you can do that but that

doesn't guarantee that you get a job or

that doesn't guarantee that you know

what you're doing but what actually

guarantees that you know what you're

doing is how you structure this

portfolio because a lot of people do the

portfolio do their portfolio um once

they finish the design they would just

put all the homework UPS there or and

that's just it no far from it it's just

too far from it that's just like you've

not done anything to be honest I'm not

just trying to discredit you but maybe

after this video you should go back and

redo some of those things if you really

want to start getting DMs like I do or

start getting calls because um some of

these messages like this

is something that I can actually

encourage you to um come up with a

beautiful case study to articulate how

you actually

achieved some of the things you did in

your design what was the thought process

what did you do different what how did

your thought influence some of the

designs you made this is what I did I

used

um this plugin mockup this is the plugin

that I used um

mockup

here look at it here mockup studio

moop studio this is the plugin you need

to download to get some of these things

so once you just download it you select

the frame

and place it on your file so here are

the case this this is what it looks

like and when you're designing please

make sure that the WID is up to 2,000 so

that it will be very readable make sure

that the weight is 2 th up to 2,000 my

is mine is

2,571 you can actually use this then if

you're using

2571 make sure your text is see this AIG

test is up to 28 with look at it here is

28 and the spacing is 43 so you can

actually use this to write your case

studies for the body text for the uh for

the heading I used 48 and for the soap I

used uh case study header 32 so this is

32 and 45 pixels um for the spacing so

here you will see the everything you saw

there was the so what you do is after

you finish designing this thing you just

select it and Export export one after

the other export them one by one select

this one export One By One The reason

why you have to break this you don't

have to make it so long so that it will

not when you make it that long figma

will start to drag if you're using maybe

16 gig ram or 8 gig ram it will start

dragging so just make sure you have it

cut broke like this I'm using M2 Chip

I'm using Mac Book

2022 and uh it doesn't drag to be honest

so it runs smoothly and uh here is the

personas that I that I did you see

everything is on auly out so I had to do

this and uh this is the this is how I

did

the

um the competitors research uh

analysis so this is what it looks like

so everything is just done in figma you

just do everything in figma the case

study and all those stuff nothing here

is screenshots that's why I had to take

my time to write it and design it one

after the other this case study even the

case study is not a screenshot is a raw

figma file that I designed it's not a

screenshot so here you would see the

Prototype this is just the screenshot

because I had

to do the Prototype snap this just

screenshot how this thing looks so here

you see this ability test and everything

that I did here is on figma this one I

did on figma too all the stuffs I did on

figma this also

so here is your before and after so you

will see how I actually designed this

and now if you want to do this without

any live projects the only thing you

have to do is to use my template another

way to go about it is use my template

and involve the help of

Charity what you're going to do to

actually uh

if you don't if you've not done this

project you can actually Design This and

test run it with maybe friends and let

them highlight some of the problems that

could be wrong with this design then you

go back and solve it the ones that you

used for the problem could be your

before and this one could be your after

right you are still testing it with the

end users now you just have to highlight

the problems they pointed out and the

solution you provided why did you design

this this way so it will actually give

you an idea of what real life user

testing looks like right so the same

thing with this ones just some part of

the app I would um advise you to make it

up to five or six right before and after

usability to study then use your friends

maybe 10 or five use them to actually um

use them to actually get in firstand

information about this let them be the

potential customers about this all the

steps that I've actually added here use

your friends to test it if you don't

have any any pro life project you're

working on just get few friends and let

them talk to you about some of the uh

some of the things they feel about is if

it's if it's going to be a if it's going

to be a fintech app or if it's going to

be any kind of app any form of app you

want to build just use few friends to

test it tell them make sure you inform

them so all these things you're going to

text on it with your friends that is the

way to that is another way you can

actually use build a case study like

this you shouldn't wait till you work

might don't tell yourself oh I've not

worked on any particular project I don't

have any project that I've worked on how

do I come up with a case study come up

with a business idea come up with a you

should provide yourself the brief right

is allowed because if you talking to the

uh the hand room manager you tell them

that oh this is not a live project this

is something that actually an idea that

I came up with just because I I wanted

to have something on my portfolio and I

had to actually test R this with my

friends right so this is something that

you need to do and tell them the outcome

what you did what you learned from the

whole stuff and how you conducted this

whole stuff don't lie about it that's

the worst thing you can actually do to

yourself because when you get into the

company you will be face you will face

the real stuff they will know that oh

you don't actually have a firsthand

experience about these stuff you might

not pass your three months probation you

might not make it to your six month

probation they just I've got I've

mentored some people that actually did

try to play fast one and at the end of

the day they couldn't even make it to

the first two months now you know the

secret of how you can actually go about

this even if

you even when you don't you've not done

the real project I'm going to also be

disclosing so many other secrets that

would help you as a new be or as a young

designer that is coming on board how you

can actually leverage on so many tools

or even chat JB how you can leverage on

it to land your first roow prepare

yourself very well so you don't settle

for less because a lot of guys out there

looking for who to use use don't fall

free because you're just starting people

would want to use you and be like oh you

just have to do this and at the end of

the day they will give you stend or tips

I've gotten a lot of designers that

comes to my DM to complain about this I

always tell them you just have to be

fairm if you know if you truly know this

because the problem is that a lot of

young designers like cutting Corners

don't cut corners please don't cut

Corners make sure to do the right thing

[Music]

[Music]

[Music]