MACROINVERTEBRATES.ORG
  • PROJECT
  • PEOPLE
  • PRODUCTS
  • Blog
  • Resources
    • Help
    • FAQ

Mobile App Pt. II: New Team, New Ideas!

8/12/2020

 
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:​
Picture
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.
Picture
 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:
  • Greatest number of diagnostic characters in a family is 8 (most families range 2-4)
  • In comparison, the range of Order diagnostic characters is 1–3
  • Longest scientific name: Polycentropodidae
  • Shortest scientific name: Dixidae
  • Longest common name: Broad-Shouldered Water Striders, Shortlegged Water Striders, Riffle Bugs
  • Shortest common name: Darners​

*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.
Picture
Estelle's feedback + insights
Picture
Picture
*Referencing Headspace, AirBnB, Medium, WWF Together
Alice’s Points:
  • Organizing info: list vs. grid (text vs. image)
  • Switching back from family to order (internal navigation)
  • Making clear important areas of app (use as field guide) and what information to highlight (ie. pollution tolerance vs. life history; diagnostic characters as learning tool)​
Picture
*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?
Picture
User Stories
Picture
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.
Picture
Home Page and Order Page Templates that Estelle created
  • High level navigation → broad view of orders with the drop-down menu!
  • Actually designing a home page! :-) that is visually interesting and hopefully incites curiosity
Picture
Scroll-up Popup for additional information, as well as an 'introduction' to the Order Page
Picture
Picture
*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.
Picture
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.

Comments are closed.

    Project Team

    An interdisciplinary team
    ​of entomologists, learning scientists, software engineers and designers collaborating to improve macroinvertebrate identification training and technologies with volunteer biomonitoring organizations.

    Categories

    All
    Broader Impacts
    By Clemson
    By CMU
    By Educators
    By Powdermill
    By Stroud
    Design Studies
    Educator Innovations
    Entomology
    Imaging
    Learning Research
    Mobile App
    NSF REU
    User Research

    Archives

    January 2021
    December 2020
    September 2020
    August 2020
    July 2020
    May 2020
    November 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    March 2018
    December 2017
    August 2017
    June 2017
    May 2017
    April 2017
    March 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016

    RSS Feed

Project INFO

ABOUT
www.ept.macroinvertebrates.org
NSF Award  Listing

Partners

Learning Media Design Center@CMU
CREATE Lab @CMU
​
Clemson University 
Stroud Water Research Center
Carnegie Museum of Natural History

Collaborators

ALLARM
MD Streamwaders
Senior Environmental Corp
Pittsburgh Parks Conservancy

Trout Unlimited
Picture
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. ​​

  • PROJECT
  • PEOPLE
  • PRODUCTS
  • Blog
  • Resources
    • Help
    • FAQ