DIVA Collections Redesign

Research, Wireframes, Prototypes, User Interface Design, Front-end Development

DIVA Collections have become an integral part of San Francisco State University’s archives, allowing the researchers, faculty, students, and the community at large to access rich digital resources. After their initial introduction in 2009, the user interface and back-end only received minimal attention even as the use of collections expanded. In 2013, I was assigned to revisit DIVA’s user interface with modern web best practices like responsive design. It was also a prime opportunity to address some common user feedback like adding support for HTML5 video and supporting better branding for individual collections.

Mockup of DIVA collections page
The redesigned DIVA collection area introduced a large area available for branding. This early mockup demonstrates how it might be used to show an introductory video for the collection.

DIVA Collection Folder
Each collection features several sub-collections, allowing users to curate their content. This mockup demonstrates an early idea of how to add rich media to the DIVA collections.