CalBug | Interaction Design

Final Project for "Information Organization Lab," Fall 2014. Live site here.

Teammates: Gracen Brilmyer, Paul Young

Role: Needs assessment, interaction design, visual design, frontend


Challenge

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. 


Needs Assessment

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.

Storyboard by Gracen Brilmyer


Implementation - Frontend

Search

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.

Results Page

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

We used Mapbox and Javascript to implement the map view. Users can zoom in on specimens they want and click on map markers to get basic information about the specimens. 

Visual Refresh 

Using Axure Pro, we went through a couple iterations of what the appearance should be, including the layout of the pages, the colors, and the fonts. We used Twitter Bootstrap to implement our designs and update the appearance of the CalBug website. We used some custom CSS and Javascript to adjust colors, implement tooltips, and create the expand-collapse for search fields.


Implementation - Backend

Flask. Our application is primarily driven by standard HTML, CSS, and Javascript. The Essig Museum’s uses MySQL, which we connect and pull live data from. The specimen data is stored in one table, emec, and the specimen images (and their corresponding label images) are stored in another table eme_label_images. However, we still needed some back end processing to create an API for querying the Essig Museum’s databases. We chose Flask because it is simple to set up and it would allow us to use the SQLAlchemy module for Python.

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.

Conclusion

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.