🐞📱

Designing a mobile app for Macroinvertebrates.org

Summer 2020—

Mobile Design
UI/UX
User Research

NSF Project: Learning to See
PI: Marti Louw

Design Team
Alice Fang
Estelle Jiang

Creating a robust, stand-alone mobile product that is reliable for experts, yet approachable for new learners

Macroinvertebrates.org is a teaching collection of 150+ insects that supports freshwater insect identification, for both expert and novice users. The site tackles the complexity of taxonomic identification, and tries to get people to think and observe like an entomologist. However, the original website layout breaks when viewed on a phone, despite 20% of users accessing the site on a mobile device.



Main App Functions

The app needs to be easy to download, approachable, and reliable.
With a range of use cases centered around exploration and training, the app condenses the following aspects of the website into their essential elements:

01. Field Guide,
02. Identification (ID) Key
03. Quiz

We worked with macroinvertebrate trainers, high school teachers, entomologists, and other stakeholders to create an accessible digital tool, for the insect-identifiers on site who are looking at live insects in freshwater streams. We also wanted the app to be approachable for novice learners and students, but still reliable as a resource for experts.

How can we create an interaction that dives into the complexity of taxonomy, but in a friendly and engaging way? 

...and what does Macroinvertebrates.org have that other field guide or ID Key  applications don’t have? The National Audubon Society has a very elegant and beautifal tool for bird-watchers, but Macroinvertebrates.org is unique in its collection of gigapan, zoomable insect imagery.






Part 01. The Field Guide





What is taxonomy?
It’s been a while since high school biology.
The field guide allows users to browse 93 Families within 9 Orders, and zoom and drag high quality images of insects.  

There are three main sections: the Order Page, the Family Page, and the zoomable image, which has genus-level information. Macroinvertebrates.org uses a nested hierarchy to represent this taxonomical relationship (see relationship above). 

However, on the website, the interaction between pages isn’t always linear: users are able to jump from Order to genus with relative ease, skipping Family.  


We felt this was important for the mobile app as well. Jumping shortens the number of steps it takes to access the zoomable images—which are kind of a big deal for observational learning, and are also just REALLY cool. But in order to condense web features for a mobile format, we placed more focus on Order and Family, which is why there is no specific genus page. 




Field Guide > Order Page




Field Guide > Order Page > Family Page




Field Guide > Order Page > Family Page > Zoomable Page




Designing a learning app or a reference app?
Design Process
We designed the pages of the field guide to scale across all insect Orders and Families, which meant it had to be flexible for every edge case; in our collection, some Orders only had 2 specimen, while others had 10 or 20. There was also a range of name lengths, # of features, and available images and illustrations

We also had to design specific subcategories, which are important for testing water quality: damselflies vs. dragonflies; net-spinning, case-making and free-living caddisflies; larval vs. adult beetles



Early in the design, we focused on defining functions to bring from the website, and organizing navigation, because “overview” and “diagnostic characters” are shared across Order and Family. 

Then, we focused on interactions and popups, associating diagnostic characters with the Order/Family as an overlay. 

~What’s in a family? How do we represent taxonomic structure in a visual manner, showing the interactions between Order, Family, and genus?



Round 01. User Testing
We went through two rounds of user testing before development, and interviewed people with different levels of expertise and experience with macroinvertebrates.

Insights from Round 01:
In the first round of user testing we focused on usability and navigation, and asked trainers and teachers to talk-aloud through a prototype of the app.

  • People weren’t using the bottom button, and looked to the top of the page for expanded information instead.
  • Home page was misleading
  • The drop-down menu was confusing; local or global navigation?
  • Experts want to quickly access specific information, but novice learners want to understand relationships

After synthesizing this feedback, we re-organized how the information was structured, from a popup overlay to top bar navigation, which would stay consistent from Order to Family. We also went back, thinking about how to structure global navigation across functions other than the Field Guide.



Round 02. User Testing

*Additional research synthesis with Dominique Aruede
Insights from Round 02:
In the second round of testing, we interviewed more novice learners and high school teachers. This prototype introduced the hamburger menu icon, top bar, and bottom bar navigation.

Common issues included:
  • Users lacked context, especially if they were unfamiliar with taxonomy; however, they could get a grasp of the nested structure after exploring the menu icon
  • Novice learners struggled with scientific terms (“What’s an Order?”) and latin names
  • Reorder tab navigation—relationship between “Families” and “Diagnostic Characters” based on how students learn
  • How to flip and switch the zoomable image

Based on this feedback, I redesigned the type system to feature common names over scientific names, looking to Audubon’s printed field guide for reference. I also used expanded the order ‘Odonata’ into discrete sub-orders, to represent Damselflies and Dragonflies separately. And many, many, zoom icons.


// 
The team will be reviewing the field guide with entomologist Dr. Morse, and trainer Tara Muenz to review the accuracy of the content. Together, we’ll be refining the language of the copy and aquiring image assets. 

[Current Design]
 








Part 02. The ID Key



How can I identify an insect?
The ID Key* is a tool used to identify insects by their morphological features. Users move through a series of questions, making decisions based on the choices that are presented. As they move through the key, insect Orders will be eliminated until they reach the most probable insect Order.

The visual design is currently being refined, but the structure is based off of this interactive key from the website.


*dichotomous key; decision tree?

[img: designing hint pages]
Types of Questions
What’s in an ID Key?
While iterating different pages for the ID Key, I realized there were three general types of questions, which needed different visual treatments for clarity. 

Questions that compared two features required image galleries from both traits. For y/n questions about single features, the buttons had to be visually balanced, and the variable single feature question had to match the look and feel of the other two questions.

  • Make the button look like a button, aka clickable
  • Maintain image-focused approach; images are used to compare whether the insect a user is identifying has or does not have the feature
  • How to show the ~absence~ or lack of a trait 







Developing a design system



How do learners improve their visual memory and lexicon?
Macroinvertebrates.org is unique in its field because of its high resolution gigapan images. One of the project’s learning goals is to help users be comfortable identifiying insects in order to reliably provide citizen science data for environmental agencies. Learning how to accurately identify (ID) relies heavily on visual memory and observation.

For example, when people first learn about Mayflies, they typically learn from a scientific illustration of the insect. They can learn how to distinguish Mayflies from Stoneflies, but they don’t recognize that there are a variety of Mayflies outside of its prototypical image.

And so, with the design, we wanted to creating a design system that highlights all of the amazing images.

With minimal other visual elements, typography had to play an important role in establishing content hierarchy. We spent a lot of time going back and forth with Scientific vs. Common names, and the typographic conventions that would have to be established.

  • Plain language, common name forward
  • Typography and color palette inspired from the website
  • Edge cases; visual balance with a range of content lengths

*will be updated as ID Key and Quiz assets are refined