Fall 2016—Spring 2017

Participated in usability analysis, design and prototyping



Learning Science

NSF funded

"To create a hook for volunteers to comeback, which will lead to mastery." is a novel learning resource for citizen scientists and entomologists. The initial prototype of 12 specimens is undergoing a redesign project, which will lead to an updated version of 150 specimen samples.

Why macroinvertebrates?

Each aquatic macroinvertebrate has a different pollution tolerance level. Therefore data on macroinvertebrate population can indicate the quality of the corresponding stream. Macroinvertebrate identification is mostly done by citizen scientists, who are local volunteers. However, many citizen scientists struggle to put commitment and collect quality data due to the high learning curve.


I listened closely to 10 empathy interviews conducted by our researchers and drew out the main pain points and challenges that water quality monitoring trainers confront during their training process. I discovered that two key points significantly influence the training program:

Utilizing right information at the right moment

Although there are numerous amount of tools and resources available, teaching the volunteers to utilize these tools for their own purposes increased the learning curve. is also full of rich information, but the information given was often inappropriate to the volunteer's level of expertise.

specimen image from

Training the eye for identification

These are all mayflies. What are the common characteristics they share? Citizen scientists have to identify these characteristics to infer which order the specimen belongs in. Helping them build the eye to recognize these characteristics is a significant challenge many trainers confront.

Ahmed, sketching various flow ideas

Iteration: Pulling them altogether

Based on these learings, I collaborated with Ahmed to improve content structure, presentation, and interaction. Ahmed focused on the overall structure of the website, while I worked on microinteractions and the zoomable interface.

I thought transition between elements of the website can better imply their intrinsic characteristics. For instance, progression from order level page to family level page means increase in taxonomic depth.

Also, identification of key characteristics depends on which viewpoint the specimen is seen from. Caddisfly's key characertistics are often spotted when they are seen in lateral or ventral view, so it is important to help the user decide which viewpoint they would choose.

We also had to consider development costs, since the server has to hold about 150 gigapixel images of macroinvertebrates, which is much larger than the initial prototype.

Enhanced Flow

In the new interaction flow I developed, order, family, and genus level pages transition vertically. When a user cliks a specimen object at the order level, the page slides upword and loads a family level page.

At the genus level page, transition between view points are done horizontally. This addition of horizontal and vertical transitions imply how the user will go through the macro identification process.

In the initial prototype, the tabs for diagnostic characteristics and specimen overview occupied the bottom 20% of the interface. I folded these tabs by default to save more space and improved the annotation style. In the improved framework, the user is able to glance at the screen and easily navigate between diagnostic characteristics.

presenting at the workshop


This project was a collaboration with scientists, educators, developers and designers. The designer's role was to not only produce quality design, but also merge different perspectives and insights into the product. Knowledge about taxonomy conventions, technical constraints of zoomable interfaces, and learning science all mattered and had to be taken into consideration!


These challenges became the greatest takeaway from this project. Through weekly meetings with our collaborators, running design sprints with scientists and trainers, and convincing my design solution to others, all helped me grow as an empathetic and collaborative designer. Although I'm no longer part of this project, it is still in progress! I can't wait to see the final version get launched :)