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

Semester Recap—Mobile App: Field guide revisions, quiz design and team collaboration.

12/18/2020

0 Comments

 
by Estelle Jiang
Before sharing about the work the team and I got done, I want to quickly wrap up about the main functionalities of the application, the app condenses the following aspects in terms of learning and teaching freshwater insect identification after a range of use cases centered around exploration:

1. Field Guide
2. Identification (ID) Key
3. Quiz

This is a blog that further elaborate on the work and tasks the design team finished over the past semester. Moving from the summer work where we finished a big round of testing with users for the field guide design and interaction, the design team mainly focuses on iterating the field guide through second round of user testings and also switched the gear towards design for Macroinvertebrates assessment - design a quiz functionality to allow users to review the learning contents from the field guide and also quiz themselves on the understanding. 

01. Field guide iterations and finalization

​1. Brainstormed and explored the design interaction for the field guide:
There are some small features and interactions, such as global navigation and  the zoomable page interaction that are not fully considered over the summer. Therefore, Alice and I started exploring different interaction and design possibilities before going to testing. Here are some my explorations that inform our final field guide page design: 
A. Global navigation
Picture
B. Zoomable image flipping
Picture
C. Onboarding instruction and design
Picture
​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. 

A. Initial flow explorations (without knowing the learning goals)​
Picture
B. New flow explorations that better inform the design with rationales.​
Picture
C. New quiz flow by following and considering the design goals ​
Picture
D. Designed for varied use cases + learning cases - considering limitations and tradeoffs ​
Picture
—Critiqued and iterated the design with engineers and trainers/experts to narrow down the scope.  
 
Review the feedback we gathered from Dominique's post: Macro App Tasks This Semester

03. Designing while wearing different hats and entering the development stage

While our design team kept working on the ID key and quiz design and conducted further testings, we got in touch with Chris Bartley, an experienced engineer and involved him into our design process along the way. We are still figuring out the better and more efficient way to collaborate, here are some attempts we took so far: 
  • Prepare design spec, design system/guidelines as a reference on the Figma for engineers to track and follow. 
  • Generate user stories for each important interaction and feature.
  • Generate learning/ux contents as a ux writer for the flashcard review and multiple-choice questions within the quiz - management for the contents 
  • Prepare and form the design QA workflow  for the future collaboration where we might want to leave feedback for the actual application interface implemented by engineers and point out the places that need to be revised.
0 Comments



Leave a Reply.

    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