Free Apple iPad Mockup PSD@2x.jpg
 

OBJECTIVE

How might we optimize RyeCatcher service in mobile environment to 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.

Type:
Mobile App 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

 
 

FROM WEB TO MOBILE

 

Funded in 2014, RyeCatcher is a web-based application that supports the whole child by bringing schools, caregivers, families, and students together around actionable data. However, due to the expansion of the mobile network, the current responsive approach is not suitable anymore. While RyeCatcher needs to adopt the mobile-first strategy, the previous web-based architecture becomes its barrier.

In this project, RyeCatcher would like to explore possibilities for a mobile application that presents a subset of functionality from the existing web platform.

 
 
 

Workflow-Oriented

The mobile app help educators to get things done when they are away from their desk. So the design optimize the most important workflows in the mobile context and allow users to complete their tasks simply and efficiently.

 
9Artboard 1@2x-100.jpg
 
 
 

Minimal Navigation

For educators, meetings are back-to-back and their schedules are constantly interrupted by issues that arise unexpectedly. Given this, we minimize the amount of navigation required.

 
9Artboard 2@2x-100.jpg
 
 

Student-Centered

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.

 
9Artboard 3@2x-100.jpg
 
 

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? Educator need to quickly gauge how a student is trending.

 
9Artboard 4@2x-100.jpg
 
 

OPPORTUNITIES FOR SHARING

How a student is doing over time is an effective tool for engaging students in their own success. Given this, we created a “shared view” for data-driven conversation to take place between the provider and the student.

 
9Artboard 5@2x-100.jpg
 
 

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

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
Taking Notes
 
 
 
Student (Individual)
Students (Group)
 
 

03

USER FLOW & APP ARCHITECTURE

 
Site Map
 
 

04

User Test

 
 

We conducted a remote user test, 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. 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

 

05

INITIAL 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
 

FINAL VISUAL SYSTEM

 

After several iterations of the visual system, our team decided to adopt Google Material Design Guideline to redesign our visual. As a result, we are also forced to change our previous hi-fi wireframe.

Visual Style Guideline
 
 

FINAL DESIGN

 
 
Latest Horizon.png
 
 
 
Latest Portrait 2.png
 
 
Calendar Expand.png
 
 
 
 

06

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.

Moving forward, I would also like to observe more teachers using our application in an actual school setting and iterate on our design solution.