PTV
Pollution tolerance has always been a tricky part of the database—how reliable is it at the order level? What's the best language to use: sensitive/insensitive to pollution, or tolerant/intolerant to pollution? It's still not the most resolved design, but I proposed a layout where pollution tolerance sits at the bottom of the overview page—if you read the paragraph description, it leads you into the information about pollution tolerance, providing you more context on perhaps why or how the insect is sensitive or insensitive. (Also, some header tweaking—good headers are super useful in providing context!)

Family-level pollution tolerance is more complicated—what do these pollution tolerance values even mean?  I've always wanted to use a data visualization to represent the ranges of sensitivity, and maybe this is a component that can be iterated on in the future :-) The following example was quickly mocked up in Figma for demonstration purposes, and not the best data viz—but some representation of the numerical ranges that allows someone to visually compare from region to region would be useful I think! (Again, more informative headers! "Regional Pollution Tolerances")

Non-Insects?
Another major bit of work that I started was trying to figure out how to incorporate the few non-insects, which are used in water monitoring and training, into the structure of the mobile app. The challenge here is that the non-insects aren't grouped as nicely under one Class like the insects are (under Class Insect); instead, they are representatives of several different Classes. Neither the site nor the app currently support Class-level categorizations, and so I had to decide how much of the existing architecture could be shifted to show these separations. In the end, to simplify the content, I removed the nested 'family' page and only showed the non-insect order-level page—the database also has very little content in the first place for non-insects. 

The following are some design recommendations for work that I did in December and February.

Version 2

Closing Out
Working on Macroinvertebrates.org has been such fulfilling and rewarding work, and I'm honored that I got to contribute so much to an open-sourced educational tool. I've learned a lot these past 3(?) years, and tried a lot of things, and realized I'm a lot better at spreadsheets than I previously knew. This project has been such a formative part of my undergrad experience, which I'll carry with me as I start a fellowship at the New York Times this June. I'll definitely miss Marti and Chris and the rest of the (very small) team!

by Dominique Aruede, CMU Cognitive Psychology and Human-Computer Interaction

Although I've had other roles this semester, I've been focused on the development of the Quiz section of the app. I had a separate assignment through my independent study to iterate on the quiz prototype. The following details my process:

Design Challenge
The app contains an interactive subsection which we named "Quiz." Quiz contains helpful tools for reviewing insect information (taxonomy, fun facts, etc.) like flashcard decks and short, image-based multiple choice question sets. The flashcard decks are the first component of the prototype to reach its user testable version in development. We wanted to figure out what categories of information presented on the backside of each flashcard would best facilitate learning. To clarify, I did not test for level of learning and transfer itself, but rather, I tested for level of understanding and comfort with two different degrees of content specifications. How scaffolded and robust does the flashcard information have to be for users to feel comfortable to rely on this tool (Quiz) as support for practice with macroinvertabrate ID activities?

I ideated on two possible flashcard designs and conducted a series of AB tests plus online surveys with six users. Version A implemented solely a text-based copy from the desktop site describing order-level features on the macroinvertebrate of interest; the feature names were clickable and revealed scrollable zoomed-in images of the feature on many different families within the order to show variety. Version B implemented both this interactive copy and an additional annotated illustration which highlighted the same features backed by the context of the entire animal (the annotations are also clickable, leading to the same formatting of visual examples)—images below. I asked the question, what flashcard elements do users prefer when learning to ID?

Additional Content

• Takeaway
  • there is information and context mising that people would like
• Implication
  • add a fun facts section about lifespan, PTV, what time of year they emerge, differences between adult and larval stages, or any other miscellaneous information from the field guide

Preference

• Takeaway
  • people unanimously prefer version B
• Implication
  • focus on Version B (annotated illustration plus copy) for future iterations

Illustration

• Takeaway
  • the illustration adds an element of juvenility in a good way
• Implication
  • focus on Version B (annotated illustration plus copy) for future iterations

Text Size

• Takeaway
  • it's not better to only include text
• Implication
  • trade in begger text for an image of some sort

3. Usability
Clickable Words

• Takeaway
  • the highlighted words in the copy are more noticeable than the annotations
• Implication
  • highlight the annotations in some way. I suggest making the text orange similar to in the copy (or a color that matches the style sheet while still being accessible to colorblind folks) and make the arrows/brackets on the annotation HEX 212121

Reasoning Behind Preference B

• Takeaway
  • Users value spatial contiguity, in other words, it's important for users to see both text and an image near each other
• Implication
  • include both the description and the annotated illustration or some sort of visual link that is clear

Zoom

• Takeaway
  • the lack of zoom ability is limiting
• Implication
  • be able to zoom out to see full image once the thumbnail is clicked? this may be out of scope from a development standpoint

Two Orders at Once

• Takeaway
  • users want to look at two orders at once
• Implication
  • the look-alikes learning goal will be useful for this need. I included a detailed description of this in the app contents spreadsheet but it's here also:
    This flashcard deck will feature a slider functionality such that there are two insects on the front of the card and you can only see one at a time, depending on what the slider reveals. For example, you can keep the slider in the middle of the screen and see half of each insect and compare features. All subject to change depending on what future designers think is most appropriate. I've curated all of the image content for this in Figma. Basically select any family from one order and pair it with a family from a look-alike order. There should be more than enough pairs, I'm guessing hundreds. Figma here.

General Usefulness

• Takeaway
  • Version B meets the needs of our target audience
• Implication
  • focus on Version B (annotated illustration plus copy) for future iterations

Flashcard MVP for the 'Review Orders' Learning Goal
Taking all of this into account, I developed an interactive prototype in Figma, incorporating the bare minimum edits that were suggested through the synthesis (aka, fleshing out Version B with the proper annotations for the illustrations, and fixing some some small UI thing slike the help button).

I also prototyped an alternative way to display the images, using a bigger aspect ratio and drawing from the design of the lightbox feature in the Field Guide, a suggestion first proposed by my colleage, Estelle Jiang. I also prototyped the possible flow that's created when the bookmark button is pressed on a card: a new deck with only the bookmarked cards will be presented upon completion of the whole deck for the user to review once more or as many times as they like. Once the user indicates that they've mastered them, they will see an end screen with options. One note is that this version of flashcards contains a 'back' button near the bottom of each flashcard, but that is strictly for prototyping purposes because Figma doesn't recognize the difference between left and right swipes, it just registers a general swipe. In the real beta, left swipe means 'Card Mastered' and right swipe means 'Undo Last Swipe' or 'Go Back,' and of course, bookmark button means 'Study Again.' So there will be no need for a physical back button. Below is the exemplary demo of all that I've described.

HCII AB Usability Testing of Macroinvertabrates.org Native App and Figma Prototype

Authors: Dominique Aruede (Carnegie Mellon University), Marti Louw (Carnegie Mellon University)

Abstract:
The opportunity this project presents is to support practicing and learning identification (ID) of macroinvertebrates. The app is a companion to the macroinvertebrates.org website and works in-field without an internet connection on mobile devices for a diverse set of users. The app has an interactive subsection of the prototype which we named "Quiz." Quiz contains helpful tools for reviewing insect information (taxonomy, fun facts, etc.) like flashcard decks and short, image-based multiple choice question sets. We ideated on two possible flashcard designs and conducted a series of AB tests plus online surveys with six users. We ask the question, what flashcard elements do users prefer when learning to ID? We discovered that people unanimously preferred the version that coupled an illustration with the description of order-level characteristics of each insect, as opposed to the version that only had a textual description with closeup views of characteristics.

Meeting of the Minds Live Symposium Poster Link

Macroinvertebrates.org: A Digital Tool for Supporting Identification Activities During Water Quality Biomonitoring Trainings

Authors: Alice Fang (Carnegie Mellon University), Marti Louw (Carnegie Mellon University), Camellia Sanford-Dolly (Rockman et al), Andrea Kautz (Carnegie Museum of Natural History), Dr. John Morse (Clemson University)

Abstract: Macroinvertebrates.org is a visual teaching and learning resource to support identification activities in water quality biomonitoring. The online tool was developed with diverse stakeholders (including trainers, professional scientists, educators, and volunteers) through a codesign process. In this poster, we report on design research and evaluation data collected from trainers that characterizes how they integrated the site into their training workshops, and features they found useful. 
Survey, interview, and observation data revealed that Macroinvertebrates.org provided a compelling visual reference tool for trainers, allowing users to easily zoom in on key diagnostic characteristics needed for identification. Trainers reported that the site made it easier for them to train volunteers to Order and Family, and for volunteers to see relevant features and increase ID accuracy. Specifically, the site extended the utility of trainings by serving as a resource for volunteers to practice and review the ID process before and after trainings. In this poster, we report on the perspectives of trainers, gathered through the design research and formative evaluation process.

​https://connect.citizenscience.org/posts/macroinvertebratesorg-a-digital-tool-for-supporting-identification-activities-during-water-quality-biomonitoring-trainings

Using Log Visualization to Interpret Online Interactions During Self-Quizzing Practice for Taxonomic Identification by Chelsea Cui, Jordan Hill, Marti Louw, Jessica Roberts.

We were excited to present CMU alumna, and former REU student Chelsea Cui’s study at the 2021 annual meeting of the American Educational Researchers Association (AERA). Chelsea analyzed log data from participants in a 10-day study in which they used our quiz feature to practice aquatic macroinvertebrate ID. We analyzed interactions with the quiz tool along with accuracy in pre- and post-tests to determine how the quizzing platform was being utilized by learners at different experience levels. Through the custom visualization platform we were able to glean insights on how to improve our quizzing platform for future use.


See the poster here: https://aera21-aera.ipostersessions.com/Default.aspx?s=D0-9D-A0-1B-C0-49-87-5B-8A-3F-56-A7-02-C5-ED-66#

by Estelle Jiang

1. Explored the market product interactions.   
Before designing the quiz, we firstly explored some predecessors that have quiz features, such as Quizlet, Duolingo, and Lumosity. It helped us generate several possible formats of the quiz as well, such as matching games, card flipping games and flashcard reviews. 


2. Considered what we want to assess and the learning goals of the application before going deeper into the user experience and interaction design. 
We took a pause and realized that know the learning goals and purpose of making the quiz is the first priority comparing to brainstorm design solutions for quiz. Without understanding what we want the learners to learn, we cannot provide the suitable design to meet their needs. I summarized some potential learning goals before meeting the current trainers and experts:

1. Distinguish orders, especially for the orders that look similar. 
2. Recognize the common features for specific order. 
3. Review common mistakes that found by trainers to help learners avoid making them again.  
4. Help learners quickly recall and be aware of the tolerance level.

​
3. Mapped out the design formats and interaction and finalized the flow and logics for each learning goal we defined.

​A. Initial flow explorations (without knowing the learning goals)

 D. Designed for varied use cases and learning cases - knew limitations and considered tradeoffs​

By Dominique Aruede, CMU Cognitive Psychology

By Alice Fang, CMU Design

by Estelle Jiang

​2. Provided guidance and drafted out the design system for the field guide and entire app.  
Along the way, we decided to start consolidating the design guidelines and system for the team and product which can be useful for further development and also team collaboration. I started the finding good industry practices in terms of generating and designing the system, provided guidances and gave feedbacks while Alice consolidated the overall visual/layout and turned them into components in Figma to better speed up the design process. 

​
3. Facilitated the second round of user testings with product evaluation and conducted synthesis workshops on Miro - 
Instead of getting insights about application flow, logic and concept aspects of the app, the major goals of the second round testing are identify the specific usability issues for overall navigation and zoomable pages new design and evaluate more on the overall engagement and usability. Based on the 8 testing results, I facilitated the synthesis workshops on Miro with the team to generate iteration insights and help the team finalize the field guide MVP.

For the main insights: 
You can refer Alice's post: [Mobile App Pt. IV: Refining the Field Guide]  

02. Quiz / game to assess the learning goals

1. Explored the market product interactions.   
Before designing the quiz, we firstly explored some predecessors that have quiz features, such as Quizlet, Duolingo, and Lumosity. It helped us generate several possible formats of the quiz as well, such as matching games, card flipping games and flashcard reviews. 

​
2. Considered what we want to assess and the learning goals of the application before going deeper into the user experience and interaction design. 

We took a pause and realized that know the learning goals and purpose of making the quiz is the first priority comparing to brainstorm design solutions for quiz. Without understanding what we want the learners to learn, we cannot provide the suitable design to meet their needs. I summarized some potential learning goals before meeting the current trainers and experts:

    1. Distinguish orders, especially for the orders that look similar. 
    2. Recognize the common features for specific order. 
    3. Review common mistakes that found by trainers to help learners avoid making them again.  
    4. Help learners quickly recall and be aware of the tolerance level.


​
3. Mapped out the design formats and interaction and finalized the flow and logics for each learning goal we defined. 

By Alice Fang

This past semester, I refined the design of the field guide that Estelle and I worked on over the summer. With the main structure of each page layout figured out over the summer, this fall, I worked on global navigation, refined the design system of components and typography, and finalized some of the interactions. These design decisions informed the design and look of both the ID Key and Quiz. 

The prototype we had over the summer followed the scientific-name as its organizing convention. With blue type in Roboto Slab, the scientific name stood out on each page, but conflicted in hierarchy with other type.  ​What does the opening page look like when a user first opens the field guide function of the app? And how do these elements translate to the other two functions, ID Key and Quiz?

I also had to consider how components would fit in Orders outside of Mayflies. There are several important subcategories for identifying macroinvertebrates. Therefore, I had to separate Damselflies from Dragonflies, and toggle between the three categories of Caddisflies (case-making, free living, net-spinning). If there was a toggle for Caddisflies, then why are Adult and Larval Beetles separated into two different 'Order' pages? For the logic of the app structure, I grouped them back together; this meant we needed some toggle or filter system for Beetles as well now.

​

Throughout the semester, I've been creating and updating a style sheet, so that all of the components were the same across all of the many frames and pages. When redesigning components, I also consolidated and organized all of the visual elements and typography. (This... is a more tedious process than I previously imagined.)

I also organized a wireflow for the team to understand the interactions of the Field Guide, so we're all on the same page. The three main functions of the app, Field Guide, ID Key, and Quiz, are also laid out for reference. A bit (and tedious) part of this project has also been organizing all of the resources, references, and assets for the developer and the rest of the team.