ryecatcher cover.jpg
 

OBJECTIVE

How might we help teachers and service providers keep better track of students' status?

SOLUTION

A mobile optimized online collaboration tool that facilitates tracks and monitors of students' progress over time. We work with the client, RyeCatcher, to help translate and optimize functionalities from the existing web platform to tablet.

Type:
Mobile Design

Duration:
4 weeks

Team Members:
Jeffrey Chou, Michelina Campanella, Lauren Miller, and Olivia Shoucair

Responsibility
Wireframe, User flow, Visual system

Tools:
Sketch, Photoshop, Balsamiq, InVision

 

 
 

RYECATCHER MOBILE

BEFORE

·   Responsive design performs poorly
·   No clear information hierarchy
·   Didn't highlight key functions
·   Confusing icons
·   Looks outdated

AFTER

·   Design for tablet
·   Clear visual hierarchy
·   Highlight key functions
·   Limit icon usage to reduce cognitive load
·   Playful yet informative color palettes

 

PROCESS

 
 

01

Research

 

User Interviews

We reached elementary school teachers as our initial research. Our goal is to understand their daily routine and how do they input and use student's record.

Questions
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?

Key Findings
“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.”

 

02

Design Principles

 

Mobile First

Combining initial user research and project requirements, we come out with 5 design principles tailored to the mobile scenario.

1. Workflow-oriented: Our solution operated with the premise that the primary value of the mobile app is to enable educators to get things done when they are away from their desk. Our approach was to optimize the most important workflows in the mobile context and allow users to complete their tasks simply and efficiently.

2.Minimal navigation: Educators don’t have a lot of time. Meetings are back-to-back and their schedules are constantly interrupted by issues that arise with students. Given this, we took special consideration to minimize the amount of navigation required and created shortcuts for expert users.

3. Students first: When out in the hallway, in the cafeteria, or out on the playground, teachers are interacting directly with students, so the mobile app should be too. Students should be shown with their names and headshots so that teachers could easily identify them.

4. Summarize actionable data: Educators want to feel prepared when they walk into a meeting with a student. Is this student having a good week? Have there been any incidents in the last few days? In the mobile experience, an educator doesn’t need all of the data, but they do need to quickly gauge how a student is trending. Data in the mobile experience is thus not exhaustive, as in the desktop application, but a curated set of the most important data points, summarized so that an education can know what is going on at a glance.

5. Enable opportunities for sharing: The RyeCatcher application captures an incredible amount of information on how a student is doing over time. While the desktop application is designed to meet the needs of those supporting students, we thought that the data can also be an effective tool for engaging students in their own success. Given this, we created a “shared view” for a student’s metrics page that takes up the entirety of the screen, obscuring any sensitive information or other student data, and allowing a data-driven conversation to take place between the provider and the student.

 

03

Concept Development

 

Mapping functions

We need to make sure all current functions in RyeCatcher are considered in our app design. There are four major categories:

1. Feed: See latest and upcoming notes with filter and search function.
2. Tracker: Increment a tracker for the individual student and see his progress.
3. Students: View students and their related activities.
4. Notes: Add a new note. 

 

Feed / Tracker

Students (Group)

 

Student (Individual)

Notes

 

04

USER FLOW & LOW FIDELITY PROTOTYPE

 

Site Map

 
 
 
 
 

05

User Test

 
 

We conducted a user research interview, which took place over 50 minutes via Google Hangout, with Senchel, a RyeCatcher employee and former RyeCatcher user. We approached the conversation with Senchel to evaluate the functional elements of our interface and check the usability of our approach.

We pitched our approach as “student-centered” and “workflow oriented” and it seemed to be well-received. As we went through our wireframes she gave us extremely valuable feedback. For example, she told us that parent’s contact information is crucial and it was not prominent enough in our current design. In our final design, we made parents’ and provider contact information much easier to find, and would not have known the importance of this function without Senchel’s perspective. Another example was that she believed that the metrics function provided important information for teachers to show their students. As a result, we created a full-screen metrics page.

 
 
 Interview with Matthews Senchel

Interview with Matthews Senchel

 Annotate her feedback on printed wireframe

Annotate her feedback on printed wireframe

 

06

Visual System

 
 

We explored various color palettes, typography, and iconography. First, starting broad and vaguer, we produced hypothetical style sheets and fill them into our wireframe.

 
White Board Visual Styles.JPG
 
Minimalism Visual Style-01.jpg
Dusky Visual Style-01.jpg
 
 

07

High fidelity prototype

 

Visual Style Guideline

Landing Page

 

Landing Page - Feed Expanded

Add a Note

 

Individual Student Page

Aggregate Student Page

 

08

Reflection

 
 

We presented to the client and they really appreciated our design principles in the mobile scenario. The user test was also very successful. With proper preparation, we were able to ask specific questions about our UI design and got valuable feedback. We also created a set of high fidelity interface for the test to gain understanding about the direction of the visual system.

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.