User Experience at Hello Erik

An Exercise in Making a Portfolio

One of my favorite parts of a UX career is getting to talk about the field with others. Not everyone has a job they truly embrace and feel is a part of them, so I consider myself lucky to feel to UX is in my bones. It’s basically all I think about, I can see how it applies to everything. So whenever someone wants to talk UX, I am all ears.

I was contacted by a UX designer in England named Kyriakos Andreadis about some pending job interviews he had for UX positions, but was in a bit of a pickle when providing a portfolio… he didn’t really have one yet. He said

I am a web developer and a new ux designer (with no ux portfolio), but i know how to work out the design approaches, user research techniques etc, as I read a lot of books.

At this moment, i am discussing for a ux role with a company in Europe and they asked for some samples of personas, wireframes etc, but i do not have them!

What would you suggest??

Kyriakos had a genuine dilemma. When trying to start in the field or moving from design to real UX, you don’t have a lot of things to “show off” in a portfolio other than finished design. The UX development process isn’t something that is necessarily saved – notebooks of user interview notes, persona sketches, dozens of haphazard Word doc’s with random thoughts, hand drawn wireframes, flowcharts, endless iterations of mockups and prototypes. But when you’re building them, none of these things are really things you think about saving or keeping for a portfolio. That would be like a programmer saving all their buggy code and deleted prototypes. But when asked to show evidence of your UX process, suddenly all that becomes relevant.

I’ve thought about this problem quite a bit. I know I’ve run into it myself, especially way back when I was trying to leave the world of “just in time” web design and into true UX. I wrote a blog post about it a while back when I was in the midst of interviewing at several different companies. In fact, one high profile company explicitly said “do not show us anything from a previous project or employer – not a single pixel.” So there I was, having working on a number of very interesting projects that had a great portfolio of UX material and research, and none of it could really be shown.

The Work Sample Approach

Often, a potential employer will ask you to perhaps provide a work-sample. A few weeks ago, there was a great thread on Hacker News about interview practices, which cites an article by The Society for Industrial & Organizational Psychology recommends using a work-sample test (item 9) stating:

These tests typically focus on measuring specific job skills or job knowledge, but can also assess more general skills such as organizational skill, analytic skills, and interpersonal skills. Work samples and simulations typically require performance of tasks that are the same or similar to those performed on the job to assess their level of skill or competence.

This is a really great way to demonstrate some sort of experience and competence when interview for a job that requires “proof” of sorts. Various fields have various methods of showing “what you can do.” Sales can show numbers or big accounts acquired. Product management can show products shipped and dates met. Developers can show working code and product, and even submit a GitHub repository that shows changes and activity. And of course, designers jus show their finished products. But what do UX practitioners provide? If most of your work is research or iterative, it often is considered to be under the proprietary veil. It’s like a secret recipe. Let the competitors taste the final product, but they can’t know what went in to making it.

So now what? Remember: when looking to be hired (or promoted), the interviewing parties aren’t so much focused on what you’ve done in the past as much as they are on what you can do for them in the future. That is a crucial thing to remember. So let’s show them what we have to offer them going forward.

Create your own work sample portfolio

If you don’t have a lot of things on hand to show – make some. There have been people who think this feels disingenuous or misleading, but I totally disagree. It’s not mean to fool anyone or take the place of thorough vetting by a potential employer. It’s a way to demonstrate some competency, talent, and personality. It’s not the whole picture, but it is a view into “this is how I work and what I can do for you in the future.” It gives the person conducting the interview things to ask questions on and get answers right from the person. It creates talking points and ways to explore and discuss the interviewee’s process.

Kyriakos and I got into an email discussion over the next few weeks. Since he was going for a job that was focused on interface and interaction design, I recommended he starting thinking about creating a mock portfolio for the interview. My first list of deliverables included:

I suggested that these all be from a single mock-project, so he could show a flow through process and technique. It would be a great example of how Kyriakos would approach a problem and the type of thought process he’d go through. After about a week and a half, he emailed me the materials he came up with, which I have permissions to re-post here as examples.

Kyriakos’ Mock UX Portfolio Project

I received a zip file with a set of examples and a document outlining the goal of the portfolio project. Here was the premise of the mock company:

Company Info: Medium-based company that provides removals/storage services. It is based in North West England and particularly in the city of Manchester. It provides services across all the UK. Company has a variety of customers but the main focus is on students. It is important that the new design can provide users with quick learning about what the company is and what it does through limited text and evocative imagery. It is also essential that the navigation is clear and simple.

A great start to a premise. Accompanied with the introduction was the examples he provided; 2 persona write-ups, 2 narrative journeys, and 5 wireframes. I am not sure if Kyriakos is a graphic artist, so maybe mockups weren’t appropriate.

persona1
persona2
narrativemap1
narrativemap2
wireframe1
wireframe2
wireframe3
wireframe4
wireframe5

 

Personas – The personas are brief but a pretty good example of how an ad-hoc persona could be spelled out. Goals, needs, experience and frustrations each have a section. Having some points drawn out makes it easier for a group to ask “What does Steven want? What will make Raquel successful here?” There is a brief narrative about why exactly they are a target customer and what their specific problem is. At this point, these personas are just as fleshed out as a lot of actual personas. They don’t have to be pages and pages long. Just enough to help focus the group and keep the discussions centered on “what problem are we trying to solve for Steve/Raquel.”

Narrative Journeys – The narrative journey maps do a good job of illustrating how you can take a persona and lead them through a common or presumed path through your site or product. We take Steve and Raquel through a common problem they might be trying to solve and walk through what we assume are the steps. Adding in the comments/questions/ideas, and you’re starting to get a picture of just what they will experience. This is one of my favorite exercises because it highlights problems that would be overlooked if you didn’t get it all down on the sticky notes.

Wireframes – Wireframes are a departure from the personas/narratives. Now is the time to implement the information architecture and interface for the site or product. Hopefully with these you can start to run the personas through them and ask if you think it solves their problem. If you can test with some users, that’s even better. But if you only have the ad-hoc personas and limited time, the wireframes will have to be vetted against your best guesses. It’s still much more desirable than no testing at all. The wireframes are also heavily annotated, which is an awesome way to show what you were thinking and how you would implement an interaction. It would give a designer or a developer something to go on if you weren’t around to lead them through each detail.

All these things give someone conducting an interview ample material to ask you about and delve into your process and ideas. Kyriakos went from not really having anything to show to having something that is probably going to put him at an advantage against people who show up with nothing (or in some cases, just with screenshots of finished projects).

Best of luck to you

Remember: employers and interviewers want to know what you can do for them if they hire you, not necessarily what you’ve done in the past. Showing previously done work is a great way to show what you’re capable, but so is a work sample or mock portfolio. This is especially true if you’re new to the field or are interviewing for a entry to mid-level position. Certainly don’t ever show up with nothing. I’ve interviewed a fair number of UX candidates over the last year, and probably half of them don’t even come prepared with as much material as Kyriakos provided.

Feel free to contact me if you want some more ideas or advice. I love to talk UX and I especially love helping others. If you found this blog by trying to research UX portfolios or UX interviews, let me know, and good luck!

I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.
  • Ezgi

    Awesome blog, I find it to be really useful, and thanks for all the help!

  • Satu

    Excellent article! A work sample portfolio is a great idea also for people like me who have been working mostly with a company’s internal, non-commercial designs which cannot be shared.

  • Pingback: 5 simple steps towards a UX portfolio | Sjors Timmer

  • Brian Nail

    Erik,…

    Just found your blog today. Pretty much reading all of your posts in one sitting. Thank you for taking the time to share your knowledge. It is helping more than you know.

    Awesome. Thank you.