Behind
the Design

Project Goals

The Communication Design Exit Review has a website every year for the big event. It helps professionals get to know the graduating class and their work before the actual Exit Review. It is an essential tool for the students to find jobs, internships, and to make

valuable business connections. This year we wanted to raise the bar and really focus on how the site is being used and how we could make it better. We had a few specific goals in mind that we used to focus our design and ultimately the execution.

1

So many portfolios, so little time!

A sort function would help potential empoloyers narrow down the class size by strengths. Students picked 4 out of 12 categories to descripe themselves, their portfolio and their professional aspirations. We added a count so that people could see how many portfolios meet the specified criteria.

sort function gif

HTML

html code snippet for sort function

JS

js code snippet for sort function

Looking for someone skilled in...

A sneak preview is available when hovering on a student. It displays icons that correspond to their chosen disciplines. It is perfect for finding students that excel in broad areas or that have a focus on a certain set of skills.

2

a graphic explaining tag location

HTML

html code snippet for tags

CSS

css code for tags

3

Have I been here before?

We decided to display the students in alphabetical order by first name and to create a special bread crumb to see which portfolios you’ve visited. When you visit one of the sites, the name of the student will change from white to a designated color.

Before Visit

before visiting the page

After Visit

after visiting the page

CSS

css for visited link

Where in the world?

Making the students easy to find on the website is one thing but finding the same student in a big crowd can be easier said than done. We created the overlay to be a certain color depending on which room the student will be in at the event. When you visit the students site, their name also changes to their room color. A corresponding color coded map is also provided.

4

red overlay
red overlay
red overlay

HTML

html code snippet for tags

CSS

css code for tags

5

Who wants to know?

We decided to add Google Analytics to the webpage to track what people are clicking on in order to see the levels of interest in each tag in the sort function. It also allows us to track the traffic coming and going to our site as well as how much time people are spending on it in order to gauge the efficiency of the layout with the help of the sort function.

analytics code snippet