15 Tips for an Awesome UX Design Portfolio

Having an awesome UX design portfolio is one of the key steps to landing that next job, freelance gig, or otherwise building your career. Having interviewed a number of UX & web design candidates, I’ve seen both good and bad portfolios. In many cases a poor portfolio kept the candidate from getting an interview. It’s best to take a step back, simplify things and make sure you’ve got a strong portfolio. Here are 15 tips to help make your UX design portfolio shine!

1. Finding UX Design Portfolio Content

The first thing you’ll need to do is round up some content. If you’ve got a decent amount of work, I’d start a quick list to inventory it all. Just note the project name and then the materials you have to support it (e.g. wireframes, live website, sketches, research, etc). Then you can use this list to figure out what should be included on your site and what content you’ll have go out and gather.

2. What to Do If You Don’t Have Much Content

Many designers are either just starting out or are transitioning from another role into a UX design role. In these situations it’s up to you to start creating some content. If you want to be a great designer, this is how you separate yourself from the pack. Seek out any opportunity to build up your work experience and you’ll quickly build a portfolio and improve your design skills.

Here are some ways you can build up your body of work:

Ask your friends & family if they need some design work done (for free or paid).

Reach out to local businesses and offer your design services.

Find a company you like and redesign their site. Nobody is paying or asking you to do this, but it sharpens your skills & gives you design parameters to work within that relate to the real world. Do this for companies within the industry you want to work and make sure to mention on your portfolio that it wasn’t commissioned.

Create a side project. Do you have a hobby, a tool you wished that existed, or a business idea? Create the site or at least the design for it.

Track your work. As you design, keep track of all your assets along the way. If you sketch something, take a photo of it. Take the time to wireframe, site map, chart, or otherwise document your process. These assets look great in your portfolio.

3. Content Permissions

A password protected portfolio from Hanna Jung.

It’s possible that you can’t show some of your past work if it’s not public. In these cases you’ll either want to have a hidden or password protected section of your site, or just create a PDF for those work samples. Add a note to your public portfolio to let prospective employers know to contact you for access to more samples. I’ve seen cases where a person’s portfolio is entirely private and if it’s easy to request access I don’t think this is an issue.

4. Consider Your Users

Being a UX designer is all about considering the user, so it makes sense that a UX design portfolio should do the same. If you’re applying for jobs, put yourself in their shoes. They’re likely clicking over from your resume and looking to see if you’re a fit for the position. They’re probably doing this for a bunch of candidates so you want to make it quick and easy for them. Some may just be scanning very quickly to get a yes or no feel. Others may be at their desk before going to interview you and more closely looking over your work.

If you’re freelancing, show variety and confidence. Your prospective clients are trying to envision how your design style might work for their project.

5. Select Only the Best

‘Selected’ Case Studies from Meagan Fisher

It’s tempting to put up a ton of work, but you probably shouldn’t. If you’ve got a ton of high-profile clients, maybe you want to show a lot of that work, but in most cases people won’t look at everything.

You may have 20 sites you’ve built but if an employer only looks at 1 to 5 do you really want them looking at that site from school 5 years ago? To show that you’ve done a lot of work, just put title and description on the page telling them that. For example: “Selected Work – I’ve designed over 30 websites & apps in industries ranging from social networking to e-commerce. I’ve included a selection of that work below that I felt highlighted some of my best work.”

You could also have a section of client logos to show the breadth of projects without having a case study for each one.

6. Show the Type of Work You Want

If you’re narrowing down a selection of your work (or building up new work for a portfolio), choose the work that aligns with the jobs you want. Prospective employers & clients want to know that you can understand and solve their problems. If you want to design flashy websites or enterprise software, make sure you’re work showcases that. If you’d like to move to a new focus try creating that work on your own (check out step 2) and add it to your portfolio. This is how you can begin a transition between job roles (graphic designer, web designer, UX designer, interaction designer, UI developer, etc).

7. Using Variety

While you want to stick to the areas you want to work in, it doesn’t hurt to mix things up just a bit. Consider the order you’re presenting your work in. You may want to put what you’d consider your best or most recent work at the top. But you may also want to mix it up a bit. If you want more work variety and your most recent 3 projects have been real estate, maybe mix in a different type of project to show your range.

Also consider the type of examples you have within each project. If you’ve got one desktop web app, maybe you want to follow it up with a mobile app example.

8. Show Your Process

Jason Wu showing his design process

An important key to a great UX design portfolio is showing your process. Again, consider your user here. If you’re trying to pitch a freelance client, maybe it’s best to only show a few process documents, but showing a pretty picture isn’t that helpful for an employer. They want to understand how you got to your solution, how you worked with a team, and what tools & skills you used. If a designer told me they just went into a dark room with Photoshop and magically this awesome design appeared, I’d be worried about how they’d work in my UX team. Make sure you’re doing good work at every step and document the process along the way as you build each new project.

9. Make the Story Compelling

Circlebox explains the problem at the top of their case studies

In a UX design portfolio you want to have a narrative. Tell the story of how you created a successful project.

Consider questions like:

What was the problem and who was the user?

Where did you start and what did the process look like?

Who else was involved?

How did you work with the team?

What was challenging? Why was it a success?

If you’re a freelancer or agency you probably want to focus on how you made the process easy for the client. What technical hurdles you overcame and how successful the project was. If you’re seeking employment, communicate how you fit within a team and what skills you bring to the table. As a hiring manager, I’m looking for a mix of teamwork, problem solving, and knowledge of the UX process.

Finally, once you’ve detailed the process, go in and edit your content. Check for spelling and grammar issues. Remove sentences that are fluff. Let your images be the main attraction and only include the most important details in the descriptions.

Try writing sentences that clearly state the problem, process & tool, and result. For example: “Our users complained about the website being tough to use. I conducted remote usability testing with our lead UX researcher and we discovered that our navigation wasn’t intuitive. I setup a card sorting activity using OptimalSort and found that our internal categories were unclear to our users. After reorganizing the navigation we found our support issues around navigation went down by 80%.” This shows a story and some key points, or if you really want to focus on the imagery and hit only the key points this might just be: “I used OptimalSort to run a card sort and improve our site’s navigation. This lowered navigation support issues by 80%.”

10. Use Testimonials

Kyle Meyer uses industry quotes for an app he designed

If you’ve got the opportunity to get some testimonials from people you worked with it’ll really make your portfolio stand out. I’d only use them if they’re really impactful and to the point. You want testimonials that point to either the success of the project or what you did to go above and beyond your normal work.

11. Use a Simple Portfolio Interface

If you’re a designer and a web geek it can be pretty tempting to use some fancy design or technology to build your portfolio. Generally, this is a bad idea. Often what you’ll end up with is a beautiful looking page with terrible usability. You can make your page stand out by having awesome visuals, but be very careful with your navigation.

In a gallery your work samples are the most important thing here, and I’ve seen some amazing designers who have the simplest sites. Some even just have a single profile page with links to their full portfolio on Dribbble or Behance.

12. Sell Yourself – Branding & Tagline

Lumen Bigott has a nicely designed, consistent logo in her header

When building a portfolio site it’s important to consider your brand, just like you would when marketing a company. If you can create a nice logo (maybe even just your name) it gives a cohesive feel to your site.

You might also want to consider using a tag line or having a short intro to your portfolio. Consider why you’re in this field (e.g. helping people use technology, bringing beauty to applications, building startups that are impactful). Then try and communicate what you do and what makes you unique. Keep it short. Are you a great researcher? A expert at simplifying the complex? Great at branding and design? Experienced in testing with users? Communicate that message.

13. Control Your Image

Consider linking up your social media profiles that are work related (LinkedIn, Dribbble, Behance, etc). If you’re using services like Twitter, Facebook, or Instagram take a look at your profile and see what sort of image you’re presenting. It’s really common for people to google you in this process. While I think it’s good to be honest about who you are, you don’t want those party photos from college taken out of context.

14. Have a Call to Action

Andrei Korytsev has a large call to action at the bottom of his site

Make sure to have a call to action or easy contact information on your site. If you’re doing freelance work, consider having a link or button prompting people to contact you about their project. If you want to make it easy for recruiters or managers to contact you it can be as simple as having a “contact me” link.

15. Keep It Updated

As you build new sites and do more great work, try to keep your portfolio updated. You never know when the next great opportunity will come, and you want to put your best work forward for consideration. It also makes it a lot easier the next time you want to jump on an opportunity if you can just focus on applying instead of rushing to update your portfolio.

Getting a Portfolio Setup

There are a bunch of different ways to get going with a portfolio if you don’t have one yet. If you’re not very web savvy (as far as coding goes) you could simply setup a Behance or Dribbble page to get started quickly. Often you’ll see designers setting up a single page linking to these profiles (you can use about.me to do this or build it in WordPress).

Best UX Portfolio Examples

Here’s a handful of the best UX portfolios that I found with some exceptional work. Check these out to get some inspiration for building your portfolio.

Andrei Korytsev

Andre Korytsev links out to Dribbble for his portfolio, but has a great landing page that briefly explains the work he does and the challenges he faces.

Lumen Bigott

Lumen Bigott does an excellent job of showing a variety of work samples and including brief copy to explain them. She also has great branding & some co-worker quotes on her about page.

Circlebox

Circlebox does a great job of outlining the challenge and tools used on a project. They also have some nice quotes and calls to action.

Gene Ross

Gene Ross has a really great example of a simple portfolio landing page. He’s got a clear call to action (“Let’s build something”), a brief description of what he does, and some links to his design & social profiles.

Axel Gillino

Axel Gillino’s portfolio also links out to his work on both Behance and Dribbble, but he’s added a few more details including his skills, awards, clients, and a longer personal description.

Kyle Meyer

Kyle Meyer has a portfolio that is all about the images. It features little detail but the images speak for themselves in both his portfolio and blog. His about page is simple and to the point.

Meagan Fisher

Meagan Fisher’s portfolio has a really fun logo and great tagline. It has a really unique design, wonderful work samples and great descriptions.

Jason Wu

Jason Wu has a unique blog-style portfolio that does a great job showing a view of his complete process and work within teams.

Hanna Jung

Hanna Jung’s portfolio features beautiful images, describes each project, and shows process documents on the way toward the final product.

Janna Hagan

Jana Hagan has a lovely portfolio with great details about her services, work process, and client quotes. Her work samples focus on the images and provide brief descriptions of the work performed. She also uses some Gifs which are a nice touch.

I’m not a lawyer so I wouldn’t consider this legal advice… but as long as you’re stating on there that you’re doing the design work as a mockup/concept that isn’t affiliated with Netflix and you’re not trying to sell or make money from it in anyway it shouldn’t be an issue. In those cases you’re creating a piece of artwork rather than profiting from their brand. For example this guy’s really great MS rebrand: http://www.minimallyminimal.com/blog/2012/7/3/the-next-microsoft.html