13 min read
8 UX Portfolio Website Mistakes To Avoid
13 min read
13 min read
In your UX job search, time is not on your side. There’s zero room for error in your UX portfolio. Competition is fierce and recruiters and hiring managers have no tolerance for mistakes. This article will help you avoid making critical mistakes on your UX portfolio website that could result in recruiters and hiring managers saying “next” as they look at your work.
Contrary to what you may think, recruiters and hiring managers spend seconds on the initial pass as they vet your skills and experience. Your UX portfolio must stand out.
After reviewing thousands of UX portfolios, I realized many UX professionals do not consider the UX of their actual portfolio website. The irony is laughable, but the impact is certainly not.
Think about it for a second … what message are you sending if your UX portfolio website:
- Is not mobile responsive?
- Has a confusing navigation structure?
- Is not easily scannable or readable?
- Uses distracting animation?
- Does not keep the attention and interest of the user (eg. recruiters and hiring managers)?
When people visit your UX portfolio website, they’re not only evaluating the content of your portfolio, they’re also evaluating the UX of your portfolio.
If you want to stand out, you not only need to be good at what you do, you must also be skilled at articulating your work through well-written case studies and presenting them in a way that does not feel like a boring white-paper.
In this article, you will learn how to evaluate the UX of your portfolio website and avoid crucial mistakes that risk causing recruiters and hiring managers to move on to the next candidate before they ever go through all of your projects.
You must think of your UX portfolio as a content website
A content website is a large blog, magazine, or a news site. An example of a content website might be Vox, The Atlantic, or Apartment Therapy.
On a content website, the content is the product. A key goal of a content website is to get the user to spend as much time as possible on the website so that the company makes more money from advertising.
There are two factors to creating an effective content website:
- Well-written content.
- The visual presentation of that content.
Your UX portfolio has one job to do, give the user enough evidence of your skills that they invite you into their interview process. The content inside your portfolio website is crucial in communicating that you have the skills the company is looking for.
However, a well written UX case study means nothing if the user of your UX portfolio can’t quickly scan it and understand the gist of what you did. This is why you cannot ignore the UX of your portfolio website.
Now, if you’ve always worked on SaaS (software as a service) products, internal back office tools, or consumer apps, then you won’t have experience designing for the content sites.
Luckily for you, I have tons of experience designing for content sites. Over my career, I’ve worked on sites including Fatherly, Domino Magazine, The Bolde, SheKnows, Tribune Media, and more.
After designing literally hundreds of versions of article detail pages, image galleries, category pages, homepages, and more, I’m confident in saying that, you can trust me with my tips for designing your UX portfolio website.
When people visit your UX portfolio website, they’re not only evaluating the content of your portfolio, they’re also evaluating the UX of your portfolio.
But what if I’m not a visual designer?
Maybe you are a user researcher, information architect, UX writer, or focus more on the user-flows and journey and you don’t consider yourself a visual or interface designer.
Considering the UX of your UX portfolio is not about designing a Dribbble worthy website! We do not want the design of your portfolio to overshadow your work.
This article is for you, whether you’re:
- Working in UX and want to get that next job you’re eyeing.
- A recent graduate and want to get your first job.
- Not looking for a new position, but want to be ready in case an awesome opportunity lands in your inbox.
To ensure your UX portfolio effectively communicates your skills and experience, and does so in a way that’s scannable and engaging for the busy user (eg. recruiters and hiring managers) make sure you are not making these 8 big mistakes on your UX portfolio website.
1. Do not let the navigation send a confusing message to the user of your portfolio
When you put all your past experience in your portfolio, you are sending a confusing message. As the user of your UX portfolio, I don’t know which work I should focus on. And more importantly, I don’t know who you are as a designer.
When you fail to establish the hierarchy of your past work, you leave it up to me to decide what to click on … and I’ll likely make inaccurate assumptions about what type of role you want in the future.
Example, if you’re a branding designer or 3-D animator who is transitioning into UX, your past work should NOT be in the same hierarchy as your UX work.
In the example above, the navigation places equal weight on all of Jane’s past experience.
But as a reader, I have MANY questions! And it may raise a yellow flag for me depending on the type of designer I’m looking for.
→ Pro-tip: Don’t make recruiters think. Be specific about who you are and what you do. Make a clear distinction about your current focus and past relevant experience.
2. Do not jump into the details of the project without framing it with proper context
Chances are that you’ve been thinking about and working on some of the projects in your portfolio for months and quite possibly years. That’s awesome … but it also creates a HUGE problem.
Why? Because when you’ve been in the trenches of a project for a while, it’s hard to explain it to someone who is hearing about it for the first time. You have acronyms and internal project buzz-words baked into your vocabulary. When you talk about the project, you operate with all kinds of knowledge that someone hearing about the project for the first time is not privy to.
If you want to stand out as a designer, you should take the time to educate the user (ahem, recruiters and hiring managers) about the project a bit before you throw them into the deep end of your process and deliverables.
Giving the reader a quick primer about what the company was, the goal of the project, and any other pertinent information is going to help frame what you did, how you approached it, and your solution.
→ Pro-tip: Establishing context about each project will help the reader gain confidence that you understood the business problem and objective and seriously took that into consideration.
3. Do not include an image or graphic without appropriate explanation or context
When it comes to your UX portfolio, a picture is not worth a thousand words. You must explain each visual.
But you cannot rely on the built-in image caption features of a website to describe your image … it’s pretty much useless. Why? Because it’s normally TINY TEXT that’s a faint gray and placed below the image.
As a user, when I’m scrolling, I see an image and then what? I start looking at it, a ton of questions pop into my head … “is this the before version or after version of this homepage?”
This actually happened to me a few days ago when I was doing one of my 5-minute UX portfolio tear-downs. The caption was below the image and I had no clue it was what the designer had created or it was what they were trying to fix.
→ Pro-tip: Tell us what WHAT the image or visual is in a better position, and preferably at the top of or beside the image so that I do not miss it.
4. Do not shrink visuals and graphics to the point that they’re unrecognizable
Let’s not have the carousel debate here. But, after reviewing hundreds of UX portfolios, I continue to see many people inserting images of deliverables into the portfolio … but they are SO SMALL that I can’t decipher the deliverables.
You must operate with the assumption that people will NOT click the thumbnail to view it as a larger version.
And to be honest, it’s a webpage, so use the screen real estate to your advantage. Half the time it’s not even obvious that the little image is actually clickable unless my mouse is over top of it and I realize I can enlarge it.
→ Pro-tip: Make your images bigger. An image I can’t decipher is serving ZERO purposes in your portfolio.
5. Do not force people to read every word of your case study. Make sure it’s scannable.
As people are scrolling down your site, they will not read every single word. People SCAN. And this is why it’s CRUCIAL that you make your site scannable. What does that mean?
Well, it goes back to the content. As someone scans your website, you want to give them the “gist” of the project with reading every word.
Imagine a recruiter is viewing Jane’s page about a project she worked on. And the recruiter is now at the section about the user research Jane did …
See the difference? One is easy to scan. One is not. Practically, you should definitely make use of HEADLINES –– exactly how I am doing in this article you are reading. If you didn’t read each paragraph, you’d still get the gist of this.
Other strategies to make your text readable include:
- Headlines
- Bullets
- Short paragraphs
- Bolding important words
→ Pro-tip: Design your website and write the content with the assumption that people are only going to read the headlines.
6. Do not show deliverables without also showing how you arrived at the solution.
The other day I saw a portfolio that had a ton of deliverables in it. It was very visual, which is nice because I just told you that people don’t read very much, they scan.
But here’s the problem, when you just show me a wireframe … I think to myself “ok, this person can make wireframes”. And that’s it. And sure, wireframes might be part of the role. But, what will make you stand out as a mature, thoughtful designer, is if you not only show me the deliverable but tell me what’s going on.
If you were presenting wireframes to a stakeholder or client for the first time, you wouldn’t just email the wireframes with no explanation (at least I sure hope not).
What you would do, if you’re a thoughtful designer, is provide some context. You’d set the stage, you’d remind them of the scenario, and key traits of the user. You’d inform them about the problem so that your solution (in this case, a wireframe) had context.
So please, do NOT just show me your wireframe, user flow, or pretty UI for a search results page.
→ Pro-tip: A deliverable without a story only tells someone that you can draw things on a screen. What you want, is to show people that you know how to think like a designer.
A well-written UX case study means nothing if the user of your UX portfolio can’t quickly scan it and understand the gist of what you did.
7. Do not insert images of slides Keynote / PPT directly onto your website
I’ve literally seen UX portfolio websites where people simply took the exact slides from a Keynote or PPT presentation or project and inserted them as images, one after another after another, on their website.
The problem, it’s a HORRIBLE user experience. I can’t read the slides because you shrunk the image down so small. And also, it kind of feels a bit lazy … why didn’t you take the time to consider how that content could be presented in the context of a web page?
Further, even if I could read the slide, what value is it adding? Is it good content? Because a lot of times, that presentation you made was something you presented — and that’s a different user experience than if someone is looking at that slide all alone, without you telling them about it.
→ Pro-tip: The content you include in your portfolio must be re-worked to suit the medium that you make your portfolio in. You can do better than putting images of Keynote slides onto a webpage.
8. Do not use excessive animation.
Just because the website or portfolio builder you use has animation, does NOT mean you should use animation. The animation should serve a purpose.
If every single image on the page slides or bounces in, it’s distracting. And for some people, it’s dizzying. I actually get motion sickness quite easily and if there’s video or animation automatically floating / dancing around the screen … I’m out. Focus group of one here, but I know I’m not alone.
Unless you are positioning yourself as a UI designer and you’re trying to showcase your design and possibly coding skills, then think twice before you insert fancy animations.
→ Pro-tip: Great designers can justify their design decisions. Force yourself to JUSTIFY the reason why you’re adding the animation in the first place.
Don’t make user of your UX portfolio work to consume the content in your portfolio.
Recruiters and hiring managers are busy. They do not have time to read every word. They skim, scan, and scroll. It’s up to you to layout your content in a way that’s easy, and fast for them to consume. Even if you are not a visual designer, you can still create a portfolio that’s easy to consume. This isn’t about visual design. It’s about knowing how to layout your content in a smart and effective away.
To recap, here are the 8 mistakes you don’t want to make on your UX portfolio website:
- Do not let the navigation send a confusing message.
- Do not jump into project details without first framing the project and problem
- Do not include an image or graphic without the appropriate explanation or context
- Do not shrink visuals and graphics to the point that they are unrecognizable
- Do not insert slides from a Keynote / PPT directly
- Do not show deliverables without also discussing the process
- Do not insert screenshots of a Keynote or PPT directly into your website
- Do not use excessive animation
A free template for your UX portfolio website
Ok, now I’m all about helping you take ACTION. Theory is nice, but if you can’t take action then I haven’t done my job!
So if you’re looking for a UX portfolio template for your website, then you might be interested in this UX portfolio template I created for Wix. However, to use this template correctly, you MUST understand the strategy behind it. There are specific reasons why I designed it the way I did. So have a watch here and then grab the website template.
