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

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

B. Zoomable image flipping

C. Onboarding instruction and design

​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)​

B. New flow explorations that better inform the design with rationales.​

C. New quiz flow by following and considering the design goals ​

D. Designed for varied use cases + learning cases - considering limitations and tradeoffs ​

—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.