Case Study: USF Tampa Library Redesign

Unlimited Flexibility with WordPress Multisite

Divine Proportion and Golden Ratio in Web Design

Divine Proportion in Web Design

Since leaving the corporate web world, the University of South Florida provided me the opportunity and support to provide the institution with a full-fledged redesign for the USF Library system.

Previous web-related projects were expected to have very little planning involved, limited resources, and not a lot of time for innovation. I was provided a very healthy timeline of expectations with dedicated staff members that would serve as our web committee to help with usability testing, general feedback, and a resource to help educate me on the services provided by USF libraries to students, faculty/staff, alumni, and community users.

Given a good three months of prep time, I was finally able to take the time to break the redesign process into a few stages: wireframing, interface design mockups, and HTML prototype templating.

During these major stages, I would also be required to benchmark our ‘competition’, investigate a proper design for housing the content, index the massive breadth of current content, and suggest ways to reorganize the information provided to patrons based on a tighter, more intuitive hierarchy of info to display. Believe it or not, there IS some degree of math involved when trying to proportionately design a website. Using the Golden Ratio method, I went with using a 960 (pixel) grid system to assist with various options for layout.

Creating a WordPress Multi Site NetworkSince the USF Libraries didn’t have a dedicated webmaster to control and publish content, they relied heavily on another content management system, Springshare’s LibGuides, to allow members of the library system to publish content on the fly. This became a breeding ground for lots of duplicate content with no central organized flow of information. While LibGuides is a great product used by librarians to quickly publish their course and subject guides, it wasn’t a good way to bring attention to the front-facing services we needed to promote across campus. A chief concern with the previous site was that users would have a hard time finding resources they were looking for, often taking 4+ clicks to get to their destination and then having to constantly remind themselves how to get to that same resource next time they came to visit the site. Our goal was the site easy to use with a consistent framework and universal dropdown menu system.

Having some past experience with WordPress framework and templating, I decided to pick this open source CMS to house our content. Going a step further, I decided to manage our content in a multi-site network configuration. WPMU sites are a great way to expand the flexibility of siloing directories for search engine optimization, utilizing widgets and plugins allowing for 3rd party integration (social media, embedded media, etc.), as well as setting up complex sub menu hierarchies. As of today we’re currently at 30 separate directories, each with 10-30 pages each: that’s a lot of varied content!

More information on WordPress Multi Site Network Configurations »

Wireframing

For wireframing, I decided to start with some printed 12-column 960 grid system sheets and eventually transferred a few of those pen & pencil sketches to my MockFlow account before reviewing some 2 vs. 3 column design options with the web committee.
Web design wireframes
Download Mockflow Wireframe examples »

Mockups

After our committee reviewed wireframe options, we decided to go with a 2-column layout for both homepage, and subpages. In the photoshop mockups, I definitely wanted to focus on a lot of clean, harmonious, white space. We played with a few major design elements when coming up with various mockups that incorporated as many elements as possible from USF branding. I was paying close attention to a lot of news sites since our site would be highly information and densely populated with services for varying demographics; my particular favorite model was the UK Times website with a very robust dropdown mega menu.
Photoshop mockups

Prototype

Once the committee decided on a solid mockup with desired design elements from the various proposed artwork, it was finally time to markup the HTML. My focus during the the prototype stage was to flush out the homepage and subpage examples, with emphasis on demonstrating our dropdown mega menus.
website prototype layout
Learn more about local WordPress theme development for prototype stage »

Other Applications

Since WordPress templates are highly dynamic, there are a lot of rich 3rd party applications we decided to include within our new site. On our homepage, we utilize the robust SlideShow Pro Director module for our main news channel: highlighting important events, calling attention to new library initiatives, and announcing changes or updates to USF library products and services. This sleek application functions as a CMS for images, video, and includes nice (non-Flash) options for anyone on a mobile device.

For form management, we’re utilizing the services of Wufoo to help maintain our many online signup forms for library services or, to report problems. Wufoo ties in nicely with our email subscription service and even comes with a WordPress plugin of its own!

Naturally, we’re also employing Google Analytics and Webmaster Tools to help analyze and track our traffic and monitor our website statistics.

Future of USF Libraries

Now that the difficult stages of design and content management have been squared away, USF Libraries are continuing to hone in on our user experience with usability studies, work with our IT group to make sure server and directory infrastructure are optimized, and rolling out other valuable services for students, faculty/staff, and the community.

Our group continues to work with many database consortia, making integration with our paid services appear as seamless as possible for registered users. In 2012, we will roll out a powerful Discovery Search Tool for students & faculty, continue to improve our social media presence, improve content generation by allowing contribution from fellow librarian blogs, continue to improve site functionality, and expand the value-added services that make the USF Library website a fun, and informative site to explore.

BIG THANKS to all those involved to help make this process as smooth as possible the USF Tampa Libraries!