How to Make a Product Design Portfolio that Gets You Hired

What are today’s companies looking for when hiring a product designer? Yes, your ability to create bespoke experiences and interfaces is one portion. But there’s another level to the portfolios that make it in front of large technology firms like Google or the hiring managers and heads of product at startups with stringent requirements. They’re looking for some specific things in your portfolio, and I’m going to share some tips to make sure yours gets their attention. What we’re going to talk about here is not a guide about how to design — you probably already know how to do that. Instead, coming your way are strategic checkpoints to help you make sure your portfolio converts.

This calls for a party!

I’ve been at this full-time freelance product design thing for a decade now and counting, working with megastar companies you know well and some starlets yet to make their debut. The feedback I’ve received over the years has been revealing, and I want to share some of the most helpful anecdotes with you. Even though my experience is in greater part freelance product design, these patterns may well apply to product designers seeking full-time work too. Get ready — cue the bass drop.

Before we go in…you know the basics, right?

Think of this as your portfolio pre-game — a quick check in to make sure you’ve got your first impressions down.

You tackled your site like an actual design piece

No templates and no excuses allowed. Your website is your first impression of you, so it goes without saying you have to treat it with great priority. Your product design portfolio should be a unique experience. As prospective clients look through it, they’ll be assessing your user experience and user interface sensibilities. Even if you’re not going for a visual design position, design fundamentals like hierarchy, negative space and typography are still important. You’re booted from the outset if visitors are turned off from even wanting to browse your site. Which plays into this next thing: navigation.

Your site is easy to navigate

You’ve got to get people past the first screen. Which means now is not the time to pull any tricks with the navigation. Clearly labeled pages that are easy to access win every time. Sure, those slick sites that change the cursor to another object may look progressive, but functionally, they sometimes work more like annoying bouncers that promptly escort users off site. Your navigation doesn’t have to be boring, but it shouldn’t disqualify you either. So if you’re pushing the limits, make sure it’s with finesse.

Your basic information is there, and it’s in the right place

I once missed a huge opportunity. And it happened because I ignored this basic tenet. If your contact information includes a laundry list of social profiles and ways to connect, and you aren’t checking all of them regularly, change that — stat. Trust me. Stick to the basics: What do you do and how can someone get in touch with you? These are questions #1 and #2 for hiring managers and headhunters. Make sure this information is front and center, and make sure you will get and answer their messages. Your skills let them know they’ve come to the right place, and your contact information is a tacit call to action. Give them the information they’re looking for without making them work for it.

You left out anything super personal or gimmicky

Go ahead and list your personal and professional interests. If it paints a fuller picture, you might even add info about your spouse, or that you have kids or pets. But when it comes to more personal info like your age, height, religion, or birthday? Table that. Those things are perplexing non-starters or even a potential liability if you’re seeking a full-time product design position. Paint the picture of who you are using your education, process and interests. Oh, and a little tip, when it comes to showing your expertise in software, skip the stars or sliders. Those are gimmicks predicated on template culture.

You’re showing a mix of projects

This is especially true if you’re interested in casting a wide net. Your visitors won’t necessarily assume you can do a type of work if they don’t see it on your site. So be inclusive. Add apps, websites, and even IoT interfaces. And keep in mind, your visitors will assume that you like working on (or at least want to work on) the touchpoints and verticals you show in your product design portfolio. We’ll talk about this in a little more detail below.

Lookin’ sharp? Cool. Now that the basics are covered, let’s move on.

1: Present real projects

Fictitious apps or products have their place. And if you’re a design student or recently graduated it’s expected you’ll have at least a couple of them in your portfolio. The problem is however, hiring managers and companies can’t get a sense of how you solve real-world UX problems. Make-believe apps usually only focus on surface-level visual design, or they lack requirements that real projects must account for.

To put a sharper point on things, you’ll be hired based on what’s in your portfolio. You can be incredibly accomplished in every part of the design stack, and yet, a prospective client who doesn’t see the type of work in your portfolio that resembles the service or product vertical they operate in will usually pass over you (although hiring managers and companies looking to hire full-time workers are typically better at reading in between the lines.)

Accordingly, if you don’t like working on a certain type of project, don’t send the wrong signal by putting those things in your portfolio. You are almost guaranteed to be scouted based on the type of work you show. Hate e-commerce? Don’t show it. Bored to death of healthcare work? Keep those pieces off of your site. If you need a couple more real projects in your portfolio, here are some ways to generate tactile product design work. Like, quick-fast.

How to generate real portfolio projects

• Participate in a hackathon. Hackathons are great to pump out real work, as they are usually sprints that last only a few days. They’re typically for good causes too. A regular Google search will turn up results. You can also check sites like Eventbrite for hackathons near you.
• Design an event microsite. These types of sites have a fast turnaround and tend to provide great design flexibility. Local annual events might be a good place to start.
• Iterate on the UX or UI in an app that you’ve experienced a problem with. This is just short of a client project, but it’s a start if you’re in a pinch and want to start working immediately. Pick an app or website from an industry you’d want to do more work in.

When NDAs keep your work under wraps

Most companies want to see your design chops before they hire you. At the same time, as you probably know, not every project can be shared publicly. This presents the classic chicken-egg problem. While some clients and contracts allow you to share the work in a semi-private manner, like via email directly with someone, other times it’s a no-go entirely. Here are a couple possible solutions to help enable you to show the work you’ve done. Keep in mind, these are ideas that may not be suitable in every situation. Always adhere to the terms in your contract.

• Abstract the client and project. Let’s say you helped Target with UX in their mobile app, but you don’t have permission to use their name. You might say something like “I helped an S&P 500 retailer iterate on…” You can also remove or recreate identifying logos. Replace key text and information with new text you’re written, or even “lorem ipsum.” Replace all the images with stock images. Even updating the color palette to change things up might make it OK to show.
• Get express permission. Contracts can be tricky. If you’re simply not sure what your contract will allow you to show, draft up what you want to display and send a copy to your client to get their express permission. This way there won’t be any confusion, and your client will thank you for checking with them first.

2: Tell the project story

What does the product or service you were working on do? Who was it for, what challenges did you solve, and what did you learn? This is why step 1 is so important. Product design portfolios that convert tell the story of a project and present work in case study format, not just glossy screenshots.

Write your case study before you design it. I know, I know, writing is hard, but it’s not an insurmountable task, and you can always get a little help if you need it. Include approximately three long case studies, or up to five medium length ones. The longer it is, the fewer you need to show. But don’t make it needlessly long…stick to what matters. Start with an outline, like below.

Case study writing outline

• The basic details. Client name, project name, project year
• The value proposition. What does the company, client, product, and/or service do? Before I started showing my work in case study format, I found this to be a common question. The takeaway for viewers is that if you have trouble expressing this, you almost certainly haven’t done a good job of solving the UX challenges.
• The role you played. Did you do UX, UI, interaction design, etc.? List the role you served. If other UX or UI peers were involved, hiring managers will be looking to understand your contribution specifically. Don’t over-inflate this.
• The software you used. Feel free to stick to the major software. This helps give the viewer an idea about the primary role you played in executing the project.
• The platform. Is it for iOS or Android? Is it native app or a web app?
• An informative headline. No doubt you want to include the client name, but that shouldn’t be the only way to lead a viewer into the work. You’ve probably done some impressive work for companies or startups that aren’t household names, so identifying them in a more informative way can be helpful. For example, “A New User Experience for Oklahoma’s Oldest Financial Institution” is insanely more engaging than “Client ABC” alone.
• Noteworthy product screens and features. For major product screens and features that you want to include, write about their function and the UX and UI solutions you implemented. If you were iterating on an existing app or website, include the issues the user experience had that your solutions addressed.
• Hard results. This information can be a challenge to get a hold of, but if you do it will certainly help. Did your user experience know-how help increase subscriptions by a tangible amount, for example? Talk about it.
• The lessons you learned. Most projects don’t go perfectly, and that’s OK. Maybe you made a big oversight in a UX flow, but you corrected it in short order. Or maybe the takeaway is you learned what not to do. Whatever the case, hiring managers want to see how you grew as a result of a project and how you handle yourself when things get sticky.

3: You’ve told the story. Here’s how to show it.

You’ve done the telling; now it’s time for the show. How do you display visuals of the work you’ve described? There are no hard and fast rules here, and you probably have many ideas already. You can include things like image galleries, tabs, carousels, etc., but oftentimes a simple design that utilizes conventional design principles gets the job done just as well. Outside of that, here are a few tips.

• Beware of isometric format. Something I’ve seen that does a website no favors is showing screens that need to be viewed in detail in isometric format — an isometric view usually works best as a general design treatment. Clearly display the work with large screenshots so viewers can see your brilliant work.
• Iterations. Aside from wireframes, for a particular feature or interaction you can also include screenshots of past iterations that led up to your result.
• Effective linking. If your project section is multiple pages, hiring managers really like when each project page links to the next to make it easy to navigate. Plus, this is simply good user experience. Additionally, link to the live app or website for each project where possible. If you can’t do that, try linking to the prototype.

Accessibility vibes

Accessibility. It’s a big word these days. If your portfolio sends the message that it’s open to all, great. If it doesn’t meet accessibility guidelines, it probably won’t keep you from landing the position or project you want. But going forward, it’s good practice to get in the habit of incorporating new standards as the industry evolves. As you read this, I’m in the process of updating my own portfolio to ensure color contrast meets accessibility standards.

Making an experience totally compliant can be daunting, and it might be unrealistic if you’re new to things (guilty). But for starters, go for the low hanging fruit, like being mindful of color and text contrast. That can give you an edge over other UX designers. A headhunter might not be quick to notice, but a head of product at a startup may. Learn more at ​w3.org​, and in the meantime, here are a few color contrast checkers to “check” out (see what I did there?).

Color contrast checkers

• Web AIM. It’s not beautiful, but it’s dead simple to use. It even gives you compliance results for graphic objects and interface components.
• Accessible Color Generator. This tool helps you find compliant color combinations closest to a defined set of hues. How handy is that?
• Coolors. If you’re looking for something a bit more comprehensive, this is the place. Generate entire color palettes, then head over to the contrast checker to make out compliance.

Alright, let me put a bow on things

(After all, it’s a wrap.) Between this and my last couple articles, “A Decade of Lessons from a Freelance Product Designer” and “Want to Transition to Freelance Product Design? Here’s How,” I hope you’ve gained a wealth of tips to help jumpstart your product design career. But if there are other topics that would help you out, I’m happy to keep the conversation going — find me on Twitter — @jon_patterson and name your topic. I’ll do my best to take it on. And if these articles can help anyone else you know, please share them. It’s been a pleasure sharing my experience with you. Good luck, and see you out there!

Follow me on Twitter
Connect with me on LinkedIn
Visit my website: Jonathan Patterson