Like any design problem, I start by gaining a better understanding of the needs of those I’m designing for. In my case, my end-users are design leads and hiring managers at tech companies. So, I researched about what these users tend to look for in product design portfolios, and collated a list of questions they would typically use to screen them out. Then, I wireframed, prototyped and tested my portfolio by directly reaching out to my target audience via LinkedIn or ADPList.
At a high-level, design leads and hiring managers want to know:
- Who did you work for?
- What did you do for them?
- Was it successful?
- What did they have to say about it?
So, I knew that my homepage certainly needed to surface this information. Then, assuming my end users are intrigued enough to actually skim through one of my projects, they are probably looking to find out:
- Why did the work needed to be done in the first place?
- How did you determine what needed to be done to fix it?
- How did you ensure your solution was the right one?
- How did you measure the success of the project?
- What was your contribution to the team’s collaborative efforts?
- What challenges did you face and what have you learned from these?
With these questions in mind, I broke down the structure of my portfolio to its individual elements, where each would serve a key purpose.
Anatomy of my portfolio
Let’s start with the homepage:
Intro and Hero Image – A short and sweet paragraph that describes what my job role is, what kind of work I primarily do, and how that work in turn helps the business succeed. I also think having a profile image doesn’t do any harm and if anything, it gives a more human touch.
Project cards – to feature my work & to progressively disclose key pieces of information for each project. This includes a title that clearly describes the business challenge, the company name, what kind of work it involved and what was the outcome. This information helps hiring managers determine whether the project is relevant to their organisation/team and hence worth reading more about.
Visual shots – Asa product designer my work touches across both UX and UI and so I wanted hiring managers to be able to quickly and easily access my final design deliverables including high fidelity visual designs, design patterns and interactive prototypes. Another reason I included these, is because it would enable me to present the variety of my work that would normally sit in different sites or presentation formats, in one place. Think of the projects you showcase as Dribble shots for example.
Client logos and testimonials – Using company logos and testimonials from people you’ve worked with, can help reassure hiring managers that you can actually do what you say and that you’re good at it too, thereby building your credibility.
Featured blog posts – this is entirely optional and whether you like writing. Personally, I think sharing our perspectives and professional and personal experiences with the world, can, to an extent, show one’s ability to practice self-awareness, reflection and curiosity – qualities which are highly relevant as designers.
Anatomy of a case study
In my opinion, a good case study should tell a concise and visual story of why, how and what you did, aimed at addressing your target audience’s concerns in the most effective and efficient way possible. The way I chose to do so was by breaking it up into the following 5 sections:
Project context – This section includes a description of the business goals, the challenge, the role you played, as well as key facts such as project length, team structure and tools used. This section conveys why did that given problem needed to be solved (i.e. why it was hurting users and in turn the business).
Design process – Presenting your work using the double diamond or some other framework doesn’t matter so much as you clearly show how the why drives the what. In other words, design leads and hiring managers want to see how you think strategically and that you connect business goals and user needs to solutions, whilst operating within constraints.Its about taking them along the journey of how the product evolved or changed direction in response to user research and testing during the iterative project lifecycle.
Results – Show evidence that what you did worked in some measurable way. This part is crucial, because it shows the value you add to a business. It’s the kind of value that when it goes out to users in the form of increased or more efficient use of the product, more shares, more downloads, and comes back to an organisation as money made or saved (aka the ROI).
Learnings – Be honest and transparent about worked well and could be re-applied in other projects, and what obstacles and bumps you faced along the way and how you overcame them.
Final Designs – This section is optional and depends on how you want to position yourself in the market. By having a section that showcases final artefacts, better communicates your visual design skills and that you are capable of doing that type of work.
Miscellaneous
Great, so now I have the homepage and case study structure mapped out. What’s left is the ‘About’ and ‘Contact’ pages. The ‘About’ page, is where you should be unapologetically yourself and share your story, your motivations and thoughts openly. Give hiring managers an opportunity to see the real you, not just the designer. And this will only benefit you as it will attract the right companies and clients where there is a strong cultural fit. And a contact page or section makes it easy for people to contact you.
Feedback
Here is just some of the constructive feedback I received from design managers and recruiters around the world:
"It looks like you've got a strong content model and are making a lot of progress. […] some of the things I really like here are:
- Each project has a problem statement (challenge)
- You make your role clear
- You've got a clear design process in place
- You show results/outcomes for the work
- You're open about what could have gone better/what you learned
So those things are all great. A lot of people don't show these things and, as a hiring manager, that means that I usually skip over them in favour of those who do.” - Design Manger at Intercom.
"The IA and overall content structure looks great. You’re definitely doing a great job sharing your process which folks are interested in learning about." - UX Designer at Google.
“I think the prototype looks good. You might think about making the home page more visual and make that intro statement stronger to show off what makes you different from everyone else.” - UX Evangelist at Invision.
- "Communicate why you chose a certain research methodology over another, including the context and operating constraints.
- Make sure that you choose the right artefacts that support the story you’re telling.
- Project title should be a description of the challenge itself."
- UX Design Manager at LinkedIn
“I quite like the way you're putting everything together.It's quite clear and simple, this is what we are looking for in a portfolio.Our client usually wants a portfolio that is easy and quick to look. My only thing to add on that is because you're a Product Designer do not forget about putting details of your UI side in each project. We, as recruiters, need to see properly the way you worked in both UX and UI side. It needs to be like your business card, so if you show everything in a very detailed and nice way, it will be easier for us to present you to clients.” - Design Recruiter at Pixel Ponds.
Final words
Just with any portfolio advice, it's subjective and you’ll probably take what I’ve written with a pinch of salt. I get it. But, if you like the approach I took to design and validate the aforementioned structure for an online design portfolio, I’ve got some good news for you. I created a Figma UI Kit and a Webflow template, both of which you can access for free. I spent weeks putting these together, so that you don’t have to. So go ahead, use them, make them your own and I hope they help you in your design career. Please feel free to reach out if you have any questions.
