Network of the National Library of Medicine
The mission of the Network of the National Library of Medicine (NNLM) is to advance the progress of medicine and improve the public health by providing all U.S. health professionals with equal access to biomedical information and improving the public’s access to information to enable them to make informed decisions about their health. The Program is coordinated by the National Library of Medicine and carried out through a nationwide network of health science libraries and information centers.
Spanning a five-year period, my full-time employment with University of Pittsburgh afforded the unique opportunity to define, design, and deploy a cohesive creative strategy for a national campaign. Inheriting the project in 2016, our team started with formidable tasks: decades of sprawling content required curation, evaluation, and pruning; the existing website design was excessively outdated by ten years; and the user experience was horrific.
The primary website was improved and enhanced in both form and function. My personal task was to establish a visual vocabulary that could be reused over a suite of products including web, mobile, print, and kiosk displays. These creative identities would need to hold their own ground for the five-year period. Additionally, all projects required compliance to federal accessibility standards. From hardware to software, we employed solutions that simultaneously improved site performance, boosted usability, and ensured a secure platform for content development across a broad spectrum of technical expertise.
Bootstrap 4 Theming
Adopted from a previous freelance project, I brought the front-end framework of Bootstrap, paired with a dependency on the Font Awesome family, to the creative solution of redesigning a visually outdated website. The strength of Bootstrap is the mobile-first philosophy that prioritizes usability and responsiveness of a website, in addition to a comprehensive library of reusable components such as carousel sliders and card displays.
All subsequent projects would reuse the defined visual vocabulary that we established, including the selected components. Through a consistent use of form and function, all of the NNLM web properties looked the same, as if they all belonged to the same family which is no small feat.
Section 508 Compliance & Accessibility
Government contracts are typically followed with a list of rules and regulations, federal guidelines and compliance checkpoints for all generated content. In compliance with Section 508 of the Rehabilitation Act of 1973, all of the website templates were developed to allow equal access to information, regardless of any disabilities that a user may possess.
Visual design themes and elements were produced to be compliant to Web Content Accessibility Guidelines (WCAG) and Wide Web Consortium (W3C) standards. Through a series of monthly web scans all content on the primary website was reviewed to ensure the accessibility standards for content development and visual elements were being continuously met.
Content Management Framework
Drupal 7 was selected as the back-end framework for most of the NNLM website properties. With extensive options for customizing and theming, extending functionality through available modules, and endless community support for the product, Drupal was a solid choice for this federal project.
With security in mind, each Drupal installation was carefully monitored for available system updates to core files or installed modules. Server management and maintenance was of paramount concern.
An integral communication tool for the Network is their collection of regional blogs. Each of the eight Regional Medical Centers and six national offices required support for a total of 16 blog installations. A suitable solution was to migrate the individual blogs in to a WordPress Multisite. This strategy proved valuable in the monthly maintenance of core and plugin updates.
Additionally, a custom WordPress theme was designed and developed. By utilizing Bootstrap components and the defined website styles, a consistent look and feel was maintained across all web properties.
One Style to Rule Them All
All new projects added throughout the contract would need to adopt the established styling, ensuring the consistent look and feel over multiple websites and thousands of pages of content. With the development of a Website Style Guide, all properties implemented the visual rules and regulations for NNLM.
The style guide is comprised of:
- Visual Identity (Color Palette, Typography, Iconography, Logos)
- Components (Carousel Slider, Homepage Featured Widget, Sidebar, Featured Widget, Photo & Video Banners, Regional Map)
- Content Presentation (Content Structure & Styling, Navigational Menus, Modal Overlays, Sidebar Exposed Filtering, Bootstrap Approach, Mobile Breakpoints)
The primary NNLM website serves as the primary portal for public users, public library systems, and member organizations to share health information about emerging topics. With over 30,000 nodes of content, this public website is rich, vast, and impressive.
Representing the Network’s regions and offices, 16 individual blogs present pertinent health literacy information on a monthly basis. With a custom Bootstrap theme, based on the website style guide, this WordPress installation fits into the creative vision of other members of the web suite.
Supporting the national All of Us initiative, the Training and Education Center is dedicated to educating the public about relevant health issues such as Internet literacy. Built in Drupal 7, the site features incorporated learning modules and educational components.
Supporting the national All of Us initiative, this internal Drupal 8 site functions as an organizational tool for collecting and managing expert partners. Whether the partner is in a creative field such as graphic design or library sciences discipline, the portal allows members of the group to reach out to qualified and vetted professionals.
The necessity for file sharing was identified, and the NNLM Delivery platform was put into place. We utilized a third-party application for the functional components, but themed and styled the interface to match our family of web products.
Based on an iPad delivery model, the NNLM Kiosk project was displayed on a collection of iPads installed in public libraries. Built with traditional front-end technologies, developed as a Drupal 7 site, the kiosk site was presented through an iPad application called KioskPro.
Near the end of the contract, our interactive team was tasked with the redesign of the primary site. This strategy was implemented as a response to Drupal 7’s end-of-life date which was initially scheduled for November 2021. Additionally, the migration to Drupal 8/9 would give our team an opportunity to upgrade the front-end templates to Twig, Bootstrap 5, and a chance to revisit the creative approach and visual branding of all web properties. While the theme development and platform migration is still on-going, the updated branding, messaging, and content reorganization/restructuring has already been well received among Network shareholders and staff members.