CalBug is a collaborative initiative between nine California institutions with a goal to digitize over a million insect specimens. It has over 209,000 specimen records and over 400,000 images, but the primary function, search, was obscured and difficult to perform. The search page was hidden behind multiple menus, and had an intimidating 65 fields once users found it. The goal for the CalBug redesign was to design a search interface that focused on clarity, searchability and usability, so that users, researchers and novices alike, could utilize the collection.
Our first step was to understand the Essig Museum’s needs and wants for CalBug. The staff wanted to help two types of users search the collection more effectively. The primary group is researchers performing advanced queries, and the secondary group is teachers and students doing simple searches. The museum’s second request was to involve mapping the specimens in some way. Our stretch goal was to allow users to create “custom collections” by selecting specimens from search results and downloading a CSV file.
Through our interviews, we identified three main ways to make CalBug a better resource. The first was to simplify the search experience. The second was to update the display of results. The final component was to give CalBug a visual refresh.
Implementation - Frontend
CalBug’s primary function is search. So, the first problem to address was that the search page was difficult to find. It required three clicks to reach, and was effectively hidden in a section called “Data.” We created a mockup of the new CalBug to reimagine how the site should be structured. We used Axure Pro to design the search flow that put search on the first page. This included mocking up the new search page and results pages.
The second problem was the search page itself, which had over 65 fields. We combined multiple fields to bring the total number of search fields to about 20. We broke the fields into three categories: “Specimen Details,” “Taxonomy,” and “Collection Information.” We put the search fields under these three categories, which expand and collapse. This addressed our goal of simplifying search for the primary group of users, researchers. To help the second group, teachers and students, we also added a general search box at the top of the page. This search box looks through the entire database for their query.
The redesigned CalBug search presents users with a general search box on the first page. Below that, users performing a more detailed search can expand “Specimen Details,” “Taxonomy,” and “Collection Information” to see the advanced search fields.
The next step was to update how results were displayed. In the current version of CalBug, the results are presented in a large table. We decided to reduce the number of fields listed in the search results. With the updated list view, it’s easier to quickly scan the list of specimens. Users can sort and filter results in the table, and can hide columns depending on the device.
- List view (default)
- Image view
- Map view
Implementation - Backend
API. We designed an API to access the specimen database that would accept arguments based on the search structure described and return results in a JSON format. The main tool in creating this API was SQLAlchemy which allowed us to dynamically generate queries based on user input. As this data is supposed to be public, we chose to enable cross origin requests on this API.
An additional API was created to pull image information for specimens.
The CalBug project refreshes the search interface for the CalBug specimen database. Our main goals were to update the look of the site and improve the search experience. The main accomplishments of our project were updating the look of the websites, refining the search fields to be more intuitive, and creating an API to enable ajax calls in the interface.