Final Project: Personal Portfolio

(15 points)

WHAT
For this assignment, you will create your online portfolio and explain each choice you
made.

WHY
This assignment’s purpose is to:
1. Implement design and usability principles
2. Use HTML & CSS to create a small website

HOW
You will create your online portfolio and explain how it was created.

PORTFOLIO REQUIREMENTS

The requirements for the portfolio are:

 It is implemented in HTML & CSS
 It is free, as much as possible, of usability issues
 It is based on design and usability principles

Content requirements:
 You can put whatever you want and whatever best represents you and your
work. The only content you have to include is:

1. Item descriptions
For each item in your portfolio, include a brief description – something like a
caption. The caption should explain what the item is, what it was designed for,
and maybe what skill it showcases.

2. Process descriptions for 3 items

For 3 of your portfolio items, include descriptions of the process you used to
create them. Follow the advice our guest speakers gave, and in addition to
presenting these 3 portfolio items, include brief stories of how they came about,
and what decisions you made that lead to the final product. Make your work
process transparent. Feel free to include early sketches as part of the story.

3. Portfolio explanation
Include a page (or section) that explains the work process you undertook to
create the portfolio itself. This is the portfolio explanation – see below for
details on what it should include:
 The Portfolio Explanation should have 3 parts: Planning, Implementation, and
Evaluation.

I. PLANNING

In the planning section of the portfolio explanation, explain what steps you took to plan
your portfolio. These steps are important because they inform your decisions about
what goes into your portfolio and what it looks like.

Include the information listed below. A lot of it comes from earlier assignments, so
please refer to those or even paste it in, but make sure it looks nice and consistent. Keep
writing for the Web in mind. Break info down into short chunks, shorten the sentences
and paragraphs as much as you can. Use headings, subheadings, lists, and graphics.

User groups
List the main user groups you are designing for starting with the most important.

Persona(s)
Paste here the text of your persona assignment from earlier in the semester.

User goals
Make a numbered list of the most important goals your users will want to accomplish on
your portfolio site, starting with the most important.

Your goals
Make a numbered list of the most important goals you want to accomplish on your
portfolio site, starting with the most important.

Vision
Describe your overall vision for your portfolio. What is your strategy? What did you
want it to be like, so it can work for your users and you?

Info architecture and organization logic

How did you decide to organize the information on your site, and why?

II. IMPLEMENTATION

Describe what techniques you used to design your portfolio, and why you made the
choices you did:

How does your Homepage Technique(s) & Reasons

answer these questions:
What site it this?
What does this site do, what is
it about?
Who does this site belong to?
What does the author of this
site do?
Where do I start? What are the
high-priority tasks on this site?
What is the visual hierarchy on
this homepage? What are
items 1, 2 and 3? What
techniques did you use to
create this visual hierarchy?
How big is this site? How is it
organized?
What is this site’s and person’s
character, as conveyed
through graphics? What
impression does it make? How
does it use graphics to create
that impression? (i.e. reliable,
or playful, or informative, etc.)

How does your Navigation Technique(s) & Reasons

answer these questions:
Where am I?
 In relation to the
Internet
 In relation to the site –
what page
 In relation to the site –
what section
Where have I been?
Where can I go from here?

What other design and usability principles did you apply in your design?
Some examples of design decisions would be: alignment and layout, choice of words on
navigation, placement of items, color of items, size, etc.

For example:
Design decision Applied usability or design principle:
#1 Words on navigation menu applied the usability principle “Match between the
system and the real world” (Nielsen heuristic 2) by
using language likely to be familiar to users.

III. Evaluation

Explain what steps you took to evaluate the portfolio. Please conduct very quick and
informal usability testing with 2-3 classmates or friends. Ask them to perform a few of
the most common or important tasks on your portfolio. Observe them as they do so.
Identify any usability issues, and fix them. Write a brief summary of this rapid usability
testing in the evaluation section.

GRADING CRITERIA:

An EXCELLENT final project exceeds expectations. Every link and functionality of the
online portfolio works and is implemented correctly and cleanly using HTML & CSS. The
overall usability and look are exceptional. The Portfolio Explanation accounts for every
single design decision by applying principles learned in class. 13-15 points.

A GOOD final project meets expectations. It is similar to an excellent final project, but it
has a few occasional errors. Still, the portfolio explanation accounts for all design
decisions, and relates them to principles and concepts covered in class. 11-13 points.

A SO-SO final project falls below expectations. It either has major implementation and
usability issues, and/or the explanations are not clear and/or do not apply concepts and
principles covered in the course. 0-11 points.

Assessment criterion Feedback

PORTFOLIO
Implementation works
Correct HTML & CSS
Good usability
Good design
PORTFOLIO EXPLANATION
All design decisions
explained
Explanations make use of
concepts and principles
learned in class
Explanations are clear and
concise

Your final project exceeds / meets / is below expectations

Your points:

HOW TO SUBMIT THIS ASSIGNMENT:

1. Publish the portfolio online and submit the link on Blackboard
OR
2. Submit all files as a .zip archive on Blackboard

DEADLINE: Wednesday, May 4 by noon.