Designing a mobile app accompaniment for Macroinvertebrates.org

Summer 2020—
3+ months

Product Design
UI/UX
User Research

Learning Media Design Center, HCII
PI: Marti Louw

Design Team
Alice Fang
Estelle Jiang

How can we create a stand-alone mobile product that has similar functions as the website, that is also downloadable and accessible without internet? 🐞📱


Macroinvertebrates.org is a teaching and learning collection designed to support freshwater insect identification, for both expert and novice users. The site tackles the complexity of taxonomic identification, and aims to help train a visual lexicon, to get people to think and observe like an entomologist. However, the website design breaks when viewed on a phone, despite 20% of users accessing the site on a mobile device.
NSF Project: Learning to See, Seeing to Learn

Jump to:
Structure | Prioritizing | Low-Fi | User Testing | High-Fi | Visual System




01. Current Design




Goals
02. Use CasesChart showing the intersection of use cases, from tool, reference, to exploration and training

The app needs to be downloadable, approachable, and reliable.


With a broad spectrum of use cases centered around exploration and training, the app takes three areas of the website—the field guide, identification (ID) key, and quiz—and reduces them to their essential elements. We wanted it to be accessible without internet connection, approachable to novice learners, but still reliable and accurate for users with more expertise. 




04. Taxonomic Structure
Diagram of nested hierarchy of taxonomy
Organization

What is the best way to structure taxonomy in the app, given how dense the information is?


Macroinvertebrates.org uses a nested hierarchy of pages to represent the Order > Family > Genus taxonomy. However, the interaction between pages isn’t necessarily linear: high-level navigation aside, users are able to jump from Order to Genus with relative ease.  

Diagram showing movement from Order to Family to Genus
We felt this was important on the mobile app as well, because it shortens the number of steps required to access zoomable specimen images (which are kind of a big deal and also REALLY cool). However, this conflicted with the simplified information we wanted to include with the app—focusing on Order and Family, not genus.

It was therefore important that we organized and looked at all of the content we had to include. I made a spreadsheet that mapped out the number of Families, specimen, and diagnostic characters for each Family within each Insect order.
05. ✏️ Spreadsheet with ALL THE NAMES
Screenshot of a spreadsheet with every Order, Family (common and scientific name), and number of specimen, diagnostic charactersitics
The app features 93 Families within 10 Insect Orders, and each Order has a range of 2–22 Families. We had to take all of the edge cases into consideration when designing Order and Family level UI components. One of the biggest challenges was the line length differences between the longest and shortest names, scientific and common.





Prioritizing + wfh

What should we prioritize, when we have a small team, a short timeline, and a limited budget?


A big part of designing the app was learning to work remotely with 2 designers + 2 developers, while simultaneously onboarding* new team members. 

We had to figure out what functions to prioritize and include—there were only so many iterations that could be made to the design before the developers would be too delayed. Creating user stories allowed us to see possible entry points and user profiles for the app. What are ways people would use the app? What would they be looking for? And how do we prioritize that development at the same time?

Diagramming the user flow also helped the developers understand the structure and architecture that Estelle and I were creating. This diagram only shows the flow for the Visual Field Guide aspect of the app, excluding ID Key and Quiz.
06. User Flow



Low Fidelity

Beginning the actual desgining, and wireframing pages to scale


07. Low Fidelity v.1
Defining functions to bring from website, and laying out areas for grids vs. lists and sliding popups. Trying to organize with bottom navigation, which became confusing to move further into nested pages [Order to Family]. Need to figure out global navigation.


08. Low Fidelity v.2

Exploring page template layouts, that can scale across all 10 Orders and 93 Families


09. Low Fidelity v.3


Interactions and popups, associating the diagnostic characters with the related Order/Family as an overlay. Working in higher fidelity, to get a feel for a visual style, taking inspiration from the website
 





10. Testing Prototype
User Testing

We’ve designed something. Now how do actual people interact with it?—Interviewing people with different levels of expertise.


11. Prototype

We conducted usability tests through Zoom, using a Figma prototype, to understand how users interact with and navigate through the different pages. We interviewed people with different levels of expertise and experience with the website and subject matter, including professional trainers, high school teachers, developers, and young adults with no prior experience.

Through these interviews, we identified a few insights that informed the next iterations:
Insights
*Visibility + Association

People didn’t see the button at the bottom, and consistently looked to the top of the page to find information.


Interactions

Horizontal scroll on the home page wasn’t intuitive, and the scale of the insect cards misled users about the purpose of the app.


Navigation

The drop-down menu was used most to navigate, but there were conflicting expectations about the content of the menu.


*Expertise

Experts want to quickly access specific information but novice learners want to understand relationships.


Images

People were excited to see the diagnostic characters and other photos, especially the zoomable image.



12. Insight Areas




High Fidelity

Are we making a learning app or a reference app? —the Identity Crisis Moment


Who exactly are we designing the app for? Our focus shifted after the first round of testing, in order to address various levels of expertise and the visibility of specific elements. Two other versions were quickly iterated to explore information in the hierarchy between orders and families.


13. Version A—Learning App Experience

Version A allows users to swipe and learn along the way. The experience is more immersive and easy to follow for novice learners, but does not give enough room for personal exploration, and quickly becomes repetitive for more experienced users.  



14. Version B—Field Guide / Resource Book

Version B allows users to quickly switch between various levels and ‘categories’ of information, acting more like a field guide / reference book. The homepage was also iterated from showing only one order to display multiple orders at once. 




High Fidelity

Features of the current design ✨


15. Current Design Walkthrough

We moved forward with Version B because it was more appropriate for different levels of expertise. It allowed different users to jump and access information more freely depending on what they were looking for. 

Functions
1. Field Guide
2. ID Key [old design]
3. Quiz [future addition]

Pages
1. Home page: gallery of order illustrations
2. Order + Family pages: list view, overview information, gallery of diagnostic characters
3. Zoomable images




 Visual System

Establishing the visual system, designing UI components, and designing for (the many) edge cases.


Main Components
Family (Specimen) Cards on Order Page
Diagnostic Characters Gallery on Order + Family Pages
Headers

Visual System
I wanted to focus on typography, because the main visual element that should be highlighted is the photography, which is amazingly detailed and really cool. Color and type (Roboto Slab, Nunito Sans) are both taken from the website and project materials.

Edge Cases
The edge cases we had to work around included name length, visual balance for the range of # of specimen + photos, and negotiating between common/scientific names.

16. Explorations of Family Cards
What’s in a Family?

17. Order > Family > Zoom

In an Order page, scrolling down shows the Family cards in a list, while scrolling horizontally within a Family card shows all of the specimen in that Family. Clicking on the top of the card leads into the Family page.

I explored different ways to visually indicate those separate interactions, using icons, typography, and shadows. What areas of the card are clickable, which are scrollable, and which jump to the zoomable image?


18. Titles and Names
The ‘Name’ Question
The issue of line-length appears once again! Do we prioritize the scientific name (for trainers, scientists) or the common name (for students, novices)?

Ultimately, we used the scientific name as the stronger title, to accomodate space in the header as well as the drop-down menu. The design took precedent.
19. Diagnostic Characters for Each Order
Image Gallery
How many images of each diagnostic character should be shown? The number of diagnostic characters ranges from 1–8; whatever the design is, has to take into account these ‘empty’ cases of having only one trait with one image. 

For the sake of a viable product*, we limited the design to 3 images/diagnostic character. Also for visual balance. 

*Halfway through the summer, the database was moved to a different server, and made all of our lives just a little more difficult... Manual image collection it was.

20. Exploring Typography-heavy Pages*
*From an earlier version of the design that wasn’t implemented, but a valuable exercise in typography




Next Steps

Moving forward into the fall~


Currently, we’re taking a step back and reviewing literature on visual cognition/learning from recognizing patterns. We brought on another researcher, who will be helping us with a second round of user tests for the current design. We’re also reworking the design to be more visually accessible (legibility and color contrast), as well as (re)designing the ID Key and Quiz functions to fit the design system.

The project got supplemental funding at the end of the summer :-) We can now afford further development, which will be moving forward mid-to-late October, for both iOS and Android!

Stay tuned for a beta version! 🐞📱


21. WIP ;-)