CPSC 581/599.81
Interaction Design

Your Portfolio

Hint. Keep a printout of this page with your portfolio and refer to it periodically!

Why a portfolio?	A portfolio is a representative or selective collection of one's work. Design professionals (e.g., architects, industrial designers, artists) often create professional portfolios, and use these to illustrate their work to potential employers. A portfolio becomes a living resume. They are an expected part of how professionals in many disciplines portray their achievements . A good professional design portfolio will contain visual samplings that collectively suggest the scope, breadth, depth and quality of the professional's design proficiency. It summarizes the professional's abilities, strengths and styles. Some educational programs also have students create learning portfolios, where students document their work (sometimes over years). These portfolios are used by instructors to evaluate students, and by students to help them reflect on what they have learnt over that time. In this course, you will create your own professional / learning portfolio. You will document your developing abilities as an interaction designer by creating visual summaries of how you solved your exercises and assignments. As the course progresses, you will see what you have accomplished to date. After completion of the course, you can use this portfolio (or selected parts of it) as a way to present yourself to future employers. Of course, you can add to your professional portfolio samplings of any other relevant work you have done. Unlike sketchbooks, portfolios are neat, orderly and professional in appearance. You critically select and craft what goes into it. Because this is a design-oriented portfolio, its contents should be highly visual. Each visual summary should tell its own story with only modest labelling and textual descriptions.
Learning objectives	Students will develop skills creating visual summaries of individual designs by using screen snapshots, story boards, and other techniques. Students will demonstrate in these summaries how they have used particular interaction techniques. Students will learn how to effectively archive their code and supporting documents so they can easily install and demonstrate their system on any handy machine. Students will use the portfolio as a personal reference summarizing their course accomplishments. Students will develop their skills in creating a professional-looking portfolio
Portfolio grading	A component of every exercise and project will include a portfolio summary. In this summary, I and the teaching assistant will grade you on how well you have summarized your work and the techniques we have asked you to include in it, as well as its professional appearance. We will also check to see if you have archived your project effectively. At the end of the term, we will grade you on the portfolio as a whole. We will evaluate it on completeness (all exercises and projects are summarized in order); on quality (how well the portfolio captures the work you have done over the term); and on professional appearance (including overall organization). Your portfolio's contents should impress me with both your vision and how well you have mastered the technical aspects of interaction design.
Due dates	You will hand in your summary at the end of every exercise and project. You will be asked to hand in your entire portfolio several times during the course and at the end of the course.

Format

A professional portfolio can be packaged in many ways, although the simplest form sees it as separate summaries collected in some kind of binder e.g., an accordion file or an artist's portfolio case. Keeping all summaries organized but separate will allow you to selectively rearrange your portfolio to fit your need (e.g., for a job interview). I recommend that you buy a large accordion file, or that you create your own portfolio book. You can also paste summaries into a large high-quality scrapbook, but this may make it difficult for you to rearrange them later on.

I will expect at least a paper summary of each exercise and assignment. However, you may also augment your paper summary with other types of visual summaries.

Paper. Each visual summary (screen snapshots, storyboards, etc) are pasted onto a high-quality mat or backing (e.g. poster cardboard). Poster sizes of at least 16"x20" will give you enough space to create an effective visual summary.
Web. Many Web designers often create web-based portfolios of their work: these often include thumbnails of screens and accompanying descriptions. Clicking on the thumbnail often brings the viewer to the web site itself (or a full sized version of the page). While you can have web pages that do this, you must print them out and include them as a paper version in your physical portfolio.
Video. Creating a video of your system is a very effective way of showing your work. Digital video is even better, because you can play it back on any computer. I have a camera that can do this, and may be able to get you some screen capture software that does this as well. If you do decide to try video, you will still need a paper summary to introduce what is in it.
Running software Of course, you can include the system itself so that it demonstrates itself. The problem that I have found, however, is that it becomes less and less likely that your system will run as time goes on due to changes in operating systems and expectations of installed software. Thus you should see this as a way to supplement rather than replace one of the above methods.
Interactive multimedia. You can also create a project summary using a multimedia presentation tool e.g., Powerpoint or Flash.

Strategies for paper summaries

Carefully decide what parts of your exercise and project you want to use in your portfolio summary.
Prototype a few different approaches for each summary. Your first idea may not be your best one.
Label each summary with a descriptive title and its date of completion. You may include explanatory annotations and paragraphs, but don't go overboard: this should be a visual summary rather than a textual one.
If you are using screen snapshots, make sure they are interesting ones i.e., the screen is populated with meaningful data, and the screens are in an interesting visual state.
Use storyboards to show how an interesting interaction sequence progresses over time.
If possible, print out your screens in color.
You can also include screen fragments to embellish your story. For example, a blow-up of a screen portion can show hard to see details (and can include annotations); a mini-storyboard of an interaction component can illustrate how a particular interaction technique works.
Emphasize any uses of novel interaction techniques.
Search the web (e.g., try the terms Interface Web Design Portfolio) for examples of how other people have created on-line portfolios.
Make sure you can 'disassemble' your portfolio summaries. In the future, you may want to recreate a portion of your portfolio, perhaps in a more expensive book or some other medium, only to find that you cannot unglue your images from the pages.
Create an archive of your software, including an executable version, and copy it onto a good medium e.g., a CD-R. The archive should include a README file saying exactly what the archive is and any instructions to use it.
Do not include absolute paths anywhere in your archive. Test this by reinstalling your system onto a different machine and in a different directory.
Keep electronic copies of all images and include it in your archive. You may want that image a year from now, and it is unlikely that you will be able to regenerate it because your software won't run!
The archive should also be organized into a well-named directory system e.g., the root may be "emotional_buttons: which in turn contains the subdirectories "source", "documentation", "screen snapshots", "executable".

Caveats

This is our first time asking for a real portfolio as part of a course requirement, and I am still not sure of the best way to do this. I gathered many of the above portfolio requirements by looking at how other professionals do portfolios, and by extrapolating them to our course. Yet some of my ideas may not work well for interactive mediums. Thus you have the freedom to be creative in your portfolio, as long as the course requirements are met: some of you are probably much more creative than I am! Just discuss your ideas with me first.