Displaying Teasers of People in Academia

We have been assigned the task of quickly revamping the college’s primary people page.

Designing teasers/views of people in the University setting can be challenging:

  • Long last names
  • Really long job titles (especially at Brown)
  • Inconsistent photograph sizes and cropping (usually)

To create a successful flexible design, you will need to design mockups using the longest content and largest elements from the content you are given.

In the college’s case, we need to play with first names that are 12 characters long, last names that are 12 characters long, and job titles that are 166 characters and spaces. Yikes!

Here is what the client proposed:

Screenshot of faculty with overlayed text

Proposed comp from Dean’s office.

Issues:

  • Overlaying text on top of photos and responsive design doesn’t work that well.
  • Names don’t look like links.
  • Not really browsable if I know the name I am looking for, and there is a long list. This particular list is 20-30 people deep.

Given these parameters, here are the three ideas we proposed.

4 people designed baseball card style

Option A

Option B

Two wide and short layouts

Option C

Client choose “Option B”. We agreed that it was the strongest choice.