An Outline for Your First UX Portfolio That Will Impress Anyone.
“I don’t have a portfolio,” “I’m working on it,” “I don’t like where it’s at,” or “don’t judge me, I’m going to redo it.” These are common responses when you ask someone about their UX design portfolio. Designers have long dreaded the portfolio, but portfolios remain the key to displaying one’s creative mind and setting themselves apart from other designers. One must be able to display their work, their style, and their storytelling to be understood.
Do not worry! You don’t have to dread building your first or maybe even your tenth portfolio, because I’m here to help guide you through it. We will be using what I have learned the past couple years from other designers and recruiters. As well as using techniques that have helped me land jobs and interviews as a junior. I’ve been through this all before and have helped other designers with questions about their portfolios time and time again — So hopefully many common questions and concerns can be answered.
We’ll talk about how a portfolio should be built, what should be included, and get specific into the basics of what recruiters and lead designers look for in portfolios.
But before we get into it, we will need to drop any ego or doubt that our work shouldn’t be displayed or is not good enough. All that needs to go. Because it’s time to build.
Just Do It ✅
You need a portfolio. It might be a “bad” portfolio. It might not be your best work, but like all career paths or even all the journeys in our lives, one must start somewhere. The first step has to be made. It might not be your greatest or most beautiful work, but you’ll keep updating it as you grow and your work will progress as will you.
“I can’t see a way through,” said the boy, “Can you see the next step?”… “just take that” said the horse. -The Boy, the Mole, the Fox and the Horse
Let’s get to the first step in our journey.
Don’t Be Picky with The Portfolio Website or Software Choice
A lot of people seem to get stuck at the beginning. Designers tend to ask: Where? Where do I build my portfolio? What site or software do I need to use?
It doesn’t matter.
If someone can access it through a secure internet link and the website loads. You are pretty much set.
Software:
Adobe’s MyPortfolio, Behance, WordPress, Dribble, Wix, Squarespace, uxfolio, & Drupal.
All these are options, some websites are free, others are paid. If you pay for an Adobe subscription then I highly recommend Adobe Portfolio which gives you a free myportfolio.com domain, a good looking portfolio template, and easy-to-use editing system. My first portfolio was on Behance, and now I’m able to connect it to my Adobe portfolio site.
Should I code it myself? Probably not if you’re strictly a designer. Unless you want to be a front-end developer, it does not make much sense to code it. If you know basic html/CSS, editing a responsive website template is always a cool option. You can find responsive templates on websites such as ColorLib where you can download and edit HTML. My first website domain had an edited template, but sometimes it is hard to maintain or make changes. So I would likely steer away unless you’re a developer.
Website 📱 or PDF Slide Deck 🛝 ?
This depends on what the employers you are applying for require. Slide decks are really good for presentations, but online portfolios are usually your best bet as it can be easily accessed online and recruiters can click around. Many employers screen that you have a relevant portfolio when you first apply and prefer you send them easy access to an online version.
PDF slide decks are never a bad thing. They can be a great way to organize and shorten down your work into simple slides. It is super convenient for walking a designer through your work during interviews.
Accessibility is Key 🔑
Make sure a recruiter could pull it up on their phone if they needed to, and make sure it looks good on all screen sizes and is accessible. Accessibility is a key part of UX design and your portfolio is no exception.
Website Layout
All sites are different, so I’ll give a very simple sitemap guide for a portfolio website (2–3 pages). Honestly all you really need is a portfolio page (with each project being another subpage) and an about page. Then you are about set, everything else is just additional or can be added as subpages to the about or portfolio page.
Portfolio Introduction 👋
How do you introduce yourself to people who are meeting you through your portfolio for the first time? Is your introduction going to be unique? Are you “finding creative solutions to complex problems,” or “bridging technology and design,” like everyone else? Or do you have a true statement and desire. Maybe you are a “UX Designer focusing on seamless interactions for consumer crypto and fintech apps?”
Your introduction can say a lot about you and especially show your UX writing skills. Many designers get this part wrong because they are too broad or too generic with who they are. Nobody wants a cookie-cutter designer. No one wants a designer who doesn’t know what they are about, what they love, or what they bring to the design world.
Be unique. Be creative. Be different. Tell your story.
UX is very much about truth & storytelling. So tell your story. Some ideas to think about are: What is your background? Why are you a UX Designer? What unique skills do you have? What industries or projects do you prefer? Where is your passion?
Be honest with who you are and what you know. Maybe you don’t know everything and that’s fine — but show you are taking the steps to learn and have a desire to know more. Recruiters are a sucker for somebody who wants to learn and is willing to learn.
About Me
Along with the portfolio introduction, create a little ‘about me,’ introduce yourself, your work experience, and hobbies. The basics, just so someone can get a feel for who you are quickly. Like everything, keep it short and sweet.
Pulling Together a Project 🙌
Projects are the main course of this “portfolio dinner.” It is arguably the most important part, and to have a nice meal what do you need?
Amazing ingredients 🍱
The deliverables are as good as the documentation.
Let us start by setting the table. Hopefully, as a designer you have some projects in your sleeve. And if not, no worries. There are many outstanding articles on different ideas for projects. Redesign a crappy website, work with a friend on a website or browser extension, build your own software or website involving your favorite hobby, volunteer, etc. Ideally get some group work under your belt that is done in a team environment (bootcamps, group college projects, past jobs, working with friends to help a client). Bring people to this dinner party, everyone knows how to have manners when eating alone. Coming together is a much different experience.
Team dynamics are super important for design storytelling.
When you are working on projects make sure you are doing what you learned about the UX Design process. Go through the full process. Research, Ideation, Prototyping, Testing, etc.
Document everything, always. ✏️
Document the disagreements, decisions, styles, and iterations. Everything. Always. You don’t need to use everything you document (and you should not), but I can not stress how helpful it is to pull from documentation when crafting a case study. Documentation is the ingredients you need for the meal. The more you have the more you can do and the tastier the meal. But be careful to not over or under-season it.
Put Together the Recipe 🧩
Just like putting together a recipe, putting together a solid and whole portfolio piece can be challenging. But the approaches are very much the same. Outline what you have, organize the ingredients, and start cooking. Then, once you get going it all becomes easier, and you see the bigger picture. From there it is just corrections.
A 1,000-piece puzzle can be intimidating, but people do them all the time. It is the same concept as a UX Portfolio, it’s intimidating to start. But to solve the puzzle — One has to start, and by the end, you feel accomplished.
“Just take this step…
The horizon will look after itself.”
Every project is different but I will share a solid “cookie-cutter” 🍪 outline for a hypothetical portfolio used by combining the outlines of some of my favorite design portfolios ranging from experienced design consultants to aerospace designers.
Obviously, we need to go beyond the cookie-cutter outline and make our work unique from others. But it is important we have a solid base of what should be shown in our projects.
Project Outline Template
Overview
Client, Role, Timeline/Duration, Team, Project Type, Tools Used.
This should be straightforward. Bonus points for creating a visually engaging header to interest the viewer right as they land on the project screen.
Example: Student Housing Website, Design Intern, 3 months
The Challenge or Problem
Keep the problem simple, under one sentence about what the problem is that you are solving for.
In this section, you can also mention Goals, Purpose, and Audience as relevant.
Example: Create an application to showcase and visualize the effects of carbon emissions to students.
Example: Redesign a website to increase the conversion rate of newly acquired customers.
Example: Improve the way information is distributed and reach a younger audience with the information.
Solution / Outcome
Brief summary of what you built as the solution to the problem.
Did you build a website, software, or app? Why is it unique and why is it the best solution?
How do you know the solution was successful? (What was the measure?)
Examples: Conversions increased, there were fewer customer service inquiries, or people were more engaged using educational software.
Show The Research / Design Process
Research, Ideation, Personas, User Journeys, Challenges.
Answer: WHY? All the time throughout the process, anyone can design something that looks nice, but why did you choose the idea? How did the feature you chose or the design choices your team made solve the problem at hand?
Remember that you are a storyteller. Craft a narrative with your process that will make you unique and give you character.
Usability Testing
How did users react to your design? What did you make note of? What did you change? Were there any struggles? Did someone else conduct the tests for you?
Feedback and user testing results are essential in UX Design. There should always be takeaways from testing even if you are not the one who conducted them.
Iteration (More Designs)
Show active changes and iterations. If you can, highlight and point them out visually and sum them up briefly. Maybe you started with a paper prototype, then a low-fidelity prototype, and a high-fidelity prototype, then tested it one more time and made final changes.
Show a Beautiful End Product
You are a designer, show a mocked-up deliverable of the final high-fidelity prototype if you have it. Research is important, and the process is important, but do not lose track of the visual look of the end product.
Reflection
Did you solve the problem? What would you do differently? What were the challenges? Why did this project even matter? Did you help the business? Did you help the users?
Show the audience or recruiters that you make meaningful experiences that drive change or give results to the client's wants and needs. Designing without reflecting on the process and outcomes is just mindless work.
That’s It!
You set up a website. You have a unique statement and an About Me section. Your portfolio has projects with the secret sauce of what should be included in each of your project’s stories. Clean it up with some visual design and some images and you got something to work with.
It’s time to feast, keep editing your site, and start applying for new jobs. Don’t compare yourself to people that have been editing their portfolios every week for years.
“What is the bravest thing you’ve ever said? asked the boy.
‘Help,’ said the horse.
‘Asking for help isn’t giving up,’ said the horse. ‘It’s refusing to give up.”
-The Boy, the Mole, the Fox and the Horse
Ask for help, ask for critiques, get users to test your portfolio, and see if the key points you want are coming across to the audience.
I had doubts myself about my first couple of portfolios, but I asked for help from design students, recruiters, senior designers, and even professors. I was told what was good and what was bad, I got great feedback and made iterative changes to how my portfolio looks, feels, and displays information.
Let’s get this great design work seen and heard.
Let’s get these portfolios live.
Feel free to share some helpful advice as well, and don’t be shy to put your portfolio link in the comments.
