The UX of your UX portfolio website matters, big time.
------------------------------------------------------

After reviewing over 100 UX portfolios in the past year, I realized that many UX designers struggle to create a portfolio website that has … well, a good UX. It’s ironic. But, I can see how this happens.

A portfolio website is a _content_ website. And designing a content website may be new to you if you’ve been working on SaaS products, internal tools, or other products that are not “content sites”.

When it comes to creating your own website, you struggle because you don’t have months or years of experience thinking about content websites, playing with different layouts, understanding how to make it scannable, and considering the behavior of the user on a content website.

It’s also important to acknowledge that perhaps you aren’t always the on the actual interface or visual design side of UX. Maybe you’re a user researcher or an information architect and creating the actual wireframes or visual design isn’t something you normally do.

Whatever the case, I wrote this 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.

So before you spend another long night working on your UX portfolio, read the rest of this article to make sure you are not making these 8 UX mistakes on your UX portfolio website.

Ok, let’s dive into the UX mistakes you don’t want to make …

### 1\. You’re using excessive animation.

Just because the website or portfolio builder you use has animation, does NOT mean you should use animation. Animation should [serve a purpose](https://uxdesign.cc/ui-animation-please-use-responsibly-e707dbdb12d5).

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.

### 2\. The hierarchy of your past experience sends a confusing message to the user (recruiters).

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.

![](https://hackernoon.com/hn-images/1*olLb7N4fk8lbc64H1e8CPA.png)

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 clear distinction about your current focus and past relevant experience.

### **3\. Inserting images of slides Keynote / PPT directly onto your website is a terrible UX.**

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 to 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.

### 4\. A complete lack of context about each project.

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.

### **5\. Small text below an image is NOT a sufficient caption, and is frankly, useless.**

When you _only_ 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](https://www.facebook.com/uxnotebook/videos/1878510262170329/). 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.

Let’s see this in action …

![](https://hackernoon.com/hn-images/1*7Y7huHMByQibO-MM0wxYHQ.png)

> Pro-tip: Tell us what WHAT the image or visual is in a better position, and preferaby at the top of or beside the image so that I do not miss it.

### 6\. Don’t make it difficult for me to actually SEE the visuals and images in your portfolio.

Let’s not have the [carousel debate](https://www.uxpin.com/studio/blog/rotating-carousels-4-alternatives-drive-sales/) 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 purpose in your portfolio.

### **7\. Your website does not pass the “scan-ability test”.**

I have no idea if there’s such thing as a “scan-ability test” –– it’s a concept … but as people are scrolling down your site, they are probably not reading 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 …

![](https://hackernoon.com/hn-images/1*TNXalz2khc1jlT1dqi1HPg.png)

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 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._

### **8\. Don’t show deliverables on a page without telling the story.**

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.

### The strategy behind 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](http://bit.ly/wixportfoliotemplate) 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](http://bit.ly/wixportfoliotemplate).

![](https://i.ytimg.com/vi/MsmcSClGrZo/hqdefault.jpg)

### Parting words of advice about your UX portfolio website

It should go without saying, but before you start working on your UX portfolio you should treat it like a real UX project. Don’t jump right to the design phase. Just like any other project, there is a user, and you should do research and consider the needs of the “user” of your UX portfolio.

And don’t forget to make a project plan. Because if you don’t, this will turn into a project that you’re working on 5 months from now. But if you treat it like a real project, with deadlines, and process, it’ll be a lot more manageable.

I truly hope this helps you create a UX portfolio that helps you now and in your career for years to come!

### **Want more of my actionable tips about how you can create a UX portfolio that gets results?**

I’ve helped hundreds of UX folks and some of them have been hired at Google, GM Financial, Tableau, Deloitte, Salesforce, Wal-Mart Labs, and more!

**There are 2 ways I can help you with your UX career …**

1️⃣ [**Get your free UX Portfolio Blueprint**](https://www.uxportfolioformula.com/ux-portfolio-blueprint?utm_source=medium&utm_campaign=8-mistakes-portfolio-website) which includes a step-by-step action plan for how to write about your projects and showcase your skills.

2️⃣ [**Join the UX Portfolio & Careers tribe on Facebook**](http://bit.ly/uxpf-organic-fb-group-link) to get support, advice, and accountability as you create your UX portfolio.

[![](https://hackernoon.com/hn-images/1*uveB9FRZ797K5h4ft8TuSA.png)](https://www.uxportfolioformula.com/ux-portfolio-blueprint?utm_source=medium&utm_campaign=8-mistakes-portfolio-website)

Flow

Facebook

Google

8 UX Mistakes To Avoid On Your UX Portfolio Website

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@sarahdoody

RELATED STORIES