How might we help teachers keep better track of their students' behaviors?
A table optimized online collaboration tool that facilitates tracking and monitoring of students' progress over time. This includes working with the client, RyeCatcher, to help translate functionality from an existing web application and optimize features for use in a tablet context.
Tablet Interaction Design
Minrui Li, Adrian Galvin,
Sketch, Illustrator, Photoshop, InDesign, InVision, Figma
Project Lead, Research, User Flow, UI/UX Design
UNDERSTANDING THE PROBLEM
Currently, RyeCatcher is a web-based application that supports the tracking and implementation of special education plans for special needs and high risk students in schools. It supports the whole child by bringing
schools, caregivers, families and students together around actionable data.
The product, RyeCatcher, enables parents and student advocates to build and manage a “circle of support” tailored to a student’s individual needs. It also serves as a tool to connect students with local support providers, and facilitates tracking and monitoring student progress over time.
RyeCatcher would like to explore possibilities for a mobile application that presents a subset of functionality from the existing web platform.
We wanted to learn more about the life of a teacher, so we reached out to elementary school teachers as part of our initial research.
Here were the questions we asked:
- What is a typical day in the life of a teacher like?
- What types of information about your students did you want/need to keep track of?
- If you had an app to help track student information, what would you want in that app? How would like it to organize/visualize student information?
- How far in advance or in the past would you like to see a schedule of student meetings?
Here are some quotes that informed our design decisions:
- “A typical day in the life of a teacher is busy.”
- “What sort of stuff is going on in their lives beyond academics?”
- “It takes a while to learn names...and those relationships are key.”
- “We are just emailed an excel schedule which can often get lost in the shuffle.”
From our research, we wanted to make it easier for teachers to identify student needs by focusing on these four value statements:
- Uncovering patterns in a student’s behavior that teachers may have missed.
- Coordinating support with other educators.
- Streamlining information in order to highlight timely data-driven insights about individual students.
- Utilizing only critical features from the desktop version.
Then, our team broke off to do individual sketches:
After the individual sketches, we came together to do collaborative sketches on the white board:
From our collaborative white board sketches, we created high-level user flow of our app and some final sketches before moving into wireframes:
After the workflow, we created wireframes in Figma. There are a lot of functionalities on the desktop version, but for a teacher using the tablet on the run, we wanted to streamline the app and make it simpler. We decided that the four main screens pages for the mobile app should be:
- Add a Notes
- Students Profile.
We tested our wireframes with a user, who also is a subject matter expect. From her feedback, we iterated our app.
HIGH FIDELITY DESIGN
VISUAL DESIGN SYSTEM
Based on the user's feedback, we wanted our app to be playful and minimalistic - bring some joy to teacher's life yet help them work efficiently. We choose to mimic Material Design.
A Deeper Dive Into a Screen
Here is a deeper look at one of the screens, the Add a Note Page. Below is the current desktop version, which is very confusing (icons, names, process, etc).
Here is the final design for the mobile version of the Add a Note Page, a one-stop service:
WHAT I LEARNED
& NEXT STEPS
We presented to the client and they mentioned that in the education space, users tend to fill out every available field on a form, so even though our system is designed to be extremely efficient and flexible the users most likely will not access that efficiency. A possible solution would be to place red asterisks or put (Required) after required fields, that should solve this charming issue.
During our presentation, we found the colors on the projection screen were gray and pale, which weakened the power of visual design. Since then, we always rehearse in the real environment and remember to adjust colors for different displays/light environments.
In the future, I would also like to observe more teachers using our application in an actual school setting (i.e. ethnographic research) and iterate on our solution.