Library Site Design: Wireframes

Our design principles for the Library site restructuring left us with a lot of tricky design issues to tackle, and we also needed to make sure we were addressing organizational stakeholder needs in addition to our researched user needs.  Reviewing the ways that other websites approach similar problems proved informative (such as those in eduStyle’s Noteworthy Sites list), though most other library sites contained the same complex, tabbed search boxes, obscure navigational labeling, and physical location focus that we hoped to avoid.  After many conversations with Erin, reviewing organizational needs based on Erin’s interviews, considering our user personae, and studying our analytics data, I produced the following wireframes and presented them to our stakeholder community (Nov. 16, 2011).


Library Home Wireframe

The home page design has obvious paths for the “library as research hub” and “library as service space” user populations, a streamlined four-item main navigation (replacing a building-based navigation), content for first-time or curious users, and a cross-cutting series of “utility” navigation menus in the footer.

Home (with menu)

Library Home with Menu

“About the Library” employs a “mega-menu” that helps us structure content in ways that a traditional drop-down menu does not. Here, we guide most users to their likely destination of “Libraries & Labs”.

Libraries & Labs

Libraries & Labs Wireframe

The Libraries & Labs page puts the focus on space vitals (like hours and contact info) while allow each space to embed a blog feed or similar content for space-specific and time-sensitive user communication. The user is able to filter spaces by certain criteria, such as which libraries are open.

 Exhibits & Collections

Exhibits & Collections Wireframe

The Collections page puts a strong, renewed emphasis on our named and thematic collections, per our design principles, to encourage not only easy access by our local research community, but also visibility to scholars and enthusiast around the world.


Services Wireframe

The Services page meets our design principle goal of providing cross-organizational access to services. The hierarchical headings help us avoid a “laundry list” approach to services while still highlighting the breadth and depth of expertises offered by the Library.

Our Organization

Organization Wireframe

The “Our Organization” page, replacing departmental listings, gives users (more likely to be at other university libraries or prospective employees than our local students) to get the same sense of activity and personality that our Libraries & Labs page employs for those units not linked directly to physical spaces.


One comment on “Library Site Design: Wireframes

  1. Amy Wharton says:

    This is great! Thanks for posting, Joe.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s