Your Portfolio

back to CPSC 581
Keep a printout of this page with your portfolio and refer to it periodically

The portfolio is another ‘best practice’ found within design disciplines. A portfolio serves as a living resume, where designers use them to collect and illustrate their (usually completed) projects. Designers show portfolios to others both to highlight individual achievements, and – as a collection – to suggest the scope, breadth, depth and quality of the professional's design proficiency. Thus a good portfolio will summarize the professional's abilities, strengths and styles. Portfolios can vary greatly: they can be stand-alone artifacts for others to review, or can serve as a conversational prop where designers tell stories about the artifact to peers, employers, and clients.

Sadly, computer science students rarely create portfolios. Instead, they typically describe their ability to others through a skills-oriented resume format: the programming languages they know, the courses they have taken, and related employment history. This is somewhat surprising, for most computer science students – like designers – spend immense effort developing projects as part of their course work. In spite of these creative experiences, computer science students portray themselves to their potential employers as skill-oriented technicians rather than as people well-practiced in the art of invention.

To encourage you to capture your work in a way that you can present it to others, you are required to construct a portfolio as the course progresses. Two types of portfolios are required, as described below.

The project learning portfolio captures the essence of your individual projects. As each project is completed, you will create a detailed portfolio documenting and archiving what you have done. It takes two forms, both done for every project.

  1. You will create a web site with a project portfolio entry: this web site includes a brief executive summary, then a visual summary of what you did (captured as annotated screen snapshots, simple animations and/or storyboards, slide show. video, etc.), downloadable executables so that others can try your system, and an archive of your source code.
  2. For one of your projects, you will be asked to create a visual summary of a project using more traditional media. The chosen media can vary, but can cover a range including paper-based posters, booklets, etc.

The goals of these two portfolio styles is to encourage you to create a stand-alone electronic presence of your work (through the web site), and to give you practice creating portfolio entries with alternate media that can be quickly shown to others. As a side effect, the project portfolios are an easy way for the course instructor to access and review each project after the demonstrations, where details can be explored.

The professional portfolio is created at the end of the term. Its intent is to be used as a living resume, where you can bring it to your job interviews and show potential employees and/or clients about the kinds of work you did as well as the scope of your many achievements. The emphasis is that these portfolios must serve as a conversational prop: you should be able to conveniently carry it to a job interview, where its contents are easy to show, browse and discuss as opportunities appear. Thus both paper-based and electronic portfolios are encouraged. Portfolios can be stand alone as well, e.g., a CD or memory stick, that can be quickly loaded into a computer or left with a person. Note that the professional portfolio is rarely a mere rebundling of the learning portfolio entries: you should create or remix entries to exploit the form factor and visual effect of your professional portfolio, and include entries of projects from other courses or things you have done.

In practice, you should take great pride in your project and professional portfolios. You can be quite creative in building the portfolio web site, to the point that the web site itself demonstrates your technical and creative skills. A variety of past students described how they used the portfolios during actual job interviews, and how they believed it made the difference in setting them apart from other applicants.

What is 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 or clients. A portfolio is 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.
  • 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 labeling and textual descriptions.
Your portfolio

You will create your own learning and professional portfolio

  • You will create your own learning portfolio to show your projects. 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.
  • Near the end of the course, you can will use this learning portfolio to seed a demonstration professional portfolio. You can add to your professional portfolio samplings of any other relevant work you have done.
  • After the course, you can maintain and modify this portfolio into something that will help you present yourself to future employers.
Learning objectives

Your portfolio will help you learn the following.

  • You will develop skills creating visual summaries of individual designs by using screen snapshots, story boards, videos, and other techniques.
  • You will demonstrate in these summaries how you have used particular interaction techniques.
  • You will learn how to effectively archive your code and supporting documents so you can easily install and demonstrate your system on any handy machine.
  • You will develop your skills in creating both a professional-looking learning and professional portfolio
  • You will use the portfolio as a personal reference summarizing your course accomplishments.
Portfolio grading

Every project requires a learning portfolio entry. You will also create a professional portfolio at the end of the course. Portfolios and contents should impress me with both your vision and how well you have mastered the technical aspects of interaction design. Other grading aspects include:

  • completeness
  • quality (how well the portfolio captures your work and the techniques we have asked you to include in it);
  • professional appearance (including overall organization).
  • effectiveness of your code archive.
Be organized

A professional portfolio can be packaged in many ways.

  • Keeping all summaries organized but separate will allow you to selectively rearrange your paper portfolio to fit your need (e.g., for a job interview), or reconstruct your web portfolio to portray your projects in different ways..
  • The simplest form sees it as separate summaries collected in some kind of binder or web site e.g., an accordion file or an artist's portfolio case, or a web site with a table of contents.

For each assignment, you will create an electronic web summary (including code archive).

  • 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).
  • Video. Creating a digital video is a very effective way of showing your work. You can play it back on any computer, access it via the web, or load it on a public site such as youtube or vimeo. Most digital cameras now shoot video. As well, there are various software package that will capture your screen as a video (and will even let you add voice to it and annotate it).
  • Interactive multimedia. You can create a project summary using a multimedia presentation tool e.g., Powerpoint or Flash.
  • Running software. Of course, you will be asked to 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.
Strategies for portfolio summaries
  • Stress visuals over text. A common error is to include overly long text descriptions.
  • You have the freedom to be creative in your portfolio, as long as the project requirements are met.
  • Carefully decide what parts of your exercise and project you want to use in your portfolio summary.
  • Sketch and 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 short 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 you print out your portfolio, do it in color and on high quality paper.
  • 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 or that you have archived electronic copies of images so that you can regenerate them later. In the future, you may want to recreate your portfolio with a different look.
Strategies for code archives
  • Create an archive of your software and any dependancies, 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.
  • 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 "single display groupware: which in turn contains the subdirectories "source", "documentation", "screen snapshots", "executable".
  • Test your archive by trying it on a different machine.