How to Structure Your First UX Design Portfolio
Looking to get your first UX Design job? This blog post might help you a lot.
Introduction
Looking forward to launch your career in User Experience Design (UXD)? You came to the right place to get some personal tips on how to structure your UX Design portfolio website. Although I’m fairly a newbie as well, so far, many people have asked me to take a look at their portfolio websites. So, I decided to share some of my knowledge about it. Don’t be too harsh on me though, I’m only here to express my own thoughts about it. I hope your time spent reading this blog post is worth it.
#1. Build a website, not a PDF document
The first thing I would suggest is to build a website rather than a PDF document. Although many companies still allow you to upload a PDF version of your portfolio in the application, simply typing in a URL(website address) might be more convenient for you and the recruiter. Also, you can show much more things through online (website) by guiding the viewers through your work in an interactive and more in-depth manner.
For example, online portfolio websites allow you to create links to other social profiles that you have related to UX. Also, you can either link or embed videos that explain about the product as well as including working prototypes that the viewers can play around anywhere at any time. Moreover, you can include visually appealing interactions or any other design factors (videos, animations etc) that express your creativity. (*Behance or Dribbble Playbook might work as well as long as you explain your step by step UX process)
Another advantage of creating a website is the implementation of a tracking code. By inserting a tracking code within your website, you can visualize (within the analytics page like Google Analytics) who has recently visited your website, how long they stuck around and which specific projects they looked at. All these rich and useful information that you can get from analyzing the visitor data could potentially help you in making changes to the layout of your website and how you ultimately present your projects.
“So, how and where do I start building my portfolio website?”
There are many ways to go about this. Since this blog was not intended to provide a tutorial in how to build a website, I’ll just layout some of the resources that could be useful.
Existing responsive frameworks available for Download:
- HTML 5 Bootstrap Templates by Colorlib
- HTML5/CSS3 Templates by Colorlib
- HTML5/CSS3 Templates from Bradley Nice’s blog post
- Bootstrap Templates by Bashooka
- Responsive Templates by Responsive Miracle
You can also use other frameworks that help you build a responsive website. Nowadays, it seems like a lot of people take advantage of AngularJS or ReactJS to shorten their time but to be honest, I’m still learning it so I can’t say much about them. Please look them up if you are interested.
Alternative way to create a website (no coding):
I’ll also share an excellent article about the overall workflow in designing and developing a portfolio website — “My (Simple) Workflow To Design And Develop A Portfolio Website” written by Adham Dannaway
#2. Tell a story of who you are
Whether you submit the application through an employee referral or online, you are probably aware that there are hundreds, maybe thousands of applicants who want the job as much as you want. So, what you need to think about is, “how should I package myself so that I stand out from the rest of them?”
Just like writing your Statement of Purpose essays for your college application or even writing your cover letters, you have to really think this through before getting right into adding project contents on your website. Portfolio is one of the most important factor in the job application (for UX) — without it, I doubt that you will successfully land a job as a UX Designer. That’s how important a portfolio is! Therefore, you should ask yourself some fundamental questions such as, how you want to be viewed as to those that don’t know you just yet.
- “What is it that’s unique about me?
- “What is my background? How did I get in to UX?”
- “What kind of skills do I have that will be useful for this role?”
- “What are my interests and passion that really lines up with this job and how can I relate my previous experience or project to it?”
- “What do I lack in terms of skill or knowledge?” — being self-aware is very important
There are places inside your website like the “About Me” section where you can explain more about who you are. It’s also a great place to express your current level of expertise, your passion and interest as well as the things you wish to improve and learn moving forward. Last but not least, it’s a fantastic placeto list some of the personal characteristics like hobbies, taste of music or anything that you think will resemble who you are. But of course, this is optional and shouldn’t be the main focus.
In addition to adding an “About Me” section, in a higher level, creating a nice intro page of your website could also be as important. For instance, you could add a video or a picture with short but impactful description of who you are and what kind of job you are looking for. Brief but straightforward explanations describing yourself is a great way to summarize it without having the viewer to click on the “About Me” section. As long as the balance and the continuity of the design concept throughout your entire website is great (visual design that I will talk about next), it could potentially influence what the viewer conceives as what kind of designer you are.
I personally love this portfolio website made by Ivo Mynttinen. Although it would’ve been nicer if the name was visible on this page, still there’s a lot of information about this person already. Also, simple and clean usage of typography makes it easy to read with modern-looking design (full page image) proving that he’s up-to-date on the current web design trends. I’m not saying that you should make your portfolio exactly like this — there are so many creative things you can do. This is just an example explaining the importance of having a good overall “feeling” of your landing page.
To be honest, some of you might disagree that the “About Me” section or this kind of example are useless to have in a portfolio website. Yes, many times people would tend to go straight to your projects and judge you from there. However, I personally think that portfolio website should be viewed as a reflection of yourself (portfolio website = self-identity) other than a place to list your projects. So, I would say, try to be creative and unique, stand out!
#3. Attractive visual design matters
People are visual animals and no one dislikes from viewing a wonderfully crafted design. In this section, I want to talk about some small things that are often neglected and seen indifferent to your point of view. However, you’ll be surprised if you pay attention to these small things, it could a make a huge difference in the overall quality of your portfolio website. Doing it right will attract more viewers, convince them that you’re a designer and that you care about UX.
“So what are these small but powerful things?”
Who said having an attractive portfolio website design doesn’t matter? Do you think only the content of your project matters? I don’t think so!
Yes, visual components like colors, fonts, layouts and even images, all come together in bringing an overall feeling of your website. If you hadn’t paid much attention to these when you initially designed your website, I suggest you go back and carefully pick out your color palette, fonts and think about how you are going to showcase your work (layout).
- “Is your design consistent overall?”
- “What do the colors look like? Any colors that unnecessarily capture the interest of the viewers?”
- “Are you using more font types than needed?”
- “Are the contents easy to read with appropriate type font?”
- “Do you have more than enough call-to-action buttons?”
UX Designers are designers too and therefore, you should pay attention to these little details! There’s no harm in making things look nice.
Suggestion
Try to think in terms of what the users of your portfolio website will see when they first come into your website from the basic level as possible. It’s completely understandable that you might not catch these little things and you might need a fresh set of eyes. Instead of trying to figure out everything on your own, ask for help — ask people to review your portfolio website and take those feedback seriously.
#4. Have clear navigation components and links
Navigation is one of the most basic components to have in your portfolio website. When you are at the sea, where will you sail to without a having a compass in your hands? (haha) Anyways, the viewers need to know where to click in order to get to certain locations (About, Portfolio, Contact etc). Don’t try to hide them or make them hard to find. Making sure that the viewers to your website are able to browse through the contents easily is crucial. Making this clear will help them to smoothly transition from screen to screen and might even increase the chance for them to look at 100% of what you have prepared.
“What’s on a typical navigation bar?”
In most cases (commonly), designers will have the following:
- Portfolio
- About
- Resume (or just a link inside the About section)
- Contact
- Optional — other showcases like Dribbble embedded page, photography that are sometimes design artifacts outside of professional work
Other things that should be visible and easy to find are links that takes on specific actions. For example, a link to downloading your resume should be loud and clear since it’s one of the most important component to have. Moreover, links to your professional-related links such as LinkedIn, Dribbble, CodePen or Github should be visible at some point.
#5. List best projects first
Some people like to list their most recent projects first while some people prefer to list their best projects first. In my opinion, if you are trying get your first UX job, I think it makes sense to list your “BEST” projects on the starting line (as you get more experience and get more projects on to your portfolio, you can reconfigure the layout if needed).
“Why should I list my best projects first?”
Typically, those projects gets more views than the others and more views means, you have a higher chance that it will be asked to be explained during your interviews. And it also means that those projects could end up being your final reflections (impressions) of your current UX knowledge.
*An alternative to this is to have a separate section like “featured projects”. Sometimes, this works better ;)
#6. What’s good to have inside each project piece
This might be the most important information out of all — what do you put inside your UX portfolio project? Well, the first thing I will say is to stay away from dumping images inside your project contents without explaining the step by step UX process. Remember, you are trying to land a job in UX Design, not Visual Design. As a UX Designer, following and explaining the overall process is something that you should take very seriously.
From exploring some of the talented UX Designers and many young designers out there who have successfully landed their jobs and internships, I was able to see some of the overlapping features that were included in their portfolio contents. I’m going to lay them out and explain them what each of them means.
Overview
The overview section should come first, explaining some basic information about the project. The viewer should be able to catch a glimpse of what the product is about, what it looks like and how it functions. This should exist because not everyone has time to look at all the contents that you wrote for each projects. If they are interested, they will continue scrolling down to read more.
- Purpose of the project — why is it that you started this project
- Objective — what you accomplished, what were the deliverables
- Approach — how you accomplished, steps taken
- Project duration — is it recent, how long did it take
- Group members — names (or/and links to their LinkedIn profiles)
- Your role — important when telling a story during an interview (how you contributed to the team)
- Links — download app, view poster, view prototype, data sourceetc
- Final product show case— pictures/videos (overview)
UX Process
This is probably the most important section to MUST have. If your project followed a UX process, I suggest you to explain it thoroughly but in a condensed form. The viewer should be able to follow through your footsteps by taking a look at:
- Research — paper reviews, competitive analysis, interviews, contextual inquiries, surveys etc
- Ideation — brainstorming, diverging and converging on ideas, customer journey, persona etc
- Wireframe — ideas, sketches, brainstorming, what worked and what didn’t, testing results, iterations
- Design — fleshed out design, test/feedback, iterations, final design
- Prototype — user testing, iteration, towards development (if you did)
Including related pictures of you and your team doing a design challenge, drawing wireframes, having user testing sessions and the iterated designs are all very important things to include in this section.
Extra things to include (if you wish)
- Working prototype demo — iframe embed to allow users to play with it
- Papers published from the project, awards received, conferences, scholarhips etc — showing your achievement and dedication to the project
- Conclusion — what you learned and what you will be doing next
Additional tips
- Include big enough images with good resolutions (compressed images)
- Describe transitions from one stage to another
- Include constraints/obstacles during the project (or have it down somewhere in your notes) — useful when doing interviews. What went well, what didn’t and how you overcame those situations as a team/individual
- Avoid too much text — you will get a chance to explain later
- Sometimes, people have two versions: 1) Short, picture-focused version, 2) Case study — this is also a good way to show your work
- Try to find inspirations — find UX professionals’ portfolio websites that you think are fantastic and learn from those by comparing it to your own.
Take a look at my article on preparing for your UX interview!
#7. Create additional portfolios related to design
As a designer, sometimes you might want to create a pixel-perfect, attractive UI Design concepts, interactions, animations (GIFs) and showcase them as your side projects. Sometimes, writing down the tools that you can use in your resume might not prove a point. And sometimes, the role you take within the project might not always relate to your specific skill sets. Just like I mentioned a couple times earlier about Behance and Dribbble, these are actually great places to post your creative designs, separate to your UX Portfolio Website.
In my case, in addition to having a portfolio website, I’m very active on Dribbble, posting a lot of UI Designs, animated GIFs, prototypes and all that. Personally, I consider this type of showcasing is another great way to show your passion and your knowledge. During my interviews, many of the people I spoke to pointed out that they viewed my work on Dribbble. Most of them told me how they were able to “trust” that I was capable of using the tools. Moreover, they appreciated the effort I made in doing things like the Daily UI Challenge to boost my skills (motivation).
#8. Avoid unnecessary social network links
Lastly, I suggest you to remove unnecessary social media links in your portfolio website. However, if you would like to show your personal life (other than professional work related stuff), go ahead unless there aren’t any weird pictures or postings that could hurt you. This is my personal opinion.
Please press ❤️ if you liked reading this!
