DIVA Collections Rebuild

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

After redesigning the DIVA Collections area in 2013, the platform began to gain more popularity and visibility in the academic sphere. Several items in DIVA Collections began to draw traffic from social media sites and it soon became apparent that the DIVA backend needed to be rebuilt to meet the needs of the modern web. We realized that this also gave as an opportunity to substantially improve the service for users and collection owners alike. With this in mind, we began the process of rebuilding DIVA from the ground up.

It was important for me to consider the core requirements of current DIVA Collections while also letting my imagination see where we could expand our offerings. I began research by engaging with collection owners and seeing where DIVA wasn’t meeting their current needs. I sketched out how they envisioned their current workflow and what they desired from their workflow in OmniGraffle. Following these meetings, I paired with our digitization technician to interview users and potential users, such as university librarians, and faculty who could incorporate DIVA items into their curriculum. Working with DIVA’s lead developer, we began to re-imagine DIVA as a three application suite covering the three basic cores of DIVA: collections management, curation of digital assets, and public display.

Workflow with boxes describing each step in the proposed process.
This early pass began to place portions of collection owner's workflows within our larger understanding of the 2016 DIVA suite. Subsequent workflows would begin to reveal the complexity of application we were tackling.

From this research we established desired functionality and began creating wireframes to experiment and test where that functionality would live. We focused on these wireframes in workshops resulting in fast iterative designs in Balsamiq, Adobe XD, and Adobe Comp. These wireframes were quickly built into prototypes in Balsamiq or HTML to begin testing with stakeholders and the wider DIVA team, where our ideas were challenged and stretched further.

Balsamiq Mockup of DIVA Asset Queue concept
Early on we established the concept of queues to allow workflows that scaled with the size of the organization using the application

Wireframe of DIVA Collections Dashboard navigation HTML prototype of DIVA Collections Dashboard navigation
Ideas started in wireframes and moved to HTML prototypes for testing.

As the new DIVA Collection tools enter development this Fall, I look forward to building on the interfaces we created for the 2013 refresh with modern responsive techniques and a more engaging experience for users. Primary to this is the ability for users to create their own exhibitions of DIVA items from their own user curated collections, with full support for sharing across social networks. We also hope to implement a robust communications system that allows collection owners to keep their fans and patrons aware of recent additions and upcoming exhibitions.

Screenshot of Photoshop Mockup for new DIVA 2016 public view
Building on the decisions that motivated my 2013 redesign, I’ve begun to consider refinements and improvements for the new rebuild. This Photoshop render shows a cleaner grid based layout. The in-page navigation is first attempt to improve on user’s impressions that the larger DIVA collections could be hard to digest.