5 Getting the basics right
“Obey standards unless you’ve got a darn good reason not to.”
— Alan Cooper
Few hiring managers review portfolios because they want to. Reviewing portfolios is a means to an end. They want to exclude as many candidates as possible until they have a list of interviewees that is as short as they feel comfortable with.
In a 2015 blog post, UX coach Christina Wodtke wrote1 “the hiring manager hires five minutes at a time, between meetings. The recruiter, whose full-time job is hiring, probably doesn’t know how to evaluate a portfolio. So they pass all sorts of garbage to the hiring manager. The hiring manager, however, is doing their other twelve jobs: coaching, meetings with peers, meetings with upper-level folks, maybe even designing.”
The founder of Austin Center for Design, Jon Kolko, wrote in 20122: “The sad reality of sending a portfolio to a consultancy is that your chances of getting a job are a weighted dice roll, based on a mixture of extremely fast first impressions, serendipitous timing, and who you know. When I would receive a portfolio from someone I’d never heard of, I tried my best to actually look at it, but if my schedule was three-deep back to back meetings all day long, the email was ignored. Sometimes, if the sender got lucky, they might send it on the same day that a plea for hiring went out, usually based on a sales cycle accelerating or a deal closing unexpectedly. In these cases, they got the benefit of the doubt.”
In these challenging circumstances, hiring managers often reject portfolios for the simplest of reasons, including poor visual design and bad copywriting. Avoiding simple problems like these is what I call ‘Getting the basics right,’ and I hope the guidelines in this chapter will help you to do exactly that.
Work with convention
In recent years, patterns have started to emerge around UX portfolio structure and content.
Portfolio reviewers expect to see:
an introduction summarizing the designer’s skills and approach a collection of case studies documenting previous work highlights client references
additional personal information that completes the picture
If you work within this fundamental framework, you will deliver what most hiring managers will expect and be comfortable with. It’s the approach with less risk.
Following this structure may seem restricting, but it’s just a constraint. Designers love constraints. Take this book. There is a structure that all O’Reilly books need to follow. But this doesn’t stop this book being mine. If anything, it helps me communicate more easily as it allows me to focus on the content while safe in the knowledge that O’Reilly has carefully honed this book format over considerable time.
But what if you prefer to take a different approach? Sometimes the most creative and novel solution can reap great results, but be sure to get to understand your target portfolio reviewer first. Otherwise, it can be a risky move.
Keep your portfolio as brief as possible
There’s a UX portfolio online that some designers regularly cite as being one of the best. The leading case study in it would take 30 minutes to read. That’s just one case study. Few hiring managers have time to read that.
On the other hand, there are other portfolios out that which are far too brief, offering little more than a few photos accompanied by the odd sentences. Hiring managers will be suspicious of this.
Your goal is to address the hiring manager’s requirements. That’s why researching their needs is so important.
As a guideline, a PDF-based portfolio probably shouldn’t run more than 15 pages, even if you’re very experienced. A higher page number suggests that you need to curate and edit your stories much more keenly.
With an online portfolio, prioritize your best work. You may want to place all of your work online for marketing reasons. If so, deprioritise the less important case studies, either visually or by placing them within an archive section.
Figure to follow. Online portfolio example
Remember: the sole purpose of your UX portfolio is to get you an interview. Hiring managers don’t need your life story or a full, detailed account of your design process. Your portfolio should demonstrate your ability to synthesize, prioritize, and communicate the most important information about you. It needs to work on two tracks:
The fast track, where the key information about you and your work are immediately obvious.
The slow track, where the critical information about you and your work is explained and fleshed out.
Choose the right platform
One question that seems to torment many candidates is whether their portfolio should be a PDF, a personal website or within a portfolio community like Behance3 or Dribbble.4
There are pros and cons to each platform.
My research suggests that many hiring managers prefer PDF-based portfolios. They find them simple to navigate, annotate and share internally. PDF portfolios can also be printed quickly and read on the daily commute home. Reviewers can also scribble notes on a printed portfolio - which means the content may guide a subsequent interview.
For a candidate, a key benefit of the PDF portfolio is that you can customize them for specific job applications. The more relevant the portfolio, the more likely you will get an interview. It’s difficult to personalize a web-based portfolio for particular employers in quite the same way.
You can also present a PDF portfolio if necessary.
The problem with PDF portfolios is that they lack, somewhat ironically, portability - they work well viewed via a PC, Mac or tablet, but on a smartphone? Not so much. And while it is now technically possible to add video and audio to a PDF document, many tools that export to PDF do not support it.
Points to consider
Do export to PDF rather than use a file format that hiring managers may not be able to open. (I once received a portfolio in Open Office format. It took me 30 minutes to download the necessary tools to export and see it. If the candidate hadn’t been a personal contact, I would not have bothered.)
Don’t switch page orientation mid-PDF. From portrait to landscape, or landscape to portrait — it’s annoying for anyone reviewing it on-screen.
Avoid exporting your entire portfolio as a single-page PDF as this can be unwieldy to navigate on-screen and makes the document impractical to print. Have multiple pages and make sure you number each one. Start each new case study on a new page.
Watch the file size. Keep your PDF portfolio less than 10 megabytes to increase the chances of email systems accepting it as an attachment. 5mb is even better.
If you want to make your PDF portfolio available via a file storage site instead, host it at more than one — employer firewalls often block them. Alternatively, host the file on your own website.
Include your name in the filename so reviewers can easily identify your portfolio once they save to their hard drive. “UX-Portfolio.pdf” won’t stand out. You may wish to include the date you created the portfolio too.
Avoid adding password protection to the PDF. It will just act as a barrier.
If you include website links in your portfolio, use a URL shortening service and print the link in full. This way hiring managers can still choose to refer to the web content cited if they are reading a paper copy. Of course, regularly check the links work.
If you are printing your portfolio, use 40lb Bond (150 gsm) paper for maximum effect.
I’ve lost track of the number of PDF portfolios I’ve stumbled on via search engines that the designer apparently didn’t want to go public. If you are hosting the PDF on your own website and want to limit its audience, adding the X-Robots-Tag to your site’s HTTP responses is the best way to prevent the file from being indexed by search engines.
If you are using an Apache-based web server, you can do this using the .htaccess or httpd.conf files.
For example, to add a noindex, nofollow X-Robots-Tag to the HTTP response for your portfolio file called ‘jo-designer-201602.pdf’ in the directory /download, add the following snippet to the site’s root .htaccess file or httpd.conf file:
<FilesMatch "jo-designer-201602.pdf$">
Header set X-Robots-Tag "noindex"
</FilesMatch>
If you use anything but Apache to host your website, I’m sorry.
Web
A web-based portfolio has some advantages going for it.
It can be indexed by search engines and will act as public promotion every day and night. Well, most of the time.
An easy-to-remember web address is easy to share.
Responsive web design techniques will increase the chances that people can view your portfolio regardless of the device they use.
However:
• Printing is more difficult.
• Internet access is required at the time of portfolio review.
• Reviewers will judge you on the experience your website offers.
• Reviewers may even judge you on the site’s source code.
• Building your own website from scratch will take time that may be better spent working on content.
Points to consider
Practice responsive web design. Ensure the interaction design and information architecture is as efficient for visitors as possible. Keep both code weight and the required human interaction low. Don’t make reviewers jump through hoops to get what they need. They won’t.
It is tempting to provide links to every single thing you’ve ever worked on, but you risk suggesting that you have no opinion on your past work. It implies that you expect reviewers to look at everything and sort it out themselves — not good. As I mentioned earlier, feel free to keep an archive of stories for search optimization purposes, but ensure your portfolio clearly prioritizes the key stories you consider most relevant to your target audience.
Do not create placeholder pages that deliver the message “Coming soon!” when viewed. It’s an anti-climax for people and a waste of their time. Only create pages when content is ready to go live.
Regularly check all of the website links you reference. No hiring manager wants to be met with 404 page not found. If you move your portfolio to a new web address, always arrange for the original URL to redirect visitors to the new one.
What do you want a hiring manager to do after they click on your portfolio link? Review your portfolio or try and find a password? As with PDF portfolios, avoid the obstacle of password protection if you can.
If you don’t want your online portfolio to appear in search engine results, use the ROBOTS meta tag. Add this to the top of all of the pages you wish to hide:
<meta name="ROBOTS" content="NOINDEX, FOLLOW" />
If you manage search engine crawling by publishing a Sitemap file in XML,5 be sure it does not include the pages you wish to hide.
Portfolio communities
Portfolio communities like Behance or Dribbble are often image-led. They don’t tend to suit the text-led needs of the UX designer or researcher.
Another issue with portfolio communities is that your competitors are often just one click away. A recruiter once told me that he’d been sent a link to a portfolio on Dribbble. He was impressed by it, only to realize that he’d taken a wrong turn and was viewing another designer’s work instead. Good for the recruiter, who now had another prospective candidate to contact. Not so good for the original applicant.
Portfolio communities can also be a problem when the portfolio has to be shared internally within a company. As Erik Flowers of Intuit wrote in a 2013 blog post:6
I have to send your materials to upper management. They have never heard of these niche sites. I’ve had to give people’s Behance (or whatever) to Sr. Executives who have no idea what they’re looking at. “Is this their website? Why are the pictures so small? The URL didn’t work. Why is the name different?” Once, when a candidate sent a Dribbble profile, my boss clicked and clicked the thumbnail, and when I told him “those don’t enlarge,” he looked at me and said, “This is how people want to present their work?”
So, use portfolio communities only if you think they will meet yours and employer needs.
Does it matter if you use a site builder or a template theme?
It shouldn’t do, unless the job role you are applying for includes front-end development. If it does, you should probably roll your own.
Which site builder or template theme is best?
Whether you choose Squarespace,7 Wordpress.com,8 or a personal installation of Wordpress9 with a purchased theme, the important thing is that you find a professional-looking solution that allows you to communicate your story the way you wish to tell it. Hell, you can even use Medium.10
_Figure to follow. https://medium.com/borahm-cho_
Other platforms
PDF and the web are the most dominant UX portfolio platforms, but I’ve also seen designers use the Apple AppStore or iBooks to host their work. The challenge with both is that you are adding additional steps for a hiring manager that may act as a barrier. The simplest approach is often the most effective.
Ian, you’re skirting the issue. Which is best? A PDF or web portfolio?
Ultimately it depends on who will be reviewing your portfolio and what they will expect. As I mentioned earlier, many hiring managers prefer the simplicity of a PDF portfolio. But there are still those who believe UX designers should have a web-based portfolio because the role often involves interaction design. So, it’s important to research your prospective portfolio reviewers and anticipate their expectations.
You could also do both. In an ideal world, I would:
• have a limited website portfolio running as a promotional teaser. This would offer project summaries of around one or two paragraphs and invite visitors to get in touch for more information.
• customize a PDF portfolio in response to job ads and the website queries about work that would naturally flood in.
• use limited content in portfolio communities and social media to drive people to my main portfolio site.
That’s what I would do. But it may not be right for you.
Make it look good
People perceive attractive products to be easier to use than ugly ones. This is called the aesthetic usability effect. Hiring managers, despite their expert knowledge, are often as prone to the aesthetic usability effect as everyone else. Throughout my research, I would ask hiring managers to share their most favorite UX portfolio with me. Invariably, it would also be the most beautiful.
If you do not have graphic design skills, you may feel a little sad at this point. Fear not — the most beautiful UX portfolio didn’t always result in a successful hire following interview.
But the visual appearance of your portfolio — layout, typography, color — must support your overall message. Otherwise, it will detract from it.
This section introduces fundamental principles and tips that should help keep things smart. It’s not intended to be an in-depth summary of graphic design techniques, but I hope it will get you on the right path.
Four principles with an unfortunate acronym
Educator Robin Williams introduced four fundamental principles in her famous book ‘The Non-Designer’s Design Book’ that she felt appear in every well-designed piece of work. Robin writes:
Contrast - The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page—it’s what makes a reader look at the page in the first place. It also clarifies the communication.
Repetition - Repeat visual elements of the design throughout the piece. You can repeat colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity.
Alignment - Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean and sophisticated look.
Proximity - Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure.
It will help to keep these principles in mind as you create your UX portfolio.
Layout
Whether you are creating a PDF or online portfolio, use a grid.
Aligning your typography, images, and graphics to a grid will bring consistency and visual harmony to your page layout. Your portfolio will look neat, clean, and organized. Hiring managers will find it easier to navigate through your content.
Maintaining your portfolio will also be easier as you will have made many layout designs while choosing your original grid structure and you won’t need to make these decisions again.
When selecting a grid, think carefully about the content you need to accommodate — headings, paragraphs, pullout quotes, large and small images.
For the web, designers will often opt for a grid with 12 or 24 columns as 12 and 24 are both divisible by 2 and 3. This offers the greatest flexibility regarding how many elements can be shown in a row.
For a PDF-based portfolio that could be printed or read on-screen, a simple landscape grid works best.
Figure to follow. Portfolio example without Grid
Figure to follow. Portfolio example using Grid
Folios, footlines, and footers
However you lay out your PDF-based portfolio, make sure you accommodate ‘folios and footlines’ or footer.
In print publishing, folios are page numbers. If you have a PDF-based portfolio, number the pages so you can refer to specific pages easily during a screening call or interview. Make the numbers large enough to be easily recognized at page-turning distance.
A footline is commonly found at the bottom of a page and contains the name of the publication and its publication date. In a PDF-based portfolio, place your contact details there instead. Your name and telephone number or email address should be enough. It’ll mean your prospective employer or client always has them available, even if pages get printed and separated. You may wish to add the page number to the foot line for simplicity.
If you have an online portfolio, add your name and contact details to the footer of each page.
Typography
Typography is a key way to reflect your personality in your portfolio, but it should also be invisible — reviewers should never become aware of the act of reading, or they may stop. Your choice of typeface is more critical in headlines, but body copy also has a feel.
Guidelines
Pick fonts that are appropriate for you, but be a little conservative. Remember that you are ultimate choosing for your portfolio reviewers, not just yourself.
Use two typefaces at the most. Contrasting faces will provide maximum effect. Headings are important, but body copy can have personality too.
Whichever typefaces you choose, make sure they are legible. Safe bets include Baskerville, Bembo, Bodoni, Caslon, Clarendon, Frutiger, Futura, Garamond, Gill Sans, Goudy, Helvetica, Janson, Minion, Palatino, Perpetua, Times Roman, and Univers.
Classic combinations include:
• Helvetica / Garamond
• Futura (Bold) / Bodoni
• Garamond (Bold) / Futura
• Minion (Bold) / Gill Sans
Figure to follow. Typeface samples
Think about text sizing. The smaller text is, the less important your reviewer will assume it to be. The larger, the more important they will consider it. A type size of 12 points is a good minimum for both online and print use.
Use ALL CAPS sparingly, if at all — people are more used to reading mixed case.
Regarding line length, aim for around 40 characters. That’s about six words per line. If you read to the end of a line and find yourself reading the same line again instead of the next one, the line length is too long.
Use italics sparingly, and underline only for links. If more than 20% of your portfolio is bold and italic, take another look at it. That’s too much.
Line height The golden ratio, 1.61803398875 is supposed to be inherently aesthetically pleasing, occurring in geometry, art, and architecture throughout history. Some designers believe that multiplying your type size by the golden ratio (1.618) will result in a decent line height. It is certainly a good starting point.
Alignment Left-align your text, including headings. It’s the most common arrangement and therefore familiar and comfortable to read. It gives a nice, clean left-hand edge for a reviewer’s eye to return to.
Conversely, text that is right-aligned will cause a reviewer’s eyes to do acrobats every time they reach the end of a line and try to pick up the next one. Fully justified text suffers from the same issue. Irregular spacing within a paragraph can also make the text even less easy to read.
Keep centered text to a minimum. Don’t use it for significant amounts of text that you would really like someone to read. Don’t center headings either - they’ll just break the flow of text and look untidy.
In multi-column layouts, avoid placing a heading at the top of anything but the first column as it could draw a reviewer’s attention away from the left-hand column altogether. For the same reason, rewrite or adjust spacing to avoid having a single word or sentence sitting isolated at the top of a column.
Figure to follow: Alignment samples
Capitalisation Use capital letters to start sentences and bullets, and for proper nouns such as cities, people, software, and company names. Using them for anything else in body text (such as roles, techniques, or deliverables) will make your writing choppy and harder to read.
Sentence case and title case are both valid choices for headings. Whichever you use, make sure you stick to it.
Lists and bullets If you can use bullets to list content, then do so. (A single sentence followed by a list of two items is easier to read that three sentences.)
Avoid the temptation to use a variety of decorative bullets to express your individuality. Gimmicks such as icons (arrow, pointing finger, smiley) or a difference in color are likely to bring confusion rather than support delivery of your message. So, keep it boring. Just one style of bullet throughout, please.
Try to avoid two or more levels of bullets. Rewrite your content instead.
Never center the items in a bulleted list as this camouflages the bulleted list. Always left-align.
Pull-out quotes and facts Pull-out quotes from users or stakeholders are a great way of highlighting particular details. Make them bigger, but think carefully before putting them in different colors. Multicolored text throughout a document will just distract.
Should quotes be sandwiched between single or double quotes? Single quotes are probably most standard, with double quotes only when the quote itself features a quote.
Tables If your portfolio includes a table, you may wish to make it wider or narrow than the column in which it’s placed. Strictly speaking, this is breaking the grid, but considered a good way of bringing the content out. A little rule-breaking is okay.
Notable resources
Butterick’s Practical Typography – Lawyer Matthew Butterick much-celebrated guide.
http://practicaltypography.com
Professional Web Typography – Donny Truong’s brief guide.
https://prowebtype.com/
The Elements of Typographic Style Applied to the Web – Richard Rutter’s project to bring online fundamental principles from Robert Bringhurst’s classic book ‘The Elements of Typographic Style.’
http://webtypography.net
Color
Color can bring your portfolio to life, but as with typography, less is more. Pick a key color and keep it simple. Again, be a little conservative — choose a color that reflects you but which will also be appropriate to your prospective employer or client. Add light or darker variations of your key color if you need more.
Choosing a color
Colors can be described as being either warm, cool or neutral. Apart from purple, which can be either warm or cool, depending on the shade.
Warm colors
Warm colors are those from red to yellow including brown, orange, and pink. They evoke warmth because they remind us of fire or the sun.
Red Red represents energy, excitement, passion, seduction, desire, cheerfulness, courage and power. In China, it reflects good fortune and joy. But elsewhere in the world, it can be associated with danger, risk, rebellion, fire, and aggression.
Yellow Maybe it’s the association with bananas, but yellow represents cheerfulness, happiness, laughter, and optimism. Sadly it can also reflect cowardice and jealousy.
Orange Orange can suggest excitement, enthusiasm, pleasure, and creativity. We have nothing bad to say about orange. Well, apart from the fact that an orange portfolio may be too full-on. So, handle with care.
Pink Ah, pink. Romance and Beauty. And femininity. No, forget the last one. It’s 2017 and time we stopped thinking that.
Cool colours
Cool colors include green and blue, but also some shades of violet. Association with the sky or fields of lush grass means many cool colors suggest calm.
Green Green is awesome. It strongly reflects nature, of course, but also reliability, wealth, growth, honesty, optimism, harmony, peace, freshness, and good energy.
Blue Now we’re talking. Blue suggests wisdom, professionalism, formality, reliability, loyalty, trust, and confidence. But it can also be seen as corporate.
Neutral colours
These include white, black and gray.
White White symbolizes cleanliness, purity, simplicity, and innocence. In the West, white is often selected for wedding dresses, but in China, white represents death and mourning. It was formerly worn at funerals.
Black Ah, black. Elegant, sophisticated, authoritative, powerful, formal, and yet somehow both mysterious and conservative.
Grey There’s not much you can say about gray. It’s conservative and formal. So, it can be very useful. That’s it.
Purple
Purple is the meeting point between warm red and cool blue, so it’s considered warm or cool depending on the shade.
It’s closely associated with royalty, luxury, wealth, magic, and prosperity.
A plea from an ageing writer and designer
Whichever colors you choose, do ensure they offer sufficient contrast when used together. Online, the Web Content Accessibility Guidelines (WCAG) 2.0 level AA requires a contrast ratio of 4.5:1 for regular text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for regular text and 4.5:1 for large text. Large text is 14 points and bold or larger, or 18 points or larger. If that reads like gobbledygook to you, run your chosen colors through an online contrast checkers such as the one from WebAIM11 or Snook.ca.12 This ageing designer thanks you.
Notable resources
Color Matters – Professor Jill Morton’s, erm, colorful guide to color
http://www.colormatters.com/
Design Seeds – Color palettes inspired by community-submitted photography.
https://www.design-seeds.com/about/
Color Safe – Generator of accessible color combinations for the web
http://colorsafe.co
Photography
The photographs in your portfolio should inform or set a mood. Ideally, they will do both. Remove any images that don’t fulfill either of these two goals. Every photograph should have a purpose. A portfolio reviewer’s time is too short for those that don’t.
The vast majority of the photographs in your portfolio should reinforce your written narrative. Earlier in this chapter, I mentioned that portfolios need to support both the fast track and the slow track. Photographs are perfect for the fast track — you can use them to draw attention to particular aspects of a case study or story. So, don’t just throw images into your portfolio without care. Use photographs and carefully-worded captions to communicate a particular message.
Guidelines
Check each photo conveys the message it is intended to. If the picture is a mood shot, be sure that it results in the desired emotional response.
Ensure the content of the photograph is clearly visible. The image should be cropped to draw attention to the right elements. It should be of the highest quality, certainly not out of focus or pixellated.
Ensure the image is sized appropriately. For an online portfolio, try to avoid using thumbnail images that require the reviewer to click or tap to see anything of value. Remember that hiring managers have little time, and the less work they have to do, the better.
Ensure photographs look professional, but not overly so. The images need to look credible and realistic, but not like stock photography. Oh, and never use stock photography in your portfolio. It’s your portfolio, not Getty’s!
Avoid framing or embedding photographs and images into browser chrome or a device such as an iPad, thinking that it will introduce realism. It will only result in a picture that will quickly date.
Headshots and Portrait photography
Should you include photographs of you in your portfolio? Some people think that doing so can introduce the opportunity for sexism, racism, ageism and other issues. Others say go-ahead — you wouldn’t want to work for a company with those values anyway. Ultimately inclusion is a personal decision.
If you do decide to include a photograph of yourself, appear professional and approachable. You need to convey that you are someone the portfolio reviewer would want to work with.
Look the part. Dress appropriately. Adopt the same rule that goes for face to face interviews — dress for the job you want, not the one you have. Corporate or smart casual? You decide. Oh, and wear undergarments. Seriously.
Make sure that you sleep well the night before. Before the photo is taken, get a haircut. Look your best. Do something for you. Do what you can to arrive feeling good about yourself.
Think about how to handle any piercings, tattoos, and jewelry you have. Will they lead to a good or bad first impression for your ideal client or employer? Should you hide them or focus attention on them?
Think carefully about where to have the photo taken. Make sure you are front and center, not lost to a distracting background.
Captions
Captions are fantastic. Use them to add detail to the message a photograph is communicating. Place them under the picture. That’s where people expect them. Left-justify the caption and have it extend no more than three-quarters of the width of the image, even it means that the caption extends to two lines. Doing this lets in a little white space that will allow the page or screen to breathe a little.
Notable resources
Lectures on Digital Photography – Stanford professor Marc Levoy’s respected course, as presented at Google in 2016
https://sites.google.com/site/marclevoylectures/
photoUX – James Chudley’s blog on the UX design use of photos
http://www.photoux.co.uk
Feature Shoot – An inspirational showcase of striking feature photography, including documentary.
http://www.featureshoot.com
Charts and graphs
Use charts and graphs to illustrate interesting data. Use them wisely. As data visualization pioneer Edward Tufte says, ‘if your statistics are boring, you’ve got the wrong numbers.’
Follow best information design practice. Use charts and graphs to show cause and effect or for making visual comparisons. Perhaps demonstrate the impact of your design work against an important metric over time. If necessary, give people a meaningful ‘yardstick’ to measure your data against such as global industry figures.
Remember the goal of information design is for people to understand as much as they can in the shortest possible time. Keep the ratio of data to decorative elements high. And if a table or list would be more efficient, use a table or list. Don’t hesitate to lose the pretty graph.
Use colors, iconography and other decorative elements carefully. As Edward Tufte says, show data variation, not design variation.
Skill bar charts and capability star graphs
A feature in many UX portfolios is the skill bar chart or capability star graph. The idea seems simple enough. There’s a bar for each skill, and the length of each bar is alleged to indicate how experienced the designer is in the given skill. But I fear they are more of a problem than a solution.
Knowing that you are better at one thing than another shows self-awareness, and therefore, a high degree of maturity. That’s a plus, right? Well, yes, it is. The trouble is with the bars themselves — they’re not a great way of presenting this information.
Figure to follow. Bar chart and star graph example
Let’s say you see a bar labeled ‘Information architecture,’ and its length is about 60% of the maximum possible. What does that mean? What does 100% represent? Or 10%? Or 60%? So, one problem is that plotting yourself on a range is only meaningful if it’s clear what the range is and everyone agrees.
Then there is the lack of specificity the simple labels of these bar charts often introduce. In the example above, where does ‘Information architecture’ begin and end? This topic has resulted in countless tweets and Facebook posts.
Using these bars also leads designers to feel they have to show that they are weak at something. Otherwise, all of the bars would be of the same length, which would just look wrong. But there’s a time and a place for revealing your weaknesses. It’s during chats with your therapist, your understanding partner, or, sometimes, during your job interview. It’s not within your portfolio for review by a hiring manager looking for reasons to reject you.
So, what should you do? Well, ask yourself what you want hiring managers to know. Then tell them. In words.
Are there ever any exceptions? Situations when a capability star graph might be the way to go? Yes. In 2017, the Toronto design agency ‘The Moment’ published the capability star graph they plot their innovation designers against. If you were applying there, or at any other employer that has done the same, it would make sense to plot yourself on the graph and share it with them.
Innovation Designer Capability Map
http://themoment.is/resource/
Career timelines
One of the key goals of good information design is to communicate complex ideas with clarity, precision, and efficiency. Career timelines often fail in this regard. Careers can be messy things, and timelines can quickly become congested. It can often be more efficient to deliver career history and achievements using a simple table or list rather than combining them into a graph.
Figure to follow. Timeline example
Documents and artefacts
Documents and artifacts are important to designers. They are, after all, how we often work through and develop ideas. Creating a great user experience in a vacuum is hard. Documents help us persuade, inform and involve other people. They are the key way that we communicate and capture the ideas and feedback of others. At some companies, the production of documents is how they get paid.
But documents and artifacts are part of a designer or researcher’s job, not all of it. We shouldn’t be encouraging hiring managers to judge us on our documents alone.
So, as a general rule, avoid presenting portfolio reviewers with complete documents and artifacts. Instead, use them in the same way as photographs - highlight key aspects of your story with them.
Handling documents and artifacts in this way allows you to put them fully into context. When you present documents in your portfolio, you are repurposing them for another audience. They were created for and by people that had some involvement with the project they relate to. Portfolio reviewers won’t have the same level of understanding about the project. Using extracts rather than full documents allows you to explain why the document (or the particular highlight) was significant to the project or design.
Also, deliver enough of the document or artifact to communicate your point and no more.
Make it easy
When you include part of an artifact or document in your portfolio, ensure that what you wish to convey can be seen without further action on the part of the hiring manager. Don’t force them to click or tap to see what they need to see. Respect their lack of time.
But what if the document is really, really, good, or noteworthy in its own right? There is, of course, an exception to every rule. If you really want reviewers to see the full document, follow the same advice in offering a decent-sized preview, but add a link to the full version. If you have an online portfolio, ideally allow the document to be expanded in place without forcing the user to a new browser tab or page.
Figure to follow. Embedded document example
Video
The first thing to bear in mind with video is that it typically requires a greater level of interest and engagement from people than words and pictures on a page. For this reason, use it sparingly and with good reason. Edit it tightly for length too. Factor in the portfolio reviewer’s lack of time.
Don’t consider doing your entire portfolio as a video unless you are sure that the hiring manager you are targeting will respond well to it.
Embed if you can, Link if you can’t
With an online portfolio, always embed video clips if you can. Do consider paying for professional-level hosting, and regularly check that the video is still available.
While it is possible to embed audio, video and other interactive objects into a PDF file, I’ve yet to see this done with a PDF-based portfolio. My guess is that the authoring tools most people use do not permit or make it easy it easy to include video. So, with a PDF-based portfolio, provide a shortened web link to the video online.
What to share
Highlights from usability testing sessions As we know, seeing people struggle or succeed with a website or application can be very powerful. Ensure you have permission to include.
Prototype or product walk-throughs If your work includes interaction design, it may be effective to create a short screencast, walking through a particular task or interaction.
Client testimonials If your client or team members are willing, video testimonials can carry considerable impact.
Talk excerpts If you are promoting your skill as a conference speaker, a short, professional showreel can give you an edge. Just don’t pretend you are the second coming.
Ensure it reads well
When you submit a UX portfolio pre-interview, it will be examined without you present, and often by a person who has never spoken to or seen you in person. Good writing is critical, and it’s the second thing (after graphic design) that candidates often get wrong.
Plan what you want to say before writing
As I mentioned earlier, it’s important to deliver only the content you are confident will interest hiring managers and nothing more. As the late novelist Elmore Leonard once said of writing, ‘Try to leave out the part that readers tend to skip.’
We’ll discuss how to tackle specific portfolio content in the following three chapters, but the general approach is to ask yourself what your portfolio reviewer needs to know.
Use your favorite method to capture your ideas — a spider diagram, a mind map, or simply a list. Then organize your thoughts, removing the weaker points and sorting the others into an outline that you believe will work. Then write.
Write first, edit later
Here’s a hard fact: Editing as you go will only prolong the time it takes you to write and reduce the time you can spend on other aspects of your portfolio.
Falling into the trap of editing as you go is so simple. You write a sentence, then another. You realize that the two sentences don’t work together, so you go back and edit. You write sentence three. Only the three sentences don’t make sense, so you go back and edit. Then you write the fourth sentence. Only the four sentences don’t work. So you go back and edit.
Before you know it, it was like that time you decided to correct somebody who was wrong on the internet just before going to bed. It’s light again, and the dawn chorus is in full song.
So, don’t fall into the trap. Write a decent chunk of your portfolio. Then, and only then, go back and edit. The result will be better, and you can spend the time you saved making your portfolio even better.
Chunk your content
Breaking your portfolio content into manageable sections will make it easier to read. Use clear headlines and subheads. Sidebars are useful to separate supportive material into subsidiary stories.
Use short words, short sentences, and short paragraphs
As advertising legend David Ogilvy famously wrote,13 use short words, short sentences, and short paragraphs. Aim for no more than 20 words per sentence and five sentences per paragraph.
Stick to one point or message per sentence. More complex text will slow portfolio reviewers down. They also suggest a lack of clarity in thinking. However, do vary your sentence structure to avoid choppiness.
As the late novelist and journalist George Orwell advised,14 “never use a long word where a short one will do.” Also, “never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent.”
Every word should be essential to the sentence. Every word should earn its place on the page. If it is possible to remove a word, remove it.
A trick worth knowing
From copywriter Henneke Duistermaat comes a neat trick:15 Highlight the important words in your copy and work only with them.
Her example:
I will provide you with suggestions on your performance so you can overcome the challenges you encounter every day while working for a difficult boss so that you can feel less stressed.
Meaningful words in bold:
I will provide you with suggestions on your performance so you can overcome the challenges you encounter every day while working for a difficult boss, so you can feel less stressed.
Henneke’s clear and concise version:
I help you overcome the daily challenges of working for a difficult boss, so you feel less stressed.
Ensure your voice comes through loud and clear
It’s your UX portfolio, not somebody else’s. Your voice, or a professional variation of it, should come through loud and clear. Write the way you talk. Don’t write in the third person. Doing this just makes you seem pretentious.
Keep it professional and positive
Countless articles on the internet16 argue that smarter people swear and curse more, but leave it out of your portfolio. Avoid swearing in your social media accounts too, if linked to your online portfolio.
Keep positive. Save the negative stuff for your therapist or partner.
In particular, avoid blaming clients or employers for what you consider bad decisions. People could also view such criticism as an example of your failure to persuade or do your job properly. We all lose arguments from time to time. Gracefully dealing with disappointment is part of the job.
If you need to mention that a decision significantly affected a design, try presenting it as a constraint followed by a solution. For example:
The project team could not interview users directly. So, we produced a modular design that we could rapidly amend in response to user feedback following launch.
Write to one person
If a hiring manager isn’t reviewing your portfolio alone in-between meetings, they are probably doing so on their solo commute home. So, write to an individual, not a group.
Be informal, but not too much. Use contractions and break the occasional rule — start the occasional sentence with ‘But’ or ‘And.’
Use active voice
Writing in active voice rather than passive will bring your stories alive. In passive voice, the subject of the sentence is acted upon. For example:
Collaborative workshops were attended by key stakeholders.
With active voice, the subject of the sentence is performing the action. It’s much stronger:
Key stakeholders attended collaborative workshops.
Avoid jargon
As George Orwell wrote, ‘Never use a foreign phrase, a scientific word or a Jargon word if you can think of an everyday English equivalent.’ Jargon tends to obscure meaning, so lose it. Even the most experienced UX practitioners will be grateful.
Read your writing aloud
If it doesn’t sound like you, edit or rewrite it until it does.
Notable resources
Professor Gibson’s ‘Making Words Work: A Guide to Grammar and Usage’
https://web.ku.edu/~edit/
Editing that works – Principle and resources from Caroline Jarrett and Jane Matthews
http://www.editingthatworks.com/
Plain English Campaign – Free guides and paid courses on crystal-clear communication
http://www.plainenglish.co.uk
Keep it updated
As we discussed in Chapter 4, it’s best to avoid having to make significant changes to your portfolio in response to an unexpected portfolio request. Make time to review and update it regularly.
In this chapter
In this chapter we discovered:
• Working with the existing conventions in structure and content will meet hiring manager expectations.
• The platform you choose - a PDF file or website - depends on who your portfolio is going to.
• Portfolio communities tend to be too image-based to meet the needs of UX designers.
• Your portfolio should be as brief as possible.
• It should look good and read well – and we discussed ways you can achieve this.
• Your voice should come through loud and clear.
• It’s best if you keep your portfolio updated.