Random header image... Refresh for more!

What does an Interaction Design portfolio look like?

This question still bothers me today. When I had to create a portfolio in grad school, our only real frame of reference was graphic design portfolios. These are obviously good starting points but they are showcases for visual design. They often look beautiful but this is slightly out of scope for Interaction Design (ID). Visual design is a part of what we do but the interactions we design are difficult to illustrate in a presentation format. I recall many design presentations in school using the format of following a user scenario. This was a highly effective technique given in this format but doesn’t translate well to paper or web (feel free to disagree). And that’s the problem. Many techniques we use to present our designs in grad school are difficult to translate to passive mediums. In grad school, we are futurists: proving a problem exists, communicating a proposal to this problem and finally demonstrating what our solution might look like in this constructed world. So as interaction designers we need to decide what we need to convey in a portfolio and how to convey it. Here’s what I found employers wanting to see and how I went about solving this problem.

What employers want to see from a potential interaction designer:

  1. Design process – Almost anyone can display a beautiful product. What they want to know is whether you can do it again. You prove this by showing that you arrived at the product consciously and thoughtfully. Think of all the projects you’ve done with a team. If someone judges all of you by the finished product, you all look the same. But, you know there was someone who had little input. That’s why it’s important to separate yourself from the field by showing your design process. Note: I am not implying there is a “design process” as a universal standard-rather, you should be able to defend how you make design decisions.
  2. Design communication – Can you talk about design? Design is not art. You arrive at design through communication, collaboration and an articulate vocabulary (all of these pertain to art on some level too). Of course, there is corporate jargon you will have to pick up at any company but as a designer you should demonstrate your ability to communicate in a “design language”.
  3. Know your stuff – Okay, this one’s a little more crass but it’s vital. Whatever medium you choose to convey yourself to an employer, you better know your own material. You will most likely get grilled to some extent as to why you did certain things (not much different than a design critique) so it’s best to ensure you can discuss your stuff backwards and forwards. I got locked into an unanticipated conversation about my hard-copy portfolio in an interview and survived because I reviewed my projects. Some are 3+ years old and if I hadn’t reviewed what I did on those projects, I would have looked foolish. You study your material like your studying for a test.

Of course there are other things to consider in interviews but this is what I found specifically geared towards interaction designers. It’s a fairly new field without many of the axioms that other established field have to take into an interview situation. But the real question how can we (as interaction designers) accomplish the above in a design portfolio. This is an open question because I still don’t have a great method for doing so.

What helped me get my current job:

  1. Resume – No discussion really necessary here. Though, the format for interaction design should be slightly different. I think it’s perfectly appropriate to highlight some of your big projects.
  2. Blog – This will show that you are a reflective designer. You can give an employer a way to know you without meeting you. An employer may spend about 30 seconds thumbing through an online portfolio but you can really engage them with your thoughts on design.
  3. Hard-Copy Portfolio – We’re all pushed to make a digital portfolio, which is no doubt, beneficial. However, in two of my one-on-one interviews, I didn’t have access to a projector. Giving the employer this to use as a reference is powerful. People want to look at a printed page more than a digital one (aren’t you sick of reading this on the screen already). When you leave the interview, they have a physical sample of your work that they can’t as easily ignore.
  4. Digital/Online Portfolio – This is the biggest point of discussion. There is no good way to do it. Of course I believe this is a vital piece for an interaction designer to maintain (even after getting a job). But, given the needed material I described above, I don’t know how best to convey this. The link I provided above (and here if you’re lazy) is really effective on all fronts. The only problem is that everything in it is beautiful. We all know in HCI/d, we have created some flat-out ugly material. Stuff that’s much better to talk about than show. How can a designer reconcile this in a digital portfolio? Personally, I just had to omit some things, but I don’t think this is a long-term solution.

This is what I’ve found from personal experience. I’m curious to see what others might have found or any other proposals for how an interaction design portfolio might be constructed.


1 Dave Roedl { 09.21.07 at 7:24 pm }

Great post, and timely one for all of us back at school trying to get our portfolios in shape. I basically had this same discussion earlier today with Dave Royer. He was showing me his latest portfolio mock-up in which he’s really de-emphasized the visual. He’s represented each of his projects through detailed descriptions of the process, broken down into nice headings and attribute labels. Despite the great layout, I worry that it makes for a pretty long read for prospective employers. Maybe thats okay, though. Also to add a designerly visual aesthetic, hes creating banner images of hand-drawn sketches and diagrams, which I think is a nice touch.

Personally, I started out really worrying over eye-catching visuals, having spent a lot of time looking at and doing Flash design. After some time in school, I’ve begun focusing on how to describe and articulate what can sometimes seem like an ethereal activity when viewed from the outside–interaction design.

In addition to blogs, here’s two other examples for what makes good interaction design portfolios: another designer Dave, (perhaps the best of all) uses a super minimalist design with concise tag lines to give you a quick idea of what hes up to, then links to lots of additional media.as you said, live presentations and user scenarios are best, ,so maybe the next best thing is a video of a presentation or better yet, a video prototype. check out my first attempt at one ;)

2 Dave Royer { 09.23.07 at 9:00 am }

Nice post Christian.

I find creating a portfolio very challenging and this post helps a little. I too love the okaydave website. I think the real strength of his portfolio are the videos with a built-in explanation of the design process.

Actually, in Erik’s class this week we talked a little about this and how important it is for design students to show the process bc. most of our projects have not been implemented.

I think showing the process is a challenge on the web, and even more of a challenge in a concise print portfolio. I would be curious to hear how you did your print portfolio.

3 Rachel Goldstein { 11.20.07 at 10:40 am }

I loved your post. I thought that your users might also benefit from my article on How to Create a Traditional Design Portolio – http://allgraphicdesign.com/graphicsblog/2007/10/01/how-to-create-a-traditional-graphic-design-portfolio-yes-with-an-actual-case/ – sort of the opposite of your post.

Thanks for the great post.

4 adam { 06.23.08 at 2:40 am }

Really wonderfull website .In this website i have to find more kind designs and also portfolio.I think showing the process is a challenge on the web, and even more of a challenge in a concise print portfolio. I would be curious to hear how you did your print portfolio

Christian Drug Rehab

5 Sinan Ascioglu { 07.27.08 at 11:07 am }

Hey great post bro,

I found your website while googling, and building my 14th re-design of my portfolio (this is becoming an obsession). Definitely, I am also struggling about the stuff you mentioned:
- show process but keep it simple (what a challenge)
- less text, more visuals (more ‘what is it?’) (this doesn’t get along well with above)
- damn keep a blog (oh that is so damn hard, I still couldn’t get used to keeping blogs)

Right now, in building the new design, I am trying to get inspired by two websites:
- frog design: http://www.frogdesign.com
I like their approach per project: challenge, process, result.
- Victor Szilagyi – http://www.semiot.com/
simplicity, nice short explanations.

Trying to find the balance in between. Definitely, interaction design portfolio is not only about the end result, but more about your approach, ideas, user-pov and solution providing. So, complicated stuff…

6 Ananya Vetaal { 08.10.09 at 9:47 am }

hey..useful post…but I m wondering how do make a portfolio when I wasn’t involved in the projects for all phases of design cycle.

7 Rohit Mehta { 06.05.10 at 12:54 pm }


8 Rohit Mehta { 06.05.10 at 12:55 pm }

Please can u also post some link which can be useful for us..

9 Christian Beck { 06.05.10 at 11:12 pm }

Jeez, I totally missed all these comments over the last year or so. Sorry bout that.

Rohit, what kind of links do you mean exactly? There’s some good responses to a similar topic right now on IxDA actually: http://www.ixda.org/node/25437

10 kevin { 08.18.10 at 2:56 pm }

hello there!

got my own interactive portfolio!


11 visda { 07.12.11 at 3:15 pm }

Great post. Although I’m reading it several years after you have posted it, all the points you make are still very valid. I always have difficulties to show the personality and the process I go through on passive media such as a portfolio. Thanks for sharing your ideas.

12 Christian Beck { 07.12.11 at 8:21 pm }

Thanks! I guess I’ll have to revisit this post as I’m trying to update my portfolio again 4 years later. I’m sure I’ll have some other ideas!

13 Antia { 07.19.11 at 7:30 am }

I have the same questions when I started to look for jobs. So I found your article and that you studied HCI too =D

During my job hunting, somehow I feel that I should start to work as a web designer. Interaction Designer/UX designer seems to not be for a person like me who have no experience and have no fancy portfolio. The problem is that I didn’t get any training for designing web pages so it’s hard to compete with people who got real design training . The training I got from the school were mostly about usability /evaluation or other design theories. The link between a HCI graduate and a job seem to just disappear.

You seem to have passed the stage between study and work successfully, could you give me some advice about this ?

ps: I would like to write to you about this but I couldn’t find your email…I hope you don’t mind I leave a comment here.. I will be glad to tell you more about my background if you want to know. This is a great post … I am very happy to know I am not the only one who have problem about this.

14 Temi { 09.17.11 at 8:51 pm }

I am with you on this Anita. I studied HCI and as you rightly said, most of what we were taught in school is about usability testing and evaluation. I would really love a job as an Interaction designer but being fresh out of school, I have no portfolio to show. Can I attend an interview for an Interaction Designer job without a portfolio? What do new graduates do?

15 Darold Davis { 08.01.12 at 9:13 pm }

Hello all

This is for Temi and others. I hope its helpful:

Last week Thursday (7/26/2012) I presented my thesis final before the committee at Academy of Art University and passed, acquiring my MFA in Web Design & New Media. My 3 years of R&D had paid off (well academically at least)

As Christian pointed out, I too feel Design process and design communication are paramount when it comes to showcasing your knowledge as an Interaction / UX Designer. This is because the root of ID and UX (HCI and Human Factors as well as Cognitive Engineering) is a very cognitive and analytical field. Even for Visual Design its important to document conceptual sketches, iterations, etc, showing how you arrived at the final design.

In ID and UX this becomes twice as important because you need this data to move through each stage of product development (the prototype came from the wireframes, that came from information architecture, that came from the card sorting data, that came from the personas that came from user interviews, and so on).

Although data can be “soft”, deliverables are tangible (prototypes, user diaries, analytics, reports, test metrics, surveys, etc.). The task then becomes to organize and frame such documents in a type of narrative structure that recounts the challenges faced and solutions applied in the journey of developing a product. It is with this that I leave you to explore my thesis project documentation and the beta site.

Research and Development document

Thesis web application

I am by no means an authority on this, on the contrary as stated earlier I just passed my thesis final review last week. However though being newly minted, I did an internship at Aaron Marcus & Associates, Inc. (http://www.amanda.com/) where I gained my first industry experience, but what was most insightful of all was the interviews I had while still in school. Oracle, Adobe, Microsoft and Apple (the toughest one) all drilled me about the design process behind what I was showing them, especially Apple. They wanted to know the hows, whys, results, etc. I learned a great deal from those interviews.

For my portfolio in development, my thesis design document is the center piece as it is the most visually descriptive of an idea taken from concept to beta and the development in between.

Hope this helps.

Darold Davis
UX Designer / Developer

16 Irene M { 01.21.13 at 12:38 pm }

I don’t agree that design is not art… it is art because you have to convey the business through an artistic way… yes the flow has a lot to do with it…

Leave a Comment