How to create a compelling design portfolio companies will notice
I’m standing in my kitchen writing this as my twin toddlers run around me. They’re both yelling at each other, hoping the other one will drop the TV remote I just handed them, with the movie Moana blaring in the background. Yes, my twins are cute. No, you can’t have them — they’re mine. My writing of this article is likely to be the most difficult I’ve ever written — I’m not even caffeinated yet. It’s also the most important article you’ll read on your job hunt as a product designer, as it can help you land your next big gig.
Overview
The following twenty million paragraphs is a brain dump of everything I know about creating a compelling product design portfolio website. I’ll answer the most common questions I get, give you helpful tips, and share my painful learnings. While this framework is about product design portfolios, many of these guidelines apply to other design disciplines.
One thing to note; when I refer to “companies,” I’m referring to people. These are the recruiters, CEOs, VPs, directors, managers, and googly-eyed senior designers who will review your portfolio. It’s good to know this audience because your portfolio must appeal to real people and not some omnipotent company with no human qualities. They’re people just like you and me. So, anywho, I’ll refer to them as “companies” for the remainder of this article.
Companies will be more likely to notice you if you take the time and care to implement this framework into your portfolio. The one favor I ask of you is to be patient. Even if your portfolio meets all of the benchmarks outlined in this article, there’s still no guarantee that you’ll be successful at first. Still, I believe in your ability to persevere, and you’ll eventually land your dream job in due time. I’m the best motivational speaker — just the…
“Twins! Get off the counter, right this instant!” — Ok, now where were we?
Your Portfolio is a Greatest Hits Album
Your portfolio is a modern-day mixtape, or album, if you will. It’s a showcase of your greatest hits and entices companies to contact you. It’s catchy and becomes stuck in people’s heads, like an earworm — mmm bop, bop bop, mmm bop. The hook you’re creating with your portfolio doesn’t happen by accident. It’s an outcome of your hard work and ability to craft unforgettable melodies and harmonies as a musician. Whoops — I mean designer.
The investment you place in your portfolio can set you up for long-term success but is not the single thing that will make you successful. I’ll abandon the music metaphor for a food one instead (because I’m hungry). Your portfolio is only one piece of the proverbial pizza pie. It may get you an interview with your dream employer, but it is ultimately not the only factor they consider when hiring you. In later articles, we’ll discuss interviewing techniques. For now, we’ll stick with portfolio advice.
Let’s move back to the “greatest hits” metaphor (I just ate a snack). A compilation of the greatest hits isn’t something musicians can create without a robust discography of songs. They must write many albums full of mediocre songs before they’ve written enough hits to create a compilation. This rigor is also true for design portfolios. Simply put, it takes tons of pre-work on mediocre projects to make a compelling portfolio of your greatest hits.
Students, your schooling will include many mediocre fictional design projects. Your primary goal over the next 4+ years is to collect as many projects as you can over that time because, at the end of your schooling, you will need a portfolio. Enroll in as many internships as you can. Collect your greatest hits beginning on day one. You can still create a standout portfolio of your student and intern work. Just know that you should update your portfolio over time to include more real-world projects over student ones. Your success will be measured by your business impact and not so much on personal learnings as you progress.
You Have Thirty Seconds to Impress
There are millions of designers globally, many of which are applying for the same jobs as you. Companies are sifting through hundreds of portfolios from prospective applicants for any given role. You must capture their attention as quickly as possible; otherwise, they’ll toss your portfolio aside and continue scrolling down the internet rabbit hole. I said you have 30 seconds to impress — the reality is you have less time than that. Make your landing page unforgettable by investing in engaging narration, visual impact, and high-quality craftsmanship.
We’re designers, and one of our superpowers is visual storytelling. You should aim to say less and instead show more of your work. Designs should speak for themselves as much as possible. Create beautiful hero images to draw people’s attention and use supporting imagery to back up your narration: share prototypes, graphs, and other visual awesomeness you have in your archive. Only include visuals that strengthen your portfolio, not weaken it. The more visually impactful your portfolio, the catchier your hook will be.
Bonus points go to designers who invest in a personal brand throughout their portfolio, blog, and other supporting sites. A personal brand isn’t required to be successful but can elevate your work and make it easier for people to identify you. Remember, you only have 30 seconds. If you choose to include a personal brand, ensure it’s differentiated. If the brand is generic, you may hurt your odds of recognition by blending into the designer Dribbble-verse. You want to stand out, not fit in.
I wish I didn’t have to say this; make your contact method obvious. I’ve personally reviewed dozens of portfolios that had missing contact info. If you only have 30 seconds to impress someone and they can’t find your contact info, you may have just lost your only chance at a callback. It’s unlikely they will scour the internet for your email or phone number. Not unless you’re that outstanding and worth all the extra effort — which I know you are. But don’t count on it.
Finally, your portfolio website should not be what you present during your interview loop. Many recruiting and hiring managers have told me directly that their presentation interview is “informal” and they’re “ok” with designers walking through their portfolio website. Sigh, they just set you up for failure unintentionally. Their good intention was to make your life easier. But the reality is that a website is a clunky presentation format. Not to mention, your goal for your website is to hook someone within 30 seconds, not to be a thorough deep-dive into every detail about your projects and design process. I’ve witnessed multiple designers struggle to present their website — it wasn’t pretty. I recommend leaving those details for a proper portfolio presentation deck. I’ll cover the differences between a portfolio website and a presentation deck in a later article.
Bathroom break! Feel free to grab a beverage from the fridge while I’m gone. I’ll be right back.
Only Showcase Three Hits
I’m probably going to get some heat for this one. You’re undoubtedly sitting on more than three outstanding projects that highlight your tremendous user and business impact. But, of course, whittling down your projects to only three wasn’t something you were expecting to hear, and now you’re frustrated with me — I get it. Trust me. There’s more than one good reason for this constraint.
The first reason to showcase no more than three projects is to ensure your portfolio remains hyper-focused on the role you’re seeking out. Early on in your career, you’ll be tempted to pad your portfolio with fluff. These projects add little value to your portfolio. They may lack depth or only be visual explorations without a clear goal, or even worse, not design-related at all (examples: photography, food blog). You may feel this fluff will mask your inexperience and make it seem like you’re more skilled. The truth is, companies can see through the fluff and consider it a sign of inexperience.
If you recall, you only have thirty seconds to impress, which is the second reason to constrain your projects to three. Even if you put in the additional effort to add more than three projects and they were solid case studies, the likelihood of someone reading through more than three projects is slim. Your time is precious, and the additional effort won’t increase your odds of an interview. Your time is better served elsewhere — like networking, promoting your portfolio, or applying for jobs.
Thirdly — is that even a word? You’re making your life easier when you update your portfolio later on. You’ll only have to update three projects, not six, or eight, or ten. That just seems like so much work too. Sheesh.
How to Choose Your Greatest Hits
Your project choice is critical. Choose three projects that are your greatest hits and have sufficient depth and scope. These projects must demonstrate your product thinking skills, interaction design, visual design, intentionality, drive, and self-awareness. I learned how to look out for these skills at Facebook. Here’s the abbreviated definition of each skill:
- Product thinking: This skill demonstrates your business sense. You must understand business needs, user needs, and their underlying goals. Then, you must identify opportunities based on those goals, and you know how to create a successful product.
- Interaction design: This skill demonstrates your ability to create successful user experiences. You must have a thorough understanding of existing interaction design patterns and how to use them properly. The more senior you become, the more you’ll need to understand how to create new interaction design patterns based on human behavior.
- Visual design: This skill demonstrates your ability to create attractive user interfaces. You must understand color, typography, layout, motion, imagery, etc. You’ll also need to know how visual design relates to interaction design and accessibility.
- Intentionality: This skill demonstrates your design process for creating products. You must know the problem-space, set reasonable goals, make informed product choices based on data, iterate until you have the correct solution, collaborate with others, and communicate your work — all while remaining organized.
- Drive: This skill demonstrates your enthusiasm for your work. You must have an appetite to learn new things, teach others, build community, move fast, and accept failure.
- Self-awareness: This skill demonstrates your ability to know your strengths and weaknesses. You must know what you do well, how people perceive you, how to be an ally, give and receive constructive feedback, and be honest about your growth areas.
And if you made it through that dense paragraph, you’ve demonstrated your patience with my dry storytelling.
I just gave you the keys to the FAANG castle. You now know exactly how your design work will be assessed by these companies. While I learned these axes at Facebook, they apply to almost all product design positions. Other companies may use different vocabulary or break down the axes in other ways, but the spirit remains the same, and all axes ladder up to the user and business impact.
Confidential Projects
You’re working for a super-duper-top-secret-stealth-company that no one is supposed to know about—not even your mom. When they hired you, they asked you to sign a nondisclosure agreement with five hundred pages of legalese. You’re not allowed to share your work with anyone. It’s strictly forbidden, and your lips are zipped tight. What does this mean for your online portfolio?
Depending on the nondisclosure agreement you signed, you have a couple of options:
- Share nothing: You can take the minimalist approach and simply say you worked at the company, and sensitive project details can only be shared during the interview or upon request. I’m looking at you, Apple designers.
- Password-protect: Another viable option is to restrict access to these kinds of projects using a password. You’ll need to find a way to share your password through private channels.
- Abstract the data: Some NDAs allow you to share your work once the project has launched and is public. There’s no need to hide these projects, but you need to abstract the data and avoid sharing real metrics about the business. So, instead of “my solution increased retention by 11%,” you can say “my solution increased retention.”
- Choose a different project: The last option is to simply choose other projects you can share publicly.
The more restrictive options may lead to fewer callbacks. But you look really cool and important, like a double-oh agent.
How to Showcase Your Greatest Hits
It’s now time to tell your project’s story, and if you’ve chosen ones with sufficient depth and scope, this should be reasonably straightforward. There’s an expected format for project case studies that’s handy to know. Once you’ve mastered this format, feel empowered to try another. Until then, use this one.
Set Context
The first portion of your case study should set the context. You’re establishing the timeline, describing the characters, and building the world around your project. Or, another more direct way to put it, what was the timeline for the project? Who contributed to the project? How did you contribute? What was the motivation behind the project? Companies will not know the context of your projects and require these background details to assess your skills properly. Keep this section concise. That way, others can move on to the meat-and-potatoes of your case study — which are Problems, Actions, and Results (PAR).
P: Share the Problems
All designs exist to solve user or business problems. The next section of your case study should be dedicated to clearly defining the problems your designs address. Be methodical in the way you describe these problems and ensure you’ve backed them up with data. We’ll talk about data in a minute. When others read this section, they should also understand the opportunities revealed by the problems. Spinning your problems into opportunities sets you up for the next section in your case study. Which is…
A: Share Your Actions
The opportunities from the last section have driven you to take action. What were those actions? If you’re like me, those actions were probably something like doodle a solution, get team feedback, talk to users, get user feedback, scream in frustration, iterate on the design again, prototype the design, validate or invalidate the design, scream again, implement the design, test the design publicly, and ship or kill the design. All of these actions are moments you can share in your case study.
R: Share the Results
You’ve taken many actions to address the problems. What were the results of those actions? You need to prove that your design solutions solved the problems. The only way to do so is with data. Did metrics move as a result of the launch? Were they positive or negative movements? Are users happy with the design? Did you help users complete their end goal? You need to share all qualitative and quantitive data you have to back up your claims. These results make for a powerful conclusion to a case study.
Data is sexy and can be used to seduce companies. It’s like rose peddles tossed onto the bed, a bottle of the finest merlot sitting on the nightstand, and Kenny G.’s music playing softly in the background while the lights are dimmed low. Your user and business impact is the heated kiss that gets the night going… record-scratch — what the hell am I writing!? The biggest turnoff is sharing data that’s inconsequential and doesn’t prove you’ve solved the problem. Avoid sharing that your manager patted you on the back or a VP mentioned you in a meeting once upon a time. These details are of little value to your case study and are not as sexy as you imagine.
It’s a Story, Not Bullet Points
You’re telling a story with your case study. Make sure the narrative you string together flows nicely from one section to the other. It should be easy to follow and self-explanatory. Keep it concise. If you struggle to read your writing, there’s no chance someone else will be able to either. The supporting visuals need to strengthen the narrative and not distract. When in doubt, leave visuals out — or better yet, rewrite the narrative to fit the visuals.
Share the Final Product
Did your product ship? Is there a public link people can visit? It’s a good idea to include the final product as part of your case study. You can do so by directing people to the final website or app detail page. My recommendation here is to avoid making this link the primary call-to-action, though. Your goal is to keep companies engaged on your website. Linking off to another website may distract them from contacting you and cause them to bounce.
In lieu of a link, you must include images or videos of the final product. I know this is a no-brainer, but I’ve also seen many portfolios focus on the problems and forget to include the final solutions.
My twin monkies are asking for their morning banana. BRB, again.
Save Your Introduction For Later
Your goal is to hook companies as quickly as possible. Save your résumé until later by creating a dedicated About page. Avoid including your résumé on your landing page. Doing so will focus your portfolio on your projects instead of you. Designating a dedicated About page also gives you more space to introduce yourself and inject however much personality you wish. There are many formats you can use for an About page. Here are the sections I chose to include on my About page:
- Work history: Give a concise overview of your past work history.
- Testimonials: Other people speaking to your strengths is a powerful persuader.
- Skills: This section is a requirement. You should note all your related design skills.
- Strengths: You can pick one or two superpowers you have and expand upon them.
- Leadership examples: The more senior you become, the more you need to demonstrate solid leadership. If you’re a mentor — share it. If you’re a public speaker — share it. If you’re a writer — share it, etc.
Choose to add or remove sections that fit your needs. You have more freedom on your About page than your case study pages. This page should be a reflection of you and your personality.
To Headshot, or Not to Headshot, That is the Question
If this were a traditional paper résumé, the answer to “should I include a headshot?” would be “absolutely not.” Many companies are bias-conscious, and they may have policies in place to discard all résumés with headshots without looking at them. This practice is commonplace and removes bias from the process of selecting candidates. When it comes to your portfolio website, though, the choice is up to you. Including your headshot will not be an instant rejection, but you should know that including one may cause unconscious bias. If you’re concerned about this, simply exclude a headshot. As for me, I chose to include my headshot because it makes me feel pretty.
The Tool Doesn’t Matter
Listen, I want to say something: it doesn’t matter how you create your website. There I said it — dang, that feels good. The tool is a means to an end. I’ve never seen the tool choice increase or decrease the odds of you getting hired during all my interviews. Find one you like, matches your skill level, and just dive in. There’s one non-negotiable requirement, however. Whichever tool you choose, you must invest in the mobile version of your website. A majority of your traffic will come from mobile visitors. I’ve had nine portfolio websites over the past decade. Here are the tools I’ve used:
- Webflow
- Squarespace
- Cargo
- Wix
- Wordpress / Drupal
- Adobe Dreamweaver
- You young whipper-snappers won’t know this one: Adobe Flash R.I.P.
- Plain ol’ HTML, CSS, and Javascript
- Blah, blah, blah
All these tools have worked for me in the past, and I’ve seen other designers use them and other tools successfully. But, if you had to twist my arm and ask me which tool I recommend, my current favorite is Webflow. It’s easy to use and strikes the perfect balance for a visual code editor.
Share your favorite tool in the comments.
ALWAYS KEEP YOUR PORTFOLIO UPDATED!
I’M YELLING BECAUSE ONE OF MY DAUGHTERS JUST DROPPED A NERF GUN ON MY FOOT. Hang on, give me a moment to recover…
Life happens. At any point, you may get laid off, burned out, or just want to impress your friends. Keep your portfolio updated for these moments. Doing so has multiple benefits. For one, you should always showcase your best work. The moment you complete a great project, add it. Its addition will ensure your portfolio consists of recent work that shows your career growth. For two, it’s more manageable to spread out your updates over an extended period than to update the entire portfolio all at once. Life can quickly become an overwhelming scrambled mess if you’re laid off and don’t have an updated portfolio. I know from experience.
Ask your peers, friends, or family to review your updated portfolio and give their constructive feedback before making it public. The simplest things, like bugs and typos, can easily be why a company rejects your portfolio. A second or third pair of eyes can increase your odds drastically. I’ve gone as far as to hire an editor on Fiverr to scan my website for clarity and typos. Even then, bugs and typos may still find their way onto your portfolio. Don’t be embarrassed when someone points one out. Update and move on.
Demonstrate Your Seniority
Until this point, I’ve written this article for junior-to-mid-level product designers. Therefore, I want to speak directly to my senior design homies for a moment. Demonstrating your seniority in your portfolio is paramount. If you have “senior,” “lead,” “principal,” or “whatever” in your title, these are the signs companies look for from someone of your caliber:
- Strong process: You consistently demonstrate a design process that leads you to significant user or business impact. You’re an expert process owner and move fast towards the correct solution.
- Craftsmanship: You have an intimate understanding of all design patterns in your domain. Your designs are beautiful, pixel-perfect, and implemented flawlessly.
- Complexity: You thrive in complex problem spaces others would struggle in.
- Abstraction: You synthesize abstract concepts and make them simple for others to understand.
- Ownership: You own large projects without manager oversight and are the go-to person and domain expert.
- Leadership: You mentor other designers and help them level up their skills. You’re a master collaborator and can keep teams aligned.
- (I’m probably missing some)
You may possess some or all of these traits as a senior-level product designer. Find ways to highlight them in your portfolio.
TL;DR:
If you’ve internalized all of the information in this article, you’re now a portfolio wizard, and you will undoubtedly get noticed by companies. Of course, I’m making no guarantees that this framework will be easy to implement, but your hard work will pay off if you successfully execute it.
Here’s what I hope you’ve learned:
- You have thirty seconds to impress
- Only share three projects
- Remove fluff
- Invest in visual impact and engaging narration
- Consider creating a personal brand
- Make your contact method obvious
- Your portfolio website is not your portfolio presentation deck
- Showcase three of your greatest hits that demonstrate your product thinking, interaction design, visual design, intentionality, drive, and self-awareness
- Structure each project with context first, then share the Problems, Actions, and Results (PAR)
- Data is sexy. Backup problems with data and solutions with data
- Share your final product
- Dedicate a page to your résumé
- Do not include your résumé on your landing page
- Your About page is flexible and a place to show off your personality
- Share work history, testimonials, skills, strengths, leadership examples, and anything else you feel is necessary to round out your résumé
- Headshots are optional; avoid them if you’re concerned about bias
- The tool you use doesn’t matter
- The mobile version of your website is critical
- Keep your portfolio updated
- If you’re a senior designer, show it by demonstrating your strong process, master craftsmanship, complexity mastery, abstraction synthesis, ownership, and leadership
Yup, that about sums it up. If I’ve missed anything, leave a comment.
Oh, crap! Where are the twins!? My wife is going to kill me!
Thousands of Portfolios, Hundreds of Designers
You’re learning from my many years of experience. I’ve reviewed thousands of portfolios and interviewed hundreds of designers throughout my career. In addition, I’ve personally been interviewed by all FAANG companies and received offers from all but one of them — my white whale — Apple. One day Apple, one day…
BTW. I found the twins in our bathroom flushing toilet paper down the toilet—typical Sunday.
