Published in ·
--
Earlier last fall, I was honored to have my design portfolio featured as Editor’s Pick on bestfolios.com.
Flashback to November 2017, I was so worried about my portfolio after I presented my only project to a recruiter who offered to help, and received harsh critiques on it. I started posting my portfolio on Facebook and Slack groups, seeking advice on how I could better present my projects and skills, and received a lot of help and support from designers whom I haven’t even met. I’m really grateful for their help, and that’s why I decided to write down how I gradually built my portfolio, so that hopefully, this article can help more designers create well-structured yet unique portfolio websites.
There are lots of awesome guidelines for creating UX portfolios on Medium. Instead of providing similar guides again, I’d like to structure mine as a case study so that you can see how I applied those guidelines in practice. I’ll cover:
- How I learned from other’s portfolios
- Why I decided to code it myself
- How I designed my portfolio with my users in mind (who are recruiters and designers looking for candidates for their design teams)
- How I quickly gathered feedback and iterated on my design
- How I made it personal to show my own personality, and to make it stand out (Make sure you read this!! It’s a lot of fun!!).
Feel free to pick the sections that are the most helpful for you. Let’s get started!
Just like how I design for products, I started by understanding the existing best practices by looking into what more experienced designers have created.
1.1. Resources
With no idea of what a UX portfolio is, I started by looking at the websites of students from top HCI programs in the U.S. I went through hundreds of them just to get a sense of what’s out there, and what kinds of projects people put in there. Here are a non-exhaustive list of what I looked at:
- Georgia Tech’s MS-HCI Students / Alumni
- CMU’s MHCI Students / Alumni
- University of Washington’s MHCI+D Students / Alumni
- Bestfolios
- Cofolios
There are also great articles on medium about how to structure your UX portfolios, from which I learned a lot:
1.2. Good artists copy, great artists steal
Well, first of all, design is not art. But why not citing Steve Jobs/Pablo Picasso who made such a perfect point about how to seek inspirations from others?
For me, the point of looking at others’ portfolios is not about copying them; it’s about learning what they did well, how they handled difficult problems in portfolio design, why their solutions are good, and even what they didn’t do well, so that you can incorporate their strengths, tailor them to your own needs, and deal with problems that they weren’t able to solve in your own way.
I’ll talk in more details about what I learned from others’ portfolio when I talk about specific decisions I made in my portfolio later.
There are lots of tools that designers use to create their portfolios, like Squarespace, Wix, Readymag, Adobe Portfolio, Webflow, pure HTML/CSS/JS, etc. How did I make the decision?
Selecting the right tool is similar to laying the right foundation: the amount of effort you’ll need to spend, the kinds of functionalities you can include, the kinds of styles you can select/create… they all depend on the platform you chose initially. During my portfolio research, I noted down a couple of features I found useful on others’ websites (sidebar navigation, expandable content, etc.), and added more that I think would make mine more usable and attractive. I then studied all the available tools to get a sense of what they are capable of doing. Because I had those really specific requirements about what my portfolio should contain, and wanted to make my portfolio a highly personal space with unique interactions, I eventually decided to code it on my own.
That said, coding it myself means that I need to take care of all the details myself, like maintaining consistencies in styling, and making the website responsive and well-designed for mobile, tablet, and all major desktop screen resolutions. When I was first building the site, I spent a considerable amount of time focusing on these technical details, which I could have spent on perfecting the content of my projects. I can also imagine it being hard if I want to totally restructure my portfolio. All these things are abstracted away in tools like Squarespace, so that designers can focus on the content presentation.
It was a hard trade off for me to make, but since I really wanted my website to have my own personality, I was willing to spend the time and effort crafting it in code. I would probably also explore Webflow when I have time, since it also supports highly customized interactions. Here’s the major take away:
Think about what’s more important for you and your target users when creating your portfolio, and choose the right tools to help you achieve that goal.
Designers are user advocates. How ironic would it be if you are applying for UX/Product designer jobs, while your own portfolio website is hard to navigate through?
However, as I was browsing through people’s portfolios, I still found a lot of them hard to navigate. Some put beautiful images of their designs with creative names on their home page, but that information never tells me what exactly the product is and what problem it solves. Some have really detailed design process in their case studies, which I like a lot; however, without any outline/navigation in the page, I soon got lost and gave up scrolling through. Some have cool animations and visuals, but with too many things going on at the same time, I can’t quickly navigate to the information I need, especially if I have limited time…
A lot of these problems can be prevented if we put ourselves in the shoes of our target users — recruiters and designers busy with their work — and design with their needs in mind.
Here are some of the features I intentionally put in my portfolio to make it easier for my target audience to go through. Some of them were inspired by good designs from other designers, some were results of my own thinking, while others came from feedback I received in portfolio reviews. I’m not sharing these because I think they are the way to structure a portfolio, but they definitely helped me get a lot of positive feedback on my website.
3.1. Concise yet Informative Project List
Recruiters and designers visit our portfolios to view our projects and experiences, trying to understand the kind of designs we’ve done, the kind of designer we are, and how well the image they form of us aligns with the people they are looking for.
From what I learned talking with different designers & recruiters, the first thing they usually look for is the list of projects we’ve done, because our work speaks for itself. Therefore, it is important to provide them with just enough information to help them quickly decide which project they want to look more into. Here are the things I put in each of my project description:
- Project name & image
- Tags describing the type of design work, and the kind of technology used in the project
- An one-sentence pitch of what the project is about
Instead of only putting an image and a name, I provided more information. Again, I’m not saying that this is the only solution, but here’s my argument for it. A lot of people will by default click into the first project on the list, and will leave the website if they don’t see what they’re looking for. Of course, most times, our first project should be the one we are most proud of. But what if the person is looking for a project related to, say, information visualization, and that is the third project on the list? Should we let them click into the projects one by one until they discover it, if they haven’t given up at this point, or should we tag the project as “InfoVis” right in the project list?
The goal on this page, as I understand it, is always to attract the right people to the right work they are interested in, to maximize your chance of being discovered as a potential fit. That’s why I tried to do the hard work for my users so that they can find what they look for at a glance.
3.2. Project Overview
For projects we’ve done, we always want to just dive into them and show every detail we considered to demonstrate our design skills and mindsets. However, for someone who knows nothing about the project and who has limited time looking at each project, he or she just hopes to quickly get to know what exactly the product is before deciding whether the case study is worth reading through. A quick way to provide that context is to have a project overview that contains the following elements:
- A summary of the problem your design is trying to solve
- A brief description of the solution you came up with
- An overview of your design process and your contribution at each stage
- Other information about the project (length, team or individual, your primary role, tools used)
- Visuals/animations/pitch of your solution, as if you’re publishing it in an app store
I personally find the last point especially useful — for each project I put into my portfolio, I’ll try to showcase its main features & value propositions and try to sell it as if I were really attracting customers. This pushes me to think more deeply about the new values added by my design; it also helps my readers quickly get a sense of what my design is about, and why they should care about it.
At the end of the section, I also always give my users the option to jump to the final prototype, if they’d like to skip the process documentation and directly play with it. Depending on the time people have and their interests, they could either quickly see my design outcome, or read through the process documentation.
3.3. Sidebar Navigation
I originally saw a sidebar in Geunbae Lee’s old portfolio and found it really useful. It then became one of the reasons why I decided to code my own website, because sidebar navigation is important for my site, but it’s not well-integrated into a lot of existing tools.
There are a couple of reasons why a sidebar is important to me. First, I usually go through a comprehensive yet flexible design process, while reflecting a lot on what I’ve learned from the process, what problems I encounter, what I should do next, etc. I’d like to thoroughly document my process and reflections since I regard it as one of my strengths, yet I know that different people visiting my website would look for different things, and would probably jump around to find the information they need the most. Therefore, having a sidebar means that I could provide them with an outline of everything I’ve done and written, and they can choose what’s important for them on their own. It’s giving my readers more control.
Speaking of outline, a sidebar also helps clarify the information architecture of the whole case study for the readers. You probably won’t remember that right now, you are inside the “Sidebar Navigation” subsection in this article, which is under the “Considering User Needs” section. While knowing that is not crucial in some cases, giving readers a context of where they are in the article at a glance, and giving them expectations of what they’ll be reading next definitely helps create a better reading experience, especially when my readers are short on time.
3.4. Expandable Content
Another feature I included to help people skim through my case studies is to include expandable content, which I first saw on Phil Kimura-Thollander’s portfolio.
After talking with a lot of designers and recruiters, I learned that the most important things people look for in the design process are:
- Main takeaways from user research
- How you arrived at your design decision
- How your user research and feedback informed those decisions
Therefore, I decided to put all this information directly at the surface level, so that everyone who needs to see them can see them.
However, some people I talked with were still interested in seeing details, like how my studies were designed, what the detailed results were, how I interpreted the results, why I chose a specific platform to design, etc. For this kind of information, I decided to hide them from the main flow, and leave them only for those who are interested to explore. In a sense, this is similar to designing for general users vs. expert users who want more control and more information. In infovis terms, the whole flow of the website/case study is similar to Shneiderman’s mantra: overview first, zoom and filter, then details-on-demand. The expanded contents are those details.
3.5. Highlights on Scroll!
Another thing I did to help people quickly skim through my case studies is to add highlights. Initially, I bolded sentences that were central to my story, so that people can always get the central idea of my story/argument by reading them. Later, I was inspired by Wan-Ting Huang’s portfolio and decided to actually highlight those contents as my readers scroll through the case study to better guide people’s attention and make the experience more delightful.
From the feedback I gathered, people really love the highlights because it helps them pick out the most important information more quickly. I’ve also had people asking me how I implemented them and have seen similar functionalities emerging in other people's portfolios.
When we talk about good traits of a designer, the ability to take constructive criticism/make oneself vulnerable/fail fast and iterate has always been one of them.
When building my portfolio, I also wanted to make sure I gather feedback from a variety of people. At Georgia Tech, there are lots of opportunity to have a portfolio review when our alumni or recruiters from different companies come and visit. I would then seize those opportunities to gather feedback on my portfolio.
I usually do it in two ways. Sometimes, I let my reviewers look through my portfolio as if they are filtering through tons of portfolios online to find ones they are interested in. I’ll ask them what they look for and observe their habits, and make sure my portfolio tailors to their needs in that situation. Other times, I’ll walk them through a case study myself with the portfolio, as if I’m in a portfolio review interview. I’ll note down places that I skipped, ideas that are hard to explain, and the questions they have, so that later I can refine the flow and the content.
There are other resources I took advantage of. For example, there are slack groups, facebook groups, subreddits where people help each other with portfolios. They gave me a wide range of perspectives. However, I also made sure that I was selective in what advice I took, because each person would be critiquing the portfolio from their own perspective. Eventually, it was up to me to decide what my priorities were, and make intentional decisions myself.
What I have today is my second major iteration of my design, but it has been through hundreds of minor iterations. I’d still love to keep on improving my portfolio, and I welcome any feedback you may have.
Recruiters and hiring managers, they want to hire people, people who are passionate about what they’re working on, who would contribute to their teams, and who’d be a great co-worker in the future.
I used to advise students applying for colleges in the U.S., helping them draft their personal statements. What I usually say to them is that your personal statement is the only place where you can express your voice and show the Admission Officer who you are as a person without them meeting you. I think that goes the same for portfolios.
If your resume is a condensed, objective summary of your experiences, then your portfolio can be a truly personal space, where you can demonstrate who you are, what you are passionate about, and how you think, all through the projects you include, the way you describe your process, and the way you design the whole portfolio.
Here are some things I did that a lot of people liked in my portfolio.
5.1. Fun & Personal Preloaders!
This is something I’m really proud of about my portfolio. Though it is not even an essential part, a lot of my interviewers loved this, because they think it shows my personality and my attention to details.
Case studies with photos, animations, and videos usually take a while to load, making the browsing experience suboptimal. That’s why a lot of people prefer having a preloader as a temporary placeholder, and only show the webpage content once everything is loaded. However, the preloader can get repetitive and boring as well, especially for pages that take 10+ seconds to load. What can we do to fill those waiting times with something interesting, so that users won’t have to stare at the same preloader again and again?
My initial inspiration came from Google Chrome. When the internet connection is down, Chrome fails gracefully by providing a simple dinosaur game. It makes the waiting fun and takes away the frustrations people might otherwise experience.
But I didn’t just want a fun waiting experience; I wanted my preloader to show who I am, so that every time a user opens up a new page, he/she knows a little more about me even before he/she sees my work.
After a lot of explorations, I decided to show fun facts about me that people would never know by just looking at my work. I compiled about 20 of them, about my interests, past experiences, writings, thoughts, etc., and randomly showed them in my preloaders for others to skim through. These short pieces of fun facts are glanceable in 5 seconds, changes every time people refreshes the page, can help people better imagine me as a co-worker/friend, but are not essential, so that I have nothing to lose if people miss it because the pages load faster than expected.
A lot of people who have viewed my portfolio brought up this detail to me, and some even tried to refresh dozens of times just to see all the fun facts about me! I also had a lot of fun designing this small interaction. I’m glad that I was able to leverage my skills in design and coding to make this happen, and I suggest that y’all leverage your own strengths, to make your portfolios personal and delightful as well.
5.2. Show Your Strengths
Your projects in your portfolio and the way you present them should reflect your strengths, and that can help you define the style and feeling of your whole website.
If you look at successful portfolio websites, you’ll realize that they all stand out for different reasons. Some have a large variety of high-quality projects, some have detailed processes and deep thoughts, some use beautiful illustrations to succinctly convey user needs and design solutions… The strengths and personal styles of those designers are, either intentionally or subconsciously, reflected in their portfolios as well. Just as how an audience is able to tell the styles of Quentin Tarantino or Christopher Nolan from their films, so a visitor to your portfolio should be able to tell the kind of designer you are through your projects and the way you document them.
For me, I realized early on that I’m not good at drawing (I can only draw boxes/interfaces!). Though I’m learning to better express my ideas visually, I probably can’t become as good as people who have been drawing for decades. I also only had a handful of projects that I did during the past two years. That’s why I decided to focus on what I’m good at, to document my projects with highly detailed processes, well thought-out structures, and deep reflections.
I knew I succeeded when everyone who liked my portfolio pointed out how they were impressed by my process, my attention to details, and the quality of my designs. However, having a detailed process also meant that my cases studies tended to be long. That’s also why I made a couple of design decisions I mentioned in Section 3 to facilitate skimming and skipping in my case studies.
5.3. Demonstrate Your Interests
UX/Product designers usually come from a variety of backgrounds, and we all have our unique interests. With a Computer Science and Psychology background, I am particularly interested in designing for Artificial Intelligence and emerging technologies like VR/AR/VUI, so that we can leverage their strengths to help make people’s lives easier.
Therefore, I chose to do school projects and side projects that gave me exposure to these technologies, and pushed me to think more about design conventions in these emerging areas. I included these projects in my portfolio to demonstrate what I love designing, and wrote down my reflections on how to design for Voice, for AI, etc.
Your work should speak for your skills and interests. Be sure to select projects that reflect them, and be ready to talk about any project you put into your portfolio with passion.
5.4. Personal Branding
Though I'm not a brand designer, I’m fascinated by creating brand identities. This is similar to showing your strengths and interests in your portfolio, but taking a step further: you are essentially trying to help your audience form an image of you and associate a couple of adjectives/skills with you.
Since I don’t have a visual design background, I wasn’t able to come up with a logo that represents who I am (I’d love help if anyone’s interested!). Instead, I brainstormed a lot on how I want others to remember me, given my experiences and strengths. Eventually, I decided to play around with my first name, Tony, and present myself as a “Tech Enthusiast, Thinker & T-shaped Designer,” all starting with a T and reflecting my skills/interests/personality.
Then it’s like a marketing effort. I put the same tagline on my portfolio, resume, LinkedIn profile, and Medium profile. I also talked about it while I’m introducing myself in interviews and onsite presentations. By doing so, I made sure that my portfolio, as well as all the other supporting material, conveys the exact message I hope to convey, and together present a consistent brand image to my intended audience.
I find this to be a lot of fun, and I’m still further exploring what a personal brand really means. I’d love to discuss it more if you’re interested :)
Yayyyyyyyyy you made it! What do you think? Keep looking for your own strengths and styles, and try to leverage them and show them in your own portfolio.
I’m joining Google as an Interaction Designer in the Associate Design Program this August! If you’re interested in seeing my work and chatting with me, check out the following links:
