Three product designers break down their portfolio
In praise of the “standard” product design portfolio
Written by Jennifer He
Introduction
Creating an online portfolio presents several challenges for designers. On top of figuring out how to best showcase their design process in well-crafted case studies, a portfolio is also an opportunity for the designer to define and communicate who they are — to recruiters, hiring managers, and the world.
“My portfolio looks like everyone else’s”
Personally, I’m never 100% satisfied with how my portfolio looks. This means I’ve reworked it a million times over the past four years. I hope I’m not the only person who has gone down the rabbit hole of internet portfolios and questioned if it was okay that my portfolio looked the same as everyone else’s.
When it comes to creative work, similarity usually has a negative connotation. For example, when I complain about a musical artist I don’t quite like, my grievances are usually centred around the likeness of their music.
Recently, I saw a LinkedIn post that unfortunately triggered my bi-annual cycle of portfolio-related uncertainty.
“Many portfolios suck. I see more boring, ugly, and standard portfolios by the day.”
And yes, this quote has largely been taken out of context (it could be argued that the rest of the post was more constructive), but even as I try to empathize with the author’s ideas here, it was hard not to see these words and feel dejected.
“Similarity can actually be a good thing”
It’s easy to go down this spiral of self-doubt, but as I was doing research for this article, Tammy Taabassum reminded me about the first rule of product design [club]: don’t forget about your users.
“Reflect on why and who the true intended audience is. The goal of the portfolio is to show people what you can do and potentially get hired. I definitely think it should show everyone who you are and represent your personality; however, at the end of the day, this is the thing that hiring managers will be using to decide if they want to hire you. It is essential that we don’t get in their way with super unique designs (UX the portfolio, as they say). We want our portfolios to be as easy as possible to navigate. In that way, similarity can actually be a good thing.” — Tammy
It all goes back to who your intended audience is and the message you’re trying to convey to them. Typically, for product designers early in their career (like me), the user is a hiring manager and the goal is to get hired. There is a lot to be praised about a designer who is consistently cognizant of their users’ needs and designs a thoughtful portfolio experience for them.
What’s in this post?
In this blogpost, I’ve compiled three of our favourite portfolios. All of them have strong case studies, but also great visual design. Upon first glance, they might follow a “standard” portfolio design pattern, but I would argue the design decisions they made were far from trivial. There are meaningful details, driven with intention and an understanding of their audience. There is an overall sense that they were designed with purpose.
Our brains are wired to notice patterns, but just like my English teacher once told me some time ago, to understand Shakespeare is to get into the subtext. As I recently re-designed my own portfolio for the gazillionth time, I became curious about “portfolio subtexts”. I wanted to better understand the decisions these designers made. Why did they use a certain hexcode? Why did they use this particular serif/sans-serif pairing? How is this a representation of them in HTML/CSS/Javascript?
***Each designer provided their own responses to the following five questions***
- What font pairings do you use? Why did you choose this font?
- What colours do you use (hexcodes)? Why did you choose these colours?
- What do you want us to know about you as a designer from your portfolio?
- What do you want us to know about you as a person from your portfolio?
- What is the one thing you are most proud of about your portfolio? Why?
Carol Chu
Previously @ Meta, Shopify & Ceridian; Link to portfolio
What font pairings do you use? Why did you choose this font?
When it comes to portfolios, I like to think of each pairing as having an impression (title) and detail (body) font. Since titles are less frequent and more grand, they can be used to leave a strong first impression. On the other hand, details are more frequent but smaller, so legibility and compactness become a greater priority. To make the process of picking a font pair more fun and collaborative, I designed an exercise called “finding Carol’s type”, (I know — so, so cringe.) where I listed out both the criteria I was looking for in a font as well as combinations I had already experimented with and knew I liked. Then, I got a bunch of feedback on what worked and what didn’t, which pairings were green or red flags.
Through this process, and inspired by the many specialty coffee brands I (occasionally) splurge on, I decided to pair a bold serif font called “New Spirit,” with the classic “Roboto-Mono.” Even though sans-serifs are known to be more clean and classic, I’ve always gravitated towards a more stylistic type. The bulbous features of New Spirit made the characters seem welcoming, like twisting and growing vines. On the other hand, the typewriter feel of Roboto Mono made case studies feel both investigative and important — it made them feel like nostalgic documentaries, which I kinda liked.
What colours do you use (hexcodes)? Why did you choose these colours?
When I was initially drawn to New Spirit as a font, I knew that using plain black or white would not do it justice. I’ve always been a fan of deep, rich tones — and wanted to incorporate more colour to my portfolio in a way that looked organic. To illustrate the type’s vine-like form, it only felt natural to use a velvety forest green as an accent colour (#0A5029). As for the background, I landed on an off-white eggshell colour (#F5F0E7), which I found to be less harsh on the eyes, a better companion for the green, and overall — a lot more welcoming to oncoming viewers.
I came across this quote on twitter recently, poking fun at the two genders of portfolio background colours. It’s funny because at the time, I had thought that using an off-white or off-black was considered “different”. At the same time, I think that there are only so many things that we can do to spin the wheel on our portfolios. When it comes to something like choosing a background colour, it’s better to follow a common path that works rather than trying to experiment with wacky combinations.
What do you want us to know about you as a designer from your portfolio?
As a designer, my process is both thoughtful and experiential. While my background makes me a strong systems thinker, my strengths lie in my ability to empathize and execute in a way that flexes my creative muscle. Every case study reads differently as to reflect on its unique learnings and challenges. What they have in common, is in the collaborative nature and the care that’s put into the process. While there’s always room for improvement, it’s also important to portray the kind of designer you aspire to be through your portfolio. With mine, I hope to show that I care about both strong vision and craft. In my career, I want to work in collaborative and experiential environments that have both a strong product sense as well as a unique brand and identity.
What do you want us to know about you as a person from your portfolio?
As a person, I care a lot about both the people I work with and the community at large. I feel the most inspired when I’m working with an impact-driven team and for a mission that I care about.
But above all else, I want to seem friendly and approachable as a person.
What is the one thing you are most proud of about your portfolio? Why?
I think the hardest part is finding the right balance between making your portfolio easy to use and navigate with crafting something that feels truly your own. If you lean too much on either side, you can end up with something that feels cookie-cutter, unintuitive, or both. While the underlying structure of my portfolio follows a pattern that’s been commonly used, I’m proud of the time I put into ensuring the details reflected both my currents strengths and what I aspire to be. I know how daunting the idea of a creating a portfolio can feel, especially early in someone’s career. However, I’m confident that everyone has different strengths, tastes, and aspirations as a designer — so no two portfolios should ever look exactly the same. I’ve learned that if you put in the time to learn about yourself as a designer, then the act of making those attributes shine through in a portfolio becomes a lot easier 😊
Seth Morenos
Previously @ Intuit, Interac & Loblaw Digital; Link to portfolio
What font pairings do you use? Why did you choose this font?
Gilroy for headings and TT Commons Classic for body text. In a nutshell, I gravitate stylistically towards geometric sans-serif typefaces, and consequently need humanist properties to preserve readability at smaller font sizes. Gilroy upholds this aesthetic in my portfolio in components where text is larger, while TT Commons provides glyphs that make it easy to differentiate characters that often resemble one another; common culprits being capital “I” (/ˈaɪ/) and lowercase “l” (/ˈɛl/).
What colours do you use (hexcodes)? Why did you choose these colours?
I use a branding palette consisting of #004080, #FAFAFA, and #404040 — basically a black-and-white theme paired with a primary colour for recognizability. This has stayed consistent throughout the past few reconstructions of my portfolio. #7C6900 (dark yellow with an olive tone) was recently introduced to add warmth and prevent blue from overpowering the bigger pages.
What do you want us to know about you as a designer from your portfolio?
I want my portfolio to showcase my adaptability as a designer. I’ve had the privilege of exploring various industries throughout undergrad, and I want my work to illustrate how I approach unfamiliar problem spaces and work with others in overcoming the ambiguities these entail.
What do you want us to know about you as a person from your portfolio?
Basically a tl;dr of what I do to push myself, both in my craft and my growth outside of design. Every project is informed with a reflection of how I can outdo myself, be it through the methods I leverage or the approach I take with leading an interdisciplinary team. When not designing, I look for other creative outlets and chances to overcome self-imposed limitations.
What is the one thing you are most proud of about your portfolio? Why?
Definitely the way I’ve built it. My portfolio is built using React and uses a component library that I wrote entirely from scratch. This makes maintaining and reworking every part of it–from responsive behaviour to search engine optimization–a (relative) breeze, since it’s not reliant on styling frameworks such as Bootstrap and the like. In hindsight, constructing my portfolio this way was a lot less time-efficient compared to just using a website builder or repurposing a template, but it’s taught me heaps about web development so that’s a dub.
Tammy Taabassum
Previously @ Meta, Xbox & Wish; Link to portfolio
What font pairings do you use? Why did you choose this font?
I used the typefaces Manrope and Cooper BT. I picked these because they provide contrast when trying to tell a story. If I want to emphasise a point, I will switch to the serif font. Both of these typefaces also have similar x-heights, so they feel like they belong together instead of being weirdly different sizes.
What colours do you use (hexcodes)? Why did you choose these colours?
I used to use colour, but I have since switched to a black-and-white theme. I found that the neutrality of black and white allowed my work to shine on its own without competing against the colours of the portfolio itself. My goal with my portfolio is to show people what I can do, and the structure/style of my portfolio has to aid that, not hinder it.
What do you want us to know about you as a designer from your portfolio?
I want everyone to know that I’m a jack-of-all-trades builder, that I am genuinely curious about technology and that I spend time honing in on my technical skills.
What do you want us to know about you as a person from your portfolio?
That I am an open, kind and people-first person. I care deeply about others, and it includes my users, my co-workers and all the new designers who want to learn more about breaking into design.
What is the one thing you are most proud of about your portfolio? Why?
I am proud that my portfolio inspires people and can be a learning resource for others. As someone who struggled at first in UX and was rejected from 200+ places, seeing other people’s work really helped me understand how to make mine better. Now that I’ve gotten further, I’m proud to be that for someone else, and I hope the learnings from my portfolio help further their careers.
Conclusion & reflection
I’m a firm believer that product designers will always impart a little bit of their essence into their work. An interface could go through X rounds of testing and a bajillion metrics and the most comprehensive design system, but it was still crafted by a human with a unique heart and soul. With this in mind, your portfolio can be a window into how you will leave your mark on a product.
Personally, I’m also deep in the chaos of trying-to-get-hired, which means I’m also designing for the eyes of someone else. My portfolio is constantly evolving and for now it follows a “standard” design pattern, but there is nothing inherently wrong with this. It’s still early in my career so I haven’t fully figured out who I am as a designer yet. It feels unkind to exhaust myself trying to convey otherwise.
For some designers, a portfolio that is objectively unique is within reach (and that’s super cool), but if that’s something you’re not yet comfortable with, your portfolio can still be personable and a representation of what you currently know about yourself as a professional and human being. Your portfolio can still reflect your thoughtfulness as a designer. Don’t underestimate the impact of the subtext.
Acknowledgements
I am so grateful to Carol, Seth & Tammy for letting me probe a little further into the decisions they made on their portfolios. They are not obligated to share their personal thought processes with the internet, but they did so articulately and thoughtfully. It’s truly a testament to who they are as designers. Also, thanks to Tammy for providing her feedback early on and for encouraging me to think about design portfolios in a more nuanced manner. This post would not look anything like it does today without her insight.
