|
By Alice Fang 🐞📱Re-framing with a new team! Chelsea and I were joined by Estelle (Yi Cheng) Jiang and Dakota (Zi Qi) Dong in late May. Moving forward, Chelsea and Dakota will be working on development, while Estelle and I will be working on the design and user-testing of the app. There was an adjustment period as we introduced the project to the new members and got everyone acquainted while figuring out how to work collaboratively in a remote wfh environment. Through this process, we've been utilizing google docs and spreadsheets, as well as Figma, but coordinating between design and development has been tricky. Accommodating and synching the design and development timelines was difficult, and it was a bit touch-and-go. Spreadsheets and Organizing Data Previously, I struggled with establishing a structure to the app that allowed for navigation in and out of orders/families. To make the taxonomy clear (as we are non-scientists and non-bug experts), and to organize the information for design purposes, I created a spreadsheet with the following:  1. Inventory of functions that exist on the website In order to figure out the minimum viable product that can be developed by students within a summer, and to compare what needs to change from Order to Family, I listed all of the functions for Order/Family/Genus.  2. List of insect orders, the families in each order, and the number of specimen (genera) in each family, and the number of diagnostic characters for each family and order While many of the families have similar numbers of specimen, there were a lot of outlier cases we needed to keep an eye on, and account for while designing. The length of names, both common and scientific, impacts the typographic system, and the number of diagnostic characters affects how we visually set up that information. Some of the cases are as follows:
*Dev team has to set up the database (I don’t know the exact details). We ran into a challenge late in the summer [early August] where the Gigapan database had to be moved, and there was no way to extract some of the family traits and text information, requiring manual copy and pasting Collecting References and Resources for Ideation Round II Getting the design team on the same page. I showed Estelle the previous mockups and ideas that I had for the mobile app, but in order to refresh and sort of create a mutual visual language, we took the time to research and look at other apps. We compared and discussed field guide apps, quiz apps, and other text-based apps like news/media.  Estelle's feedback + insights   *Referencing Headspace, AirBnB, Medium, WWF Together Alice’s Points:
 *Referencing Twitter, Google Maps, Medium Merlin ID, Audubon Lo-fi Version 2 New Ideas and Changes Estelle quickly mocked some basic page structures, and documented user stories. This allowed us to see possible entry points and user profiles for the app. What are possible ways people would use the app? What would they be looking for? And how do we prioritize that development at the same time?  User Stories  She also created this flow diagram of entry in the app and access points to different functions; however, it didn't include navigation and returning to previous pages, or other major functions we hope to implement in the future, like a quiz.  Home Page and Order Page Templates that Estelle created
 Scroll-up Popup for additional information, as well as an 'introduction' to the Order Page
*Comparing what a bottom pop-up that scrolls up, and a button on the bottom, would look like. Between a button to expand, and swiping up, we originally decided on a swiping up action, but were worried about the screen experience that it would be too hidden on the bottom of the screen. As we moved into user testing, we created a button on the bottom for accessibility instead. It stood out more, and for someone holding a phone, was located in a position that was easy to access.  Through this process, we also started to get into the look and feel of the application. As the focus and beauty of the collection is the high definition images and close-up thumbnails, I really wanted typography to play a role in the visual style while staying close to what the desktop site looks like.
0 Comments
by Stephen Bucklin, Environmental Educator Pittsburgh Parks Conservancy Responding to the COVID-19 situation Stephen and his colleagues at the Pittsburgh Parks Conversancy are creating materials for remote engagement and learning about urban streams and ecosytstems. Here are some of the materials they are creating, like a stream food webs activity to publish on the Pittsburgh Parks Conservancy website for students and teachers to use.
We also created a zoomable Stream food web diagram with high resolution images from the site with an associated Ecosystems Investigator worksheet By Carol Fischer, Weave Lake Elementary School
by Alice Fang 🐞📱 A little after spring break, Chelsea and I started on conceptualizing and developing a mobile app version of Macroinvertebrates.org, which we will continue to work on into the summer. The original question we started with was what should the app do? (and what can we do to create a minimum viable product as a 2 person group?) The primary functions of the site that could be reflected in a mobile app were:
Primary Goals for mobile: learning orders! and providing access when you don't have internet connectivity (creating a lighter weight, downloadable version) A mobile version of the ID Key was already prototyped by Jaclyn last year, so the majority of the focus will be working on integrating Order and Family level information. Based on how far concept/prototyping goes, we may also integrate a practice quiz as well.  Different ways of showing 'additional information' The first issue we ran into while refining the ID Key was the number of cases that the original design couldn’t accommodate for. For example, in the ID Key on the site, there were a few questions that examined/compared two different physiological traits ("wings OR wing pads", instead of just "wings"). How could the gallery of characteristics show images of both, and how should the help button appear to show both text explanations as well? This was the first (and definitely not the last) time where I struggled designing for mobile, instead of desktop or 'website on mobile.' I don't have much experience in designing a purely mobile app product, so I'm excited for the challenge and learning experience. Areas that need resolving as we move forward!:
Looking at Mobile Interactions  Google Maps|Twitter|Medium I took note of some common features of mobile apps to help structure our app as well. These are some references that could help with structure/organization.
Organization + Hierarchy  Trying to figure out how everything fits together Once a user selects an order, the organization from Order > Family > Zoomable Image (Genus) becomes a little confusing. Should the user be able to select into a family page (option 1) or does it lead directly to the zoomable image? At what level is family-specific information displayed then? *We established early on that Genus-level information was probably too specific for mobile, trying to keep the app more general
By Alice Fang, REU I've been working on a lot of additional supporting resources for macroinvertebrates.org, and we’ve updated the training resources available on the site! The additions include a Trainer Guide, which is a guide for trainers on when and how to incorporate the site into workshops, and a Macros 101 Training Deck Template, which is downloadable and customizable. We’ve also added several tutorials on how to use the website, including a video tutorial, a slide deck tutorial, and a quick-start guide pdf. All of these resources and more can be accessed under Resources > Training Materials on macroinvertebrates.org!  Site Video Tutorial  Slide Deck Tutorial By Alice Fang, Summer 2019 NSF REU One of the last projects I was tasked with this summer was creating a how-to video for the site. Before I could continue working on the video however, we had to reorganize/restructure the navigational hamburger menu. The original layout of the menu was a little confusing– the site has a few different entry points to find and search macroinvertebrates: insect orders, an alphabetical taxa list, a poster-like display of the collection, and a phylum search tool. The original layout didn’t group tools or pages based on similarity, and instead had a long list of different elements (ie. “Resources”, “Glossary”, “Help”, “Project Blog”, “About”...). To simplify the amount of elements visible, I grouped pages under the headers “Navigational Views”, “Resources” and “About”, and just played around with different groupings. Later on, I changed the headings to include a “Help” page, and listed the project blog link and about page separately. Dividing the navigational views from the other pages also helped separate their different functions. Although this was a relatively small task, it really showed me how difficult it is to create organizational titles for a digital archival system; there wasn’t really a print equivalent, and Marti and I flipped through numerous existing field guides to see the language that was used in order to try and find relatable terms. By Emily Chan, Summer 2019 NSF REU One of my main projects this summer was designing a practice game that leveraged our large collection of high resolution images for volunteers to practice identifying macroinvertebrates. BACKGROUND A tool for practicing macroinvertebrate ID has been one of the most requested features by volunteers and educators alike. Before getting started developing a game, we took a look at the current resources available online. While there are an abundance of identification-based practice games on the internet (though hardly any for macroinvertebrates specifically), many of these games have similar designs that use low resolution images or generic illustrations, have little possibility for user visual interaction, and use a handful of example specimens that never change, meaning users can usually only play the game once or twice before being able to memorize the answers. In addition, usually only four choices of answers are provided, multiple choice style. Examples below: In contrast, when conducting ID activities in authentic citizen science practice, volunteers need to be able to identify a large number of macroinvertebrates that may be sampled from a stream, to work around variations in size, shape, and color, and to be able to choose the right identifier from a large list of choices. Our goal in creating this game was to simulate authentic practice, so our design for this practice game was informed by the identification process for water quality monitoring, and the biotic indices used by volunteers to classify macroinvertebrates. PAPER PROTOTYPE One of my goals was to keep the game as similar to the actual website as possible, so that it’d be easy for Chris to actually implement. Therefore, my first prototype mimicked the panel design developed by Alice. Every mystery specimen would be a genus-level page, with the text in the panel replaced by a question panel. The key ideas in the paper prototype were: the game goes on indefinitely until you choose to stop (in order to take advantage of our large collection); after you finish, it compares the water quality rating you would have calculated based on your identifications with the actual water quality rating; it uses the diagnostic characters as hints; when you get an answer wrong, it provides information about the differences between the answer you chose and the correct answer; and it has all the same zooming and changing view functionality as the regular site. Though every single practice game I looked at provided four choices you could choose from, it seemed that this might not make sense for our game--if the choices were randomly selected, we might end up in a situation where the user is asked to identify a mayfly, and the choices are clam, leech, beetle, and mayfly. Having choices that don't actually look similar to the specimen isn't particularly helpful for the user's learning, but if we wanted to only show visually similar choices, someone would have to manually create the choices available for each specimen, which seemed excessive. In addition, in the actual scenario, volunteers need to choose the right identifier from a very large number of choices. Therefore, I sketched a multiple choice version as well as a version with a dropdown menu. XD PROTOTYPE 1 We collected feedback on this first XD prototype at the Macroinvertebrates.org site launch event, allowing educators and trainers to play around with the mockup and asking them about their thoughts. Their main concern was whether the game would be leveled--suggestions included student, volunteer, and expert levels. Who the target audience is turned out to be a central question that the game still struggles to fully address. We chose to focus on volunteers, and get a working version of the game for that audience first. I also considered whether it'd be useful to separate by region or ecosystem (like the Cornell Bird Quiz does), but I didn't have enough information about who'd be using the game and what they'd want from it to make a judgement about that. We made some additional minor changes to the design based on suggestions, such as bringing the diagnostic characters back on the correct/incorrect page, including an illustration of the wrong answer as well (i.e. a small illustration of stoneflies next to "This is not a stonefly"), and trying alternatives to "incorrect" (e.g. "try again", "sorry", etc.). XD PROTOTYPE 2 After getting feedback on the first XD prototype at the Macroinvertebrates.org site launch event, we made the following changes: XD PROTOTYPE 4 For the next prototype, we decided to make use of the annotated illustrations that we had available (with the text enlarged) to replace or complement the informational text. XD PROTOTYPE 5 After consulting with Chris, our developer, we shifted towards a tab-panel design, to maintain consistency with the genus level pages and to make developing the game easier. The hints were shifted to the second tab, similar to the genus-level page, and the third tab would either be an "About this Game" tab, or a score-keeping tab. SPLASH SCREEN Chris also informed us that the instructions and results would have to be shown on a splash screen. Below are examples of splash screens we considered: XD PROTOTYPE 7 After getting more feedback from Tara, we decided to add a list of the ones you'd gotten incorrect in the third tab, with pictures of the specimen and the correct identifier. She also advised us to shift away from having the game be a simulated stream dump (i.e. calculating a water quality rating at the end), and rather focus simply on identification, since there were so many different systems and standards used to measure water quality. ICONS Examples of different icons we considered for the tabs:  FINAL PROTOTYPE Minor changes for the final prototype included simplified icons and adjustment of the correct/incorrect screen. FEEDBACK + RECOMMENDATIONS FOR FUTURE CHANGES As it stands, the current game live on the site still needs to have the list and images of the incorrect specimens added, as well as small changes such as adjusting the category names (i.e. "Net-Spinning Caddisfly Larva" to "Caddisfly Larva (Net Spinning) "), swapping in illustrations with larger text, etc. Another major challenge is finding a more elegant way of dealing with the "None of the Above" category. User said that they enjoyed the challenge of identifying uncommon specimens, so I don't think that omitting specimens that would fall into that category is the solution. Since most of the "None of the Above" specimens were either true bugs or fly larva, one user suggested a "True Bugs" category. If future changes are to be made, I would recommend adding a "True Bugs" and a "Fly Larva (Other)" category. Other user suggestions included adding scientific names, since many who used the game were more familiar with scientific names over common names. However, the majority of user feedback centered around the lack of levelling in the practice game. Since the users were recruited from a broad base of experience levels, many wished that there was an expert version for identifing to family or genus; while others noted that they hadn’t been taught the distinction between particular taxa levels of macroinvertebrates, and felt such categories could be confusing. Future work includes producing a “student” (order-level) and an “expert" (genus) level game. Users praised the custom-written informational text and illustrations on the correct/incorrect screen as well as the zoom and hint functionality. In our sample, no users expressed issues with the tab structure, start screen instructions, or the indefinite nature of the game, which were design choices we sought to validate. EXAMPLE EXPERT-LEVEL PROTOTYPE by Emily Chan, 2019 NSF REU Goals One of the projects me and the other students working on Macroinvertebrates.org had this summer was to leverage the resources we had available to us to create a pop-up/tabling kit for educators to use. Digital resources we had access to included the website, with its information and high resolution zoomable images, and physical resources we had included lucite specimen blocks from Powdermill, specimens in liquid, magnifying lenses, flashlights, various field guides, and Voshell cards. Interviews As part of our initial research, we interviewed educators Pat, Jessica, Lauren, Taiji, Steven, and Nayja. We learned that there are a variety of settings educators work in, and our kit would depend on what setting we wanted to design for. Possibilities included a classroom kit (used standalone or as part of a rotational activity, engagement time of 45 min max), a tabling kit (around 5min), a stream dump field kit (around 20 min), or a living room kit (indefinite). We choose to focus on designing for the living room (pictures below), a space in the Frick Environmental Center with benches, chairs, shelves, and a TV, since it seemed to offer the most interesting possibilities. The educators articulated two fundamental learning goals: 1) to generate awareness of the bugs existence, and appreciation of their intrinsic value, which includes learning about their life history and their structure/function; 2) to promote understanding of macroinvertebrates' role in the ecosystem, and how they reflect the condition of the environment. I was more interested in the first goal, while another student on our team was more interested in the second one. We ended up creating two kits, one inspired by each learning goal. Concept Development Concepts that we presented and got feedback on at the macro website launch event. Educators seemed most intrigued by the "Balance-the-Stream Game". However, before jumping into developing one concept, we realized we still didn't have much information on who our audience was and how they would engage with our kit (what kind of questions would they ask about the bugs? How would they interact with the blocks? Which aspects of the bugs would they be most interested in and want to know more about?), and so we decided to go to the Frick Environmental Center to do some observation. Weekend Observation at the Frick Environmental Center We observed two main demographics at the Environmental Center on the weekend: older folks quietly browsing books near the bookshelf on their own, and parents with one to three kids, most under the age of 6, taking a break inside before or after a hike to cool down on a hot day. The older people who were just browsing usually only staying for a few minutes, but the parents with kids often stayed for 10-30 minutes. The parents seemed to use the living room as a space where they could step back from paying attention to their kids and instead sit in a corner and relax or use their phones while their kids amused themselves with the various toys in the room. When it came to interacting with the kit, many of the kids were very enthusiastic, but not necessarily in the way we’d like. Since the kids were much younger than we expected, they completely ignored any instructions, spoken or written, and required constant direction from their parents to be able to focus on engaging in any of the activities we’d prepared. Their preferred ways of interacting with our materials included moving the blocks from one box to the other, pouring the blocks onto the table, shaking the blocks, stacking them to build towers, using them as props or characters in make-believe stories, organizing the cards, etc. A few of the kids did engage in looking activities: one kid, who was shown how to look at blocks using the macro lens and flashlight, ran around looking at things in the room with the flashlight, and tried looking at each of the blocks under the macrolens, but only for a second or two each; another child expressed wonder, saying “wow” and making the observations “They kinda look scary but then they’re actually not”, “This one is like a giant house centipede”, and “It’s a stick bug”, as well as telling other kids “If you wanna look at bugs, you can”. Some older kids also tried to help younger ones interact with the exhibit correctly (“Here, use this” and “No Maisy, I’ll show you how to do it--you put it under here, and then you can see it better”). However, even those that did seem to understand the exhibit or expressed excitement or wonder (“Ooh bug!” or “Woah”) lost interest very quickly. Questions asked by the children included: “What is this bug?” “What are these for?” “What happens if you take them out?” In addition, multiple kids from different families said that they weren’t allowed to use the computer due to shabbat, which may be a complicating factor. Parents occasionally showed interest in the exhibit--one child brought a block over to her mother, who asked “What kind of bug is this?” Another parent came over to facilitate the exhibit for his son, giving directions like “Can you show me the legs?”, “Try this one, try the black one”, “What is this”, “Can you match this block?“ “you can see it larger” “Find me something like this”, “Are they the same? Are you sure?”, “Let’s try something else. What letter is this?”. When interviewed about what motivated him to facilitate, he simply said: “I just want to see what they understand.” However, for the most part, parents were indifferent to the exhibit. Insights:
Weekday Observation We went back to the Environmental Center on a weekday around 2pm, and stayed until 5. There were far fewer people there than we'd anticipated--it seems that most of the students doing summer programs didn't wait for pickup inside the center. We talked to staff at the center, who recommended that if we wanted to do a living room kit, we should find some way to secure all the pieces of the kit, since everything that isn't nailed down would be easily lost and broken, and there's no one to supervise or chaperone. There were one or two older kids around who had naturalist training, and had the observational skills to engage properly with the matching activity. They seemed to enjoy the activity, and their only suggestion was making sure that all the blocks had matching cards. Insights:
Final Prototype Based on our observation at the Environmental Center, we realized that the living room was probably not the most suitable place for our kit. Therefore, we focused on creating something flexible, that could set up somewhere and used in a variety of settings. Since the kids seemed to like the matching and sorting activities, we decided to create a box that unfolded into a stream-themed board that could be used for either activity. Since the specimens we had were representative of what one would find at Powdermill, we decided to use a photo of Powdermill on the inside of the box, so that the box would be like an ecological vignette of that particular location. As an alternative to the clunky and fragile computer/projector setup, we built simple lettered stands for the blocks that had NFC tags linked to that specimen's webpage on the bottom, so that the tags wouldn't be directly on the blocks (which would prevent users from being able to look at the insects from any angle), and got a small NFC enabled tablet to go with them. In addition to lucite blocks, NFC tagged stands, and a tablet, the box also contains a macro lens and a flashlight. We presented our final ideas to museum educators Pat and Jen, who gave us feedback. They said that they could see themselves using the kit and didn't think there was much they would change about it. Next steps:
If work on the kit continues, I'd like to see one more iteration using a sturdier material, such as gatorboard, with the lining printed on vinyl or a similar waterproof material. It could also incorporate magnets along the edges, so the box snaps together. In addition, it would be nice to see some way of making the cards detachable/creating other activities for the board that could be swapped in and out. Most importantly, I think there would be a lot of educational value in creating an additional box for Frick Park using an image of a stream in Frick park as the background in order to highlight the way that the diversity of the insects found reflect the ecology and pollution of a site, to tie in the other learning goal that educators had. By Wei Gong
After our first round of user testing, we gained insights, refined our original concepts and came up with new ideas. We decided to project with zoomable images with the projector, and designed two activities with which the audience can play. With these ideas, we plan to do a second round user test. We will go on weekday this time to test the concepts with different audience. The testing plan is as follow: Goals
Materials
Activity Preparation
Observation Template
Interview Question to Audiences:
Interview Question to staff in the living room:
Next Step
By Wei Gong With some general concepts like guiding the visitors with some questions so that they can explore the exhibit on their own, and attracting the visitors with zoomable images on the screen, we did our first round user test in the living room of Frick Environmental Center. Actually, this is a combination of discovery research, generative research and user test, since we aimed to discover design opportunities, gain insights on design solutions, and test our concept at the same time. Before the test, we wrote a proposal for the test plan. User Test Proposal Goal
Materials
Observation Note Template
Interview Question to Audiences:
Interview Question to staff in the living room:
Findings We spent around 2 hours in the living room doing contextual inquiry and testing the concepts, from which we gained a lot of information. The key findings are shown below. Audience:
“I want to make a tower with these blocks” “They are so pretty” “How does it feel to taste bugs”
“So Cool” ---- After putting them down the magnifying glass.
“I’ll show you how to play with the blocks, put your magnifying lenses above the blocks.”
“You want to zoom in and out?” “Let’s try another one” “Can you match them(the block and the card) “Do you want to see the legs?” “I just noticed they are interested in it. I want to know whether they really understand it.”
“Don’t touch the computer” Length: Most children who are attracted to the exhibit can play with the kit as long as they can until their parents require them to leave, usually more than 20 minutes. Reflection After the test, I think we need to design some activities that the audience can really interact with, either by themselves or facilitated. In the user test, although the kids had fun with the materials, they didn't really interact with it and got information from it. Most of them simply played treated them as toys. Several ideas I have in mind:
|
Project TeamAn interdisciplinary team Archives
May 2020
Categories
All
|
RSS Feed
Project INFO |
Partners |
|
This material is based upon work supported by the National Science Foundation under Grant #1623969.
Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of NSF.
Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of NSF.