RYE CATCHER

Objective

How might we help teachers keep better track of their students' behaviors?

Solution

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.

Project: 
Tablet Interaction Design

Duration: 
5 weeks

Team: 
Minrui Li, Adrian Galvin, 
Delanie Ricketts

Tools: 
Sketch, Illustrator, Photoshop, InDesign, InVision, Figma

My Role: 
Project Lead, Research, User Flow, UI/UX Design

 
 
Dash@4x-8.png

KEY FEATURES

 
 
 

01

UNDERSTANDING THE PROBLEM

 
RyeCatcher Timeline.png
 
 

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.

 

 
 
RyeCatcher Team Photo 2.png
 
 

02

EXPLORATORY RESEARCH

 

 

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

03

RESEARCH SYNTHESIS

 

 

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:

 
 

04

IDEATION

 
Rye Catcher Individual Sketches.png
 

After the individual sketches, we came together to do collaborative sketches on the white board:

 
Rye Catcher Combines Sketches.png
 

05

CONCEPT DEVELOPMENT

 

 

From our collaborative white board sketches, we created high-level user flow of our app and some final sketches before moving into wireframes:

 
 
 
 

06

LOW-FIDELITY PROTOTYPING

 
 

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: 

  • Updates
  • Calendar  
  • Add a Notes  
  • Students Profile.
 
 
 

07

USER-TESTING

 

We tested our wireframes with a user, who also is a subject matter expect. From her feedback, we iterated our app.

 
 
 

08

HIGH FIDELITY DESIGN

 
 
Rye Cather Final Screens.png
 
 
Dash@4x-8.png

09

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.

 
 
Rye Catcher Visuals.png
 
 

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

 
 
RyeCatcher Deeper Dive .png
 
 

Here is the final design for the mobile version of the Add a Note Page, a one-stop service:

 
 
Ryecatcher Deeper Dive 1.png
Dash@4x-8.png

10

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.

 
RyeCatcher Team Photo 2.png