Re-designing the interactions for complex tools and functions

Summer 2019
4 weeks

UI/UX
Interaction Design
Science communication

Learning Media Design Center, HCII
PI: Marti Louw

NSF Project: Learning to See, Seeing to Learn

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. 

How can we highlight the importance of tools and features on the site that are buried under multiple levels of interaction and make them more accessible?

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
01. Redesigned Site







01. Original Side Panel

Problem
From prior usability tests, users failed to interact with the clustered information, despite the value of content nested. They did not recognize the function 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, while 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?



02. First Iterations

Sketches: designing side panel / looking at view changers / panel collapsing

Panel iterations, demo-ing greying out on view changer
Process
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.

03. 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, but also know which image is in focus or zoomed in. 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 would be too many insects, with no ‘generic’ isotype!




04. Information Diagram
This diagram shows how all of the content ended up categorized. The images/videos and iNaturalist gallery became categorized into a third group, 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. 

05. Side Panel Prototype
I took advantage of the structure of the panel to incorporate the ‘clear all’ function, which shows the macroinvertebrates without any identifying information. 




06. Final Redesigned Side Panel and View Changer







Takeaways
It’s tricky designing for a learning/teaching tool, 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:
  • working on a tight timeline, in order to make a project launch! 
  • working alongside a developer to test usability and accesibility—a lot of the target audiences don’t have the same internet resources as CMU, so the site has to be able to make sense and work fast on other browsers
  • dipped my toe into the vastness and difficulty of science communication, and a lot of things we worked on didn’t have a digital precedent or a field guide equivalent
  • consistency, especially in language/voice
  • got to look at a bunch of super hi-res photos of bugs, and I gained a greater appreciation for them! My favorite is Empheroptera Baetiscidae Baetisca 

︎ Other things I did for macroinvertebrates.org:
    Print AssetsHamburger Nav Restructuring | Training Resources