Designing a mobile field guide

Summer 2020—Spring 2021
12 months

Mobile Product Design
User Research
Science Communication

NSF Project: Learning to See
PI: Marti Louw

Design Team
Alice Fang
Estelle Jiang
Dominique Aruede
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.

Available on Android and iOS! ✌️ 

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:

1. Field Guide,
2. Identification (ID) Key,
3. 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 apps don’t have? While the National Audubon Society has a very elegant and beautifal tool for bird-watchers, 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

Part 02. The ID Key

How can I identify an insect?

*dichotomous key
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.


Types of Questions

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 people 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