Collection Homepages: Prototypes, Analysis, & Inspiration

At long last, here’s the final group of wireframes we’ll blog about for our site redesign project: the individual collection homepages. Here’s an annotated look at one of our current collection homepages:

View this feedback (Collection Homepage – Current Site) on Notable

Prototypes

Here are six possibilities (A – F). We’ve used Ad*Access as an example, as it is our most-visited collection:

adaccesshomemockup

Analysis

The ideas in the prototypes stem from our analysis of the current site, per the following:

Web Analytics

Interviews With Collection Sponsors

  • Make it clear and obvious what a user should do upon visiting. Most people either want to search or browse. Put the search & browse options front & center.
  • Move the paragraphs of text to a separate ‘about’ page.
  • Give a visual taste of what kinds of things are in the collection.
  • Show the most popular items in each collection.
  • Let people more easily browse all of the available metadata for each collection (e.g., browse all companies in an ad collection).
  • Use a better combination of fonts & colors to help the pages from feeling boring.
  • Give each collection more character by using graphics that enforce branding.

Feedback Forms & Other User Feedback

  • Avoid the “wall of text”; make the “home page copy read more like web copy.”
  • Feature timelines more prominently
  • Having two search boxes (one for inter-collection & one for intra-collection searches) is confusing.

Ideas From the Implementation Team

  • Build a smart template that is 1) unified enough to make collection-publishing efficient and the user experience consistent, but 2) flexible enough to allow each collection to be individually branded (if desired) and to present the most optimal arrangement of browsing options given what’s in the collection.
  • Incorporate blog posts on collection homepages, so experts have the ability to write about each collection on an ongoing basis.
  • Provide advanced navigation options (like linked term clouds, timelines) for all collections.

Inspiring Examples from Around the Web

View this feedback (Brooklyn Museum Collection Homepage) on Notable

View this feedback (Hulu “Collection” Page) on Notable

View this feedback (Hugh Morton Collection Homepage) on Notable

View this feedback (Internet Archive: Moving Images Archive) on Notable

What do you think? Join in the conversation here in the comments, or comment anonymously via our feedback form.

2 thoughts on “Collection Homepages: Prototypes, Analysis, & Inspiration”

  1. Hi Sean,

    My overall favorite is Design F, but would prefer to have categories moved to a browse tab as shown on Design D.

    The placement of the various elements on Design F feels natural in light of how we know people have been using our current collections, and also in light of how we know people in general scan web page content (Jakob Nielsen has a good post about how people scan content on web pages)

    I like the tabbed “highlights” and “most popular” options as shown on Design F. The multiple highlights images would be more visually appealing than having just a few images and would facilitate browsing.

    The tabbed Facet links below the highlights images seems like a powerful and flexible way to appeal to our patrons’ demonstrated preference for browsing over searching, especially if the categories were included.

    I like the layout of the collection logo and description as shown in Designs D, E, and F — at least it seems to work on the wireframes. I think it makes efficient use of the available space and creates a visual link between the logo image and the collection description.

    Cheers,
    Tom

  2. Hi Sean,

    I’ll be unable to attend your presentation on the prototypes, so I’ll just say here that my favorites are A,B, and F. I think A has a nice balance of images and text while still showing the search and browse possibilities without scrolling. I like the clean minimalism of B, though I’m sure it will get shot down as too text-heavy. F might be the busiest design to my eye, but I like that the content of the collection is explained right next to its logo and that you can still see searching and browsing capabilities and who to contact for help without scrolling (though it would be nice if you could see the tabs to browse on the first screen–can’t have it all, I guess).

    Thanks,
    Will

Comments are closed.