Re-designing the toolbar for Macroinvertebrates.org

Summer 2019
4 weeks

Interaction Design
Science communication

NSF Project
Learning to See, Seeing to Learn
PI: Marti Louw
How can we highlight tools and features on the site to make them more accessible?

Macroinvertebrates.org is a teaching and learning collection designed to support freshwater insect identification, for both expert users, and novices. The site tackles the complexity of taxonomic identification, and aims to help with training a visual lexicon to  get people to think and observe like an entomologist.

I was tasked with re-designing the tools panel, in order to create organization, establish hierarchy, and build stronger relationships between icons and the content. I worked closely with the developer and collaborated with entomologists to make informed decisions.

More detailed process: side panel + view changer

Redesigned Site

How do you tell when a function is nested and can expand to show more info?
From usability tests that the research team conducted, users failed to interact with the clustered information, despite the value of the nested content. They did not recognize what was associated with the rotation icon, and did not interact with the ‘Media’ and ‘iNaturalist’ resources that were collapsed at the bottom of the panel. The team wanted to change the structure without creating a major overhaul of the previous system, staying consistent across Order, Family and Genus pages.

  • How can I show that information is nested and certain functions can expand?
  • How can I build a stronger relationship between the icons and the content?

Original Side Panel

Expanding and collapsing—designing the side panel
I explored different ways to show and hide a panel, and how the groups would collapse and affect each other. The volume of content in the information tab suffered from this the most; every group was (too) responsive to another, and it made interacting with expanding text or closing a panel very difficult—you would have to constantly adjust the vertical positioning of where you click.

First Iterations—Panel Structure, View Changer

How many views does an insect have? Looking at view changers
I also explored different conventions for showing multiple views of an object. The use of thumbnail images was interesting, so that someone could see all the possible images (and therefore all the views) at once.

However, at a small scale, it became especially difficult to tell the difference between dorsal or ventral views. There was also no way to implement this at the order/family level—there are too many insects with no ‘generic’ isotype.

Information Diagram

This diagram shows how all of the content was categorized. The images/videos and iNaturalist gallery became grouped into a third category, which we called ‘Media,’ in order to separate it from the information group. The rotation icon was also separated from the right side panel; instead, it became grouped as part of the view finder function on the bottom left. Generally, Order/Family/Genus had similar content, with slight differences from page to page.

Side Panel Prototype—with Clear All

Final Redesign (View Changer + Side Panel)

Science communication is hard, but super valuable
It’s tricky designing for learning, but entering the project as a non-expert myself provided valuable insight in how novices interacted with all of the information.

Things I learned on this project:
  • dipped my toe into the difficulty of science communication, as many things we worked on did not have a digital precedent or a field guide equivalent
  • got to look at a bunch of super high-res photos of bugs, and I gained a greater appreciation for them! My favorite is Empheroptera Baetiscidae Baetisca

I’ve worked on a range of other things for Macroinvertebrates.org, including learning materials, and a site how-to video. Check them out!
︎ Print AssetsHamburger Nav Restructuring | Training Resources