Interaction Design

Rye Catcher

An online collaboration tool that facilitates tracking and monitoring of students' progress over time. 

Client: RyeCatcher Education PBC

My Role

UX/UI Designer
Visual Lead

Date

Mar 2017

Duration

5 weeks

Medthods

Primary Interview
Workflow
User Testing
Wireframing
Hi-Fi prototype

Tools

Adobe Illustrator
AdobePhotoshop
Figma
InVision

Team

Minrui Li
Denise Nguyen
Delanie Ricketts
Adrian Galvin

Instructors

Raelynn O’Leary
Ashley Deal

I learned

Adjust colors for different displays
Material Design vs. iOs human Interface Guidelines

Client

RyeCatcher Education PBC

Final Solution

Prototype
·   Responsive design performs poorly
·   No clear information hierarchy
·   Didn't highlight key functions
·   Confusing icons
·   Looks boring and outdated
·   Design for tablet
·   Clear visual hierarchy
·   Content stands out, clear key functions
·   Reduce cognitive load by providing students names and headshots
·   Reduce cognitive load by differentiate information with colors
·   Use playful yet mimic visual styles to make teachers' life joyful and efficient

Process

In 51-612, our team was commissioned by RyeCatcher Education PBC to design the mobile application for tablets from the current desktop version. We finally delivered Hi-Fi mockups for 4 function views.

Teachers' pain points

We reached out to elementary school teachers as part of our initial research.

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

Value Statements & Sketches

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:
From our collaborative white board sketches, we created some final sketches before moving into wireframes:

To streamline the experience

Before creating the wireframes from our sketches, we mapped out what the high-level workflow of our app would be.
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.

User Testing + Iteration: bold + details

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

Visual Design: playful, yet minimalistic

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.

Prototype: walk through 4 functions

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:

Reflection

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.