How to build a portfolio and get a job in UX? — tools, processes, tips & tricks

An artistic depiction of me trying to land a job in UX with no network and no guidance. (Photo by Emile Seguin on Unsplash)

It was a middle of September 2017 when I decided that I want to become a Product Designer. Due to my pretty weird notice period, I had two months of free time ahead of me. It meant that I had 2–3 months to find a job so I had to do it strategically.

I had more than two years of experience in business behind my belt, so I decided to focus solely on user experience as it turned out that my work as a Head of Customer Success overlapped a bit with UX. Everything UI-related I decided to postpone for later (or simply abandon it altogether). I started working as a Junior UX/UI Designer almost exactly two months after making this decision.

Getting from basically no knowledge to enough-to-land-a-job level took me 1.5 months of working 6–8 hours a day every day, so it was somewhere between 250–300 hours. Obviously, I could spend much more time on preparing for interviews but I knew that the last call for sending resumes was the middle of November. Later, everyone would have been focused on Christmas or delivering Q4 and yearly KPIs so my chances for employment would have been much, much slimmer.

This post sums up what I used, what steps I took and what conclusions I drew from reverse-engineering of UX portfolios. It’s not comprehensive. I assume that if you’re starting out, you will Google terms that you’re not familiar with. I’m focusing on outlining a process and sharing tips and tricks which I learned along the way so that you have an access to what I needed the most during my job changing process.

This article was previously published half a year ago in Polish and was inspired by many questions from UX beginners. This translated version is slightly updated with a few more links.

Portfolio

A portfolio is the most important thing, period. The job-switching process is chaotic, the amount of knowledge astounding and it’s not difficult to spend huge amounts of time doing things that do not deliver any substantial results. A portfolio is a great tool and a great goal to have because:

• specifying what elements should be presented in a portfolio shows you what you need to learn and do,
• the decision to create a portfolio reduces uncertainty and spares you at least a few situations when you have no idea what you should do next,
• preparing a portfolio takes time — if you learn UX by preparing a portfolio, you’ll save tons of it.

It’s a good idea to start by checking as many portfolios as possible. Medium is a great source of how-to articles (e.g. “How to build your first UX portfolio”, “How to get a job in UX etc.) and lists of best portfolios.

What elements should you have in the portfolio?

2–3 case studies which show ins and outs of projects. A case study has to contain descriptions of your train of thought. How your wireframes look like is a secondary matter. UX portfolios (or UX parts of UX/UI portfolios) have to show how you think, why do you make specific decisions, why you pick one option over another. A big part of UX Designer’s day is making decisions (based on data, research, info from clients) and justifying them. From time to time I check beginner’s portfolios or review recruitment tasks. Lots of them do not contain any descriptions, so it’s impossible to assess the candidate’s way of thinking and guess how this person is going to cope with everyday tasks. A user flow which is good-looking but unreadable won’t improve your chances in an organization focused on delivering a solid user experience.

If you dread writing, please remember that it’s one of the best and easiest ways of clarifying your thoughts and decisions. When you’re writing, you sometimes uncover new insights or change decisions to better ones, so the sooner you learn to write about your projects, the better.

Alright, but what exactly should the UX portfolio contain?

It obviously depends, but from my analysis at the time I concluded that the most common elements are:

• desk research data (e.g. analysis of competition, market, public opinion surveys),
• data from various types of user research (mostly guerilla research or surveys),
• personas,
• user flows,
• hand-drawn sketches,
• wireframes,
• clickable prototypes,
• information architecture.

Defining these elements resulted in a pretty clear learning plan. My portfolio consisted of two case studies and included all of the mentioned elements. The first case study described a process of creating a new mobile app (Android), the second one was about a redesign of a content-focused website (desktop).

Project inspiration sources

• Weekly UX Challenge — an amazing newsletter with UX tasks. I was using challenges from the newsletter not only to learn design tools (we’ll get to them shortly) — it’s worth noting that a slightly modified version of a task from this newsletter was one of case studies in my portfolio (the one about a bike-sharing app).
• Weekly Product Design Exercise — a weekly newsletter with recruitment tasks from different companies. I found it a couple of months after landing a job and I really, really regret not knowing about it when I was looking for a job.
• Case Study Club — probably the best collection of design case studies. Cool as an inspiration, great as a learning material.

Additionally: Behance, Dribbble, Product Hunt

Data sources — research, user testing, interviews

Market research and public opinion surveys are your new friend. There’s no such thing as a single point of truth — you have to find sources that are relevant to your country, interests etc. Competition analysis is worth your consideration and there’s a reason why you’ll find it in many UX portfolios. It’s especially useful when we’re creating something for an already saturated market or when we don’t have too much information about the market and target users. In case of competition analysis, it’s obviously super important to review websites, but it might also be useful to check keyword in SEMRush, checking competitor’s website in SimilarWeb and checking what tools they’re using (e.g. with BuiltWith). If you’re building for the American market, InfoScout is a great source of information. The more overlooked source of information is Quora — look for posts written by employees of the competition in your analysis.

User research

In terms of books on user research, I was using a great book by Iga Mościchowska and Barbara Rogoś-Turek. Unfortunately, it’s available exclusively in Polish, but I recommend taking a look at those lists:

• Top 10 Books about UX Research from Adobe,
• UX Books on Research & Strategy by UX Collective.

I have those books on my “read” and “to read” lists as well. You can find a multitude of articles about different research methods (e.g. A Crash Course in UX Design Research) so I will focus only on the easiest methods, even if they’re sometimes not so ideal in terms of methodology.

Surveys: I guess they do not require a longer description, you will find tons of how-to guides over the Internet.
Tools: Google Surveys, SurveyMonkey, Typeform

Interviews: great for collecting deeper, qualitative knowledge and learning users’ preferences, behaviors, and opinions. Facebook is a great tool for interviewees’ recruitment. You have thematic groups, friends’ friends or — worst case scenario — your own friends. Just write a post with a question. For example, I was asking about things such as how often people use their own bikes and city bikes, whether they use them for fun and spending time outdoors or rather treat them as a substitute of public transport. It’s not methodologically sound but showing that you ask questions and treat user research seriously is probably more important than achieving the ideal in terms of methodology, at least at this point.

Guerilla research: simply put, it’s basically a nice-sounding name for asking a passerby or a person sitting in a cafe if she’s willing to answer a few questions or test your prototype. I guess that its success is dependent on the culture you live in, I didn’t even try to do that in Poland as I didn’t think it would work, but knowledge of alternative and low-budget research methods was appreciated during my interviews.

Google Analytics: the ideal scenario is doing a redesign of an existing product and having an access to its Google Analytics. I strongly recommend asking friends who own websites or apps about giving you an access to analytics in exchange for said analysis and a new project, report and/or recommendations.

If you have no experience with Analytics, check Google’s free courses.

Personas

Personas allow you to amass traits and characteristics of your target users in a form of imaginary people. Thousands of blog posts about personas were written, e.g. UX Designer’s 5-minute Guide to Lean Personas. Just make sure that you’re looking for UX personas and not marketing or buying personas.

Pro tip: It’s pretty nice if a persona is not created as an ideal user of what we’re building. It should be the other way round — a product should be created with a persona in mind. Try to build something resembling a real human being with her real-life problems and traits. Don’t be an ignorant younger me who created two personas whose main purpose in life was riding a bike. Literally no-one buys that.

User flows

User flows are probably my most favorite thing in the UX toolset while also being one of the most difficult elements of the process. Due to the fact that it can take long, long hours, you should abstain from very complicated projects if you’re just starting out, and especially when you don’t have too much time on hand.

A user flow maps out elements of the product and connections between those elements. It’s meant to show what paths users can take to navigate the app and to get to specific elements. It’s also a great tool for looking for inconsistencies in your thinking. In practice, I think we have two main user flow schools: some designers will create simple flowcharts, but some will build them as networks of app screens. At this moment we’re more interested in flowcharts — screens networks are more suitable for projects in latter phases of development. I know that they look much better but really, you have to have a user flow before getting to screens creation.

It’s extremely important to have clear descriptions of elements, so you should focus rather on actions which users can take and not on screens that you’d like to create. The number of screens and elements on them should be derived from user flows, not the other way round.

Pro tip: if you have troubles with creating a user flow and your flowcharts look like a path to hell, write it all down on post-its, place post-its on a whiteboard or a large piece of paper, and draw connections between them. Reorganise it until everything makes sense. Sounds like a very basic advice but in reality, it saves you lots of time which would instead be consumed by rewriting everything ten thousand times. Important: consider adding photos of your sketches and whiteboards to the portfolio as a process documentation.

Tools: draw.io — a perfect, easy-to-use and free tool for creating digital versions of user flows. I still use it all the time.

Sketches on paper

Questions about quick sketches on paper were one of the most common during my interviews. You have to sketch lo-fi wireframes before digitalizing them. This analog sketching is much quicker than using Sketch or anything else really. You will sketch during meetings, with clients, you can also be asked to sketch during an interview. Because of that, you should show photos or scans of sketches in your portfolio.

You don’t have to be able to draw in order to sketch. No-one cares whether a lo-fi wireframe is looking good or not as long as it can communicate solutions.

Pro-tip 1: an ordinary pen and paper are enough, but post-its and colorful sharpies make sketches clearer (and look better on photos in portfolios)

Pro-tip 2 (which I discovered much too late): if you’re sketching multiple versions of the same screen, the last thing you want to do is drawing 20 copies of it. What can you do instead? Just photocopy and print this screen, place post-its on elements which you’d like to modify and draw those changes on post-its. You can use glue or a paper clip — doesn’t matter. In this case you should care about efficiency, not aesthetics.

Wireframes

When it comes to tools, I love Sketch (Mac only). $99 a year, you can get 50% student discount quickly. I started learning Sketch with Switch to Sketch from Invision, the rest was my own practice based on Weekly UX Challenge. Other commonly used tools include Axure and Adobe XD (free!). You can also use web-based prototyping tools, e.g. UXPin and InVision Studio. All these tools are pretty similar to each other, so switching from one to another takes a couple of minutes. You can find more tools on UXtools.co

Are texts on wireframes important? Yes, the rise of UX writing and microcopy are no coincidence The more copy you’re able to write, the better — it’s something that serves as a description of your project. Sure, you can replace longer texts and user-generated content with standard lorem ipsum or — if you’re using Sketch — with a generic copy from Craft, but remember that copy drives design. A project with copy resembling real usage will always be superior and it will push you to consider target user’s context of use.

Even though User Interface knowledge is not mandatory, you should pay attention to distances between elements, especially if you’re working on a mobile solution. It’s one thing that small distances equal small clickable areas of a button and it results in a terrible experience for all people with bigger fingers or with any problems with their motor activity. The other is that after adding more spacing, you may realize that there’s much less space on a screen that you assumed and that you will have to redesign it or split it into more screens.

Pro-tip 1: traditional wireframes are created in greyish hues. If you don’t like greys, you will find examples with different colors on Dribbble or Behance. Don’t go crazy with colors though — use neutral, unobtrusive hues which won’t distract readers from what you’re trying to communicate with a wireframe.

Pro-tip 2: if you want to use icons and you’re using desktop tools (Sketch, Axure, Adobe XD etc.), stop bothering with downloading icon sets and download Font Awesome instead. You install the font, go to the Cheatsheet, copy the icon that you like and paste it onto your wireframe as a text. It’s much easier than copying and pasting icons from different files.

Pro-tip 3: if you’re wondering if your font is too big, it probably is. If you think it might be too small, it’s probably alright. Huge font size is probably one of the most common mistakes of beginners (I did it all the time as well). When in doubt, go for 14 or 16 as your default font size. And no, you shouldn’t assume that 11 or 12 is alright simply because it’s a default font size for texts that you write in Word or Pages — it’s too small for body text.

Clickable prototypes

Prototypes allow you to verify whether your user flow and wireframes make sense so, at least in the learning phase, you will apply hundreds of fixes. Maybe you’ll realize that something is missing or that after all, the flow doesn’t make sense and you’d like to change everything — that’s ok, it’s completely normals at this stage.

Pro-tip 1: if you design a mobile app, InVision lets you send the prototype straight to your phone. It’s extremely exciting to see your project on a mobile for the first time, but fun aside: it allows you to check the app in a context of the device it’s intended for. You will immediately see whether buttons are big enough or if font sizes need some changes.

Pro tip 2 (which in retrospect seems obvious, but I started using it much later than I should have): if you have difficulties in imaging how your project is going to look like on a desktop, save it and open the file in a full-screen mode. Right away you’ll see if it’s similar to the websites and apps you know and use.

Pro-tip 3: let your friends test the prototype and don’t say a thing throughout the process. Don’t describe the design, don’t tell them what to do with it. Instead, ask them to describe what they’re doing and thinking. Not only you will verify your project, but also experience how different thoughts and opinions all these people might have. If possible, test it with strangers or friends of your friends.
Consider testing with your parents and grandparents. There’s probably no better test of your app’s clarity and usability.

Tools: InVision, Marvel, UXPin. I personally prefer InVision.

Information architecture

Information architecture maps out the organization of content on the website or in the app. It includes navigation, site’s contents, footers etc. I had very mixed feelings about adding it to my portfolio, but I was redesigning a website which required it. The simplest way of doing that is to write down the current architecture, then check what’s missing, what’s illogical or inconsistent, and build a new one based on findings. In this case, you will find post-it notes useful again as the process requires many content reorganizations.

Nice examples of beginner guides:

• Complete Beginner’s Guide to Information Architecture
• Information Architecture Basics for Designers

Pro tip: if you want to practice information architecture, take any knowledge base or FAQ you can find, map categories and articles in them, then modify the architecture to make it clearer.

Tools: card sorting! If you have a chance, ask users to sort elements and divide them into categories (or assign elements to categories created by you). The majority of tools is paid (with free trials, e.g. Optimal Workshop), but with a little bit of creativity you can successfully use Trello for that.
When it comes to visualizations of information architecture, draw.io will come in handy.

How to set up a portfolio?

You have lots of free options: Tumblr, Wordpress, website generators, dedicated portfolio generators etc. I was planning to use Wordpress but I realized that I can’t customize it as quickly as I needed. What’s more, making it look like I wanted would either require pricey plugins or writing some code. I decided to go with a paid Squarespace plan instead.

Squarespace has an amazing, intuitive page editor, reasonable prices and allows you to quickly set up fully customizable websites. Obviously, it was a choice that was right for me at that time, but I strongly recommend it. They have a wide marketing campaign on YouTube so you can get discounts on your first purchase (e.g. here)

Super-super-important tip: don’t forget to take care of user experience in your portfolio, be it a website or a printout.

Another tip: add Google Analytics to your website. First benefit: you will learn how to use it. Second benefit: you will be able to track visits on your website, so you’ll know if someone’s interested, how effective your application e-mails are etc.

Books

During those 3 months I managed to read the following books only:

• Steve Krug — Don’t Make Me Think, Revisited
• Donald A. Norman — The Design of Everyday Things
• Susan Weinschenk — 100 Things Every Designer Needs to Know About People
• Barbara Rogoś-Turek, Iga Mościchowska — Badania jako podstawa projektowania user experience (great Polish book on different user research method that I mentioned before. For substitutes, refer to links in the section about data, interviews and user research).

I didn’t focus too much on empathy and psychology as they were a basis of my job in Customer Success, so there’s no book on that in this list. If you don’t have any experience with building products and observing how people interact with them, you shouldn’t even think about skipping books about psychology and human-computer interaction.

Courses

I only used the Interaction Design Foundation. I think it was a pretty sound investment in terms of building a theoretical foundation of design knowledge. If you don’t have time to read books about psychology, check their courses about human-centered design.

Blogs, newsletters and useful links

• UX Collective — I think that this is a publication that I visited the most during the whole process (By the way, Medium is a great place to look for UX-focused articles and case studies)
• How They Design and Case Study Club — newsletters with case studies
• Offscreen Magazine (a print magazine focused on the human side of technology) and Offscreen Dispatch (newsletter with a great selection of articles, tools, and tips)
• Weekly UX Challenge
• Weekly Product Design Exercise
• Nielsen Norman Group
• Design Kit — a collection of design thinking methods (especially useful if you encounter a creativity block)
• Smashing Magazine
• A List Apart — great design articles. The same people are responsible for one more important publishing houses: A Book Apart
• Inside Intercom blog — I think this is one of the best blogs around products. Their e-book “Intercom on Jobs to be Done” is a must-read for anyone willing to work on products
• Cognitive UXD — a publication about UX and cognitive psychology
• Design Better — really, really good e-books about design
• UXtools.co — a list of UX tools and their comparison

You should also take a look at product blogs, especially on posts which describe specific changes and effects they had on business metrics (e.g. how changes on specific forms drove sign ups or conversions up or down). Oh, and I won’t even start talking about the University of Youtube because this post would take 10 years to read but here are two great examples:

• AJ&Smart YouTube channel, especially Product Breakfast Club where they talk everything product-related
• BaseCamp’s Getting Real YouTube channel. They have a Product Decisions series where Jason Fried describes how they make design decisions, how they build and review new features, what’s the business reasoning behind design decisions etc. Highly recommended!

Resumes, interviews and recruitment tips

If you want to lose 2 months of your life trying to make a beautiful CV just because the job you want has a word “designer” in it, just don’t. It’s much more important to make it pleasant to read, make sure that information organization makes sense etc. Think of your resume as of an experience for people who will be reading it.

Make sure that a link to your portfolio is easy to spot on your document. I wanted to be oh-so-minimalistic, so I made my CV with nice black fonts and a couple of dividers only. The link to my portfolio looked almost exactly like my email, address, and phone number. The only difference was that the link was underlined. You might have guessed by now that I had an interview during which I realized that the Head Designer had no idea that there was a portfolio and we both wasted time.

In terms of recruitment processes, I can only talk about Poland. Polish UX characteristic is that everyone wants to hire regular or senior specialists, but almost no-one’s recruiting juniors and interns. If your country is similar, the job searching can be a soul-crushing process full of doubt and uncertainty, so here are some tips:

1. create a list of companies which you’d like to work for (but make sure that they’re hiring designers!), then simply send them a nice, friendly e-mail with your resume and portfolio. It’s possible that they haven’t posted a job offer or that their previous one expired. The majority won’t reply, lots of those who will reply will do that only to tell you they’re not interested. You have to remember that “no” is much better than no answer at all — at least you have some more certainty. Some recruiters will let you know when they’re planning to open recruitments for designers. If you’re in no rush to find a UX job, it’ll give you more time to prepare.
2. Check job boards every day, especially those focused on IT. Create a list of companies who hire UX Designers. The knowledge of who’s recruiting UX Designers and — even more importantly — who’s hiring juniors is extremely valuable. Moreover, it may turn out that they’re looking for a designer even though there’s no job offer.
3. Don’t be afraid to apply for regular UX Designer jobs. It’s possible that they will consider hiring a junior as it’s pretty difficult to source regulars and seniors.

In my case, it took a lot of ups-and-downs, around 30 e-mails, many applications via Linkedin and local job boards to land 3 interviews. One was from Linkedin (Junior UX Designer), another one I landed because my friend knew that I was looking and tagged me under a post of his former colleague who was looking for regular UX designers, the last one I found on a tech job board (Junior UX/UI Designer). I guess it could be many more offers but I decided that I wanted to join an agency or a software house in order to work on as many projects as possible. In retrospect, I’m glad that I had a portfolio — it saved me from doing many recruitment tasks. The only sketch I had to do was a 15-minute sketch during an interview that ended with a job offer. Oh, and I got the Junior UX/UI job even though I had practically no idea about UI so you know, you just have to try.

So, is it all worth it? Yes, it is! And if you have any doubts whether UX design is for you, building a portfolio will either make you love it or hate it.

I hope that if you got this far, you’ve found something useful here. If you have any questions, need some feedback for your project or simply want to talk, don’t hesitate to drop me a line :)