Free Apple iPad Mockup PSD@2x.jpg


How might we optimize RyeCatcher service in mobile environment to help teachers and service providers keep better track of students' status?


A mobile optimized online collaboration tool that facilitates tracks and monitors of students' progress over time.

Mobile App Design

4 weeks

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

Wireframe, User flow, Visual system

Sketch, Photoshop, Balsamiq, InVision




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.



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


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


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


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


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







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.


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




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)



Site Map


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



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



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


Latest Horizon.png
Latest Portrait 2.png
Personal Dashboard Individual.png
Group Dashboard 1.png
Calender Collapse.png
Personal Dashboard share.png




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.